/* ==========================================================================
   Podstrona /oferta, hero. D107, 02.09.2026: WERSJA FINALNA.

   Historia skrocona (pelna w decyzje.md): D50 (01.09) zdjelo portret na
   rzecz kompaktowej sekcji z plaskim zdjeciem zabiegowym. D103 (02.09)
   przywrocilo portret w ksztalcie liscia, klon .hero z home. D104 (ten sam
   dzien) dodalo pigulki kategorii i wiecej oddechu. D105/D106: piec
   wariantow na zywo pod przelacznikiem (?hero=a..e). D107: Jakub wybral
   wariant BEZ zdjecia (dawne "C"), reszta usunieta z kodu razem z calym
   mechanizmem przelacznika (byl w functions.php, jdb_hero_oferta_wariant/
   jdb_hero_oferta_switcher, i w osobnym pliku oferta-hero-warianty.css,
   oba usuniete).

   Ksztalt: pusty div w ksztalcie liscia (border-radius rozdzielony na
   poziomy/pionowy, D89), wypelnienie polprzezroczystym kolorem akcentu,
   czysto dekoracyjny watermark w tle, BEZ zdjecia. Zero portretu na tej
   podstronie, inaczej niz na home. Pole ACF oferta_hero_image zostaje w
   bazie nieuzywane (dormant), gdyby zdjecie mialo kiedys wrocic.

   Kotwice/pigulki kategorii cennika NIE wracaja w tym ukladzie (wypadly
   razem ze zdjeciem w D107). Temat "gdzie pokazac kategorie cennika"
   zostaje otwarty, patrz decyzje.md D107.

   Zero z-index na .oferta-hero i .oferta-hero__uklad (PRZEKAZANIE.md,
   pulapki 12/19: wlasny z-index na kontenerze przykrywa naprawe burgera).

   Copy: strona/copy/oferta.md, sekcja 2 i 3, bez zmian co do znaku. */

/* 14.09.2026: ornament roslinny, klon .hero__ornament z home (sections.css),
   dodany bo Jakub zauwazyl brak na zywo. Ten sam plik (hero-ornament-lisc.webp),
   ta sama logika (lewa krawedz, kotwica do dolu sekcji). Pozycja liczona wprost
   z tokenow tej sekcji (--space-9 gora / --space-section dol z regoly .oferta-hero
   nizej), bez --header-rest-h: .oferta-hero sam kompensuje wysokosc naglowka
   ujemnym marginesem (patrz komentarz D39/D42 nizej), wiec dzieci nie musza tego
   powtarzac, inaczej niz na home. */
.oferta-hero__ornament {
  position: absolute;
  inset-block-end: var(--space-8);
  inset-inline-start: calc(var(--container-margin) - 122px);
  z-index: 0;
  block-size: min(360px, 50%);
  inline-size: auto;
  opacity: 0.9;
  pointer-events: none;
}
.oferta-hero__ornament img { block-size: 100%; inline-size: auto; display: block; }

@media (max-width: 900px) {
  .oferta-hero__ornament { display: none; }
}

