/*
 * Wpis i jego treść — formatowanie wspólne dla wszystkich typów.
 *
 * Układ wokół wpisu należy do szablonu; ten arkusz nie ustawia niczego poza .entry.
 * Reguły treści obejmują też .editor-styles-wrapper, czyli kontener treści w edytorze
 * bloków — dzięki temu redakcja pisze na tym samym wyglądzie, który zobaczy na froncie.
 */

/* ——— Wpis ——— */

.entry {
  max-width: var(--content-width);
  margin-inline: auto;
}

.entry > * {
  margin: 0;
}

.entry > * + * {
  margin-block-start: var(--content-flow);
}

.entry__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 0 var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-small);
}

.entry__date + .entry__date::before {
  content: "·";
  margin-right: var(--space-2xs);
}

.entry__tag {
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius);
  color: var(--color-text);
  text-transform: uppercase;
}

.entry__tag--status {
  border-color: var(--color-accent-strong);
  background-color: var(--color-accent-strong);
  color: var(--color-text-on-accent);
}

.entry__title {
  margin: 0;
  font-size: var(--font-size-h1);
}

/* Proporcje z projektu; przycięcie trzyma wysokość niezależnie od kadru zdjęcia. */
.entry__image img {
  display: block;
  width: 100%;
  aspect-ratio: 782 / 350;
  border-radius: var(--radius);
  object-fit: cover;
}

/* ——— Treść ——— */

/*
 * Podstawy typografii powtórzone za body z main.css — edytor bloków ładuje wyłącznie
 * arkusze podane w add_editor_style(), więc bez nich pisałoby się domyślnym krojem
 * przeglądarki. Na froncie deklaracje są nadmiarowe, ale nie zmieniają wyniku.
 */
