/* Podstrona „O nas" — nagłówek, akapit wprowadzający i trzy sylwetki.
   Ładowana wyłącznie przez /o-nas. Kolory, siatka i rytm pionowy (--sec-gap)
   idą ze style.css — tutaj są tylko rzeczy, których nie ma nigdzie indziej. */

.on-main{padding:14px 0 calc(var(--sec-gap)/2)}

/* Akapit wprowadzający. Świadomie większy od zwykłego tekstu (19px w .onas na
   stronie głównej) — to jest zdanie otwierające, ma się czytać jak lead, a nie
   jak kolejny akapit. Na całą szerokość .wrap (decyzja użytkownika). */
.on-lead{font-family:'Inter',sans-serif;font-weight:400;font-size:30px;line-height:1.5;
  letter-spacing:-.2px;color:var(--ink-soft);width:100%;margin:30px 0 0}

/* Wariant XL leadu — większy stopień i węższa kolumna (życzenie użytkownika).
   Oba parametry tylko na desktopie; niżej wchodzą reguły z media queries. */
.on-lead--xl{font-size:50px;line-height:1.3;width:85%}
/* Węższa kolumna dla wybranego leadu w normalnym stopniu — tylko desktop. */
.on-lead--85{width:85%}
/* Węższa kolumna dla wybranego zwykłego akapitu — też tylko desktop. */
.on-body--80{width:80%}

/* Trzy sylwetki obok siebie.
   minmax(0,1fr), nie 1fr — inaczej najdłuższe słowo w kolumnie rozpycha ją
   ponad przydzieloną szerokość i kolumny przestają być równe. */
/* Odstęp od akapitu wprowadzającego celowo mniejszy niż --sec-gap (136px) —
   to nie jest nowa sekcja, tylko ciąg dalszy tej samej myśli. */
.on-team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
  margin-top:48px;align-items:stretch}

