/* ==========================================================================
   Sekcja 9, baner bezplatnej konsultacji. Domkniecie luku, jedno CTA.
   Wartosci z makiety (1440): pasmo 4498-4891, zdjecie x 0-600 pelnej wysokosci,
   H2 od x 594 y 4552, lead 4701, przycisk 4788 szeroki 331 wysoki 65,
   ornament po prawej x 1150-1408.
   ========================================================================== */

/* 14.09.2026, DRUGA KOREKTA tego samego dnia: uklad dwoch kolumn byl na
   krotko zamieniony na jedna kolumne tekstu (Jakub kazal usunac zdjecie w
   calosci), potem Jakub sprecyzowal: na DESKTOPIE zdjecie musi zostac.
   Grid wraca do wartosci sprzed pierwszej korekty (bez zmian wobec
   wielotygodniowego, przetestowanego ukladu D67-D69 i dalszych). Telefon
   dostaje NOWA regule w @media nizej (`.konsultacja__zdjecie{display:none}`),
   bo front-page.php teraz zawsze renderuje markup zdjecia niezaleznie od
   szerokosci -- do dzisiaj usuniecie zdjecia na mobile bylo efektem ubocznym
   braku markupu, teraz jest jawnym wyborem CSS. */
.konsultacja {
  position: relative;
  scroll-margin-top: var(--space-12);
  display: grid;
  grid-template-columns: 570fr 870fr;
  align-items: stretch;
  overflow: hidden;
}

.konsultacja__zdjecie {
  position: relative;
  overflow: hidden;   /* przycina powiekszony obraz ponizej, nie tylko okno przegladarki */
  /* 02.09.2026 (D69): Jakub zdjal tu lisc i zostawil prostokat. Powod widac
     na zrzucie: pas idzie przez cala szerokosc okna, wiec lewy czubek i tak
     byl przycinany krawedzia, a rysunek nie czytal sie jako lisc, tylko jako
     przypadkowe sciecie. Proporcja 1,47 tez z konfiguratora.
     UWAGA: ta sama klasa obsluguje blok konsultacji na /oferta, wiec tam
     zdjecie tez jest teraz prostokatem. */
  border-radius: 0;
  /* Proporcja 1,47 z konfiguratora NIE zostaje. Pudelko jest komorka siatki
     rozciaganej na wysokosc tekstu (align-items: stretch), wiec przy zadanej
     proporcji przegladarka liczy z niej minimalna szerokosc komorki i kolumna
     ze zdjeciem rosnie kosztem tekstu: na home o 12px, a na /oferta, gdzie H2
     jest dluzszy i pas wyzszy, az o 159px (zmierzone 02.09.2026, 729 zamiast
     570). Przy prostokacie proporcja i tak nie zmienia wygladu, bo zdjecie
     wypelnia cala komorke, wiec o wysokosci decyduje tresc obok. */
  min-inline-size: 0;
  /* Nowy plik 31.08.2026 (konsultacja-twarz-mask.webp) ma wlasna alfa
     przezroczystosc (organiczny kontur, nie prostokat), tlo dopasowane do
     kontekstu sekcji (on-dark) jako zabezpieczenie na wypadek marginesu
     miedzy alfa-ksztaltem a prostokatnym kontenerem. */
  background: var(--surface-dark);
}
.konsultacja__zdjecie img {
  /* Stary plik (konsultacja-twarz.jpg) mial jasny pasek ok. 8px na samej
     gorze (defekt zrodla), obchodzony przez scale(1.06) wokol srodka.
     Nowy plik (mask, 31.08.2026) zmierzony pikselowo: brak jasnego paska,
     tresc zaczyna sie w pelni nieprzezroczysta juz na y=5px zrodla, wiec
     obejscie zdjete.
     position:absolute (zamiast block-size:100%) naprawia regresje wysokosci
     odkryta przy podmianie: stary plik mial proporcje 1200/778=1,542, nowy
     900/834=1,079, wiec przy `height:100%` (procent bez zdefiniowanej
     wysokosci rodzica) przegladarka spada na wlasna proporcje obrazka do
     wyliczenia auto-wysokosci w przebiegu ustalania wysokosci wiersza siatki
     (570px * 834/900 = 528px), zanim jeszcze zadziala align-items:stretch,
     i caly rzad .konsultacja urosl do 528px zamiast 396-404px z tresci.
     position:absolute wyjmuje obraz z tego przebiegu calkowicie, wysokosc
     wiersza wraca do tego, co daje .konsultacja__tresc. */
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  /* 02.09.2026 (D69): powiekszenie o 4 procent wraca. Plik zrodlowy
     konsultacja-twarz.jpg ma na samej gorze jasny pasek dziewieciu pikseli
     (zmierzone: wiersze 0-8 maja jasnosc 200-225 przy 60 w reszcie kadru),
     to defekt zdjecia, nie kodu. Do 02.09 pasek chowal sie pod zaokragleniem
     liscia. Po zdjeciu ksztaltu wyszedl jako biala kreska nad twarza.
     Cztery procent kadruje po 2 procent z gory i dolu, czyli okolo 15
     pikseli zrodla, wiecej niz szerokosc paska. Kontener ma overflow: hidden,
     wiec nic nie wycieka na strone. */
  transform: scale(1.04);
}

