/* ==========================================================================
   Sekcja "Oferta" na stronie glownej, uklad U1 (D65, 01.09.2026).
   Dwa pasma na cala szerokosc sekcji, kazde ze zdjeciem po jednej stronie
   i trescia po drugiej, na przemian. Ten sam rytm co pasma cennika na
   /oferta. Plik przepisany od zera: poprzednia wersja miala na sobie cztery
   warstwy z kolejnych podejsc (owale, polygony, kadry 1:1 z makiety, plama
   rozu, dwa osobne bloki @media), ktore zaczely sie wzajemnie nadpisywac.
   Historia tamtych decyzji zostaje w decyzje.md (D15, D27, D34, D37, D60,
   D61, D64), kopia pliku przed przepisaniem w _backup/.
   ========================================================================== */

/* 02.09.2026 (D71): gorny odstep sekcji zbity z var(--space-11) 96px na
   var(--space-8) 48px. Zgloszenie Jakuba: przerwa nad oferta byla za duza
   wzgledem przycisku konczacego sekcje pierwszej wizyty. Liczy sie suma
   dwoch paddingow, nie sam ten jeden: dol sekcji kroki (82px) plus gora
   oferty. Bylo 178px od dolu przycisku do pierwszej tresci oferty, jest
   130px. */
.oferta { position: relative; padding-block: var(--space-9); }

.oferta__naglowek { max-width: 700px; }
/* 14.09.2026: klasa w markupie display-2 (84px) -> display-3 (67px), sama
   przyczyna i uzasadnienie co w sekcja-kroki.css przy .kroki__tytul. */
.oferta__tytul { margin: calc(var(--space-5) + var(--space-1)) 0 0; }

/* --- pasma --------------------------------------------------------------- */

/* D159, 03.09.2026: gap --space-10 (80px) -> --space-7 (40px), dokladnie
   polowa, na zgloszenie Jakuba o odstepie miedzy pasmami Twarz i Sylwetka. */
.oferta__grid {
  display: grid;
  gap: var(--space-7);
  margin-block-start: var(--space-9);
}

.oferta__karta {
  display: grid;
  /* 02.09.2026 (D69): kolumny odwrocone przez Jakuba w konfiguratorze,
     wezsza kolumna jest teraz pierwsza. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  /* D161, 03.09.2026: `center` -> `start`. Zgloszenie Jakuba ze strzalka przy
     pasmie Sylwetka, "daj to wyzej". Przy wysrodkowaniu nad naglowkiem stalo
     161px (Twarz) i 148px (Sylwetka) pustego swiatla, bo kolumna tekstu ma
     204px przy zdjeciu wysokim na ponad 500px. Zmiana idzie na OBA pasma, nie
     tylko na zgloszone: oba maja ten sam uklad i te sama dziure, a rozne
     wyrownanie w dwoch sasiadujacych pasmach czytaloby sie jako blad. */
  align-items: start;
  gap: var(--space-9);
}

/* 02.09.2026 (D69): pasma zamienily sie stronami. Kadr pierwszego pasma stoi
   teraz po prawej, drugiego po lewej. Do tej daty bylo odwrotnie. */
.oferta__karta:nth-child(odd) .oferta__zdjecie { order: 2; }
.oferta__karta:nth-child(even) .oferta__zdjecie { order: 0; }

.oferta__zdjecie {
  /* D66, 01.09.2026: ksztalt schodzi ze zdjecia do CSS. Zdjecie jest teraz
     zwyklym prostokatem, a ksztalt daje maska (mask-image) wyciagnieta z
     makiety Karola. Powod: dopoki ksztalt siedzial w alfie pliku, kazda
     zmiana kadru wymagala nowego wycinania, a proporcja zdjecia i proporcja
     ksztaltu musialy sie zgadzac. Teraz zdjecie wypelnia maske przez
     object-fit: cover i mozna je podmienic w kokpicie bez ruszania ksztaltu. */
  position: relative;
  inline-size: 100%;
  min-block-size: 0;
  /* 02.09.2026 (D67): oba pasma dostaja TEN SAM lisc. Do tej daty karta
     "twarz" miala wlasny ksztalt wyciagniety z makiety Karola (kopula,
     proporcja 1,429, maska-oferta-twarz.png), a karta "sylwetka" lisc.
     Decyzja Jakuba 02.09.2026: jeden ksztalt na calej stronie, spojnosc
     wygrywa z wiernoscia makiecie. Uchyla te czesc D63 i D64. */
  aspect-ratio: 1160 / 918;
  border-radius: var(--lisc);
  overflow: hidden;
}
/* 02.09.2026 (D69): pierwsze pasmo ma czubki gora-lewo i dol-prawo oraz
   nizsze pudelko, ustawione przez Jakuba. Drugie zostaje na ksztalcie
   bazowym. */
