/* ==========================================================================
   Sekcja: O nas (.o-nas)
   Sekcja zaufania czytana jak rozklad redakcyjny. Trzy szwy, trzy rozne
   wartosci: pas naglowka -> DUZA pauza -> pas zdjecia -> pauza -> podpis.
   Rytm jest hierarchia, nie stalym odstepem: 144 / 112 / 60 / 28 / 14 px
   na 1440 px. Naglowek dostaje najwiecej powietrza, bo jest samodzielna
   wypowiedzia, a nie podpisem nad fotografia.
   Zero kart i cieni: rozdzielaja whitespace i jeden hairline domykajacy.
   ========================================================================== */

.o-nas__in {
  display: grid;
  row-gap: 0;
}

/* --- Etykieta sekcji ----------------------------------------------------- */
/* Ten sam hairline 1px w obu breakpointach, tylko obrocony o 90 stopni:
   ponizej 1024 px lezy poziomo pod etykieta, wyzej stoi pionowo obok
   obroconego napisu (to juz robi .marked z base.css). */
@media (max-width: 1023px) {
  .o-nas .marked > .label {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--hairline);
  }
}

/* --- Naglowek ------------------------------------------------------------ */
/* 1.75rem to najciasniejszy szew w sekcji poza podpisem zdjecia - eyebrow
   i naglowek maja czytac sie jako jeden blok, nie dwa. */
.o-nas__eyebrow { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }

/* Waga 300 i podzial sans/serif dziedziczymy z .h2 - tu tylko skala.
   Sansowa linia ma 25 znakow. Na telefonie celowo lamie sie na dwa slowa:
   trzy krotkie wiersze niosa duzo wiekszy stopien pisma niz jedna
   przyduszona linia, a line-height 0.98 trzyma je jako jedna plame.
   Miara bezpieczenstwa: najdluzsze slowo "Profesjonalnie." to ~5,6em, wiec
   przy 12,2vw miesci sie w kolumnie jeszcze na ekranie 320 px. */
.o-nas__h {
  font-size: clamp(2.5rem, 12.2vw, 3.7rem);
  line-height: 0.98;
  letter-spacing: -0.028em;
}
.o-nas__h .serif { letter-spacing: -0.022em; }

/* Od 768 px cala linia sansowa wraca do jednego wiersza - stopien pisma
   moze rosnac dalej bez ryzyka zlamania w przypadkowym miejscu. */
@media (min-width: 768px) {
  .o-nas__h { font-size: clamp(3.2rem, 7.6vw, 4.8rem); }
}

/* --- Wprowadzenie -------------------------------------------------------- */
.o-nas__intro { margin-top: clamp(2rem, 5vw, 2.75rem); }

.o-nas__p { max-width: 58ch; }
.o-nas__p + .o-nas__p { margin-top: clamp(1rem, 2vw, 1.35rem); }

/* Dwie rozne miary, jedna krawedz. Akapit otwierajacy jest zlozony wiekszym
   stopniem, wiec te same 58ch zajmowalyby u niego o ~110 px wiecej niz u
   akapitu ciagu - blok lamalby sie w schodek po prawej. */