/* 14.09.2026, DRUGA KOREKTA: padding wraca do 54/39 (uklad z fotografia
   obok, align-self:center pionowo centruje tresc w komorce siatki
   rozciaganej na wysokosc zdjecia). Krotkotrwala wersja 36/39 (symetria
   optyczna bez zdjecia) dotyczyla wylacznie stanu jednej kolumny i nie ma
   zastosowania przy powrocie do ukladu dwukolumnowego. Telefon ma wlasny,
   niezalezny padding w @media nizej, nie jest tym ruszony. */
.konsultacja__tresc {
  padding: 54px var(--space-11) 39px 24px;
  align-self: center;
}

.konsultacja__tytul {
  margin: 0 0 var(--space-4);
  line-height: 0.95;   /* w makiecie oba wiersze mieszcza sie w 117 px */
}
.konsultacja__lead {
  margin: 0 0 var(--space-5);
  max-width: 460px;   /* dwa wiersze, jak w makiecie */
  line-height: 1.45;
}

/* 02.09.2026 (D95): ornament magnolii, prawdziwy line-art zamiast protezy K1
   (patrz front-page.php/page-oferta.php). Pozycja na desktopie bez zmian,
   to samo miejsce co protezowala. */
.konsultacja__ornament {
  position: absolute;
  inset-block-start: 41px;
  inset-inline-end: 32px;
  inline-size: 259px;
  pointer-events: none;
}
.konsultacja__ornament img { inline-size: 100%; block-size: auto; }

/* Audyt 31.08.2026: na /oferta H2 ("Konsultacja przed zabiegiem") jest
   dluzszy niz na home ("Pierwsze 20 minut", anty-kanibalizacja copy) i
   konczy sie realnie na ok. x 1276 (1440), zachodzac 127px na ornament,
   ktory ma wypalone tlo w pliku (nie w pelni przezroczysty) i przykrywa
   koncowke wyrazu "zabiegiem". Naprawa lokalna WYLACZNIE dla instancji
   /oferta (#konsultacja-oferta), home nie jest ruszany: tytul dostaje
   mniejszy max-width, wiec pierwszy wiersz (przed twardym <br>) lamie sie
   wczesniej i nie dochodzi do ornamentu. Ornament i jego pozycja zostaja
   identyczne jak na home. */
#konsultacja-oferta .konsultacja__tytul { max-width: 480px; }

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

@media (max-width: 900px) {
  .konsultacja { grid-template-columns: 1fr; }
  /* 02.09.2026 (D67): stale 260px wysokosci dawalo na tablecie pudelko o
     proporcji blisko 3,0, w ktorym lisc splaszczal sie do waskiej soczewki.
     Proporcja zamiast wysokosci trzyma rysunek w tych samych ramach na kazdej
     szerokosci ponizej progu (390px daje te same 260px co wczesniej). */
  /* 14.09.2026, DRUGA KOREKTA: front-page.php od dzis renderuje markup
     zdjecia bezwarunkowo (dla desktopu), a Jakub chce je usuniete na
     telefonie. `display:none` zamiast zdjecia z pliku PHP, ten sam wzorzec
     co `.hero__ornament{display:none}` kilka sekcji wyzej. */
  .konsultacja__zdjecie { display: none; }
  .konsultacja__tresc { padding: var(--space-9) var(--gutter-mobile); }
  /* makieta mobilna tez ma magnolie, mniejsza, przy prawej krawedzi tekstu.
     Rozmiar dobrany tak, zeby ornament miescil sie w wolnym pasie pod
     przyciskiem (padding-block-end .konsultacja__tresc), a nie przecinal
     H2, lead ani przycisk: proteza K1 ma wypalone tlo w pliku, wiec na
     jasnym przycisku zostawia widoczny prostokat, nie tylko cienka kreske
     (zglosil Jakub 26.08, zmierzone Playwrightem, wczesniej 150px width
     nachodzilo na CTA o ok. 20px).
     inset-inline-end byl -8px, czyli poza prawa krawedzia sekcji. Wizualnie
     przycinal to overflow: hidden, ale scrollWidth elementu mierzy tresc
     przed przycieciem, wiec .konsultacja przepelniala sie o dokladnie 8px
     na 768 i 375 (zmierzone 26.08, PIPELINE.md). Naprawa: 0 zamiast -8px,
     ornament zostaje w pelni wewnatrz brzegu sekcji. */
  /* 02.09.2026 (D96), UCHYLA D95: ornament zdjety na telefonie, na wyrazna
     prosbe Jakuba po obejrzeniu na zywo. Desktop zostaje bez zmian, plik pod
     spodem tez zostaje prawdziwy line-art (D95), gdyby ornament mial kiedys
     wrocic na mobile. */
  .konsultacja__ornament { display: none; }
  .konsultacja__lead { max-width: none; }
}