.oferta-hero {
  position: relative;
  overflow: hidden;
  /* D111, 03.09.2026: --space-6 (32px) -> --space-9 (64px), ten sam oddech
     co .hero na home (sections.css, --hero-oddech). Do tej daty oferta mial
     o polowe mniejszy oddech niz home (zmierzone: 32-33px wobec 64-66px),
     mimo ze obie strony maja teraz wizualnie ten sam jezyk hero (D109).
     Jakub: te odstepy maja byc rowne na obu stronach. Gora zostaje na tej
     wartosci (patrz padding-block-start nizej).
     D142, 03.09.2026: dol NIE jest juz --space-9. Zgloszenie Jakuba ze
     zrzutu: odstep miedzy hero a pierwsza kategoria cennika ("Twarz")
     wygladal inaczej niz odstep miedzy kategoriami cennika miedzy soba.
     Zmierzone: hero-dol (64px) + wstep-gora (--space-section, 119,52px na
     1440) = 183,52px na granicy hero->Twarz, podczas gdy KAZDA kolejna
     granica (wstep->pasmo, pasmo->pasmo) to 119,52+119,52=239,04px, bo obie
     strony tamtych granic uzywaja tego samego tokenu --space-section.
     Wybor Jakuba (pytanie zadane wprost): rytm sekcji cennika wygrywa nad
     zgodnoscia z home, wiec dol hero na /oferta przechodzi na
     --space-section, mimo ze to odrywa go od home (ktore samo w sobie nie
     ma tego problemu, bo za .hero na home idzie .kroki, obie na --space-9/
     --hero-oddech, ten sam token po obu stronach granicy). Mobile NIE
     ruszony w tym kroku (osobny wlasny padding-block w @media nizej,
     Jakub: "mobile poprawimy pozniej"). */
  padding-block-start: var(--space-9);
  padding-block-end: var(--space-section);
}

/* D39/D42, ten sam mechanizm co .hero.on-dark (css/sections.css, PRZEKAZANIE.md
   pulapka 18): naglowek sticky w normalnym przeplywie zajmuje wlasna wysokosc
   bez wlasnego tla, wiec bez tej kompensacji widac krem strony nad ciemnym
   hero na scroll=0. --header-rest-h jest stala wartoscia z tokenow (czysty
   CSS, zero JS, zero FOUC). Kompensacja dwa miejsca: margines ujemny tutaj,
   ten sam dodatek do padding-block-start tutaj. */
.oferta-hero.on-dark {
  margin-block-start: calc(-1 * var(--header-rest-h, 0px));
  padding-block-start: calc(var(--space-9) + var(--header-rest-h, 0px));
}

/* D109: zdjecie w ksztalcie liscia po prawej. Uklad pilnuje wlasnej
   minimalnej wysokosci rownej wysokosci zdjecia, zeby overflow:hidden sekcji
   nigdy go nie przycial, i centruje tresc w pionie obok niego. */
.oferta-hero__uklad {
  position: relative;
  --foto-w: min(440px, 38vw);
  --foto-h: calc(var(--foto-w) / 0.94);
  display: grid;
  align-content: center;
  min-block-size: var(--foto-h);
}

.oferta-hero__tresc {
  position: relative;
  z-index: 2;
  /* D165, 03.09.2026: bylo min(560px, 50vw). Przy 560px H1 lamal sie na trzy
     wiersze zamiast dwoch z copy, ze slowem "cennik" osamotnionym w drugim
     wierszu, a "Ostrów Mazowiecka" spadalo do trzeciego. Segment "Zabiegi
     kosmetyczne i cennik" potrzebuje 705px przy 1440. Szerokosc liczona
     formula, nie liczba: cala szerokosc okna minus margines ramy, minus
     zdjecie, minus margines kontenera, minus przerwa. Dzieki temu kolumna
     tekstu sama trzyma sie z dala od zdjecia na kazdej szerokosci, zamiast
     polegac na tym, ze ktos przeliczy 50vw przy nastepnej zmianie zdjecia. */
  max-width: min(
    760px,
    calc(100vw - var(--rama-margin) - var(--foto-w) - var(--container-margin) - var(--space-6))
  );
}

.oferta-hero__okruszki {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  font-size: var(--fs-small);
  color: var(--fg-muted);
}
.oferta-hero__okruszki a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.oferta-hero__okruszki a:hover { color: var(--accent-ctx); }
.oferta-hero__okruszki span[aria-hidden] { opacity: 0.6; }

