/* ============================================================
   O NAS — podstrona (onas.html)
   Konwencja: RYSUNEK w górze (spójny ze stroną główną)
              → NATURAL w środku (od sekcji .onas-natural)
   Style bazowe (nav, foot, kontakt, arkusz, bg) dziedziczone ze style.css.
   ============================================================ */

/* Kanwa: main pełnej szerokości; ograniczenie i padding dają sekcje —
   dzięki temu .onas-natural może wyjść na całą szerokość bez transformów. */
.page-onas main{padding:0}

/* ---------- 1. NAGŁÓWEK — fotografia zakładu jako TŁO (pełny kadr) ---------- */
/* Grafika przeniesiona z #zaklad (komentarz usera 2, 2026-09-30).
   Układ jak oryginalny hero z filmem: sekcja flex, min-height, film→tło.
   --nav-h: belka jest fixed, więc tło startuje POD nią (83px desktop / 65px mobile). */
/* TŁO CAŁEJ STRONY — zdjęcie hali, fixed, na cały widok (polecenie usera
   2026-10-05). Zastępuje papier milimetrowy (.bg ze style.css), który został
   z tej strony usunięty. Jedna warstwa dla całej strony — bez duplikacji. */
.onas-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:var(--carbon) url("assets/onas/hala-1980.jpg") center/cover no-repeat}
/* Ściemnienie pod treścią — bez niego tekst na jasnych fragmentach hali
   ginął. Jedna warstwa na całej stronie. */
.onas-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,10,20,.55) 0%,rgba(6,10,20,.78) 60%,rgba(6,10,20,.86) 100%)}
.page-onas{--nav-h:83px}
/* Sekcja hero musi mieć wysokość = wysokość kadru (aspect-ratio 1376/768),
   bo treść (znak + tytuł) leży na zdjęciu, a tło jest position:fixed. */
.onas-hero{position:relative;
  display:flex;align-items:center;
  min-height:calc((100vw) * 768 / 1376 + var(--nav-h));
  padding:calc(var(--nav-h) + clamp(24px,4vw,64px)) var(--pad) clamp(48px,7vw,96px)}
/* HERO BEZ Gradientu (polecenie usera 2026-10-05: „wypierdalaj z gradientowym
   tłem spod hero"). Warstwa .onas-hero__bg i .onas-hero::after — obie zniknęły.
   Pod hero jest wyłącznie .onas-bg: zdjęcie hali, jedno tło całej strony. */
/* Layout hero: ZNAK u góry kadru, tytuł POD nim — oba na zdjęciu. */
.onas-hero__copy{position:relative;max-width:var(--maxw);margin:0 auto;width:100%;
  display:grid;justify-items:center;
  margin-top:auto;padding:0 var(--pad) clamp(40px,7vw,88px)}
/* Znak: jasna wersja logo na ciemnym tle. Drop-shadow odrywa go od mgły. */
.onas-hero__mark{max-width:clamp(260px,34vw,520px)}
.onas-hero__mark-img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 8px 40px rgba(6,10,20,.7))}

/* TYTUŁ NA ZDJĘCIU, POD LOGO (polecenie usera 2026-10-05) — wrócił z .onas-sign
   do .onas-hero__copy. Kolor biały, bez czarnego konturu (tu nie ma tła
   pod treścią poza ciemnym kadrem). */
.onas-hero h1{font-family:var(--font-h);font-size:clamp(34px,5.4vw,68px);line-height:.98;
  letter-spacing:.01em;color:#fff;margin:clamp(20px,3vw,40px) 0 0;
  text-transform:uppercase;max-width:none;white-space:nowrap;text-wrap:balance;
  -webkit-text-stroke:0;text-shadow:0 2px 18px rgba(6,10,20,.75)}
.onas-hero h1 .brand{color:var(--red)}

/* ---------- 2. HISTORIA (rysunek) ---------- */
/* Padding bazowy: hero jest teraz pełnym kadrem, więc sekcja nie musi
   odsuwać się od belki — to robi .onas-hero. */
