/* ==========================================================================
   Hero - pierwszy ekran.
   Rytm: eyebrow -> lockup marki -> hairline -> JEDNO oswiadczenie (naglowek, pod
   nim podporzadkowany lead, na dole rzad CTA + adres zamkniety hairline'em)
   z fotograficzna plyta po prawej -> ponizej pelnoekranowy pas zdjeciowy
   z serifowym napisem ucietym krawedzia kadru.

   Zasady glosu:
   - naglowek ma JEDEN glos (Satoshi 300, ink) i JEDNA kolumne - lead stoi pod
     nim, wezszy i wyszarzony, wiec czyta sie jako przypis, nie jako druga teza,
   - oba CTA mowia JEDNYM jezykiem: ten sam micro-label (Satoshi 500,
     wersaliki, 0.16em) na wspolnej linii bazowej. Rozni je tylko ciezar
     gestu - pelna pigula kontra sam hairline. Zero kolek, zero drugiego stylu.
   - adres nie plywa: siedzi w tym samym rzedzie co CTA, nad nim hairline,
     a od prawej domyka go krawedz plyty fotograficznej,
   - plyta po prawej to zapowiedz fotografii nad zagieciem. Jest waska
     (ok. 1/5 szerokosci), wiec nie zamienia hero w split 55/45 i nie odbiera
     mocy pasowi ze slowem na krawedzi,
   - serif pojawia sie tylko tam, gdzie jest gestem: napis "WIDZIEC WIECEJ"
     przeciety krawedzia zdjecia,
   - fiolet ma jedno wystapienie w akcji: pigula "Umow badanie wzroku".
   ========================================================================== */

.hero {
  /* jeden krok rytmu pionowego - wszystkie odstepy sekcji sa jego wielokrotnoscia */
  --step: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);

  /* header jest przezroczysty nad hero, wiec zostawiamy mu pelny oddech */
  padding-top: clamp(5rem, 4.5rem + 2.4vw, 6.75rem);
  padding-bottom: var(--step);
}

/* --- Eyebrow ------------------------------------------------------------ */
.hero__eyebrow { display: inline-block; }
.hero__dot { color: var(--purple); }

/* --- Lockup marki ------------------------------------------------------- */
/* Podpis marki, nie pas dekoracyjny. Stoi spokojnie i miesci sie CALY.
   Historia tego miejsca: najpierw byl tu marquee z dwunastoma powtorzeniami
   i animacja, wiec przy kazdej szerokosci ekranu napis ladowal gdzie indziej.
   Potem animacje zdjeto, ale skala zostala viewportowa (13vw), przez co
   konturowe "Centrum Optyczne" wychodzilo poza prawa krawedz i urywalo sie
   w przypadkowym miejscu - "Michalowska Cent". Ucinanie, ktorego nikt nie
   zaprojektowal, czyta sie jak blad renderu, nie jak gest.

   Teraz skala nie jest zgadywana, tylko policzona z szerokosci kolumny tresci.
   Zmierzone w przegladarce szerokosci w Satoshi 300 / letter-spacing -0.02em
   (na 1em kegla):
     "Michalowska"                   5.212em
     "Centrum Optyczne"              7.729em
     odstep miedzy slowami           0.300em
     caly lockup w jednym wierszu   13.241em
   Dzielniki ponizej sa o ok. 1.2% wieksze od zmierzonych - tyle zostaje zapasu
   przed prawym marginesem.

   Podstawa pomiaru to cqi, czyli szerokosc samego lockupu, a wiec dokladnie to,
   co daje .wrap. Wersja na 100vw stoi wyzej jako fallback, ale jest tylko
   przyblizeniem: w przegladarkach z klasycznym paskiem przewijania 100vw jest
   o jego szerokosc wieksze niz realna kolumna tresci. */