.oferta-hero__tytul { margin: 0 0 var(--space-5); }
/* D165, 03.09.2026: UCHYLA wczesniejsza decyzje Jakuba o leadzie w stopniu
   18px plaskim (--fs-body). Nowe polecenie: "tekst zwieksz font jak na hero,
   tekst pod naglowkiem na hero", czyli lead tej podstrony ma brzmiec tak samo
   jak lead hero na home. Wlasne `font-size` zdjete w calosci, zostaje sama
   klasa `.lead` z tokens.css (--fs-lead, clamp 16-25px), dokladnie ta sama
   droga co `.hero__lead` na home. Szerokosc tez z home (520px), zeby dwa hero
   lamaly lead w tym samym miejscu. */
.oferta-hero__lead { max-width: 520px; margin-bottom: var(--space-6); }

/* Zdjecie w ksztalcie liscia, D109. Ten sam opis ksztaltu co portret hero
   home (D89, promien rozdzielony na poziomy/pionowy). Kotwiczone do linii
   kapsuly naglowka (--rama-margin), wysrodkowane w pionie wzgledem ukladu.
   Proporcja pudelka rowna proporcji pliku (0,94), wiec cover nic nie obcina. */
.oferta-hero__foto {
  position: absolute;
  inset-inline-end: var(--rama-margin);
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: var(--foto-w);
  aspect-ratio: 0.94;
  border-radius: 67% 0 67% 0 / 56% 0 56% 0;
  overflow: hidden;
  background: var(--surface-dark);
  pointer-events: none;
}
.oferta-hero__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

@media (max-width: 900px) {
  /* D109, zgloszenie Jakuba: nad trescia ma byc tyle samo swiatla co pod nia.
     Do tej daty gorny padding to bylo samo --header-rest-h, czyli tylko
     kompensacja wysokosci naglowka, zero wlasnego oddechu, wiec okruszki
     zaczynaly sie tuz pod kapsula. Teraz dochodzi --space-9, ta sama wartosc
     co padding dolny. */
  .oferta-hero { padding-block: 0 var(--space-9); }
  .oferta-hero.on-dark {
    margin-block-start: calc(-1 * var(--header-rest-h, 0px));
    /* plus --space-2: kapsula konczy sie 8px nizej niz --header-rest-h (ma
       wlasne odsuniecie od gory), wiec bez tego skladnika WIDOCZNE swiatlo
       nad okruszkami wychodzi 56px zamiast 64px. Ta sama poprawka co w hero
       home (sections.css, nota przy padding-block-start). */
    padding-block-start: calc(var(--header-rest-h, 0px) + var(--space-9) + var(--space-2));
  }
  .oferta-hero__uklad { min-block-size: 0; }
  /* Bez padding-inline wlasnego: .oferta-hero__tresc siedzi w .container,
     ktory ponizej 600px sam dokłada --gutter-mobile (tokens.css). Wlasny
     padding tutaj dublowalby ten gutter. */
  .oferta-hero__tresc { max-width: none; }
  .oferta-hero__okruszki { margin-bottom: var(--space-4); }
  .oferta-hero__lead { max-width: none; }
  /* D109, decyzja Jakuba: na telefonie zdjecia nie ma wcale. Hero mobilne to
     sam tekst plus CTA, czyli najkrotsza mozliwa wersja, a zdjecie zostaje
     wylacznie na szerokich ekranach, gdzie jest miejsce obok kolumny tekstu. */
  .oferta-hero__foto { display: none; }
}

/* D170, 03.09.2026: wartosci dobrane przez Jakuba w konfiguratorze, zakres
   telefon (max-width: 700px, pulapka 38). Zapisane w pliku wlasciciela, nie w
   konfigurator.css, zgodnie z rozstrzygnieciem z D168: konfigurator sluzy do
   DOBRANIA wartosci, nie do jej przechowywania. */
@media (max-width: 700px) {
  /* Sam dolny odstep. Gorny liczy kompensacje naglowka (blok 900px wyzej) i
     nie wolno go tu nadpisac plaska wartoscia, bo hero wjechaloby pod kapsule. */
  .oferta-hero { padding-block-end: var(--space-6); }
}