/* ==========================================================================
   Podstrona O nas - otwarcie (.onas-hero)
   Otwarcie jest czysto typograficzne: micro-label, jedno duze oswiadczenie
   sans + serif, pod nim dwutonowy lead i trzy wiersze faktow na hairline'ach.
   Fotografii tu nie ma swiadomie - kadr salonu pracuje na stronie glownej
   jako teaser tej podstrony, wiec powtorzony tutaj kazalby czytac ten sam
   obrazek dwa razy pod rzad. Zdjecia wchodza dopiero w sekcji ponizej,
   kazde przy swoim zdaniu.
   ========================================================================== */

.onas-hero {
  /* Header jest fixed i przezroczysty nad papierem - eyebrow musi zaczac sie
     wyraznie ponizej jego 4.5rem, inaczej logo siada na etykiecie. */
  padding-top: clamp(7rem, 5.25rem + 5.4vw, 10.5rem);
  padding-bottom: var(--section);
}

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

/* --- Naglowek strony ----------------------------------------------------- */
/* Jedyny h1 na stronie. Waskim gardlem nie jest linia sansowa, tylko serifowa:
   "W Pniewach od 2009 roku." to ok. 12,4em w Zodiaku 300, bo cyfry sa szerokie.
   Przy wspolczynniku 5,4vw miala ona przy 900 px okna zaledwie 7 px zapasu
   i lamala sie na osierocone "roku.". 5,1vw zostawia margines na kazdej
   szerokosci, a gorne 5rem i tak wchodzi juz przy ok. 1330 px.
   Linia sansowa lamie sie sama ponizej ~1150 px i to jest w porzadku -
   naglowek czyta sie wtedy jako trzywierszowy blok.
   Gorny prog podniesiony do 5.4rem: bez pasa zdjecia to naglowek jest
   otwarciem strony i musi uniesc ten ciezar sam. Zmierzone przy 1440 px:
   dluzsza linia ma wtedy 1139 px w kolumnie 1328 px, wiec zapas zostaje. */
.onas-hero__h {
  margin-top: clamp(1.5rem, 3.4vw, 2.5rem);
  font: 300 clamp(2.35rem, 0.9rem + 5.1vw, 5.4rem)/1.0 var(--sans);
  letter-spacing: -0.028em;
}

/* Kazda linia jest wlasnym blokiem, wiec balance dziala na nia osobno -
   po zlamaniu dostajemy dwa rowne wiersze zamiast dlugiego i sierotki. */
.onas-hero__h .line { display: block; text-wrap: balance; }

/* Zodiak ma inne swiatlo miedzyliterowe niz Satoshi - bez tej korekty druga
   linia optycznie rozjezdza sie wzgledem pierwszej. */
.onas-hero__h .serif { letter-spacing: -0.018em; }

/* --- Lead + fakty -------------------------------------------------------- */
.onas-hero__foot { margin-top: clamp(2.5rem, 6vw, 4.5rem); }

/* Dwutonowy lead: otwarcie do dwukropka wyszarzone, teza w ink. Copy zostaje
   co do znaku, dzieli je tylko span. */
.onas-hero__lead {
  max-width: 44ch;
  font-weight: 300;
  font-size: clamp(1.15rem, 0.98rem + 0.85vw, 1.65rem);
  line-height: 1.45;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}
.onas-hero__lead .open { color: var(--lead-open); }

.onas-hero__meta { margin-top: clamp(2.25rem, 5vw, 3rem); }

/* dt/dd w rule-row: reset marginesu dd, zeby wiersz stal na jednej linii bazowej */
.onas-hero__meta dd { margin: 0; }
.onas-hero__val { font-weight: 400; }
.onas-hero__tel { transition: color var(--dur) var(--ease); }
.onas-hero__tel:hover { color: var(--purple); }

/* --- Desktop ------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Lead i fakty stoja obok siebie: po lewej zdanie, po prawej weryfikowalne
     dane. To ten sam podzial, ktory Kista robi w intro "kto jesteśmy" -
     teza kontra sucha lista. Trzy hairline'y tabelki domykaja otwarcie
     od dolu i sa jedyna linia, jakiej ta sekcja potrzebuje. */
  .onas-hero__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }

  /* Pierwszy wiersz tabelki siada optycznie na wysokosci pierwszej linii
     leadu, a nie na gornej krawedzi jego pudelka. */
  .onas-hero__meta { margin-top: 0.35rem; }

  /* Bez pasa zdjecia otwarcie nie potrzebuje juz pelnej pauzy sekcyjnej -
     pierwsza fotografia ma wejsc szybko, zeby gora strony nie czytala sie
     jak sama plansza tytulowa. */
  .onas-hero { padding-bottom: clamp(3.5rem, 5vw, 5rem); }
}