.hero__lockup {
  /* Domyslnie (telefon, tablet) lockup stoi w dwoch wierszach, wiec o skali
     decyduje dluzsze slowo: "Centrum Optyczne". Dwa wiersze sa lepsze
     niz ucieta litera. */
  --fit: 7.82;

  container-type: inline-size;
  margin-top: var(--step);

  /* flex-wrap jest siatka bezpieczenstwa: gdyby fallbackowy kroj okazal sie
     szerszy niz Satoshi, slowa zejda do drugiego wiersza zamiast wyjsc poza
     kadr. Nigdy nie ucinamy. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.hero__word {
  display: block;
  font-size: calc((min(100vw, var(--measure)) - 2 * var(--gutter)) / var(--fit));
  font-size: calc(100cqi / var(--fit));
}

/* Od 1024px caly lockup miesci sie w jednym wierszu i konczy tuz przed prawym
   marginesem tresci - napis jest wtedy dociety do obu krawedzi kolumny, czyli
   robi to samo, co hairline pod nim.
   Odstep miedzy slowami siedzi na drugim slowie, a nie w column-gap rodzica,
   bo cqi liczy sie wzgledem NAJBLIZSZEGO PRZODKA-kontenera - na samym
   kontenerze rozwiazaloby sie wzgledem viewportu. */
@media (min-width: 1024px) {
  .hero__lockup { --fit: 13.40; }
  .hero__word--ghost {
    margin-inline-start: calc((min(100vw, var(--measure)) - 2 * var(--gutter)) / var(--fit) * 0.30);
    margin-inline-start: calc(100cqi / var(--fit) * 0.30);
  }
}

/* Drugi glos lockupu rysowany konturem, nie wyszarzeniem. Kontur czyta sie
   jak zamierzony zabieg (i jak obrys soczewki), a jednoczesnie nie konkuruje
   o uwage z pelna "Michalowska".

   padding-bottom oddaje miejsce ogonkom "y" i "p". Interlinia 0.92 jest
   ciasniejsza niz pudelko glifu, wiec tusz wystaje pod wiersz - a to wlasnie
   to slowo ma jako jedyne descendery ("Michalowska" nie ma zadnego). Bez tego
   przy dwuwierszowym lockupie ogonki podchodzily na 12px pod hairline
   otwierajacy oswiadczenie. Jednostka em liczy sie tu od wlasnego kegla slowa,
   wiec zapas skaluje sie razem z napisem. */
.hero__word--ghost {
  padding-bottom: 0.09em;
  color: color-mix(in srgb, var(--ink) 20%, var(--paper));
}

@supports (-webkit-text-stroke: 1px currentColor) {
  .hero__word--ghost {
    color: transparent;
    -webkit-text-stroke: 1.4px color-mix(in srgb, var(--ink) 34%, var(--paper));
  }
}

/* --- Oswiadczenie ------------------------------------------------------- */
/* Hairline pod marquee to gorna krawedz calego bloku: od niej startuje
   i naglowek, i plyta fotograficzna. */
.hero__say {
  margin-top: var(--step);
  padding-top: calc(var(--step) * 1.15);
  border-top: 1px solid var(--hairline);
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Przyciecie polinterlinii: gorna krawedz bloku ma padac na wysokosc wersalika,
   dzieki czemu naglowek startuje dokladnie na linii gornej krawedzi plyty. */
.hero__h {
  margin-top: -0.20em;
  /* o krok wieksze niz bazowe .h1 - oswiadczenie stoi teraz samo,
     wiec moze wziac wiecej powietrza w pionie */
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.1rem);
  max-width: 20ch;
  text-wrap: balance;
}

/* Lead jest podporzadkowany naglowkowi trzema srodkami naraz: stoi bezposrednio
   pod nim (bliska proksymika), jest wyszarzony i ma wyraznie krotszy wiersz.
   Zadnego z tych sygnalow nie da sie pomylic z druga teza. */
.hero__lead {
  margin-top: clamp(1rem, 0.55rem + 0.9vw, 1.6rem);
  margin-bottom: calc(var(--step) * 1.5);
  max-width: 46ch;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.7;
  color: var(--muted);
}

/* Balansowanie wiersza pomaga dopiero tam, gdzie lead ma zapas szerokosci.
   Na telefonie ta sama regula robila trzy wiersze o nierownej dlugosci,
   wiec zostaje tam naturalne lamanie. */
@media (min-width: 768px) {
  .hero__lead { text-wrap: balance; }
}

/* --- Stopka bloku: CTA + adres ------------------------------------------ */
/* Wiersz w duchu .rule-row: gest po lewej, mikrodana po prawej, hairline
   nad calym rzedem. Adres ma wtedy dwie krawedzie zaczepienia - linie nad soba
   i prawy koniec kolumny tekstowej - wiec przestaje odplywac w pustke. */
.hero__foot {
  width: 100%;
  padding-top: calc(var(--step) * 0.85);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
}

/* Jeden rzad, jedna kolumna, wspolna linia bazowa obu etykiet.
   Odstep i boczny padding piguly schodza na waskich ekranach dokladnie tyle,
   ile trzeba, zeby para zostala w jednym wierszu na telefonie. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(1.25rem, 0.6rem + 1.7vw, 2.5rem);
  row-gap: 0.9rem;
}

.hero__book { padding-inline: clamp(1.4rem, 0.85rem + 1.5vw, 1.9rem); }

/* Drugie CTA to ta sama etykieta co na piguleczce, tyle ze bez tla.
   Hairline pod spodem jest jedyna roznica - lzejszy gest, ten sam jezyk. */
.hero__explore {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 34%, var(--paper));
  font: 500 0.68rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero__explore:hover  { color: var(--purple); border-color: var(--purple); }
.hero__explore:active { color: var(--purple-deep); border-color: var(--purple-deep); }

.hero__where {
  font-size: 0.85rem;
  color: var(--muted);
}

/* --- Plyta fotograficzna ------------------------------------------------ */
/* Nizej niz 1180 kolumna tekstowa nie zmiescilaby juz pelnej pierwszej linii
   naglowka obok zdjecia - wtedy plyta znika, a role zapowiedzi fotografii
   przejmuje pas, ktory na waskich ekranach i tak wchodzi wysoko. */
.hero__plate { display: none; }

@media (min-width: 1180px) {
  .hero__say {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(14rem, 21vw, 20rem);
    column-gap: clamp(2.5rem, 4vw, 4.5rem);
  }

  /* Naglowek u gory, stopka u dolu - kolumna tekstowa i plyta domykaja sie
     ta sama linia. Podzial zdania jest projektowany, nie zostawiony przegladarce. */
  .hero__foot { margin-top: auto; }
  .hero__l { display: block; }

  /* Proporcja 4:5, nie natywne 2:3 zdjecia. Wyzsza plyta rozpychala blok
     tekstowy i pod leadem robila sie dziura - w tej proporcji dol plyty
     wypada rowno z dolem rzedu CTA, a powietrze nad hairlinem zostaje
     powietrzem, nie luka. */
  .hero__plate {
    display: block;
    align-self: stretch;
    aspect-ratio: 4 / 5;
  }
  .hero__plate img { object-position: 50% 28%; }
}

/* --- Pas zdjeciowy z napisem na krawedzi -------------------------------- */
/* Dwie identyczne kopie napisu w dwoch pojemnikach z overflow:hidden.
   Gorna zostaje na zdjeciu, dolna pod nim - efekt jednej litery przecietej
   krawedzia obrazu. Zero mix-blend-mode. */
.hero__band {
  /* skala napisu: na tyle duza, zeby byla gestem, i na tyle mniejsza od
     poprzedniej wersji, zeby po obu stronach zostal realny margines */
  --edge: clamp(2rem, 9.2vw, 9.6rem);

  /* Geometria ciecia, liczona na metrykach Zodiaka (wersalik 0.70em nad linia
     pisma, ogonek "Ę" 0.21em pod nia, linia pisma 0.13em nad dolem wiersza):
     --edge-cut  = dol wiersza ponizej krawedzi kadru; 0.47em stawia ciecie
                   dokladnie w polowie wysokosci wersalika, czyli daleko od
                   szeryfow przy linii pisma - litery tnie sie czysto,
     --edge-tail = zapas pod wierszem, w ktorym miesci sie ogonek "Ę".
                   Bez niego pojemnik obcinal ogonek i to bylo widac. */
  --edge-cut:  calc(var(--edge) * 0.47);
  --edge-tail: calc(var(--edge) * 0.15);

  position: relative;
  /* na tyle blisko bloku tekstowego, zeby gorna krawedz kadru weszla jeszcze
     nad zagiecie na 1440x900 - zapowiedz, ze pod spodem jest fotografia */
  margin-top: calc(var(--step) * 1.4);
}

.hero__shot { aspect-ratio: 4 / 3; background: var(--panel); }

/* Delikatne przyciemnienie dolu - kremowe zdjecie samo nie unioslo by paper */
.hero__shot::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  /* Zdjecie ma jasna, kremowa dolna czesc, wiec bez mocniejszego przyciemnienia
     bialy napis na nim po prostu nie istnieje. Gradient konczy sie miekko,
     zeby nie bylo widac krawedzi maski. */
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink) 72%, transparent) 0%,
    color-mix(in srgb, var(--ink) 46%, transparent) 30%,
    color-mix(in srgb, var(--ink) 16%, transparent) 62%,
    transparent 100%
  );
  pointer-events: none;
}

