/* ==========================================================================
   Podstrona Badanie wzroku - dwa akapity o wizycie obok fotografii.
   Split jest odbiciem sekcji z home: tam zdjecie stoi po lewej, tu po prawej.
   Obie kolumny stoja na tym samym papierze, wiec na styku nie ma schodka;
   dol zamyka przycisk pod fotografia, rowno z koncem kolumny tekstu.
   Bloki rozdziela hairline i whitespace - zero kart, zero cieni.
   ========================================================================== */

.bw-proces {
  padding-block: var(--section) 0;
}

.bw-proces__split {
  display: grid;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}

/* Kolejnosc w DOM (zdjecie, tekst, przycisk) jest kolejnoscia czytania na
   telefonie. Od 1024 siatka rozklada te same trzy bloki na dwie kolumny
   i dwa rzedy: tekst trzyma cala wysokosc po lewej, a po prawej zdjecie
   siedzi w rzedzie elastycznym, przycisk w rzedzie o wysokosci wlasnej.
   Dzieki temu dol obu kolumn konczy sie na tej samej linii bez sufitow
   wysokosci - zdjecie samo dobiera wysokosc do tego, co zostaje. */
@media (min-width: 1024px) {
  .bw-proces__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .bw-proces__body { grid-column: 1; grid-row: 1 / span 2; }
  .bw-proces__col  { grid-column: 2; grid-row: 1; height: 100%; }
  .bw-proces__foot { grid-column: 2; grid-row: 2; }
}

/* --- Kolumna ze zdjeciem ------------------------------------------------ */
.bw-proces__col { min-width: 0; }

/* Ponizej 1024 ramka trzyma wlasna proporcje zdjecia (1264/848 ~ 3/2), wiec
   cover nie ma czego przyciac po bokach: osoba stojaca zostaje w kadrze
   z cala sylwetka i uniesiona oprawa, a glowa dostaje caly zapas, jaki ma
   fotografia. Przy 4/3 kadr zjadal 10% szerokosci przy krawedziach. */
.bw-proces__media { aspect-ratio: 3 / 2; }

/* Kadr jest poziomy, a kolumna niemal kwadratowa - bez tej korekty cover
   przycina symetrycznie i zjada twarz optyczki przy prawej krawedzi.
   Punkt 72% trzyma w kadrze oba profile: klientke przy oknie i osobe,
   ktora podaje oprawe. Druga wartosc dziala tylko wtedy, gdy ramka jest
   szersza od zdjecia - wtedy zabiera piksele od dolu, od podlogi, a nie
   od gory, gdzie stoja glowy. */
.bw-proces__media img { object-position: 72% 15%; }

@media (min-width: 1024px) {
  /* Zero tla pod kolumna: obie stoja na tym samym papierze, wiec na styku
     nie ma schodka ani wystajacego rogu. Wolnego pola pod zdjeciem tez juz
     nie ma - kadr rosnie dokladnie do linii, na ktorej zaczyna sie przycisk,
     a przycisk domyka kolumne rowno z tekstem obok. */
  .bw-proces__figure { height: 100%; }

  /* Zadnego sufitu: wysokosc bierze sie z rzedu, czyli z tego, ile miejsca
     zostaje po odjeciu stopki od wysokosci kolumny tekstowej. */
  .bw-proces__media {
    aspect-ratio: auto;
    height: 100%;
  }
}

/* --- Kolumna z tekstem -------------------------------------------------- */
.bw-proces__body {
  min-width: 0;
  padding-inline: var(--gutter);
  padding-block: clamp(2.75rem, 7vw, 4rem) 0;
}

@media (min-width: 1024px) {
  .bw-proces__body {
    /* Lewy padding rowny gutterowi strony: tekst startuje dokladnie tam,
       gdzie naglowek hero. Prawy jest wiekszy, zeby kolumna nie dotykala
       fotografii. */
    /* Zero u gory: etykieta pierwszego bloku startuje na tej samej linii,
       co gorna krawedz fotografii - kolumny otwieraja sie razem. */
    padding-inline: var(--gutter) clamp(2.5rem, 4.6vw, 4.25rem);
    padding-block: 0 clamp(3rem, 5.5vw, 4.5rem);
  }
  /* Tresc jest wysrodkowana w pionie wzgledem fotografii tylko wtedy,
     gdy jest od niej krotsza - inaczej po prostu plynie dalej. */
  .bw-proces__in {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
  }
}

/* --- Blok --------------------------------------------------------------- */
.bw-proces__block {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline);
}
.bw-proces__block:first-child { padding-top: 0; border-top: 0; }

.bw-proces__rail {
  display: block;
  margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
}

.bw-proces__h {
  font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.bw-proces__h .serif { font-size: 1.04em; }

.bw-proces__p {
  max-width: 46ch;
  margin-top: clamp(1.1rem, 2.2vw, 1.5rem);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  line-height: 1.72;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --- Stopka: jedna pigula ----------------------------------------------- */
/* Na telefonie stopka zamyka kolumne tekstu, wiec potrzebuje hairline'u
   i wciecia rownego gutterowi. Od 1024 wchodzi pod fotografie i linie
   rysuje sama krawedz zdjecia. */
.bw-proces__foot {
  margin-inline: var(--gutter);
  padding-block: clamp(2rem, 3.6vw, 2.75rem) clamp(3.25rem, 8vw, 5rem);
  border-top: 1px solid var(--hairline);
}

@media (min-width: 1024px) {
  .bw-proces__foot {
    /* Lewa krawedz przycisku laduje dokladnie na lewej krawedzi fotografii. */
    margin-inline: 0;
    padding-block: clamp(2rem, 3.4vw, 2.75rem) clamp(3rem, 5.5vw, 4.5rem);
    border-top: 0;
  }
}

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