.oferta__karta:nth-child(1) .oferta__zdjecie {
  /* 02.09.2026 (D102): plyn zamiast ostrej soczewki, ta sama technika co
     hero D89 (border-radius rozdzielony na poziomy/pionowy). Bylo
     "0 100% 0 100%" (D77), teraz pionowy promien 65% zamiast 100%, wiec
     zostaje wciety prosty odcinek na krawedzi i czubki sa lagodniejsze. */
  border-radius: 0% 100% 0% 100% / 0% 65% 0% 65%;
  aspect-ratio: 1.2;
}
/* 02.09.2026 (D102): drugie pasmo mialo do tej daty ksztalt bazowy
   (.oferta__zdjecie, var(--lisc)). Jakub przeslal wlasne wartosci z
   konfiguratora, wiec dostaje wlasna regule, tak jak pierwsze pasmo od D69. */
.oferta__karta:nth-child(2) .oferta__zdjecie {
  border-radius: 77% 0% 77% 0% / 65% 0% 65% 0%;
  aspect-ratio: 1.2;
  block-size: auto;
}
/* object-position: 50% 0% zdjete 02.09.2026 razem z podmiana zdjecia.
   Nowe pliki sa przyciete dokladnie do proporcji swoich pudelek, wiec cover
   nic nie obcina i przesuwanie kadru nie ma tu juz czego przesuwac. */
/* Pasma roznia sie czubkami, zeby dwa identyczne rysunki pod soba nie
   czytaly sie jak powtorka. Od 02.09.2026 (D69) odbity jest pierwszy kadr,
   nie drugi, wiec ta regula nie jest juz potrzebna. */
.oferta__zdjecie img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}


.oferta__tresc { display: flex; flex-direction: column; align-items: flex-start; }
.oferta__karta-tytul { margin: 0 0 var(--space-4); }
/* D121, 03.09.2026: font-size ujednolicony na --fs-body (18px), decyzja
   Jakuba "o mnie" jako kanon. Bylo --fs-lead (25px), rozjazd bez powodu
   wobec .o-mnie__akapit i .krok__opis. Mobile juz mial --fs-body (linia
   nizej w pliku), wiec desktop i telefon teraz zgodne z ta sama wartoscia
   zamiast desktop=lead/mobile=body. */
.oferta__karta-opis {
  margin: 0 0 var(--space-6);
  max-width: 42ch;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-muted);
}

/* --- CTA sekcji ---------------------------------------------------------- */

.oferta__cta { margin-block-start: var(--space-10); text-align: center; }

/* --- tablet i telefon ---------------------------------------------------- */

