/* ============================================================
   ŻURNAL — ARKUSZ FRONTOWY
   ============================================================
   Z Potrzeby Piękna / mizu-child
   Wymaga: assets/css/zpp-tokens.css (zależność w wp_enqueue_style)

   ZASADA SCOPE — obowiązuje bez wyjątku:
   każdy selektor w tym pliku zaczyna się od `.zpp-journal`
   (pojedynczy wpis) albo od kontekstu `body.zpp-journal-listing`
   połączonego z jawną klasą `.zpp-journal-list` (listing).
   Nie ma tu ani jednej reguły na gołym elemencie, klasie core'a
   czy klasie Mizu. Dzięki temu arkusz może się załadować na
   dowolnej stronie i nie ruszy produktu, koszyka, checkoutu,
   strony głównej ani stron prawnych.

   ŹRÓDŁO: skala typografii z zaakceptowanego wariantu „Brąz”
   oraz dodatkowe moduły `.zpp-midwide` i `.zpp-finale` z wariantu
   „Biała koszula”. Wartości wspólne przechodzą na tokeny systemu.

   - `font-family` prototypu CELOWO POMINIĘTY. Sekcja 9 w style.css
     ustawia Hanken Grotesk na `body` i na nagłówkach (z !important).
     Wpis dziedziczy tę samą rodzinę — powtórka byłaby martwym kodem,
     który i tak przegrywa z !important sekcji 9.
   NIE DOTYKAMY sekcji 21 w style.css (listing /notatnik/).
   Patrz komentarz przy module 9 na dole tego pliku.
   ============================================================ */


/* ============================================================
   1. KONTENER ARTYKUŁU
   ============================================================
   `.zpp-journal` siedzi na bloku `wp:group` z tagName: article,
   czyli w treści wpisu, wewnątrz wąskiego wrappera Mizu.

   PEŁNA SZEROKOŚĆ BIAŁEGO TŁA bez wychodzenia z wrappera:
   box-shadow rozlewa papier na 100vmax w każdą stronę, a clip-path
   przycina go do prostokąta artykułu poszerzonego o 100vmax w poziomie.
   Efekt: biel dociąga do krawędzi okna, ale nic nie wpada do
   obszaru przewijania — poziomego paska nie ma.
   Nie zastępować tego przez overflow/width:100vw — 100vw liczy
   szerokość RAZEM z paskiem przewijania i na Windowsie robi
   przesuw o kilkanaście pikseli.
   ============================================================ */