/* Oprawa karty wspólna z .k-info/.k-formcard z podstrony kontaktu. */
.on-card{padding:38px 36px;border-radius:24px;
  background:linear-gradient(135deg,#faf8f2 0%,#f5f1e8 100%);
  border:1px solid rgba(184,148,78,.28);box-shadow:0 12px 32px rgba(43,38,32,.07);
  display:flex;flex-direction:column}

/* Imię ze złotą kreską pod spodem — jak .k-h w karcie kontaktu. */
.on-name{font-family:'Inter',sans-serif;font-weight:600;font-size:24px;color:var(--title-dark);
  margin:0;padding-bottom:12px;position:relative}
.on-name::after{content:'';position:absolute;left:0;bottom:0;width:52px;height:2px;background:#c49a5a}

.on-card p{color:var(--ink);font-size:18px;line-height:1.75;margin:20px 0 0}

/* Rząd zdjęć pod sylwetkami. Wszystkie trzy pliki są 16:9, więc kadr trzyma się
   sam — aspect-ratio + cover zostaje na wypadek podmiany na zdjęcie o innych
   proporcjach, żeby rząd nie zrobił się poszarpany. */
.on-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:26px}
/* Zdjęcia otwierają się we wspólnym lightboxie (js/lightbox.js łapie
   `.on-photos a`) — stąd kadr na <a>, nie na <img>. */
.on-photos a{display:block;border-radius:22px;overflow:hidden;background:#e7e2d7;cursor:zoom-in}
.on-photos img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform .6s ease}
.on-photos a:hover img{transform:scale(1.05)}

/* Wariant dwóch zdjęć w rzędzie. */
.on-photos--2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Zdjęcia po akapicie — 26px (odstęp „w obrębie bloku") byłoby tu za ciasno. */
.on-body + .on-photos{margin-top:48px}
/* Rząd zdjęć pod kafelkami zespołu — odstęp na życzenie użytkownika. */
.on-team + .on-photos{margin-top:60px}
/* Para zimowych zdjęć — większy oddech od akapitu nad nią (życzenie użytkownika).
   Musi stać PO regule ogólnej: ta sama waga selektora, decyduje kolejność. */
.on-body + .on-photos--2{margin-top:108px}

/* Wariant 1/3 + 2/3. Zdjęcia mają różne proporcje (poziome i pionowe), więc
   zamiast wspólnego aspect-ratio dostają wspólną WYSOKOŚĆ, a kadr dobiera
   object-fit — inaczej albo pionowe zostałoby paskiem, albo rząd rozjechałby
   się na dwie różne wysokości. */
.on-photos--12{grid-template-columns:1fr 2fr}
.on-photos--12 a{height:420px}
.on-photos--12 img{height:100%;aspect-ratio:auto}
/* Jeźdźcy stoją w dolnej części kadru — środek cięcia przesunięty niżej. */
.on-photos--12 a:last-child img{object-position:center 62%}
.on-photos--12 + .on-lead{margin-top:32px}
@media(max-width:820px){
  /* Po zwinięciu do jednej kolumny wymuszona wysokość nie ma sensu — zdjęcia
     wracają do własnych proporcji. */
  .on-photos--12{grid-template-columns:1fr}
  .on-photos--12 a{height:auto}
}

/* Akapit pod zdjęciami dostaje margines od nich; ten pierwszy (pod nagłówkiem)
   ma swój własny odstęp od .sec-title. */
.on-photos + .on-lead{margin-top:60px}
/* Po rzędzie dwóch zdjęć odstęp mniejszy — tam tekst jest ciągiem dalszym
   opowieści, a nie nową sekcją. */
.on-photos--2 + .on-lead{margin-top:108px}

/* Zwykły akapit — dalszy ciąg tekstu pod leadem, w normalnej wielkości. */
.on-body{color:var(--ink);font-size:18px;line-height:1.8;margin:24px 0 0}

/* Zdjęcie na całą szerokość kolumny treści. Kadr przycięty do 21:9 —
   oryginał jest panoramiczny (1400×619), a bez ograniczenia wysokości
   na szerokim ekranie zajmowałby pół widoku. */
.on-wide{margin-top:48px;border-radius:26px;overflow:hidden;background:#e7e2d7}
/* Zdjęcie po zwykłym akapicie zamyka blok tekstu — dostaje wyraźniejszy oddech
   (życzenie użytkownika). Zdjęcie po leadzie zostaje na 48px. */
.on-body + .on-wide{margin-top:108px}
/* Tekst po zdjęciu potrzebuje więcej powietrza niż domyślne 30px pod nagłówkiem. */
.on-wide + .on-lead{margin-top:56px}
/* Wariant XL dostaje na desktopie pełne 108px (życzenie użytkownika);
   na mobile wraca do 56px — patrz media query niżej. */
.on-wide + .on-lead--xl{margin-top:108px}
.on-wide img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;display:block}
/* Wariant dla zdjęć bliskich 3:2 — przy 21:9 zostawałby z nich pasek. */
.on-wide--169 img{aspect-ratio:16/9}
/* Zdjęcie karczmy — na desktopie ten sam duży odstęp co przy pozostałych
   zdjęciach zamykających blok tekstu (życzenie użytkownika). */
.on-wide--169{margin-top:108px}
@media(max-width:820px){
  /* Na wąskim ekranie 21:9 zostawia z ludzi paseczek — wracamy do proporcji pliku. */
  .on-wide img{aspect-ratio:auto}
}

@media(max-width:1100px){
  /* Lead zostaje na 30px aż do tabletu (decyzja użytkownika) — schodzi dopiero
     poniżej 900px, gdzie linia robi się za krótka. */
  .on-card{padding:32px 30px}
}
@media(max-width:1100px){
  .on-lead--xl{font-size:38px}
}
@media(max-width:900px){
  .on-lead{font-size:23px}
  /* Poniżej tabletu obie węższe kolumny wracają na pełną szerokość — 80%
     przy wąskim ekranie zostawia bezsensowny margines. */
  .on-lead--xl{font-size:28px;width:100%}
  .on-wide + .on-lead--xl{margin-top:56px}
  .on-wide--169{margin-top:56px}
  .on-lead--85{width:100%}
  /* Odwrotnie niż wyżej: ten akapit ma być węższy WŁAŚNIE na mobile
     (życzenie użytkownika) — na desktopie zostaje na pełnej szerokości. */
  .on-lead--85m{width:85%}
  .on-body--80{width:100%}
  /* Trzy kolumny na tablecie robią się na tyle wąskie, że tekst łamie się co
     kilka słów — schodzimy od razu do jednej kolumny. */
  .on-team{grid-template-columns:1fr;gap:20px}
  .on-card{padding:30px 26px}
  /* Zdjęcia zostają w rzędzie dłużej niż tekst — obrazkowi wąska kolumna nie
     szkodzi tak jak akapitowi. */
  .on-photos{gap:16px;margin-top:20px}
}
/* MOBILE: kafelki zespołu jako SLAJDER (jedna karta na ekran).
   Natywny scroll-snap, zero JS — ten sam wzorzec co „Inne wydarzenia"
   w event.css. Karty wychodzą poza padding .wrap ujemnym marginesem,
   żeby sąsiednia karta wystawała zza krawędzi jako sygnał „przesuń". */
@media(max-width:700px){
  .on-team,
  .on-team + .on-photos,
  .on-photos--2,
  .on-photos--12{display:flex;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:14px;margin-inline:-24px;padding-inline:24px;
    scrollbar-width:none}
  .on-team::-webkit-scrollbar,
  .on-team + .on-photos::-webkit-scrollbar,
  .on-photos--2::-webkit-scrollbar,
  .on-photos--12::-webkit-scrollbar{display:none}
  .on-card,
  .on-team + .on-photos a,
  .on-photos--2 a,
  .on-photos--12 a{flex:0 0 calc(100% - 42px);scroll-snap-align:center}
  /* W slajderze oba zdjęcia (poziome i pionowe) dostają ten sam kadr 4:3 —
     inaczej wysokość taśmy skakałaby przy przewijaniu. */
  .on-photos--12 a{height:auto}
  .on-photos--12 img{height:auto;aspect-ratio:4/3}
}
@media(max-width:640px){
  /* .wrap zmienia tu padding z 24 na 20px — inaczej pierwszy slajd byłby
     przesunięty względem tekstu nad nim. */
  .on-team,
  .on-team + .on-photos,
  .on-photos--2,
  .on-photos--12{margin-inline:-20px;padding-inline:20px}
}

@media(max-width:560px){
  .on-lead{font-size:20px;margin-top:22px}
  .on-body{font-size:16.5px}
  .on-name{font-size:22px}
  /* Na telefonie trzy kadry obok siebie mają po ~110px — nic na nich nie widać. */
  .on-photos{grid-template-columns:1fr}
}