/* Napis przeciety krawedzia kadru.

   Poprzednia wersja odsuwala obie polowy o staly ulamek font-size i zakladala,
   gdzie w linii siedzi wersalik. Zodiak ma inne metryki niz to zalozenie, wiec
   przy 1440 caly napis wypadal poza oba okna i z gestu zostawal jeden bialy
   piksel akcentu nad "C".

   Teraz nic nie jest zgadywane. line-height 0.72 sprawia, ze pudelko tekstu
   ma mniej wiecej wysokosc wersalika, a translateY(+/-50%) liczy sie od
   WLASNEJ wysokosci elementu, nie od metryk fontu. Krawedz kadru przecina
   napis dokladnie w polowie przy kazdym rozmiarze i kazdym foncie. */
.hero__under {
  position: relative;
  height: calc(var(--edge) * 0.42);
  overflow: hidden;
}

.hero__edge {
  position: absolute;
  left: 0;
  right: 0;
  font: 300 var(--edge)/0.72 var(--serif);
  letter-spacing: 0.012em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

/* gorna polowa: pudelko zakotwiczone w dolnej krawedzi zdjecia i zsuniete
   w dol o polowe siebie, wiec figura (overflow:hidden) przycina je w polowie */
.hero__edge--in {
  bottom: 0;
  transform: translateY(50%);
  color: var(--paper);
}

/* dolna polowa: to samo pudelko zakotwiczone w gornej krawedzi pola pod
   zdjeciem i podniesione o polowe siebie - obie polowy skladaja sie w jedna
   litere. Wyrazniejszy szary niz wczesniej, bo przy 21% na kremie znikala. */
.hero__edge--out {
  top: 0;
  transform: translateY(-50%);
  color: color-mix(in srgb, var(--ink) 46%, var(--paper));
}

@media (min-width: 768px) {
  .hero__shot { aspect-ratio: 21 / 9; }
}

/* --- Telefon ------------------------------------------------------------ */
/* W jednym rzedzie CTA i adres zmieszcza sie dopiero od tabletu. Nizej
   stopka rozklada sie na dwa wiersze, ale nadal wisi na tym samym hairline. */
@media (max-width: 719px) {
  .hero__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.15rem;
  }
}