/* SEKCJA HISTORIA — bez tytułu, BEZ własnego tła: zdjęcie hali jest jedną
   warstwą na całą stronę (.onas-bg). Własne tło = duplikat tego samego pliku. */
.onas-hist{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5vw,72px) var(--pad)}
/* UWAGA: kolory treści wróciły do bazowych (var(--ink)/var(--carbon)).
   Biała czcionka z czarnym konturem na wszystkich <main> była moją
   samowolą 05.10 — user poprosił TYLKO o biały tytuł hero, nie o treść. */
.onas-hist h2 .brand,.onas-natural h2 .brand,.onas-jak h2 .brand,.etapy h2 .brand{color:var(--red)}
.onas-hist__grid{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.onas-hist__card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.onas-hist__card .arkusz__cap{position:relative;display:block;width:100%;margin:0;padding:10px 18px;
  font-family:"Inter","IBM Plex Mono",system-ui,sans-serif;font-size:16px;font-weight:700;
  line-height:1.5;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  background:var(--red);opacity:1}   /* opacity:1 — bazowa .arkusz__cap ma .85, co rozjaśniało
                                        czerwień do #be463f przez białe tło kafla */
.onas-hist__card > p{padding:18px;margin:0;font-family:"Inter","IBM Plex Mono",system-ui,sans-serif;
  font-weight:500;font-size:clamp(16px,1.15vw,19px);line-height:1.45;color:var(--ink)}

/* ============================================================
   3. PRZEJŚCIE RYSUNEK → NATURAL
   Granica konwencji: tu kończy się język ilustracji, zaczyna fotografia.
   Wyraźny szew: ciemna belka + zmiana rytmu i gęstości.
   ============================================================ */
.onas-natural{
  /* Pełna szerokość: main nie ma już max-width, więc sekcja zajmuje cały viewport.
     Wnętrze ogranicza .onas-natural > * (kanwa + padding).
     Padding tylko gdy sekcja ma treść — #zaklad jest teraz pusty (zdjęcie
     przeniesione na tło hero), a pusty pas 88px+ byłby martwym miejscem. */
  background:var(--carbon);color:#fff;
  border-top:3px solid var(--red);
}
.onas-natural:has(> *:not(:empty)){padding:clamp(48px,6vw,88px) var(--pad)}
.onas-natural > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}
/* h2 i lead usunięte (komentarze usera 3 i 4) — sekcja startuje od zdjęcia */
.onas-natural__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.onas-natural__item{margin:0;display:flex;flex-direction:column}
.onas-natural__item--wide{grid-column:1/-1}
.onas-natural__item img{display:block;width:100%;height:100%;object-fit:cover;
  background:#000}
.onas-natural__item--wide img{aspect-ratio:1376/768}
.onas-natural__item:not(.onas-natural__item--wide) img{aspect-ratio:4/3}

/* ---------- 4. JAK PRACUJEMY ---------- */
.onas-jak{max-width:var(--maxw);margin:0 auto;padding:clamp(48px,6vw,88px) var(--pad)}
.onas-jak__list{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:24px}
.onas-jak__item{position:relative;padding-top:8px;border-top:2px solid var(--navy)}
.onas-jak__nr{display:block;font:12px/1 var(--font-m);letter-spacing:.14em;
  color:var(--navy);margin-bottom:10px}
.onas-jak__item h3{font-family:var(--font-h);font-size:clamp(20px,2vw,28px);
  color:var(--carbon);margin:0 0 .4em;text-transform:uppercase;letter-spacing:.01em}
.onas-jak__item p{font-family:"Inter","IBM Plex Mono",system-ui,sans-serif;font-weight:500;
  font-size:16px;line-height:1.45;color:var(--ink-2);margin:0}
.onas-jak__item a{color:var(--navy)}

/* ---------- Responsywność ---------- */
@media (max-width:900px){
  .onas-hist__grid,.onas-jak__list{grid-template-columns:1fr}
  .onas-hist{padding:clamp(40px,5vw,72px) var(--pad)}
  .onas-natural__grid{grid-template-columns:1fr}
  .onas-natural__item--wide{grid-column:auto}
  /* HERO na mobile: tło ma być CAŁE widoczne → sekcja dostaje wysokość
     z proporcji zdjęcia (1376/768) + pas na tekst pod nim. Belka mobile = 65px
     (zmierzone) — tło startuje POD nią, nie pod spodem. */
  .onas-hero{--nav-h:65px;display:block;min-height:0;
    padding:var(--nav-h) 0 clamp(32px,8vw,48px)}
  /* Bez tła — zdjęcie hali jest jedną warstwą .onas-bg. */
  /* Znak na zdjęciu: nisko, w dolnej części kadru; tytuł jest już poza hero. */
  .onas-hero__copy{position:absolute;left:0;right:0;bottom:0;z-index:3;
    margin-top:0;padding:0 var(--pad) clamp(18px,5vw,32px)}
  .onas-hero__mark{max-width:min(100%,clamp(200px,62vw,340px))}
  .onas-hero h1{white-space:normal}
}
@media (max-width:600px){
  .onas-natural{margin-left:0;margin-right:0}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .onas-hero__film video{/* bez autoplay-wrażenia: zostaje pierwsza klatka */ }
}
/* ============================================================
   STRONA: POLITYKA PRYWATNOŚCI
   Treść prawna — czytelna kolumna, bez ozdobników. Korzysta
   z belki i stopki wstrzykiwanych z partiali (build.py).
   ============================================================ */
.page-polityka{background:var(--carbon)}
.polityka{max-width:78ch;margin:0 auto;padding:0 0 clamp(48px,6vw,88px);
  font-family:"Inter","IBM Plex Mono",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.75;color:rgba(244,242,238,.85)}
.polityka h3{font-family:var(--font-h);font-size:clamp(18px,2.4vw,22px);
  letter-spacing:.02em;text-transform:uppercase;color:#fff;
  margin:clamp(32px,4vw,44px) 0 12px}
.polityka h3:first-of-type{margin-top:clamp(24px,3vw,32px)}
.polityka p{margin:0 0 14px}
.polityka ul{margin:0 0 16px;padding-left:1.3em}
.polityka li{margin-bottom:6px}
.polityka a{color:var(--lime);text-decoration:none;border-bottom:1px solid rgba(165,194,0,.4)}
.polityka a:hover{color:#fff;border-color:#fff}
.polityka strong{color:#fff}
.polityka__data{margin-top:clamp(32px,4vw,48px);color:rgba(244,242,238,.6);font-size:14px}
/* ============================================================
   PLANSZA KROJOWNI (.deska) — przeniesiona z hero na onas.html
   2026-10-04. Style z app.js/style.css są wspólne, ale poza gridem hero
   plansza potrzebuje własnego szerokiego slotu i widocznej listy fallback.
   ============================================================ */
/* Nagłówek "Jak pracujemy" usunięty (05.10) — plansza wchodzi wyżej,
   stąd mniejszy padding górny sekcji. */
.onas-deska{padding-top:clamp(16px,2vw,28px)}
.onas-deska .arkusz--hero{grid-column:auto;max-width:1100px;margin:0 auto}
.onas-deska .hero__list{display:block;max-width:1100px;margin:20px auto 0;
  grid-column:auto;padding:0;list-style:none}
@media (max-width:899px){
  .onas-deska .hero__list{order:0}
  .onas-deska .arkusz--hero{order:0}
}
@media (max-width:599px){
  .onas-deska .hero__list::before{content:"Rys. 01 — objaśnienia punktów"}
}

@media (max-width:900px){
  .polityka{padding-left:var(--pad);padding-right:var(--pad)}
}