/* ==========================================================================
   Podstrona O nas - trzy bloki (.onas-zasady)
   Rytm redakcyjny, nie stos kart: tekst / zdjecie, zdjecie / tekst,
   a trzeci blok rozpina sie na cala szerokosc i zamyka pelnym kadrem salonu.
   Dyptyk jest lustrzany wzgledem SRODKA wrapa, nie wzgledem kolumny tekstu:
   tor pionowej etykiety (3.5rem) zjada 56 px po lewej, wiec ta sama wartosc
   wraca jako padding po prawej. Bez tej kompensacji kadr 01 dobijal do
   krawedzi strony, a kadr 02 zatrzymywal sie 105 px od niej i odbicie
   sie rozjezdzalo.
   Rozdziela hairline i whitespace. Zero ramek, zero cieni.
   ========================================================================== */

.onas-zasady {
  padding-block: var(--section);

  /* Wcieccie kolumny tresci wzgledem toru etykiety. Jedno zrodlo prawdy -
     ta sama wartosc buduje kompensacje po prawej stronie. */
  --inset: clamp(1.5rem, 2.6vw, 2.5rem);
  --rail: 3.5rem;
}

/* Ponizej 1024 etykieta z .marked lezy poziomo - domykamy ja hairline'em,
   zeby czytala sie jak marginalia, a nie jak zagubiony akapit. */
@media (max-width: 1023px) {
  .onas-zasady .marked > .label {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--hairline);
  }
}

@media (min-width: 1024px) {
  /* writing-mode: vertical-rl + rotate(180deg) sadza tekst na dole toru,
     wiec dosuwamy go do konca osi inline - po obrocie to wizualna gora. */
  .onas-zasady .marked > .label {
    display: flex;
    justify-content: flex-end;
  }

  .onas-zasady__in {
    padding-left: var(--inset);
    padding-right: calc(var(--rail) + var(--inset));
  }
}

/* --- Blok ---------------------------------------------------------------- */
/* Szew miedzy blokami jest wiekszy niz jakikolwiek odstep wewnatrz bloku -
   inaczej trzy bloki czytaja sie jak szesc luznych elementow. */
.onas-block + .onas-block { margin-top: clamp(4rem, 10vw, 8.5rem); }

/* Numer + kreska. Ta sama figura co w sekcji badania na stronie glownej,
   wiec podstrona nie wprowadza nowego jezyka dla tej samej roli. */
