/* Scena zdjęciowa sekcji otwierających (task01.10): zdjęcie pod treścią sekcji, woal
   pod jasnym tekstem, gradient u góry dla czytelności headera. Używa: blok artykułu
   (task03.05), top visual produktowy (task03.22), top visual kontentowy (task03.19), top visual listingu (task03.49); kolejne sekcje otwierające dokładają tu swoje reguły. */

.scena-zdjecie {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.scena-zdjecie :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scena-zdjecie::before {           /* woal pod jasnym tekstem */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kolor-przyciemnienia-zdjecia);
}

.scena-zdjecie::after {            /* gradient u góry (czytelność headera) */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 26.1875rem;              /* 419 px */
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

/* ================= TOP VISUAL PRODUKTOWY (K2, blok feuer/top-produktowy — task03.22) =================
   Punkt wyjścia: makieta K2 (task01.25). Desktop: białe tło + pas 94 w kolorze tła wyróżnionego
   = część komponentu; zdjęcie 633 przy prawej krawędzi sięga dołu pasa i wystaje w następną
   sekcję, której zwykły padding 64 daje układ widoków strony produktowej. Okruszki nie należą
   do komponentu (rząd ramy .pas-okruszki, rama.css). Bez woalu na desktopie (tekst ciemny na białym).
   Wysokość rośnie z treścią: białe tło kończy się 82 pod rzędem CTA, nie wyżej niż 459, pod nim
   pas 94; zdjęcie sięga dołu pasa (object-fit: cover). Treść w wymiarach projektu = 553.
   Stop skali 1920 jak sekcje pełnej szerokości (90rem przy zatrzymanym rem). */

.top-produktowy {
  position: relative;
  max-width: 90rem;
  margin-inline: auto;
  background: var(--kolor-tla);
  min-height: 34.5625rem;          /* 553 px */
}

.top-produktowy .pasek-dolny {
  position: absolute;
  inset: auto 0 0;
  height: 5.875rem;                /* 94 px */
  background: var(--kolor-tla-wyroznionego);
}

.top-produktowy .scena-zdjecie {
  left: auto;
  width: 39.5625rem;               /* 633 px */
}

.top-produktowy .scena-zdjecie::before,
.top-produktowy .scena-zdjecie::after { content: none; }

/* Kolumna treści 620: etykieta A47 tekstem 73 od góry (pudełko 24 → 71), H1 A22 16 pod linią
   etykiety, lead 24 pod H1, rząd CTA 24 pod leadem. */
.top-produktowy .kontener {
  position: relative;
  padding-top: 4.4375rem;          /* 71 px */
  padding-bottom: 11rem;           /* 176 = 82 białego tła pod rzędem CTA + pas 94 */
}

.top-produktowy .scena-naglowek,
.top-produktowy-tresc {
  box-sizing: border-box;
  width: 38.75rem;                 /* 620 px */
}

/* Link wstecz (K9) żyje w komponencie tylko na mobile — na desktopie ścieżka to rząd okruszek
   nad komponentem, więc .sciezka i odstęp reguły wspólnej z rama.css nie mają tu zastosowania. */
.top-produktowy .scena-naglowek .sciezka { display: none; }
.top-produktowy .scena-naglowek .sciezka + .etykieta-kategorii { margin-top: 0; }

/* H1 = atom A22 (48/67.2 ExtraBold). */
.top-tytul {
  margin: 1rem 0 0;
  font-size: var(--tekst-48);
  line-height: var(--interlinia-48);
  font-weight: var(--waga-najgrubsza);
}

.top-produktowy-tresc .top-lead { margin: 1.5rem 0 0; }

/* Rząd CTA: pola wyboru A53 (js/rozwijane.js) 200 (wariant) / 228 (termin), odstęp 16, przycisk A41. */
.top-produktowy-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.top-produktowy-cta .pole-wyboru-wariant { width: 12.5rem; }   /* 200 px */
.top-produktowy-cta .pole-wyboru-termin  { width: 14.25rem; }  /* 228 px — najdłuższa data PL „10 października 2026" (Figma 172 = sama podpowiedź; decyzja 2026-09-26) */

/* Link „Dowiedz się więcej" (A43): bez pól wyboru — w rzędzie za przyciskiem; z polami — osobna
   linia nad nimi, 24 pod leadem, 16 nad rzędem pól. */
.top-produktowy-link { margin: 1.5rem 0 0; }
.top-produktowy-link + .top-produktowy-cta { margin-top: 1rem; }

/* Mobile: zdjęcie 343 u góry z woalem 35%, pod nim tło wyróżnione; na zdjęciu link wstecz 24 od
   góry, etykieta 24 niżej, H1 A22 mobile 12 pod linią; biała karta 20 od krawędzi ekranu nachodzi
   95, padding 24 / 16 / 24, odstępy w karcie 32, pola i przycisk na pełną szerokość. Komponent
   kończy się dołem karty. */
@media (max-width: 1023px) {
  .top-produktowy {
    min-height: 0;
    background: var(--kolor-tla-wyroznionego);
  }

  .top-produktowy .pasek-dolny { display: none; }

  .top-produktowy .scena-zdjecie {
    position: relative;
    width: auto;
    height: 21.4375rem;            /* 343 px */
  }

  .top-produktowy .scena-zdjecie::before { content: ""; }   /* woal ze wspólnej reguły */

  .top-produktowy .kontener {
    padding-top: 0;
    padding-bottom: 0;
    display: flow-root;            /* bez margin-collapse z ujemnym marginesem karty */
  }

  .top-produktowy .scena-naglowek {
    position: absolute;
    top: -21.4375rem;              /* na zdjęciu, od jego góry */
    left: var(--odstep-2);
    right: var(--odstep-2);
    width: auto;
    z-index: 1;
    --kolor-tekstu: var(--kolor-tekstu-odwrocony);   /* jak klasa tła: atomy czytają token */
    color: var(--kolor-tekstu);
  }

  .top-produktowy .scena-naglowek .sciezka { display: block; }
  .top-produktowy .scena-naglowek .sciezka + .etykieta-kategorii { margin-top: var(--odstep-3); }

  .top-produktowy .top-tytul {
    margin-top: 0.75rem;
    font-size: var(--tekst-32);
    line-height: var(--interlinia-32);   /* A22 mobile 32/44.8 */
  }

  .top-produktowy-tresc {
    position: relative;
    width: auto;
    margin: -5.9375rem 0.25rem 0;  /* karta nachodzi 95 px; 20 od krawędzi (kontener 16 + 4) */
    padding: var(--odstep-3) var(--odstep-2);
    background: var(--kolor-tla);
  }

  .top-produktowy-tresc .top-lead { margin-top: 0; }

  .top-produktowy-cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--odstep-4);
    margin-top: var(--odstep-4);
  }

  .top-produktowy-link,
  .top-produktowy-link + .top-produktowy-cta { margin-top: var(--odstep-4); }

  .top-produktowy-cta .wybor { display: block; }   /* wrapper listy A53 na pełną szerokość karty */
  .top-produktowy-cta .pole-wyboru-wariant,
  .top-produktowy-cta .pole-wyboru-termin { width: 100%; }
}

