/* ==========================================================================
   news.css — conditional stylesheet for the News archive/single templates
   Sources: sections/article.css (single post only) + components/pagination.css
   (archive/home only). Enqueued only on is_singular('post') / is_home() —
   see PLAN §3, table row 'arkusz warunkowy'. Not global, not a block: these
   classes exist in exactly one WordPress template each.
   Only the custom-property names were mechanically renamed to theme.json
   tokens; selectors, values, media queries and rule order are untouched.
   ========================================================================== */

/* ---- from sections/article.css ------------------------------------------------ */

/* ==========================================================================
   SEKCJA — pojedynczy wpis aktualności

   --- Dlaczego ta strona NIE ma pasa `.page-hero` ze zdjęciem

   Wszystkie pozostałe podstrony otwiera zdjęcie jako tło pasa z tekstem
   na nim (DEC-036). Wpis dostaje nagłówek na czystym tle strony, a zdjęcie
   staje POD nim, na pełnej szerokości kontenera. Trzy powody:

     · tytuł wpisu jest zdaniem, nie nazwą sekcji — bywa dwa razy dłuższy
       niż „Cartridge filters", a długi tekst na zdjęciu wymaga płachty
       tak gęstej, że zdjęcia i tak nie widać,
     · nagłówek wpisu niesie dodatkową warstwę (ścieżka powrotu, kategoria),
       której pas identyfikacyjny nie ma i nie powinien mieć,
     · zdjęcie wpisu jest ILUSTRACJĄ treści, nie identyfikacją strony —
       więc należy do artykułu, a nie do nagłówka.

   Wspólny język zostaje: ta sama etykieta nadrzędna, ta sama skala tytułu
   co w `.page-hero__title`, ta sama wiodąca linijka.
   ========================================================================== */

.article__head {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--space-4);
}

.article__title {
  font-size: var(--wp--preset--font-size--fs-1);
  line-height: var(--wp--custom--line-height--1);
  letter-spacing: var(--wp--custom--tracking--tight);
  text-wrap: balance;
}

/* Wiodąca linijka w kolorze tekstu głównego, nie pomocniczego — ta sama
   decyzja i ten sam powód co w `.page-hero__lead`.

   Szerokości NIE ustawia: kolumnę tekstu wyznacza `.measure` na rodzicu.
   Kolumna jest przy tym DOSUNIĘTA DO LEWEJ krawędzi kontenera, a nie
   wyśrodkowana — bo tak stoi treść w każdej innej sekcji serwisu.
   Wyśrodkowany artykuł byłby jedynym miejscem z inną osią i czytałby się
   jak wklejka z innego szablonu.                                        */
.article__lead {
  color: var(--wp--preset--color--text);
}

/* Zdjęcie wpisu. `figure` bez `figcaption`: podpis pod zdjęciem byłby
   tu drugim opisem tej samej rzeczy, którą tytuł już nazwał.

   Proporcja NIE jest ustawiana z CSS — kadr ma 16:9 i tak jest zapisany
   w atrybutach `width`/`height`. Dzięki temu przeglądarka rezerwuje
   miejsce przed wczytaniem obrazu i strona nie skacze.                  */
.article__figure {
  margin: 0;
  background: var(--wp--preset--color--surface);
}

.article__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- treść wpisu ---------------------------------------------------------
   Rytm pionowy tekstu ciągłego. `gap` zamiast marginesów na akapitach,
   bo marginesy sąsiadów się znoszą i potem odstęp raz jest, a raz go nie
   ma. Nagłówek dostaje DODATKOWY margines górny, żeby utrzymać regułę
   „nad nagłówkiem więcej miejsca niż pod nim" (DEC-020 b) — to margines
   wewnętrzny komponentu, nie zewnętrzny, więc nie łamie zasady warstw.  */

.article__body {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--space-5);
}

.article__body > h2 {
  font-size: var(--wp--preset--font-size--fs-3);
  line-height: var(--wp--custom--line-height--3);
  margin-top: var(--wp--preset--spacing--space-5);
}

.article__body > h2:first-child { margin-top: 0; }

/* Lista wymiarów przeniesiona z karty produktu (`.mguide__list`) stoi
   w tekście jako blok, więc potrzebuje odrobiny powietrza z obu stron
   ponad zwykły rytm akapitu.                                            */
.article__body > .mguide__list {
  margin-block: var(--wp--preset--spacing--space-2);
}