.onas-block__n {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: clamp(1.1rem, 2.4vw, 1.75rem);
  font: 300 1.05rem/1.3 var(--serif);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.onas-block__n::after {
  content: "";
  flex: 1;
  max-width: 3rem;
  height: 1px;
  background: var(--hairline);
}

/* Naglowek bloku swiadomie ponizej skali .h2 ze strony glownej: na podstronie
   sa trzy takie naglowki i h1 nad nimi, wiec pelne 5rem zjadloby hierarchie.
   Wspolczynnik vw liczony pod najdluzsza linie serifowa strony ("moze dobrze
   wygladac" = ok. 10,8em w Zodiaku 300): przy 1024 px kolumna ma 395 px,
   a linia 337 px, wiec zostaje zapas na polskie ogonki i szersze przegladarkowe
   metryki fontu. Bez tego zapasu linia lamala sie tuz przy prawym gutterze. */
.onas-block__h {
  font-size: clamp(1.8rem, 0.35rem + 2.5vw, 2.7rem);
  line-height: 1.06;
  letter-spacing: -0.024em;
}
.onas-block__h .serif { letter-spacing: -0.016em; }

.onas-block__p {
  max-width: 46ch;
  margin-top: clamp(1.25rem, 2.6vw, 1.85rem);
  font-size: clamp(0.95rem, 0.9rem + 0.28vw, 1.075rem);
  line-height: 1.72;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* --- Zdjecie bloku ------------------------------------------------------- */
.onas-block__figure { margin-top: clamp(2rem, 5vw, 3rem); }

/* 4/3 to kompromis dla obu kadrow: makro zawiasu znosi kazde ciecie,
   ale przy dobieraniu opraw wezszy kadr uciolby jedna z dwoch osob. */
.onas-block__media { aspect-ratio: 4 / 3; }

/* --- Trzeci blok: zamkniecie --------------------------------------------- */
/* Ostatnie zdanie przed pelnym kadrem, wiec ma prawo byc glosniejsze
   od dwoch poprzednich. */
.onas-block--wide .onas-block__h {
  font-size: clamp(2.05rem, 1rem + 2.9vw, 3.6rem);
}
.onas-block--wide .onas-block__p {
  max-width: 40ch;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.62;
  color: var(--ink);
}

.onas-block__aside { margin-top: clamp(1.5rem, 3vw, 2rem); }
.onas-block__act   { margin-top: clamp(1.85rem, 4vw, 2.5rem); }

/* --- Kadr zamykajacy ----------------------------------------------------- */
/* Pelna szerokosc okna, poza wrapem i poza torem etykiety. Dwa poprzednie
   kadry stoja w kolumnie, ten jeden ja lamie - i dlatego czyta sie jak
   odpowiedz na "zawsze masz do kogo wrocic", a nie jak trzecia ilustracja. */
.onas-zasady__band { margin-top: clamp(3rem, 7vw, 5.5rem); }

/* 3/2 na telefonie - proporcja zrodla, wiec sylwetka zostaje cala. */
.onas-zasady__media { aspect-ratio: 3 / 2; }

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

  /* Kadr zrodlowy jest 3/2 i pionowo wysrodkowany na sylwetce, wiec przy
     przycieciu do 21/9 domyslne "center" scina glowe. Podniesienie okna
     kadrowania do 30% zostawia nad glowa pas nieba, a doceina dol pola. */
  .onas-zasady__media img { object-position: 50% 30%; }
}

/* Podpis jak w druku - micro-label tuz pod krawedzia kadru, dosuniety
   do prawej. Letter-spacing labela dokleja swiatlo za ostatnim glifem,
   wiec kompensujemy je scietym paddingiem. Ujemny margin robilby to samo
   optycznie, ale przy kadrze na pelna szerokosc okna wypychal dokument
   o 1 px poza viewport. */
.onas-zasady__cap {
  margin-top: 0.85rem;
  padding-inline: var(--gutter);
  color: var(--muted);
}

@media (min-width: 768px) {
  .onas-zasady__cap {
    text-align: right;
    padding-right: calc(var(--gutter) - 0.12em);
  }
}

/* --- Desktop ------------------------------------------------------------- */
@media (min-width: 1024px) {
  .onas-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 6.5rem);
    align-items: center;
  }

  .onas-block__text   { grid-column: 1; grid-row: 1; }
  .onas-block__figure { grid-column: 2; grid-row: 1; margin-top: 0; }

  /* Kolejnosc w DOM zostaje narracyjna - grid tylko odbija uklad w poziomie,
     zeby oko szlo zygzakiem zamiast spadac prosta kolumna. */
  .onas-block--rev .onas-block__text   { grid-column: 2; }
  .onas-block--rev .onas-block__figure { grid-column: 1; }

  /* Blok bez zdjecia nie zostawia pustego kwadrantu: naglowek trzyma lewa
     kolumne, akapit z CTA prawa. Obie kolumny startuja z tej samej linii:
     dosuwanie ich do dolu wypychalo akapit wysoko ponad numer, bo przy
     1024 px ma on o dwa wiersze wiecej niz naglowek. */
  .onas-block--wide { align-items: start; }
  .onas-block--wide .onas-block__aside {
    grid-column: 2;
    grid-row: 1;
    /* Wersaliki numeru sa nizsze niz interlinia akapitu - bez tej korekty
       pierwszy wiersz tekstu stoi optycznie o kilka pikseli za wysoko. */
    margin-top: 0.35rem;
  }
  .onas-block--wide .onas-block__p { margin-top: 0; }

  /* Pauza wokol zamkniecia jest najwieksza w sekcji - to zamach przed
     ostatnim zdaniem strony. */
  .onas-block + .onas-block--wide { margin-top: clamp(6rem, 11vw, 10rem); }
}

@media (min-width: 1280px) {
  /* Od 1280 kolumna tekstu dostaje przewage nad fotografia, ale proporcja
     jest lustrzana miedzy blokami 01 i 02 - inaczej odbicie by nie wyszlo. */
  .onas-block { grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr); }
  .onas-block--rev { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr); }
  .onas-block--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}