.zpp-journal {
  /* Rytm redakcyjny — jedyna zmienna lokalna tego arkusza.
     Prototyp miał clamp(96px, 11vw, 176px). Podłoga jest zakotwiczona
     w tokenie (--zpp-space-5 = 96px), sufit i tempo zostają z prototypu:
     na telefonie odstęp równy skali sklepu, na desktopie oddycha
     szerzej, bo szpalta jest wąska, a strona długa. */
  --zpp-journal-rhythm: clamp(var(--zpp-space-5), 11vw, 176px);
  --zpp-image-gap: clamp(16px, 1.7vw, var(--zpp-space-2));

  margin: 0;
  padding: 0 0 clamp(var(--zpp-space-4), 8vw, 112px);
  background: var(--zpp-bg);
  box-shadow: 0 0 0 100vmax var(--zpp-bg);
  clip-path: inset(0 -100vmax);
  color: var(--zpp-ink);
  font-size: 18px;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

.zpp-journal,
.zpp-journal * {
  box-sizing: border-box;
}

/* Linki w artykule nie krzyczą kolorem. Podkreślenie zostaje
   od sekcji 8 style.css, jeżeli tam sięga. */
.zpp-journal a {
  color: inherit;
}


/* ============================================================
   2. NAGŁÓWEK ŻURNALU — opcjonalny nadtytuł, H1, lead
   ============================================================
   Układ: treść dosunięta do dołu bloku (align-content: end),
   wyśrodkowana. Wysokość minimalna daje pierwszemu ekranowi
   powietrze, ale nie wypycha tytułu poza widok — stąd min()
   z 52vh, a nie sztywne vh.

   H1 i lead są jawnymi blokami w treści wpisu:
   - ręczny heading: h1.zpp-title,
   - ręczny akapit: p.zpp-dek.
   Nie używamy tu bloków dynamicznych `core/post-title` ani
   `core/post-excerpt`, ponieważ stare tytuły i zajawki WordPressa
   nie odpowiadają nowej redakcji wpisów.
   ============================================================ */

.zpp-journal .zpp-journal-header {
  min-height: min(480px, 52vh);
  padding: clamp(36px, 5vw, 72px) var(--zpp-gutter) clamp(40px, 5vw, 64px);
  display: grid;
  align-content: end;
  justify-items: center;
  text-align: center;
}

/* --- opcjonalny nadtytuł ----------------------------------- */
.zpp-journal .zpp-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 560;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* --- H1 ----------------------------------------------------- */
.zpp-journal .zpp-title {
  max-width: none;
  margin: 16px 0 22px;
  font-size: clamp(48px, 7vw, 112px);
  font-weight: 390;
  letter-spacing: -.05em;
  line-height: .92;
  text-transform: none;
  text-wrap: balance;
}

/* --- lead --------------------------------------------------- */
.zpp-journal .zpp-dek {
  max-width: 736px;
  margin: 0;
}

.zpp-journal p.zpp-dek {
  margin: 0;
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.48;
  text-wrap: balance;
}

/* ============================================================
   3. SZPALTA TEKSTOWA
   ============================================================
   Szerokość wiersza z tokenu --zpp-text (688px), zawsze z zapasem
   na marginesy boczne. `min()` zamiast media query: szpalta sama
   ustępuje na wąskim ekranie i nigdy nie dotyka krawędzi.
   ============================================================ */

.zpp-journal .zpp-copy-section {
  width: min(var(--zpp-text), calc(100% - 2 * var(--zpp-gutter)));
  max-width: none;
  margin: var(--zpp-journal-rhythm) auto;
  padding: 0;
}

/* --- H2 ----------------------------------------------------- */
.zpp-journal .zpp-section-heading {
  max-width: 608px;
  margin: 0 0 clamp(28px, 3.5vw, 48px);
  font-size: clamp(32px, 4vw, 60px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1;
  text-wrap: balance;
}

/* --- akapit ------------------------------------------------- */
/* DWA SELEKTORY CELOWO.
   `.zpp-body-copy` to jawna klasa modułu — tak wygląda markup
   we wzorcu i w obu wpisach referencyjnych.
   `.zpp-copy-section p` to siatka bezpieczeństwa dla redakcji:
   w Gutenbergu nowy akapit robiony Enterem NIE dziedziczy klasy
   poprzednika. Bez tej reguły co drugi dopisany akapit wyglądałby
   inaczej niż reszta i nikt by nie wiedział dlaczego. Zasięg jest
   ograniczony do wnętrza szpalty, więc reguła nie wychodzi poza wpis. */
.zpp-journal .zpp-copy-section p,
.zpp-journal .zpp-body-copy {
  max-width: var(--zpp-text);
  margin: 0 0 1.6em;
  padding: 0;
  font-size: clamp(17px, 1.16vw, 19px);
  font-weight: 400;
  letter-spacing: -.008em;
  line-height: 1.64;
}

.zpp-journal .zpp-copy-section p:last-child,
.zpp-journal .zpp-body-copy:last-child {
  margin-bottom: 0;
}

/* --- sekcja otwierająca: szersza, dwie kolumny tekstu -------- */
.zpp-journal .zpp-opening {
  width: min(1216px, calc(100% - 2 * var(--zpp-gutter)));
}

.zpp-journal .zpp-opening .zpp-section-heading {
  max-width: none;
}

.zpp-journal .zpp-opening-columns {
  gap: clamp(48px, 6vw, var(--zpp-space-5));
}

/* min-width: 0 — bez tego długie słowo rozpycha kolumnę gridu
   ponad przydział i łamie układ. */
.zpp-journal .zpp-opening-columns > .wp-block-column {
  min-width: 0;
}


/* ============================================================
   4. ELEMENTY SZEROKIE
   ============================================================
   `margin-left: 50% + translateX(-50%)` wyprowadza element ze
   szpalty na środek okna. Szerokość: mniejsza z --zpp-wide
   i okna pomniejszonego o marginesy boczne — czyli na wąskim
   ekranie element sam się zwęża, zamiast wystawać.
   ============================================================ */

.zpp-journal .zpp-wide,
.zpp-journal .zpp-pair {
  width: min(var(--zpp-wide), calc(100vw - 2 * var(--zpp-gutter)));
  max-width: none;
  margin-right: 0;
  margin-left: 50%;
  transform: translateX(-50%);
}


/* ============================================================
   5. ZDJĘCIA I PODPISY
   ============================================================ */

.zpp-journal figure {
  margin-top: 0;
  margin-bottom: 0;
}

.zpp-journal figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Podpis materiałów. W całym wpisie ma być JEDEN, pod ostatnim
   zdjęciem (.zpp-finale) — to reguła redakcyjna, nie CSS-owa.
   Arkusz tylko nadaje mu formę, gdziekolwiek się pojawi. */
.zpp-journal figcaption {
  margin: 12px 0 0;
  color: var(--zpp-muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
}

/* --- hero 3:2 ----------------------------------------------- */
/* Kadr wymuszony proporcją, nie wysokością — zdjęcie o innych
   proporcjach zostanie przycięte, a nie zdeformowane. */
.zpp-journal .zpp-hero img,
.zpp-journal .zpp-midwide img,
.zpp-journal .zpp-finale img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.zpp-journal .zpp-midwide,
.zpp-journal .zpp-finale {
  margin-top: var(--zpp-journal-rhythm);
}

/* Sąsiadujące moduły zdjęciowe tworzą jedną sekwencję wizualną.
   Pionowa szczelina ma tę samą skalę co odstęp wewnątrz dyptyku. */
.zpp-journal .zpp-wide + .zpp-pair,
.zpp-journal .zpp-pair + .zpp-wide,
.zpp-journal .zpp-pair + .zpp-pair,
.zpp-journal .zpp-wide + .zpp-wide {
  margin-top: var(--zpp-image-gap);
}


/* ============================================================
   6. PARA ZDJĘĆ 3:4
   ============================================================
   Grid, nie flex — dwie równe kolumny bez liczenia marginesów.
   `align-items: start` + wyzerowany margin-top kolumn: obie
   fotografie startują z tej samej linii, niezależnie od tego,
   ile tekstu jest nad nimi. To był jeden z punktów audytu
   („nierówne pary zdjęć”).
   minmax(0, 1fr) zamiast 1fr — inaczej szerokie zdjęcie
   rozpycha kolumnę ponad przydział.
   ============================================================ */

.zpp-journal .zpp-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zpp-image-gap);
  align-items: start;
}

.zpp-journal .zpp-pair > .wp-block-column {
  margin-top: 0;
}

.zpp-journal .zpp-pair figure img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}


