/* 02-baza-i-uklad.css: Baza (reset, typografia, fokus) i układ: kontener, sekcje, tła, nagłówki sekcji, dwie kolumny.
   Style globalne motywu QS GPS; zasady i spis plików w 01-tokeny.css. */

/* Baza */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px);scrollbar-gutter:stable;overflow-x:clip}
body{margin:0;font-family:var(--font);font-size:var(--fs-body);line-height:1.65;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.12;letter-spacing:-.025em;font-weight:800}
h1{font-size:var(--fs-h1);letter-spacing:-.035em}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em}
p,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
[id]{scroll-margin-top:calc(var(--header) + 12px)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
/* Na niebieskim tle (pasek górny, plansze CTA, karta wyróżniona) obwódka biała */
:is(.topbar,.cta,.form-aside,.prod--accent,.wiedza__cta) :focus-visible{outline-color:var(--white)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-60px;z-index:200;padding:12px 18px;border-radius:var(--r-xs);background:var(--navy-2);color:var(--white);font-weight:700;transition:top .2s}
.skip-link:focus{top:12px}
/* Wyróżnione słowa w nagłówku: <span class="grad"> */
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Układ */
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--section)}
.section--tight{padding-block:clamp(56px,7vw,96px)}
/* Tła sekcji: na przemian białe i jasnoniebieskie */
.bg-white{background:var(--white)}
.bg-pale{background:var(--pale)}
/* Dwie sekcje o tym samym tle pod rząd: bez podwójnego odstępu */
.bg-white+.bg-white,.bg-pale+.bg-pale,.page-hero+.bg-white{padding-top:0}
/* Blok kontaktowy (parts/kontakt.php, biały) po białej sekcji: jasnoniebieskie tło, żeby tła dalej szły na przemian (właściciel 29.09) */
.bg-white+.section--kontakt{background:var(--pale);padding-top:var(--section)}
/* Nagłówek sekcji: <div class="head"><h2>…</h2><p>…</p></div> */
.head{max-width:780px;margin-bottom:var(--head-gap)}
.head--center{margin-inline:auto;text-align:center}
.head p{max-width:64ch;margin-top:18px;font-size:1.1rem}
.lead{font-size:var(--fs-lead)}
h2+.lead{margin-top:20px}
.lead+.lead{margin-top:16px}
.lead strong{color:var(--ink)}
/* Link w tekście (akapit, punkt listy): niebieski, podkreślony. Niska waga selektora (:where), więc komponenty mogą go nadpisać */
main :where(p,li) a:where(:not([class])){color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-thickness .15s}
main :where(p,li) a:where(:not([class])):hover{text-decoration-thickness:2px}
/* Dwie kolumny: tekst + grafika */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-lg);align-items:center}
.split+.split{margin-top:clamp(56px,7vw,96px)}
/* split--top: długi tekst obok obrazu; obraz wyrównany do góry i przyklejony przy przewijaniu */
.split--top{align-items:start}
@media (min-width:901px){.split--top>:is(.media,.embed,.gallery,.fact-stack){position:sticky;top:calc(var(--header) + 24px)}}
@media (max-width:900px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split--rev>:last-child{order:-1}
  /* kolejne bloki jeden pod drugim: linia oddziela je, żeby obraz nie wyglądał jak część bloku wyżej */
  .split+.split{margin-top:48px;padding-top:48px;background:linear-gradient(var(--line-strong),var(--line-strong)) var(--gutter) 0/calc(100% - 2*var(--gutter)) 1px no-repeat}
}