/* ================= TOP VISUAL KONTENTOWY (K3, blok feuer/top-kontentowy — task03.19) =================
   Punkt wyjścia: makieta K3 (task01.26). Zdjęcie 553 z woalem i gradientem, na nim jasna etykieta i H1;
   karta treści w kontenerze nachodzi na zdjęcie 152. Okruszki na desktopie nie należą do komponentu
   (rząd ramy .pas-okruszki, rama.css) — etykieta 70 od góry zdjęcia, H1 A22 19 pod linią etykiety;
   poniżej 1024 link wstecz na zdjęciu (odstępy reguły wspólnej .sciezka w rama.css). */

.top-kontentowy {
  max-width: 90rem;
  margin-inline: auto;
}

.top-zdjeciowy-scena {
  position: relative;
  height: 34.5625rem;              /* 553 px */
  color: var(--kolor-tekstu-odwrocony);
}

.top-zdjeciowy-scena .kontener { position: relative; }

.top-zdjeciowy-scena .top-tytul {
  margin-top: 1.1875rem;           /* 19 */
  color: inherit;
}

/* Wariant akcentowy H1: baza A21 (48), słowa .tytul-duzy = A20 (80). Wszystkie wiersze wysokości A20 (112):
   span z line-height 0 nie rozpycha wiersza, więc wiersze są równe niezależnie od akcentu. */