.o-nas__p--lead {
  max-width: 46ch;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.o-nas__p--note { color: var(--muted); }

.o-nas__act { margin-top: clamp(1.75rem, 4vw, 2.25rem); }

/* --- Pas zdjecia --------------------------------------------------------- */
/* Na mobile 3/2: kadr 21/9 przyciety do 4/3 zrzuca boki wnetrza i gubi polki. */
/* Pauza przed zdjeciem jest najwieksza takze w ukladzie jednokolumnowym -
   inaczej sekcja czyta sie jak stos rownych warstw, a nie kompozycja. */
.o-nas__figure { margin-top: clamp(3.25rem, 9vw, 6rem); }
.o-nas__media  { aspect-ratio: 3 / 2; }

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

/* Podpis zdjecia jak w druku: micro-label tuz pod krawedzia kadru. */
.o-nas__cap {
  margin-top: 0.85rem;
  color: var(--muted);
}

/* --- Stopka sekcji: zdanie zamykajace + podpis --------------------------- */
.o-nas__foot { margin-top: clamp(2.5rem, 6vw, 4.25rem); }

/* Zdanie zamykajace niesie ciezar calej sekcji, wiec idzie stopniem
   posrednim miedzy body a naglowkiem - i tylko ono. */
.o-nas__statement {
  max-width: 40ch;
  font-weight: 300;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
  line-height: 1.35;
  letter-spacing: -0.012em;
}

/* --- Podpis wlascicielki ------------------------------------------------- */
/* Byline, nie karta autora: krotka kreska w fiolecie (jedyny akcent
   chromatyczny sekcji), imie serifem w kursywie, nazwa firmy zwyklym
   stopniem tekstowym. Swiadomie NIE jest micro-labelem - ten sam lancuch
   slow stoi juz w eyebrow nad naglowkiem i drugi raz w tym samym kroju
   czytalby sie jak powtorzona etykieta, a nie jak stopka listu. */
.o-nas__sign { margin-top: clamp(2rem, 5vw, 2.5rem); }

.o-nas__mark {
  display: block;
  width: 2.25rem;
  height: 1px;
  margin-bottom: clamp(1rem, 2vw, 1.35rem);
  background: var(--purple);
}
.o-nas__name {
  display: block;
  font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.7rem);
  font-style: italic;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.o-nas__firm {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

/* --- Hairline domykajacy ------------------------------------------------- */
.o-nas__close { margin-top: clamp(2.25rem, 5vw, 3rem); }

/* --- Desktop ------------------------------------------------------------- */
@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. */
  .o-nas .marked > .label {
    display: flex;
    justify-content: flex-end;
  }

  .o-nas__in { padding-left: clamp(2rem, 3.4vw, 3.25rem); }

  /* Dolna granica 4.8rem podejmuje dokladnie ten stopien, na ktorym konczy
     sie tor 768 px - przejscie przez 1024 px nie skacze w dol. */
  .o-nas__h { font-size: clamp(4.8rem, 7.2vw, 7rem); letter-spacing: -0.03em; }
  .o-nas__h .serif { letter-spacing: -0.018em; }

  /* Pas naglowka domkniety prawa kolumna. Bez niej naglowek konczy sie
     w 3/4 szerokosci i zostawia pusty kwadrant nad zdjeciem - pustke
     resztkowa, nie zaprojektowana. Kolumna 58% wymusza tez zlamanie linii
     sansowej po kropce ("Lokalnie." / "Profesjonalnie."), wiec naglowek
     stoi jako zwarty trzywierszowy blok. */
  .o-nas__head {
    display: grid;
    grid-template-columns: minmax(0, 58%) minmax(0, 1fr);
    column-gap: clamp(3rem, 5.5vw, 5.5rem);
    align-items: start;
  }

  /* Pierwszy wiersz tekstu siada optycznie na gornej krawedzi wersalikow
     naglowka, a nie na krawedzi pudelka eyebrow. */
  .o-nas__intro { margin-top: clamp(2.6rem, 3.4vw, 3.4rem); }
  .o-nas__act { margin-top: clamp(2rem, 3.4vw, 2.75rem); }

  /* DUZA pauza. To ona odrywa naglowek od fotografii i robi z sekcji
     kompozycje zamiast stosu blokow. Kolejne szwy sa wyraznie mniejsze. */
  .o-nas__figure { margin-top: clamp(6rem, 10vw, 9rem); }

  /* Podpis dosuniety do prawej krawedzi kadru. Letter-spacing labela
     dopisuje swiatlo za ostatnim glifem, wiec bez kompensacji podpis stoi
     optycznie cofniety o ~4 px wzgledem krawedzi zdjecia. */
  .o-nas__cap {
    text-align: right;
    margin-right: -0.12em;
  }

  .o-nas__foot {
    margin-top: clamp(5rem, 8vw, 7rem);
    display: grid;
    grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 4.6vw, 4.5rem);
  }

  /* Kolejnosc w DOM zostaje narracyjna (zdanie, potem podpis) - grid tylko
     przestawia je wizualnie w uklad "byline w lewym marginesie". */
  .o-nas__copy { grid-column: 2; grid-row: 1; }
  .o-nas__side { grid-column: 1; grid-row: 1; }

  /* Kreska podpisu ma siadac na wysokosci pierwszej linii zdania obok,
     a nie na gornej krawedzi jego pudelka. */
  .o-nas__sign { margin-top: 0.7rem; }

  /* Hairline dobija w lewo az do pionowej linii etykiety, wiec sekcja domyka
     sie klamra "L". Odejmujemy tor etykiety z .marked (3.5rem) i wlasny
     padding kolumny tresci. */
  .o-nas__close {
    margin-top: clamp(3rem, 4.5vw, 3.75rem);
    margin-left: calc(-3.5rem - clamp(2rem, 3.4vw, 3.25rem));
  }
}