/* ==========================================================================
   Sekcja: Badanie wzroku
   Gora: pionowa etykieta + dwutonowy lead na kremowym papierze.
   Dol: pelnoszerokosciowy split - po lewej sticky zdjecie, po prawej panel
   z numerowanymi krokami na hairline'ach. Zero kart, zero cieni.
   ========================================================================== */

.badanie {
  /* Token --hairline na tle --panel jest praktycznie niewidoczny: obie
     powierzchnie dzieli mniej niz 4% luminancji. Linie wewnatrz panelu
     liczymy wiec z --ink przez color-mix, nadal bez ani jednej wartosci
     koloru poza tokenami. */
  --badanie-line: color-mix(in srgb, var(--ink) 15%, transparent);

  padding-block: var(--section) 0;
}

/* --- Lead --------------------------------------------------------------- */
.badanie__top { padding-bottom: clamp(2.75rem, 6vw, 5.5rem); }

/* Ponizej 1024 etykieta z .marked spada do poziomu i dubluje eyebrow */
@media (max-width: 1023px) {
  .badanie .marked > .label { display: none; }
}

@media (min-width: 1024px) {
  /* .marked daje etykiecie height:100%, przez co rotate(180deg) zrzuca tekst
     na sam dol bloku. Skracamy ja do wysokosci wlasnej tresci i doklejamy
     zapas w osi inline (w vertical-rl to gora, po obrocie - dol), zeby
     pionowa kreska wychodzila spod etykiety jak u Kisty. */
  .badanie .marked > .label {
    height: auto;
    padding-inline-start: clamp(2.5rem, 5vw, 5.5rem);
  }
}

.badanie__eyebrow {
  display: block;
  margin-bottom: clamp(1.35rem, 2.8vw, 2.25rem);
}

/* Lead niesie cala range naglowkowa sekcji, wiec idzie wyzej niz bazowy .lead
   i dostaje miare na cztery linie zamiast na dwie. Pierwsze zdanie w serifie:
   dwutonowosc i mieszanka sans + serif w jednym zdaniu, bez dopisywania slowa
   copy ponad brief. */
.badanie__lead {
  max-width: 30ch;
  font-size: clamp(1.45rem, 0.95rem + 2.3vw, 3rem);
  line-height: 1.16;
  letter-spacing: -0.018em;
  text-wrap: pretty;
}

.badanie__lead .open {
  font-family: var(--serif);
  font-size: 1.04em;   /* Zodiak ma nizszy x-height niz Satoshi */
}

@media (min-width: 768px) { .badanie__lead { max-width: 42ch; } }
@media (min-width: 1024px) { .badanie__lead { max-width: 52ch; } }

/* --- Split -------------------------------------------------------------- */
/* Bez column-gap: panel styka sie ze zdjeciem krawedzia w krawedz, tak jak
   dwa pola koloru, a nie jak dwie karty. */
.badanie__split {
  display: grid;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}

/* Przy 1024 panel dostaje polowe szerokosci, inaczej kolumna tekstu spada
   ponizej sensownej miary. Przewage zdjeciu oddajemy dopiero od 1280. */