@media (max-width: 900px) {
  /* 02.09.2026 (D92): rytm wewnetrzny zbity do wartosci z kadru mobilnego
     Karola. Zmierzone tam profilem wierszy (oferta-mobile-wide.png, 390 px):
     naglowek konczy sie na y 147, kadr zaczyna na 169, tytul 22 px pod kadrem,
     opis 18 px pod tytulem, przycisk 17 px pod opisem, nastepny kadr 21 px pod
     przyciskiem, ciemny przycisk sekcji 11 px pod ostatnim. U nas stalo
     odpowiednio 48, 32, 16, 32, 64 i 80, czyli mniej wiecej dwa razy tyle,
     i sekcja rozjezdzala sie na wysokosc.
     Dolny odstep sekcji zbity z 64 na 32, zeby przerwa do sekcji o mnie
     (112 px) byla podobna do tej od sekcji pierwszej wizyty (104 px).
     Wczesniej bylo 144 wobec 104. */
  .oferta { padding-block: var(--space-7) var(--space-6); }
  .oferta .etykieta-sekcji { display: none; }
  .oferta__grid { gap: var(--space-5); margin-block-start: var(--space-5); }
  /* jedna kolumna, kadr zawsze nad trescia, takze w pasmie odwroconym */
  .oferta__karta { grid-template-columns: 1fr; gap: var(--space-5); }
  .oferta__karta-opis { margin-block-end: var(--space-4); }
  .oferta__cta { margin-block-start: var(--space-3); }
  /* 02.09.2026 (D69): reset dotyczy OBU pasm. Wczesniej stalo tu tylko
     nth-child(even), bo kolejnosc na desktopie zmieniala tylko drugie pasmo.
     Po zamianie stron pierwsze pasmo tez ma order: 2, wiec bez tego resetu
     jego kadr spadal na telefonie pod tekst. */
  /* Selektor musi powtorzyc :nth-child, inaczej przegrywa waga z regulami
     desktopu (klasa plus pseudoklasa plus klasa bije klase plus klase),
     mimo ze stoi w zapytaniu medialnym nizej w pliku. */
  .oferta__karta:nth-child(odd) .oferta__zdjecie,
  .oferta__karta:nth-child(even) .oferta__zdjecie { order: 0; }
  /* 02.09.2026 (D90): kadry na telefonie idą szerzej niż kolumna tekstu,
     zgodnie z kadrem mobilnym Karola (materialy/kadry-mobile/oferta-mobile-wide.png).
     Zmierzone tam: zdjecie zajmuje 346 na 239 px przy oknie 390, czyli
     proporcje 1,45 i szerokosc siegajaca prawie krawedzi okna, podczas gdy
     tekst zostaje w kolumnie. U nas stalo 310 px przy 1,2 i 1,26, wiec kadry
     byly wyraznie mniejsze i w dwoch roznych proporcjach.
     Ujemny margines wyprowadza zdjecie poza kontener o jego wewnetrzny
     padding, czyli dokladnie na linie 20-370 przy oknie 390. */
  .oferta__zdjecie {
    margin-inline: calc(-1 * var(--gutter-mobile));
    /* Bez tego regula bazowa (inline-size: 100%) trzyma szerokosc rowna
       kontenerowi, a ujemny margines tylko przesuwa pudelko w lewo zamiast
       je rozciagnac. Zmierzone: 20-330 zamiast 20-370. */
    inline-size: auto;
  }
  /* 02.09.2026 (D91): ksztalty i proporcja dobrane suwakami przez Jakuba,
     osobno dla kazdego pasma. Pierwsze ma zaokraglone rogi gora-prawo i
     dol-lewo, drugie odwrotnie, wiec kadry odbijaja sie wzgledem siebie tak
     jak w kadrze mobilnym Karola. Wyzsza waga selektora jest konieczna, zeby
     przebic reguly desktopu pisane z :nth-child. */
  .oferta__karta:nth-child(1) .oferta__zdjecie {
    border-radius: 0% 32% 0% 32% / 0% 59% 0% 59%;
    aspect-ratio: 1.62;
  }
  .oferta__karta:nth-child(2) .oferta__zdjecie {
    border-radius: 41% 0% 41% 0% / 69% 0% 69% 0%;
    aspect-ratio: 1.62;
  }

  .oferta__karta-opis { max-width: none; }
  /* 02.09.2026 (D91): przyciski pasm przestaly isc na pelna szerokosc.
     W kadrze mobilnym Karola sa waskie, dosuniete do lewej, ze strzalka tuz
     za etykieta, a pelna szerokosc ma wylacznie ciemny przycisk konczacy
     sekcje. Rozciagniete na cala kolumne zlewaly sie z nim w trzy identyczne
     paski i przestawal byc wyrozniony. */
  .oferta__tresc .btn {
    align-self: start;
    /* tokens.css ma ponizej 600px globalne .btn { width: 100% }, bo w projekcie
       mobilnym przyciski sa zwykle pelnej szerokosci. Tu jest wyjatek i musi
       byc zdjety jawnie, samo align-self tego nie cofa. */
    inline-size: auto;
  }
  .oferta__cta .btn { inline-size: 100%; min-inline-size: 0; }
}

/* 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 gorny odstep. Dolny zostaje z bloku 900px, Jakub go nie ruszal. */
  .oferta { padding-block-start: var(--space-6); }
}