.top-tytul.tytul-akcent { line-height: var(--interlinia-80); }
.tytul-akcent .tytul-duzy {
  font-size: var(--tekst-80);
  line-height: 0;
}

/* Edytor: H1 bloku = tytuł wpisu edytowany w miejscu — pole tytułu edytora nad blokiem ukryte (task03.19). */
.editor-styles-wrapper:has(.top-kontentowy) .editor-visual-editor__post-title-wrapper { display: none; }

/* Karta — w kontenerze 1204; treść: typografia A40 (.tresc). */
.top-karta {
  position: relative;
  box-sizing: border-box;
  margin-top: -9.5rem;             /* 152 px na zdjęciu */
  padding: 3rem 2.6875rem 3rem 3rem;   /* 48 / 43 / 48 / 48 */
  background: var(--kolor-tla);
}

/* Lead → zwykły akapit w karcie: 16 jak między akapitami, nie 80 / 48 odstępu bloków (poprawka po UAT task03.19). */
.top-kontentowy .top-karta .is-style-wstep:has(+ p:not([class*="is-style-"])) { margin-block-end: var(--odstep-2); }

/* Pole wyszukiwarki Bazy wiedzy (task03.56): dwie kopie — od 1024 px na zdjęciu pod H1 (wymiary — jak w top visualu
   listingu, niżej), poniżej 1024 px pod kartą na całą szerokość kontenera, 24 pod kartą, Lista artykułów tuż pod
   blokiem — 32 pod polem (zdjęcie bez zmian). */
.top-kontentowy > .kontener .wyszukiwarka-katalogu { margin-top: var(--odstep-3); }   /* kontener pod zdjęciem; w edytorze pole w opakowaniu inert */

@media (min-width: 1024px) {
  .top-kontentowy > .kontener .wyszukiwarka-katalogu { display: none; }
}

@media (max-width: 1023px) {
  .top-zdjeciowy-scena .wyszukiwarka-katalogu { display: none; }
  .top-kontentowy:has(.wyszukiwarka-katalogu) + .lista-artykulow { padding-top: var(--odstep-4); }
}

/* Desktop: ścieżka w rzędzie ramy, nie na zdjęciu. Dwie kolumny karty 5 : 7 kolumn siatki z gutterem 32
   (task01.26) — prefiks .top-kontentowy: typografia.css motywu ładuje się później przy tej samej specyficzności. */
@media (min-width: 1024px) {
  .top-zdjeciowy-scena .kontener { padding-top: 4.375rem; }   /* 70 px */
  .top-kontentowy .sciezka { display: none; }
  .top-kontentowy .sciezka + .etykieta-kategorii { margin-top: 0; }

  .top-kontentowy .top-karta .dwie-kolumny { grid-template-columns: repeat(12, 1fr); gap: var(--odstep-4); }
  .top-kontentowy .top-karta .dwie-kolumny > :first-child { grid-column: span 5; }
  .top-kontentowy .top-karta .dwie-kolumny > :last-child { grid-column: span 7; }
}

/* Mobile (FeuerDS 7:6041): zdjęcie 343, H1 A22 mobile 14 pod linią etykiety; wariant akcentowy — baza A21
   mobile (26), akcent A20 mobile (32), wiersze 44.8; karta nachodzi 102, 20 od krawędzi ekranu. */
@media (max-width: 1023px) {
  .top-zdjeciowy-scena { height: 21.4375rem; }      /* 343 px */

  .top-zdjeciowy-scena .top-tytul {
    margin-top: 0.875rem;
    font-size: var(--tekst-32);
    line-height: var(--interlinia-32);
  }

  .top-zdjeciowy-scena .top-tytul.tytul-akcent { font-size: var(--tekst-26); }
  .tytul-akcent .tytul-duzy { font-size: var(--tekst-32); }

  .top-karta {
    margin: -6.375rem 0.25rem 0;   /* 102 px na zdjęciu; 20 od krawędzi ekranu (kontener 16 + 4) */
    padding: 1.5rem 1rem;          /* 24 / 16 */
  }

  /* Następny blok na szarym tle: szare tło od dołu zdjęcia, karta na szarym (FeuerDS 2:2649; poprawka po UAT task03.19). */
  .top-kontentowy:has(+ .tlo-wyroznione) { background: var(--kolor-tla-wyroznionego); }
}