@media (min-width: 1024px) {
  .badanie__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  .badanie__split { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
}

/* --- Kolumna ze zdjeciem ------------------------------------------------ */
/* Kolumna rozciaga sie na wysokosc calego rzedu (domyslny stretch siatki),
   wiec sticky ma po czym jechac. */
.badanie__col { min-width: 0; }

.badanie__media { aspect-ratio: 16 / 10; }

@media (min-width: 1024px) {
  /* Obie kolumny stoja na tej samej powierzchni. Bez tego na styku kolumn
     powstawal pionowy schodek krem/bez, a wolne pole pod sticky zdjeciem
     czytalo sie jak ucieta fotografia zamiast jak swiatlo panelu. */
  .badanie__col { background: var(--panel); }

  /* Sticky trzyma PLASTER wysokosci ekranu, a kadr siedzi w nim wysrodkowany.
     Wczesniej sticky bylo samym kadrem przypietym do gornej krawedzi i przy
     czterech krokach to nie przeszkadzalo, bo kolumna byla ledwie 250px wyzsza
     od zdjecia. Przy szesciu kolumna rosnie o kolejne 350px i na wysokim ekranie
     (1440x1300) pod zdjeciem zostawalo 440px pustego panelu - przez cala faze
     przyklejenia, wiec nie dalo sie tego przewinac. Teraz nadmiar dzieli sie po
     rowno na gore i dol: to przestaje byc dziura pod fotografia, a staje sie
     marginesem dookola niej. Przy 900px wysokosci kadr i tak wypelnia plaster
     niemal w calosci, wiec kadrowanie z 1440x900 nie drgnelo.
     min(..., 100%) to bezpiecznik: gdyby kolumna byla nizsza niz plaster,
     figura nie wyjdzie poza wlasna kolumne. */
  .badanie__figure {
    position: sticky;
    top: 4.5rem;                   /* wysokosc fixed headera */
    display: flex;
    align-items: center;
    height: min(calc(100vh - 4.5rem), 100%);
  }
  /* Kadr zawsze wypelnia kolumne w poziomie, a jego wysokosc bierze pierwsze
     z trzech ograniczen: proporcja liczona z polowy viewportu (inaczej przy
     1024 z fotografii zostaje pionowy komin), wysokosc ekranu minus header,
     twardy sufit. Sufit to 60rem, bo kolumna nigdy nie jest szersza niz 748px
     (--measure 1440 dzielone w proporcji 1.08:1), wiec powyzej tej wartosci
     kadr zaczalby sie robic pionowym kominem niezaleznie od okna. */
  .badanie__media {
    aspect-ratio: auto;
    width: 100%;
    height: min(65vw, calc(100vh - 8.5rem), 60rem);
  }
}

/* --- Panel z krokami ---------------------------------------------------- */
.badanie__panel {
  background: var(--panel);
  padding: clamp(2.5rem, 7vw, 4rem) var(--gutter) clamp(3rem, 8vw, 4.5rem);
}

@media (min-width: 1024px) {
  .badanie__panel {
    /* Prawy padding rowny gutterowi strony: tekst krokow konczy sie dokladnie
       tam, gdzie lead nad splitem. */
    padding-inline: clamp(2.5rem, 4.6vw, 4.25rem) var(--gutter);
    padding-block: clamp(3rem, 5vw, 4.25rem) clamp(3rem, 5.5vw, 4.5rem);
  }
}

/* --- Krok --------------------------------------------------------------- */
.badanie__step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(1.6rem, 3vw, 2.35rem);
  border-top: 1px solid var(--badanie-line);
}
.badanie__step:first-child { padding-top: 0; border-top: 0; }

@media (min-width: 560px) {
  .badanie__step {
    grid-template-columns: minmax(3.5rem, 4.75rem) minmax(0, 1fr);
    column-gap: clamp(0.9rem, 1.8vw, 1.5rem);
  }
}

/* Numer + kreska: cala komorka jest flexem, wiec kreska sama dojezdza do
   krawedzi kolumny numeru i zawsze trafia w optyczny srodek tytulu. */
.badanie__n {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
  font: 300 1.05rem/1.3 var(--serif);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.badanie__n::after {
  content: "";
  flex: 1;
  max-width: 2.5rem;
  height: 1px;
  background: var(--badanie-line);
}

@media (min-width: 560px) {
  .badanie__n {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }
  .badanie__n::after { max-width: none; }
}

.badanie__t { letter-spacing: -0.01em; }

.badanie__d {
  /* Ponizej 560 kolumna jest wezsza niz miara, wiec limit tylko nie przeszkadza */
  max-width: min(100%, 27rem);
  margin-top: clamp(0.55rem, 1.1vw, 0.85rem);
  font-size: clamp(0.92rem, 0.88rem + 0.22vw, 1.0125rem);
  line-height: 1.68;
  color: var(--ink-soft);
  text-wrap: pretty;
}

@media (min-width: 560px) {
  .badanie__t,
  .badanie__d { grid-column: 2; }
}

/* --- Stopka panelu: CTA + zastrzezenie ---------------------------------- */
.badanie__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.1rem, 2.2vw, 1.6rem);
  margin-top: clamp(2rem, 3.8vw, 3rem);
  padding-top: clamp(1.9rem, 3.4vw, 2.6rem);
  border-top: 1px solid var(--badanie-line);
}

.badanie__cta svg {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform var(--dur) var(--ease);
}
.badanie__cta:hover svg { transform: translateX(3px); }

.badanie__note {
  max-width: 46ch;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Portret lekarza zachowuje pionowy kadr w obu układach. */
.badanie__figure { position: static; height: auto; }
.badanie__media { aspect-ratio: 4 / 5; height: auto; }
.badanie__media img { object-position: center top; }
.badanie__doctor {
  margin-bottom: 0.65rem;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.1vw, 2.8rem);
  font-weight: 300;
  line-height: 1.2;
}
.badanie__role { margin-bottom: 2rem; color: var(--purple); }
@media (min-width: 1024px) {
  .badanie__panel { display: flex; flex-direction: column; justify-content: center; }
}