/* ============================================================
   7. TELEFON — JEDNA SZPALTA
   ============================================================
   Poniżej 768px wszystko schodzi do jednej kolumny: sekcja
   otwierająca i para zdjęć. Zero poziomego przewijania —
   żaden element nie ma tu sztywnej szerokości w px.
   ============================================================ */

@media (max-width: 767px) {
  .zpp-journal {
    font-size: 16px;
  }

  .zpp-journal .zpp-journal-header {
    min-height: 360px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .zpp-journal .zpp-title {
    margin-top: 14px;
    font-size: clamp(42px, 13vw, 64px);
  }

  .zpp-journal .zpp-opening-columns {
    display: block;
  }

  .zpp-journal .zpp-copy-section p,
  .zpp-journal .zpp-body-copy {
    font-size: 17px;
    line-height: 1.65;
  }

  .zpp-journal .zpp-pair {
    grid-template-columns: 1fr;
    gap: var(--zpp-image-gap);
  }

  /* Gutenberg wiesza kolumnom własny margin-top na wąskim ekranie —
     przy jednej kolumnie dawałby podwójny odstęp obok `gap`. */
  .zpp-journal .zpp-pair > .wp-block-column,
  .zpp-journal .zpp-pair > .wp-block-column:first-child,
  .zpp-journal .zpp-pair > .wp-block-column:nth-child(2) {
    margin-top: 0;
  }
}


/* ============================================================
   8. LISTING ŻURNALU — 1 / 2 / 3 KOLUMNY
   ============================================================
   !!! CZYTAJ PRZED WŁĄCZENIEM !!!

   Listing `/notatnik/` jest DZIŚ stylowany przez sekcję 21
   w theme/style.css i ten arkusz jej NIE RUSZA. Sekcja 21a ma
   zapisaną decyzję JK z 04.08.2026: 3 kolumny trzymają się aż
   do telefonu, BEZ stopnia 2-kolumnowego, bo na tablecie siatka
   3x3 wygląda dobrze.

   Krok 3 planu wymaga breakpointów 1 / 2 / 3. To jest zmiana
   wcześniejszej decyzji, więc reguły poniżej są UŚPIONE: scope
   `.zpp-journal-list` to klasa, której na bloku dziś NIE MA.

   ŻEBY JE WŁĄCZYĆ (bez deployu, bez zmiany kodu):
   WP admin -> strona „Żurnal” (/notatnik/) -> blok „Ostatnie wpisy”
   -> panel po prawej -> Zaawansowane -> Dodatkowe klasy CSS
   -> wpisać: zpp-journal-list
   Usunięcie klasy wraca do zachowania sekcji 21.

   KASKADA: sekcja 21a celuje w `.wp-block-latest-posts__list.is-grid`.
   Selektory niżej dodają jednocześnie klasę kontekstu strony i klasę
   aktywującą na bloku, więc wygrywają specyficznością. Zależność od
   `mizu-child` nadal utrzymuje czytelną kolejność arkuszy.

   Klasa `is-grid` jest w selektorze celowo: blok w układzie listy
   (bez `is-grid`) nie ma być przez nas przestawiany na siatkę.
   ============================================================ */

/* --- telefon: jedna kolumna (baza) -------------------------- */
body.zpp-journal-listing .zpp-journal-list.is-grid {
  grid-template-columns: 1fr;
  row-gap: var(--zpp-space-3);
}

/* --- tablet od 768px: dwie kolumny -------------------------- */
@media (min-width: 768px) {
  body.zpp-journal-listing .zpp-journal-list.is-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--zpp-space-4);
  }
}

/* --- od 1024px: trzy kolumny -------------------------------- */
@media (min-width: 1024px) {
  body.zpp-journal-listing .zpp-journal-list.is-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--zpp-space-5);
  }
}