/* ================= TOP VISUAL LISTINGU (K38, blok feuer/top-listingu — task03.49) =================
   Wg Figmy (Oferta 5324:5930, kategoria 5324:5469). Zdjęcie z woalem i gradientem, na nim okruszki (tekst
   16 od góry), H1 A22 i lead w kolumnie 620. Blok w przepływie kończy się 48 pod ostatnim tekstem — tam zaczyna
   się treść pod blokiem. Gdy tą treścią jest listing strony kategorii albo Kafle kategorii, zdjęcie sięga 175 niżej
   i leży pod nią (z polem wyszukiwarki task03.51, 64 pod leadem, zdjęcie ma 553 jak w Figmie; bez pola — krótsze,
   nachodzenie to samo: decyzja użytkownika); inny blok pod top visualem — zdjęcie kończy się z blokiem, blok ze
   swoimi odstępami (decyzja użytkownika — task03.50). */

.top-listingu {
  position: relative;
  max-width: 90rem;
  margin-inline: auto;
}


.top-listingu .kontener {
  position: relative;
  padding-bottom: var(--odstep-6);   /* 48 */
}

.top-listingu .sciezka { padding-top: 0.75rem; }   /* tekst okruszków 16 od góry (12 + padding 4 listy) */

.top-listingu :is(.top-tytul, .top-lead) { max-width: 38.75rem; }   /* 620 */

.top-listingu .top-tytul {
  margin-top: var(--odstep-3);
  color: inherit;
}

.top-listingu .top-lead { margin: var(--odstep-4) 0 0; }

/* Pole wyszukiwarki katalogu (task03.51; strona kategorii z kartami produktów): 64 pod leadem, 5 kolumn siatki —
   483 przy kontenerze 1204 (Figma 5324:5965). Tak samo pole Bazy wiedzy na zdjęciu top visualu kontentowego, 64 pod H1
   (task03.56). */
.top-listingu .wyszukiwarka-katalogu,
.top-zdjeciowy-scena .wyszukiwarka-katalogu {
  width: calc((100% - 11 * var(--odstep-4)) * 5 / 12 + 4 * var(--odstep-4));
  margin-top: var(--odstep-8);
}

/* Listing kategorii / Kafle kategorii pod blokiem: nad zdjęciem (bez pozycjonowania malowałyby się pod nim), 48 pod
   ostatnim tekstem bloku — bez własnego odstępu górnego (Figma: kafle kategorii i drzewo kategorii 48 pod polem
   wyszukiwarki); na mobile od dołu zdjęcia. Dwie klasy: ponad regułą odstępu sekcji ładowaną później. */
.top-listingu.tlo-ciemne + :is(.kategoria-listing, .kafle-kategorii) {
  position: relative;
  padding-top: 0;
}

@media (min-width: 1024px) {
  .top-listingu:has(+ :is(.kategoria-listing, .kafle-kategorii)) .scena-zdjecie {
    bottom: auto;
    height: calc(100% + 10.9375rem);   /* 175 px pod blokiem */
  }
}

/* Mobile (wzór: top visual kontentowy mobile): zdjęcie min. 343 w przepływie, na nim link wstecz 24 od góry,
   H1 A22 mobile, lead; treść pod blokiem od dołu zdjęcia. */
@media (max-width: 1023px) {
  .top-listingu { min-height: 21.4375rem; }        /* 343 */
  .top-listingu .scena-zdjecie { height: 100%; }
  .top-listingu .kontener { padding-bottom: var(--odstep-3); }
  .top-listingu .sciezka { padding-top: var(--odstep-3); }

  .top-listingu .top-tytul {
    font-size: var(--tekst-32);
    line-height: var(--interlinia-32);
  }

  .top-listingu .top-lead { margin-top: var(--odstep-2); }

  /* Pole wyszukiwarki na dole zdjęcia, wewnątrz niego — 24 od dolnej krawędzi, na całą szerokość kontenera; nad nim
     co najmniej 24 (decyzje użytkownika — task03.49, task03.51). */
  .top-listingu:has(.wyszukiwarka-katalogu) .kontener {
    display: flex;
    flex-direction: column;
    min-height: inherit;                           /* 343 — zdjęcie = blok */
  }

  .top-listingu .wyszukiwarka-katalogu {
    width: auto;
    margin-top: auto;
    padding-top: var(--odstep-3);
  }
}