.entry-content,
.editor-styles-wrapper {
  background-color: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing-text);

  /* Elementy wchodzą bez własnych marginesów, a odstęp dostają z reguły niżej. */
  & > *,
  & :where(p, h2, h3, h4, h5, h6, ul, ol, figure, blockquote, pre) {
    margin: 0;
  }

  /*
   * Reguła na sąsiedztwie zamiast marginesów na elementach — kolejność bloków ustala
   * redakcja, a pierwszy i ostatni element nie dostają wtedy zbędnego marginesu.
   * Bloki zbiorcze wymienione osobno, bo mają własny kontekst.
   */
  & > * + *,
  & :is(.wp-block-group, .wp-block-group__inner-container, .wp-block-column, .wp-block-quote, .wp-block-details) > * + * {
    margin-block-start: var(--content-flow);
  }

  & .wp-block + .wp-block:not(li, .wp-block-column, .wp-block-file) {
    margin-block-start: var(--content-flow);
  }

  & :is(h2, h3, h4, h5, h6) {
    letter-spacing: normal;
    line-height: var(--line-height);
  }

  & h2 {
    font-size: var(--font-size-h2);
  }

  & h3 {
    font-size: var(--font-size-h3);
  }

  & :is(h4, h5, h6) {
    font-size: var(--font-size-h4);
  }

  /* Rozmiar w em, więc inicjał rośnie razem z tekstem akapitu i ze skalą czcionki. */
  & p.has-drop-cap:not(:focus)::first-letter {
    float: left;
    margin-right: var(--space-xs);
    font-weight: 700;
    font-size: 3em;
    line-height: 1;
  }

  /* Bez domknięcia pływającej litery następny akapit podchodzi pod nią. */
  & p.has-drop-cap::after {
    content: "";
    display: table;
    clear: both;
  }

  & a {
    color: var(--color-link);
  }

  & a:hover {
    background-color: var(--color-hover);
  }

  & :is(ul, ol) {
    padding-left: var(--space-md);
  }

  & li + li,
  & :is(ul, ol) :is(ul, ol) {
    margin-top: var(--space-2xs);
  }

  & figcaption {
    margin-top: var(--space-xs);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-small);
    text-align: left;
  }

  /* ——— Tabela ——— */

  /* Szeroka tabela przewija się w swojej ramce, nie rozpycha strony. */
  & .wp-block-table {
    overflow-x: auto;
  }

  & .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
  }

  & .wp-block-table :is(th, td) {
    padding: var(--space-xs);
    border: 1px solid var(--color-border);
    text-align: left;
  }

  & .wp-block-table th {
    background-color: var(--color-surface);
    font-weight: 700;
  }

  /* ——— Cytaty ——— */

  & .wp-block-quote {
    padding-left: var(--space-sm);
    border-left: 2px solid var(--color-accent);
  }

  & .wp-block-pullquote {
    padding: var(--space-md) 0;
    border-top: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    text-align: center;
  }

  & .wp-block-pullquote p {
    font-size: var(--font-size-lg);
  }

  & cite {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-style: normal;
  }

  /* ——— Media ——— */

  & .wp-block-image img {
    display: block;
    border-radius: var(--radius);
  }

  & .wp-block-gallery {
    gap: var(--space-xs);
  }

  /*
   * Tekst na okładce leży na przyciemnionym zdjęciu, więc bierze kolor przewidziany
   * dla ciemnego tła. Bez overflow zaokrąglenie nie przycięłoby zdjęcia w tle.
   */
  & .wp-block-cover {
    padding: var(--space-lg) var(--space-md);
    overflow: hidden;
    border-radius: var(--radius);
    color: var(--color-text-on-dark);
  }

  /* ——— Plik do pobrania ——— */

  & .wp-block-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background-color: var(--color-surface);
  }

  /* Lista załączników jest w projekcie zwarta — kolejne pozycje stoją bliżej niż reszta treści. */
  & .wp-block-file + .wp-block-file {
    margin-block-start: var(--space-sm);
  }

  & .wp-block-file a:first-child {
    color: var(--color-text);
    font-weight: 700;
    font-size: var(--font-size-sm);
  }

  & .wp-block-file a:hover {
    background-color: transparent;
    color: var(--color-accent-strong);
  }

  /*
   * W edytorze nazwa i przycisk siedzą razem w content-wrapperze, któremu rdzeń nie
   * nadaje układu — bez tego stoją obok siebie zamiast na przeciwnych krawędziach.
   */
  & .wp-block-file .wp-block-file__content-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
  }

  & .wp-block-file .wp-block-file__button-richtext-wrapper {
    margin-left: auto;
  }

  & .wp-block-file__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-text);
    font-weight: 700;
    font-size: var(--font-size-sm);
    text-decoration: none;
  }

  /*
   * Ikona przez maskę, nie przez tło: maska bierze z pliku sam kształt i maluje go
   * kolorem z tokenu, więc w trybie wysokiego kontrastu zmienia barwę razem z resztą.
   */
  & .wp-block-file__button::after {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--color-accent);
    mask: url("../img/icon-download.svg") no-repeat center / contain;
  }

  /* ——— Przyciski ——— */

  & .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  & .wp-block-button__link {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    border: 2px solid var(--color-accent-strong);
    border-radius: var(--radius);
    background-color: var(--color-accent-strong);
    color: var(--color-text-on-accent);
    font-weight: 700;
    text-decoration: none;
  }

  /* Na najechaniu wypełnienie ustępuje — jasny tekst na przygaszonej zieleni był nieczytelny. */
  & .wp-block-button__link:hover {
    background-color: transparent;
    color: var(--color-accent-strong);
  }

  & .is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--color-text);
  }

  & .is-style-outline .wp-block-button__link:hover {
    background-color: var(--color-hover);
  }

  /* ——— Bloki zbiorcze ——— */

  /*
   * Kolumny zawijają się, gdy zabraknie im miejsca — bez odpytywania o szerokość okna.
   * Reguła rdzenia patrzy na okno, więc w wąskiej kolumnie Strefy Mieszkańca trzymałaby
   * dwie kolumny obok siebie mimo braku miejsca.
   */
  & .wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  & .wp-block-column {
    flex: 1 1 16rem;
  }

  & :is(.wp-block-group, .wp-block-details) {
    padding: var(--space-sm);
    background-color: var(--color-surface);
  }

  & .wp-block-details summary {
    cursor: pointer;
    font-weight: 700;
  }

  & :is(.wp-block-code, .wp-block-preformatted, .wp-block-verse) {
    padding: var(--space-sm);
    overflow-x: auto;
    background-color: var(--color-surface);
    font-size: var(--font-size-sm);
  }

  & .wp-block-separator:not(.is-style-dots) {
    border: 0;
    border-top: 1px solid var(--color-border);
  }
}