/* ---- from components/pagination.css --------------------------------------------- */

/* ==========================================================================
   KOMPONENT — paginacja listy wpisów

   W WordPressie renderuje to `paginate_links()` natywnego modułu wpisów
   (DEC-010), więc komponent jest przede wszystkim ARKUSZEM STYLÓW dla
   znaczników, których i tak nie piszemy ręcznie. Klasy odpowiadają temu,
   co WP wypluwa (`page-numbers`, `current`, `next`), tylko pod naszymi
   nazwami — mapowanie robi się przy przenoszeniu do motywu.

   --- Dlaczego strona bieżąca NIE jest wypełniona akcentem

   Bo wypełnienie akcentem znaczy w tym systemie „główny przycisk widoku"
   (DEC-021 a), a taki na stronie jest już jeden: zamykające CTA. Dwa
   wypełnione pola akcentem w jednym kadrze rozmywają, które z nich jest
   akcją. Strona bieżąca dostaje więc obrys i kolor, nie wypełnienie,
   i niesie przy tym TRZY sygnały naraz, tak samo jak kafelek wyboru:
   pierścień, kolor i `aria-current="page"`.

   --- Dlaczego to nie jest odnośnik

   Strona bieżąca jest `span`, nie `a`. Odnośnik prowadzący tam, gdzie
   się już jest, to kliknięcie bez skutku — a przy czytniku ekranu jeszcze
   jedna pozycja do przejrzenia, która niczego nie robi.

   --- Czego tu NIE MA: wyłączonego „Previous"

   `paginate_links()` nie renderuje strzałki wstecz na pierwszej stronie,
   tylko ją pomija. Makieta robi to samo, bo ma pokazywać, co realnie
   wyjdzie z WordPressa, a nie ładniejszą wersję tego. Przy okazji omija
   to problem z DEC-021 (d): stan wyłączony wymaga widocznego powodu obok,
   a „bo jesteś na pierwszej stronie" nie jest powodem, tylko tautologią.
   ========================================================================== */

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--space-4);
  border-top: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
  padding-top: var(--wp--preset--spacing--space-5);
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--space-1);
  list-style: none;
  padding: 0;
}

/* Pole trafienia 44 px także tutaj, choć cyfra zajmuje kilkanaście
   (DEC-021 c). Paginacja jest jednym z najgorszych miejsc na drobne
   cele: pola stoją obok siebie, więc chybienie nie jest bezskutecznym
   kliknięciem, tylko wejściem na SĄSIEDNIĄ stronę.                     */
.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wp--custom--hit--min);
  min-height: var(--wp--custom--hit--min);
  padding-inline: var(--wp--preset--spacing--space-3);
  border-radius: var(--wp--custom--radius);
  font-family: var(--wp--preset--font-family--data);
  font-size: var(--wp--preset--font-size--fs-small);
  font-weight: 500;
  line-height: 1;
  color: var(--wp--preset--color--text);
  text-decoration: none;
  transition:
    background-color var(--wp--custom--motion--hover) var(--wp--custom--motion--ease),
    color var(--wp--custom--motion--hover) var(--wp--custom--motion--ease);
}

a.pagination__page:hover {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--accent);
}

/* Wciśnięcie 1 px w 40 ms — ten sam próg równoczesności z ruchem ręki
   co przy przyciskach (DEC-021 b).                                     */
a.pagination__page:active {
  transform: translateY(1px);
  transition-duration: var(--wp--custom--motion--press);
}

.pagination__page--current {
  color: var(--wp--preset--color--accent);
  box-shadow: inset 0 0 0 var(--wp--custom--border--hair) var(--wp--preset--color--accent);
}

/* Wielokropek WordPressa (`page-numbers dots`). Nie jest celem i nie
   powinien wyglądać na klikalny, więc bez pola trafienia i bez promienia
   — promień jest w tym systemie zarezerwowany dla rzeczy klikalnych
   (DEC-020 d).                                                          */
.pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wp--custom--hit--min);
  padding-inline: var(--wp--preset--spacing--space-2);
  font-family: var(--wp--preset--font-family--data);
  font-size: var(--wp--preset--font-size--fs-small);
  line-height: 1;
  color: var(--wp--preset--color--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .pagination__page { transition-duration: 1ms; }
  a.pagination__page:active { transform: none; }
}