/* ==========================================================================
   Termoklina — style.css (krok 2: system projektowy)
   Tylko tryb jasny. Czcionki lokalne (fonts/, SIL OFL). Zero adresów zewnętrznych.
   Grafiki „tafla” i „separator” (warstwy wody + linia termokliny) — rysowane kodem, AI.
   ========================================================================== */

/* --- 1. Czcionki (podzbiory latin + latin-ext, polskie znaki w latin-ext) --- */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/newsreader-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/newsreader-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/source-sans-3-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/source-sans-3-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/source-sans-3-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/source-sans-3-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* --- 2. Tokeny --- */
:root{
  /* paleta „Jezioro” (bez zmian względem logo 1b) */
  --c-glebia:#1E3B36;   /* tekst, ciemne sekcje */
  --c-woda:#2F6F6A;     /* odnośniki, przyciski, fokus */
  --c-trzcina:#8FB9A8;  /* tła, plakietki; tekst tylko na --c-glebia */
  --c-len:#F6F3EA;      /* tło strony */
  --c-zloto:#DBA022;    /* linia termokliny; tekst tylko na --c-glebia */
  --c-biel:#FFFFFF;
  --c-tekst:var(--c-glebia);
  --c-tekst-pom:#4E5F5A; /* tekst pomocniczy na bieli/lnie */
  --c-linia:#D9D3C3;     /* linie dekoracyjne, obramowania kart (nie nośnik informacji) */

  /* kroje */
  --f-naglowek:"Newsreader", Georgia, "Times New Roman", serif;
  --f-tekst:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* skala (telefon → komputer) */
  --t-h1:clamp(2.25rem, 1.6rem + 2.6vw, 4rem);      /* 36 → 64 px */
  --t-h2:clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);   /* 28 → 40 px */
  --t-h3:clamp(1.25rem, 1.15rem + .45vw, 1.5rem);   /* 20 → 24 px */
  --t-wstep:clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); /* 18 → 21 px */
  --t-p:clamp(1rem, .96rem + .2vw, 1.125rem);       /* 16 → 18 px */
  --t-maly:.875rem;                                 /* 14 px — minimum, także etykiety */

  /* odstępy i geometria */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem;
  --r-maly:4px; --r:8px;
  --szer:72rem;
  --margines:clamp(1rem, 4vw, 2.5rem);
  --cel:44px; /* minimalny cel dotyku */
}

/* --- 3. Podstawa --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--c-len);color:var(--c-tekst);font-family:var(--f-tekst);font-size:var(--t-p);line-height:1.6;overflow-wrap:break-word}
img,svg{display:block;max-width:100%}
h1,h2,h3,.t-h1,.t-h2,.t-h3{font-family:var(--f-naglowek);font-weight:500;line-height:1.15;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1,.t-h1{font-size:var(--t-h1);line-height:1.05}
h2,.t-h2{font-size:var(--t-h2)}
h3,.t-h3{font-size:var(--t-h3);line-height:1.25}
p{margin:0;max-width:68ch;text-wrap:pretty}
strong{font-weight:600}
small,.drobny{font-size:var(--t-maly);line-height:1.5}
code{font-family:var(--f-mono);font-size:inherit}
a{color:var(--c-woda);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--c-glebia);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--c-woda);outline-offset:3px;border-radius:2px}
.ciemne :focus-visible{outline-color:var(--c-zloto)}
.pom{color:var(--c-tekst-pom)}

.kontener,.container{width:min(calc(100% - 2 * var(--margines)), var(--szer));margin-inline:auto}
.sekcja{padding-block:clamp(3rem, 2rem + 4vw, 5.5rem)}
.sekcja--biala{background:var(--c-biel)}
.ciemne{background:var(--c-glebia);color:var(--c-len)}
.ciemne a{color:var(--c-len)}
.ciemne a:hover{color:var(--c-zloto)}
.ciemne .pom{color:var(--c-trzcina)}
.sekcja__naglowek{display:grid;gap:var(--s-3);max-width:46rem;margin-bottom:var(--s-6)}
.etykieta{font-family:var(--f-tekst);letter-spacing:.08em;font-size:var(--t-maly);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-woda);line-height:1.4}
.ciemne .etykieta{color:var(--c-zloto)}
.wstep{font-size:var(--t-wstep);line-height:1.5}
.stos{display:grid;gap:var(--s-4);align-content:start}
.siatka{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr))}
.dwie-kolumny{display:grid;gap:var(--s-7) var(--s-6);grid-template-columns:repeat(auto-fit, minmax(min(100%, 22rem), 1fr))}

.pomin{position:absolute;left:var(--s-4);top:-10rem;z-index:10;padding:var(--s-3) var(--s-4);background:var(--c-biel);color:var(--c-glebia);font-weight:600;border-radius:var(--r-maly)}
.pomin:focus{top:var(--s-4)}

/* --- 4. Nagłówek i menu ---
   Bez JS: menu to zwykła lista pod logo. Z JS (main.js dodaje .js): na telefonie rozwijane przyciskiem. */
.naglowek{background:var(--c-len);border-bottom:1px solid var(--c-linia)}
.naglowek__wnetrze{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-5);min-height:4.5rem;padding-block:var(--s-3)}
.naglowek__logo{display:inline-flex;align-items:center;min-height:var(--cel)}
.naglowek__logo img{height:2.25rem;width:auto}
.menu{width:100%}
.menu ul{list-style:none;margin:0 calc(-1 * var(--s-3));padding:0;display:flex;flex-wrap:wrap}
.menu a{display:flex;align-items:center;min-height:var(--cel);padding:0 var(--s-3);color:var(--c-glebia);text-decoration:none;font-weight:600}
.menu a:hover{text-decoration:underline;text-decoration-thickness:2px}
.menu a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--c-zloto)}
.menu-przycisk{display:none;align-items:center;gap:var(--s-3);min-height:var(--cel);min-width:var(--cel);padding:0 var(--s-4);border:1px solid var(--c-woda);border-radius:var(--r-maly);background:transparent;color:var(--c-glebia);font:inherit;font-weight:600;cursor:pointer}
.menu-przycisk:hover{background:var(--c-biel)}
.menu-przycisk__ikona{width:18px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor, 0 6px 0 currentColor}
.menu-przycisk[aria-expanded="true"] .menu-przycisk__ikona{box-shadow:none}
@media (max-width:47.99rem){
  .js .menu-przycisk{display:inline-flex}
  .js .menu{display:none}
  .js .menu.otwarte{display:block}
  .js .menu ul{flex-direction:column;margin:0;padding-block:var(--s-2);border-top:1px solid var(--c-linia)}
  .js .menu a{padding:0}
  .js .menu a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--c-zloto);padding-left:var(--s-4)}
}
@media (min-width:48rem){
  .menu{width:auto}
  .menu ul{margin:0}
  .naglowek__logo img{height:2.5rem}
}

/* --- 5. Przyciski i odnośniki --- */
.przyciski{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;min-width:var(--cel);padding:.625rem 1.375rem;border:2px solid transparent;border-radius:var(--r-maly);font:inherit;font-weight:600;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer}
.btn--glowny{background:var(--c-woda);color:var(--c-biel)}
.btn--glowny:hover{background:var(--c-glebia);color:var(--c-biel)}
.btn--drugi{background:transparent;color:var(--c-glebia);border-color:var(--c-woda)}
.btn--drugi:hover{background:var(--c-biel);color:var(--c-glebia);border-color:var(--c-glebia)}
.ciemne .btn--glowny{background:var(--c-zloto);color:var(--c-glebia)}
.ciemne .btn--glowny:hover{background:var(--c-len);color:var(--c-glebia)}
.ciemne .btn--drugi{color:var(--c-len);border-color:var(--c-trzcina)}
.ciemne .btn--drugi:hover{background:transparent;color:var(--c-len);border-color:var(--c-len)}
.link-strzalka{display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--cel);font-weight:600;color:var(--c-woda);text-decoration:none}
.link-strzalka:hover{color:var(--c-glebia);text-decoration:underline;text-decoration-thickness:2px}
.link-strzalka__s{transition:transform .15s ease}
.link-strzalka:hover .link-strzalka__s{transform:translateX(3px)}
.ciemne .link-strzalka{color:var(--c-zloto)}
.ciemne .link-strzalka:hover{color:var(--c-len)}
@media (prefers-reduced-motion:reduce){.link-strzalka__s{transition:none}}

/* --- 6. Motyw: warstwy wody + linia termokliny (SVG w HTML, kolory stąd) --- */
.tafla{width:100%;height:clamp(4.5rem, 3rem + 7vw, 9rem)}
.separator{width:100%;height:1.5rem;margin-block:var(--s-6)}
.tafla__w1{fill:var(--c-trzcina)}
.tafla__w2{fill:var(--c-woda)}
.tafla__w3{fill:var(--c-glebia)}
.tafla__linia{fill:none;stroke:var(--c-zloto);stroke-width:2;vector-effect:non-scaling-stroke}
.hero{background:var(--c-len);padding-top:clamp(3rem, 2rem + 6vw, 7rem)}
.hero__tresc{display:grid;gap:var(--s-5);max-width:48rem;padding-bottom:clamp(2rem, 1rem + 4vw, 4rem)}

/* --- 7. Plakietka i karta kursu --- */
.plakietka{display:inline-flex;align-items:center;align-self:flex-start;justify-self:start;min-height:1.75rem;padding:.125rem .625rem;border-radius:999px;background:var(--c-trzcina);color:var(--c-glebia);font-size:var(--t-maly);font-weight:600;line-height:1.3}
.karta{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-5);background:var(--c-biel);border:1px solid var(--c-linia);border-radius:var(--r)}
.karta__gora{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-3)}
.karta__stopka{margin-top:auto;padding-top:var(--s-2)}
.karta--wyrozniona{background:var(--c-glebia);color:var(--c-len);border-color:var(--c-glebia);box-shadow:inset 0 3px 0 var(--c-zloto)}
.karta--wyrozniona .plakietka{background:var(--c-zloto)}

/* --- 8. Lista kroków --- */
.kroki{list-style:none;margin:0;padding:0;counter-reset:krok;display:grid}
.kroki > li{counter-increment:krok;display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:var(--s-4);padding-block:var(--s-5);border-top:1px solid var(--c-linia)}
.kroki > li::before{content:counter(krok, decimal-leading-zero);font-family:var(--f-naglowek);font-size:1.75rem;line-height:1.1;color:var(--c-woda)}
/* kroki: telefon 1 kolumna; tablet 2 (lub 3 dla .kroki--5 → 3+2); od 1200 px 4 (lub 5) */
.kroki > li{align-content:start}
@media (min-width:48rem){
  .kroki{grid-template-columns:repeat(2, minmax(0,1fr));gap:0 var(--s-6)}
  .kroki--5{grid-template-columns:repeat(3, minmax(0,1fr))}
  .kroki > li{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:var(--s-3)}
}
@media (min-width:75rem){
  .kroki{grid-template-columns:repeat(4, minmax(0,1fr))}
  .kroki--5{grid-template-columns:repeat(5, minmax(0,1fr))}
}

/* --- 9. Lista kontrolna --- */
.lista-kontrolna{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.lista-kontrolna li{position:relative;padding-left:2.25rem}
.lista-kontrolna li::before{content:"";position:absolute;left:0;top:.15em;width:1.375rem;height:1.375rem;border:2px solid var(--c-woda);border-radius:var(--r-maly)}
.lista-kontrolna li::after{content:"";position:absolute;left:.5rem;top:calc(.15em + .25rem);width:.375rem;height:.7rem;border:solid var(--c-woda);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* --- 10. Tabela --- */
.tabela-wrap{overflow-x:auto}
.tabela{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabela caption{text-align:left;font-weight:600;padding-bottom:var(--s-3)}
.tabela th,.tabela td{padding:var(--s-3) var(--s-2);border-bottom:1px solid var(--c-linia);text-align:left;vertical-align:top}
.tabela th:first-child,.tabela td:first-child{padding-left:0}
.tabela th:last-child,.tabela td:last-child{padding-right:0}
.tabela thead th{font-size:var(--t-maly);font-weight:600;color:var(--c-tekst-pom);border-bottom:2px solid var(--c-glebia)}
.tabela td,.tabela tbody th{font-weight:400}
.tabela .kwota{text-align:right}
.tabela tfoot th,.tabela tfoot td{font-weight:600;border-top:2px solid var(--c-glebia);border-bottom:0}

/* --- 11. Pytania i odpowiedzi (bez JS) --- */
.faq{border-top:1px solid var(--c-linia);max-width:48rem}
.faq details{border-bottom:1px solid var(--c-linia)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:var(--cel);padding:var(--s-4) 0;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:1.5rem;text-align:center;font-family:var(--f-naglowek);font-size:1.75rem;line-height:1;color:var(--c-woda)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--c-woda)}
.faq__odp{padding-bottom:var(--s-5)}

/* --- 12. Strona tekstowa (polityka, regulamin) --- */
.tekst{max-width:46rem}
.tekst > * + *{margin-top:var(--s-4)}
.tekst h2{margin-top:var(--s-7)}
.tekst h3{margin-top:var(--s-6)}
.tekst ul,.tekst ol{padding-left:1.375rem}
.tekst li + li{margin-top:var(--s-2)}
.tekst li::marker{color:var(--c-woda)}
.wersja{color:var(--c-tekst-pom);font-size:var(--t-maly)}

/* --- 13. Stopka (po pasie .tafla) --- */
.stopka{padding-block:var(--s-6) var(--s-6)}
.stopka__siatka{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr))}
.stopka__logo{height:2.5rem;width:auto}
.stopka address{font-style:normal}
.stopka ul{list-style:none;margin:0;padding:0}
.stopka li a{display:inline-flex;align-items:center;min-height:var(--cel)}
.stopka__dol{max-width:none;margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--c-woda);color:var(--c-trzcina)}
.tafla--stopka{margin-top:var(--s-7)}

/* --- 14. Plansza podglądu (tylko podglad.html) --- */
.probki{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr))}
.probka{border:1px solid var(--c-linia);border-radius:var(--r);overflow:hidden;background:var(--c-biel)}
.probka__kolor{height:4.5rem;border-bottom:1px solid var(--c-linia)}
.probka__opis{display:grid;gap:2px;padding:var(--s-3);font-size:var(--t-maly)}
.u-tlo-glebia{background:var(--c-glebia)} .u-tlo-woda{background:var(--c-woda)} .u-tlo-trzcina{background:var(--c-trzcina)}
.u-tlo-len{background:var(--c-len)} .u-tlo-zloto{background:var(--c-zloto)} .u-tlo-biel{background:var(--c-biel)}
.u-tlo-pom{background:var(--c-tekst-pom)} .u-tlo-linia{background:var(--c-linia)}
.u-tekst-glebia{color:var(--c-glebia)} .u-tekst-woda{color:var(--c-woda)} .u-tekst-trzcina{color:var(--c-trzcina)}
.u-tekst-len{color:var(--c-len)} .u-tekst-zloto{color:var(--c-zloto)} .u-tekst-biel{color:var(--c-biel)} .u-tekst-pom{color:var(--c-tekst-pom)}
.aa{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:2.25rem;border-radius:var(--r-maly);border:1px solid var(--c-linia);font-weight:600}
.wynik-ok{font-weight:600}
.separator-tytul{margin-top:var(--s-7);margin-bottom:var(--s-3)}
.skala{display:grid}
.skala > div{display:grid;gap:var(--s-2);padding-block:var(--s-4);border-top:1px solid var(--c-linia)}
.ramka{padding:var(--s-5);border-radius:var(--r);border:1px solid var(--c-linia);background:var(--c-biel)}
.ramka.ciemne{border-color:var(--c-glebia)}

/* --- 15. Strona główna (krok 3) --- */
.hero__miejsce{color:var(--c-tekst-pom)}
.nazwa .wstep{max-width:46rem}
.sciezka{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-6)}
.sciezka > li{position:relative;display:grid;gap:var(--s-3);align-content:start;padding-left:var(--s-6);border-left:2px solid var(--c-zloto)}
.sciezka > li::before{content:"";position:absolute;left:-8px;top:.3rem;width:14px;height:14px;border-radius:50%;background:var(--c-woda);box-shadow:0 0 0 3px var(--c-len)}
.sciezka__programy{list-style:none;margin:0;padding:0;display:grid}
.sciezka__programy li{display:grid;gap:2px;padding-block:var(--s-2);border-top:1px solid var(--c-linia)}
.sciezka__obok{display:grid;gap:var(--s-1);padding:var(--s-3) var(--s-4);background:var(--c-biel);border:1px solid var(--c-linia);border-radius:var(--r)}
.sciezka__dalej{margin-top:var(--s-6)}
@media (min-width:48rem){.sciezka{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (min-width:64rem){
  .sciezka{grid-template-columns:repeat(4, minmax(0,1fr));gap:0}
  .sciezka > li{padding:var(--s-6) var(--s-5) 0 0;border-left:0;border-top:2px solid var(--c-zloto)}
  .sciezka > li::before{left:0;top:-8px}
}
.karta--szeroka{padding:clamp(1.5rem, 1rem + 3vw, 3.5rem)}
.owd{display:grid;gap:var(--s-6)}
@media (min-width:56rem){.owd{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:start}}
.lista-faktow{list-style:none;margin:0;padding:0;display:grid}
.lista-faktow li{padding-block:var(--s-3);border-top:1px solid var(--c-woda)}
.lista-faktow li:last-child{border-bottom:1px solid var(--c-woda)}
.prowadzi{display:grid;gap:var(--s-6)}
@media (min-width:48rem){.prowadzi{grid-template-columns:minmax(0,20rem) minmax(0,1fr);align-items:start}}
.zdjecie{margin:0;display:flex;align-items:flex-end;width:100%;max-width:20rem;aspect-ratio:4 / 5;padding:var(--s-4);background:var(--c-linia);border-radius:var(--r);color:var(--c-glebia);font-size:var(--t-maly)}
.lista-kontrolna--duza{gap:var(--s-6)}
.lista-kontrolna--duza li{padding-left:2.75rem;display:grid;gap:var(--s-2)}
.lista-kontrolna--duza li::before{top:.2rem}
.lista-kontrolna--duza li::after{top:.45rem}
.tafla--na-bieli{background:var(--c-biel)}
.kontakt__tresc{display:grid;gap:var(--s-5);max-width:46rem}
.mail-duzy{display:inline-flex;align-items:center;min-height:var(--cel);font-size:var(--t-wstep);font-weight:600}
.stopka--po-ciemnej{border-top:1px solid var(--c-woda)}

/* --- 16. Podstrony: nagłówek strony (.page, wstawia skrypt) i karta kursu (krok 4) ---
   .page zakłada: <section class="page"><div class="container"><p>nadtytuł</p><h1>…</h1><p>lead</p></div></section> */
.page{background:var(--c-len);padding-block:clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1rem + 3vw, 3.5rem);border-bottom:1px solid var(--c-linia);box-shadow:inset 0 -3px 0 var(--c-zloto)}
.page .container{display:grid;gap:var(--s-4)}
.page .container > p:first-child,.page__nadtytul{font-size:var(--t-maly);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-woda);line-height:1.4}
.page h1 + p,.page__lead{font-size:var(--t-wstep);line-height:1.5;max-width:40rem}
.fakty{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);grid-template-columns:repeat(2, minmax(0,1fr))}
.fakty > li:last-child:nth-child(odd){grid-column:1 / -1}
.fakt{display:grid;gap:var(--s-2);align-content:start;padding:var(--s-4);background:var(--c-biel);border:1px solid var(--c-linia);border-top:3px solid var(--c-woda);border-radius:var(--r)}
.fakt__opis{font-size:var(--t-maly);line-height:1.4;color:var(--c-tekst-pom)}
.fakt__duzy{font-family:var(--f-naglowek);font-weight:500;font-size:clamp(1.5rem, 1rem + 1.2vw, 2.25rem);line-height:1.1}
@media (min-width:48rem){
  .fakty{grid-template-columns:repeat(4, minmax(0,1fr))}
  .fakty--5{grid-template-columns:repeat(5, minmax(0,1fr))}
  .fakty > li:last-child:nth-child(odd){grid-column:auto}
}
.cena{display:grid;gap:var(--s-4)}
.cena > *{max-width:40rem}
.tabela tbody th{padding-right:var(--s-4)}
.uwaga{padding:var(--s-4) var(--s-5);background:var(--c-biel);border:1px solid var(--c-linia);border-radius:var(--r);max-width:48rem}
.kroki--zdania > li::before{font-size:1.5rem}
.zapis{background:var(--c-len)}
.zapis--po-bieli{background:var(--c-biel)}
.zapis .tafla{display:block}

/* --- 17. Strona /kursy (krok 5) --- */
.kursy-siatka{display:grid;gap:var(--s-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:48rem){
  .kursy-siatka{grid-template-columns:repeat(2, minmax(0,1fr))}
  .kursy-siatka > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media (min-width:64rem){
  .kursy-siatka{grid-template-columns:repeat(3, minmax(0,1fr))}
  .kursy-siatka > :last-child:nth-child(odd){grid-column:auto}
}
.plakietki{display:flex;flex-wrap:wrap;gap:var(--s-2)}

/* --- 18. Strona tekstowa (.prose), 404 i plansza „wkrótce” (krok 6) --- */
.prose{width:min(calc(100% - 2 * var(--margines)), var(--szer));margin-inline:auto;padding-block:clamp(2.5rem, 1.5rem + 3vw, 4.5rem)}
.container .prose,.kontener .prose{width:auto;padding-block:0}
.prose > *{max-width:70ch;margin-block:0}
.prose > * + *{margin-top:var(--s-4)}
.prose > h2{margin-top:var(--s-7)}
.prose > h3{margin-top:var(--s-6)}
.prose > h2 + *,.prose > h3 + *{margin-top:var(--s-3)}
.prose > :first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.5rem}
.prose li + li,.prose li > ul,.prose li > ol{margin-top:var(--s-2)}
.prose li::marker{color:var(--c-woda)}
.prose ol > li::marker{font-weight:600}
.prose hr{border:0;border-top:1px solid var(--c-linia);margin-block:var(--s-6)}
/* tabela przewija się wewnątrz siebie, nie cała strona */
.prose table{display:block;width:max-content;max-width:100%;overflow-x:auto;border-collapse:collapse;font-variant-numeric:tabular-nums;-webkit-overflow-scrolling:touch}
.prose caption{text-align:left;font-weight:600;padding-bottom:var(--s-3)}
.prose th,.prose td{min-width:8rem;padding:var(--s-3) var(--s-4) var(--s-3) 0;border-bottom:1px solid var(--c-linia);text-align:left;vertical-align:top}
.prose th:last-child,.prose td:last-child{padding-right:0}
.prose thead th{font-size:var(--t-maly);font-weight:600;color:var(--c-tekst-pom);border-bottom:2px solid var(--c-glebia)}
.prose tbody th{font-weight:600}
.muted{color:var(--c-tekst-pom);font-size:var(--t-maly);line-height:1.5}
.prose__nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4)}
.prose > .prose__nav{margin-top:var(--s-5)}
.prose__nav a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:var(--cel);padding:.625rem 1.375rem;border:2px solid var(--c-woda);border-radius:var(--r-maly);font-weight:600;line-height:1.25;text-decoration:none;background:transparent;color:var(--c-glebia)}
.prose__nav a:hover{background:var(--c-biel);border-color:var(--c-glebia);color:var(--c-glebia)}
.prose__nav a:first-child{background:var(--c-woda);color:var(--c-biel)}
.prose__nav a:first-child:hover{background:var(--c-glebia);border-color:var(--c-glebia);color:var(--c-biel)}
.plansza-strona{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.plansza{flex:1 0 auto;display:grid;align-content:center;gap:var(--s-5);padding-block:clamp(3rem, 2rem + 5vw, 6rem)}
.plansza__logo{height:clamp(2.75rem, 2rem + 3vw, 4.5rem);width:auto}
.plansza .wstep{max-width:36rem}
.plansza__dol{background:var(--c-glebia);color:var(--c-len);padding-block:var(--s-5)}
.plansza__dol a{display:inline-flex;align-items:center;min-height:var(--cel);color:var(--c-len)}
.plansza__dol a:hover{color:var(--c-zloto)}
.plansza__dol .kontener{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-2) var(--s-5)}

/* ==========================================================================
   19. Formularz kontaktowy (krok 8) — prefiks kf-
   Stany włącza serwer: [aria-invalid="true"] na polu, .kf-blad i .kf-stan[data-stan] bez hidden.
   ========================================================================== */
:root{
  --kf-blad:#A3361F;               /* tekst błędu, obramowanie pola z błędem (6,77:1 na bieli) */
  --kf-blad-tlo:#FBEEEA;           /* tło komunikatu data-stan="blad" */
  --kf-obrys:var(--c-tekst-pom);   /* obramowanie pól (6,76:1 na bieli) */
}
.kf-formularz [hidden],.kf-stan[hidden],.kf-blad[hidden]{display:none !important}
.kf-uklad{display:grid;gap:var(--s-6);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:64rem){.kf-uklad{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--s-7)}}
.kf-karta{padding:clamp(1.25rem, .75rem + 2.5vw, 2.5rem);background:var(--c-biel);border:1px solid var(--c-linia);border-radius:var(--r)}
.kf-formularz{position:relative;display:grid;gap:var(--s-5)}
.kf-pole{display:grid;gap:var(--s-2)}
.kf-etykieta{font-weight:600;line-height:1.35}
.kf-pomoc{color:var(--c-tekst-pom);font-size:var(--t-p);line-height:1.5;max-width:none}
.kf-input{display:block;width:100%;min-height:48px;padding:.625rem .875rem;font:inherit;font-size:var(--t-p);line-height:1.4;color:var(--c-glebia);background-color:var(--c-biel);border:1px solid var(--kf-obrys);border-radius:var(--r-maly);-webkit-appearance:none;appearance:none}
.kf-input:hover{border-color:var(--c-glebia)}
.kf-input:focus-visible{outline:3px solid var(--c-woda);outline-offset:2px;border-color:var(--c-woda)}
.kf-input--dlugie{min-height:11rem;resize:vertical}
.kf-select{padding-right:2.75rem;cursor:pointer;background-image:linear-gradient(45deg, transparent 50%, var(--c-glebia) 50%),linear-gradient(135deg, var(--c-glebia) 50%, transparent 50%);background-position:calc(100% - 1.25rem) 52%, calc(100% - .875rem) 52%;background-size:.375rem .375rem;background-repeat:no-repeat}
.kf-input[aria-invalid="true"]{border-color:var(--kf-blad);box-shadow:inset 0 0 0 1px var(--kf-blad)}
.kf-input[aria-invalid="true"]:focus-visible{outline-color:var(--kf-blad)}
.kf-blad{display:flex;align-items:flex-start;gap:var(--s-2);margin:0;max-width:none;color:var(--kf-blad);font-size:var(--t-p);font-weight:600;line-height:1.45}
.kf-blad::before{content:"!" / "";flex:none;display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;margin-top:.12em;border-radius:50%;background:var(--kf-blad);color:var(--c-biel);font-size:.875rem;font-weight:700;line-height:1}
.kf-stan{padding:var(--s-4) var(--s-5);border:2px solid var(--c-woda);border-radius:var(--r);background:var(--c-len);color:var(--c-glebia)}
.kf-stan[data-stan="blad"]{border-color:var(--kf-blad);background:var(--kf-blad-tlo)}
.kf-stan p{margin:0;max-width:none;font-weight:600}
.kf-stan:focus-visible{outline:3px solid var(--c-woda);outline-offset:3px}
.kf-pulapka{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.kf-rodo{color:var(--c-tekst-pom);max-width:none}
.kf-akcje{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.kf-wyslij{min-width:12rem}
.kf-wyslij[disabled]{background:var(--c-tekst-pom);color:var(--c-biel);cursor:progress}
@media (max-width:29.99rem){.kf-wyslij{width:100%}}
.kf-boczna{display:grid;gap:var(--s-6);align-content:start}
.kf-blok{display:grid;gap:var(--s-3)}
.kf-co-dalej{list-style:none;margin:0;padding:0;counter-reset:kf;display:grid;gap:var(--s-4)}
.kf-co-dalej li{counter-increment:kf;display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:var(--s-3);align-items:baseline}
.kf-co-dalej li::before{content:counter(kf, decimal-leading-zero);font-family:var(--f-naglowek);font-size:1.5rem;line-height:1;color:var(--c-woda)}
.kf-dzieki{display:grid;gap:var(--s-5);max-width:46rem}
.kf-tafla{line-height:0}

/* TK-03 (7.10.2026): zdjęcie w ramce „Prowadzi” — ramka 4:5 bez zmian, zdjęcie ją wypełnia (bez nowego wyglądu) */
.zdjecie--foto{padding:0;overflow:hidden}
.zdjecie--foto img{display:block;width:100%;height:100%;object-fit:cover}

/* TK-03 (7.10.2026): profile w stopce — lista jak „Dokumenty”, ikona przed nazwą; ikony Simple Icons (CC0) w ukrytym zestawie w stopce */
.stopka__sprite{position:absolute;width:0;height:0;overflow:hidden}
.stopka__social a{gap:var(--s-2)}
.stopka__ikona{width:1.25rem;height:1.25rem;fill:currentColor;flex:none}

/* ==========================================================================
   20. Krok 11 (9.10.2026): układ z menu bocznym — /kursy, /kursy/<kurs>, /blog, /blog/<wpis>, /safari
   Tylko nowe klasy; żadna wcześniejsza reguła nie zmieniona.
   Struktura: .page (nad obiema kolumnami) → .kontener.uklad → .uklad__menu (details.boczne) + .uklad__tresc (.blok…)
   ========================================================================== */
.sr-tylko{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.uklad{display:grid;gap:var(--s-5);grid-template-columns:minmax(0,1fr);padding-block:var(--s-5) clamp(3rem, 2rem + 4vw, 5.5rem)}
.uklad__menu{min-width:0}
.uklad__tresc{display:grid;gap:clamp(2.5rem, 2rem + 2vw, 3.5rem);align-content:start;min-width:0}
@media (min-width:64rem){
  .uklad{grid-template-columns:16.5rem minmax(0,1fr);gap:var(--s-7);padding-top:clamp(2.5rem, 2rem + 2vw, 3.5rem)}
  /* przyklejone; własne przewijanie, gdy wyższe niż ekran; padding — żeby obrys fokusu nie był ucięty */
  .uklad__menu{position:sticky;top:var(--s-4);align-self:start;max-height:calc(100vh - 2 * var(--s-4));max-height:calc(100dvh - 2 * var(--s-4));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:var(--s-2);margin:calc(-1 * var(--s-2))}
}
@media (min-width:80rem){.uklad{grid-template-columns:17.5rem minmax(0,1fr);gap:var(--s-7) 4rem}}

/* menu boczne: telefon/tablet — zwinięty <details>; komputer — zawsze rozwinięte (CSS ::details-content albo main.js) */
.boczne{background:var(--c-biel);border:1px solid var(--c-linia);border-radius:var(--r)}
.boczne__przelacznik{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:48px;padding:var(--s-2) var(--s-4);font-weight:600;cursor:pointer;list-style:none;border-radius:var(--r)}
.boczne__przelacznik::-webkit-details-marker{display:none}
.boczne__przelacznik::after{content:"+";flex:none;width:1.5rem;text-align:center;font-family:var(--f-naglowek);font-size:1.75rem;line-height:1;color:var(--c-woda)}
.boczne[open] > .boczne__przelacznik{border-bottom:1px solid var(--c-linia);border-radius:var(--r) var(--r) 0 0}
.boczne[open] > .boczne__przelacznik::after{content:"\2212"}
.boczne__przelacznik:hover{color:var(--c-woda)}
.boczne__nav{display:grid;gap:var(--s-5);padding:var(--s-4)}
@media (min-width:64rem){
  .boczne{background:transparent;border:0;border-radius:0}
  .boczne[open] > .boczne__przelacznik{display:none}
  .boczne__nav{padding:0}
}
@supports selector(::details-content){
  @media (min-width:64rem){
    .boczne::details-content{content-visibility:visible;display:block}
    .boczne > .boczne__przelacznik{display:none}
  }
}
.boczne__blok{display:grid;gap:var(--s-2)}
.boczne__tytul{margin:0;font-family:var(--f-naglowek);font-weight:500;font-size:1.375rem;line-height:1.2}
.boczne__tytul a{display:inline-flex;align-items:center;min-height:var(--cel);color:var(--c-glebia);text-decoration:none}
.boczne__tytul a:hover{text-decoration:underline;text-decoration-thickness:2px}
.boczne__tytul a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--c-zloto)}
.boczne__grupy{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.boczne__grupa{display:grid;gap:2px}
.boczne__grupa-nazwa{display:block;padding:var(--s-1) var(--s-3) 0;font-size:var(--t-maly);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-woda);line-height:1.4}
.boczne__lista{list-style:none;margin:0;padding:0;display:grid}
.boczne__link{display:flex;flex-wrap:wrap;align-items:baseline;align-content:center;justify-content:space-between;gap:0 var(--s-3);min-height:var(--cel);padding:.5rem var(--s-3);border-radius:var(--r-maly);color:var(--c-glebia);font-size:1rem;line-height:1.35;text-decoration:none}
.boczne__link:hover{background:var(--c-len);color:var(--c-glebia)}
.boczne__link:hover .boczne__nazwa{text-decoration:underline}
.boczne__wiek{font-size:var(--t-maly);color:var(--c-tekst-pom);white-space:nowrap}
.boczne__link[aria-current="page"]{background:var(--c-glebia);color:var(--c-len);font-weight:600;box-shadow:inset 3px 0 0 var(--c-zloto)}
.boczne__link[aria-current="page"] .boczne__wiek{color:var(--c-trzcina);font-weight:400}
@media (min-width:64rem){.boczne__link:hover{background:var(--c-biel)}}
.boczne__safari{gap:var(--s-3);padding:var(--s-4);border-radius:var(--r);box-shadow:inset 0 3px 0 var(--c-zloto)}
.boczne__safari .boczne__tytul a{color:var(--c-len)}
.boczne__safari .boczne__tytul a:hover{color:var(--c-zloto)}
.boczne__terminy{list-style:none;margin:0;padding:0;display:grid}
.boczne__terminy li + li{border-top:1px solid var(--c-woda)}
.boczne__termin{display:grid;gap:0;min-height:var(--cel);padding-block:var(--s-2);text-decoration:none;line-height:1.35}
.ciemne .boczne__termin{color:var(--c-len)}
.boczne__termin:hover .boczne__rejs{text-decoration:underline}
.boczne__data,.boczne__jacht{font-size:var(--t-maly);color:var(--c-trzcina)}
.boczne__rejs{font-weight:600}
.boczne__organizator{font-size:var(--t-maly);line-height:1.45;color:var(--c-trzcina)}
.boczne__napisz{width:100%}

/* bloki w kolumnie treści (zamiast pasów na całą szerokość) */
.blok{display:grid;gap:var(--s-4);align-content:start;scroll-margin-top:var(--s-5)}
.blok > h2{font-size:clamp(1.5rem, 1.3rem + .8vw, 2rem)}
.para{display:grid;gap:clamp(2.5rem, 2rem + 2vw, 3.5rem) var(--s-6);grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr));align-items:start}
.kurs-start{gap:var(--s-5)}
.kurs-start .przyciski .pom{max-width:none}
/* „W skrócie” jako jeden pasek faktów (nie 4 osobne pola) — unosi dłuższe wartości („1,2–1,8 m”) */
.fakty--pasek{display:flex;flex-wrap:wrap;gap:1px;background:var(--c-linia);border:1px solid var(--c-linia);border-top:3px solid var(--c-woda);border-radius:var(--r);overflow:hidden}
.fakty--pasek > .fakt{flex:1 1 9rem;padding:var(--s-4) var(--s-4) var(--s-5);border:0;border-radius:0}
.fakty--pasek .fakt__duzy{font-size:clamp(1.5rem, 1.2rem + .6vw, 2rem)}
/* etapy (kroki 1–2–3 w kolumnie treści) */
.etapy{list-style:none;margin:0;padding:0;counter-reset:etap;display:flex;flex-wrap:wrap;gap:var(--s-3)}
.etapy > li{counter-increment:etap;flex:1 1 100%;display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:var(--s-2) var(--s-3);align-content:start;padding:var(--s-4);background:var(--c-biel);border:1px solid var(--c-linia);border-radius:var(--r)}
.etapy > li::before{content:counter(etap, decimal-leading-zero);font-family:var(--f-naglowek);font-size:1.75rem;line-height:1;color:var(--c-woda)}
@media (min-width:30rem){
  .etapy > li{flex:1 1 9rem;grid-template-columns:minmax(0,1fr);padding:var(--s-4) var(--s-5) var(--s-5)}
}

/* /kursy — oś 5 kroków */
.os{list-style:none;margin:0;padding:0;display:grid}
.os__krok{position:relative;display:grid;gap:var(--s-4);padding:0 0 var(--s-7) var(--s-6);border-left:2px solid var(--c-zloto)}
.os__krok:last-child{padding-bottom:0}
.os__krok::before{content:"";position:absolute;left:-8px;top:.2rem;width:14px;height:14px;border-radius:50%;background:var(--c-woda);box-shadow:0 0 0 3px var(--c-len)}
.os__naglowek{display:grid;gap:var(--s-1)}
.os__naglowek h2{font-size:clamp(1.5rem, 1.3rem + .8vw, 2rem)}
.os__karty{display:flex;flex-wrap:wrap;gap:var(--s-4)}
.os__karty > .karta{flex:1 1 15rem;scroll-margin-top:var(--s-5)}
.os__karty > .karta--wyrozniona{flex-basis:100%}
.os__karty > .karta:target{outline:3px solid var(--c-woda);outline-offset:3px}

/* blog — lista i wpis (klasy z kroku 10: wpisy, wpis-karta, wpis__meta, wpis__nota, wpis__powrot, wpis__okladka) */
.wpisy{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.wpisy > .wpis-karta{flex:1 1 18rem}
.wpisy--male{gap:var(--s-4)}
.wpisy--male > .wpis-karta{flex-basis:12rem}
.wpis-karta{gap:var(--s-3)}
.wpis-karta > .link-strzalka{margin-top:auto;align-self:flex-start}
.wpisy > .wpis-karta--wyrozniona{flex-basis:100%}
.wpis-karta--wyrozniona{padding:clamp(1.5rem, 1rem + 2vw, 2.5rem);box-shadow:inset 0 3px 0 var(--c-zloto)}
.wpis-karta--wyrozniona h3{font-size:clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);line-height:1.15}
.wpis-karta--wyrozniona > p:not([class]){font-size:var(--t-wstep);line-height:1.5}
.wpis__okladka{margin:0;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--r-maly);background:var(--c-linia)}
.wpis__okladka img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:64rem){
  .wpis-karta--wyrozniona:has(> .wpis__okladka){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-content:start;gap:var(--s-3) var(--s-6)}
  .wpis-karta--wyrozniona > .wpis__okladka{grid-row:1 / span 6}
}
.wpis__meta{font-size:var(--t-maly);line-height:1.5;color:var(--c-tekst-pom)}
.uklad__tresc .prose{width:auto;margin-inline:0;padding-block:0}
.prose > .wpis__nota{margin-top:var(--s-7);padding:var(--s-4) var(--s-5);background:var(--c-biel);border:1px solid var(--c-linia);border-radius:var(--r);color:var(--c-tekst-pom)}
.wpis__powrot a{display:inline-flex;align-items:center;min-height:var(--cel);font-weight:600}

/* /safari */
.organizator{display:grid;gap:var(--s-4);box-shadow:inset 0 3px 0 var(--c-zloto)}
.organizator > p{max-width:60ch}
.terminy{display:grid;gap:var(--s-6)}
.terminy__rok{display:grid;gap:var(--s-2)}
.terminy .tabela{table-layout:fixed}
.terminy .tabela thead th:nth-child(1){width:36%}
.terminy .tabela thead th:nth-child(2){width:36%}
.terminy .tabela tbody th{font-weight:600}
.terminy .tabela tr{scroll-margin-top:var(--s-5)}
.terminy .tabela tr:target{background:var(--c-biel)}
.terminy .tabela .brak{color:var(--c-tekst-pom)}


/* ==========================================================================
   21. Krok 12 (9.10.2026): menu boczne — ramka, czytelność, elementy nurkowe
   Tylko dopisek na końcu; sekcje 1–20 bez zmian. Nadpisuje wygląd z sekcji 20 selektorami .boczne… / .uklad__menu.
   Nowe klasy: boczne__flaga, boczne__ikona, boczne__fala, boczne__fala-tlo, boczne__fala-linia, boczne__stopka, boczne__blog.
   Ikony grup i flaga: <symbol id="i-grupa-1…5"> i <symbol id="i-flaga"> w svg.stopka__sprite (stopka).
   Czerwień flagi nurkowej #C8102E — wyłącznie w symbolu i-flaga (atrybut fill), nigdy w tekście ani tle.
   ========================================================================== */
/* A. Ramka: jeden panel (telefon/tablet — zawartość <details>; komputer — zawsze otwarty) */
.boczne{border-color:var(--c-woda);box-shadow:0 1px 2px rgba(30,59,54,.06),0 4px 14px rgba(30,59,54,.08)}
.boczne__przelacznik{justify-content:flex-start;gap:var(--s-3);min-height:52px;padding:var(--s-2) var(--s-3) var(--s-2) var(--s-4);color:var(--c-glebia)}
.boczne__przelacznik > span{flex:1 1 auto}
.boczne__przelacznik::after{display:grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--c-woda);border-radius:50%;font-size:1.375rem}
.boczne__flaga{flex:none;width:1.5rem;height:1.125rem;border-radius:2px;box-shadow:0 0 0 1px rgba(30,59,54,.3)}
.boczne__nav{gap:0;padding:0}
.boczne__nav > .boczne__blok{gap:var(--s-1);padding:var(--s-3)}
.boczne__nav > .boczne__blok + .boczne__blok{border-top:1px solid var(--c-linia)}
.boczne__nav > .boczne__safari + .boczne__blok{border-top:0;padding-top:0}
.boczne__safari + .boczne__blok > .boczne__tytul{margin-top:-6px}
.boczne__tytul{font-size:1.25rem}
.boczne__tytul a{min-width:var(--cel)}
@media (min-width:64rem){
  .boczne{background:var(--c-biel);border:1px solid var(--c-woda);border-radius:var(--r)}
  .boczne__link:hover{background:var(--c-len)}
  .uklad__menu{scroll-padding-bottom:5rem}
}
/* safari — ciemny blok u góry panelu; tytuł prowadzi do /safari (zamiast osobnego „Wszystkie terminy”) */
.boczne__nav > .boczne__safari{gap:0;padding:var(--s-1) var(--s-4) 0;border-radius:0}
@media (min-width:64rem){.boczne__nav > .boczne__safari{border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}}
.boczne__safari .boczne__tytul a{gap:var(--s-2)}
.boczne__safari .boczne__tytul a::after{content:"\2192" / "";color:var(--c-zloto);font-family:var(--f-tekst);font-size:1.125rem}
.boczne__safari .boczne__flaga{box-shadow:0 0 0 1px var(--c-len)}
@media (max-width:63.99rem){.boczne__safari .boczne__flaga{display:none}}
.boczne__safari .etykieta{margin-top:-10px}
.boczne__terminy{margin-top:var(--s-1)}
.boczne__termin{grid-template-columns:minmax(0,1fr) auto;align-content:center;align-items:baseline;column-gap:var(--s-3);padding-block:2px}
.boczne__termin .boczne__rejs{grid-column:1;grid-row:1}
.boczne__termin .boczne__data{grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
.boczne__termin .boczne__jacht{grid-column:1 / -1;grid-row:2}
.boczne__organizator{padding-top:var(--s-1)}
/* fale i linia wody — przejście z bloku safari do kursów (motyw svg.tafla) */
.boczne__fala{display:block;width:calc(100% + 2 * var(--s-4));max-width:none;height:14px;margin:var(--s-2) calc(-1 * var(--s-4)) -1px}
.boczne__fala-tlo{fill:var(--c-biel)}
.boczne__fala-linia{fill:none;stroke:var(--c-zloto);stroke-width:2;vector-effect:non-scaling-stroke}
/* B. ścieżka „w głąb”: pionowa linia od trzciny do głębi, ikony grup na linii, bąbelki (bez liczb i skali) */
.boczne__grupy{position:relative;gap:2px}
.boczne__grupy::before{content:"";position:absolute;left:9px;top:10px;bottom:12px;width:2px;border-radius:1px;background:linear-gradient(var(--c-trzcina),var(--c-woda) 50%,var(--c-glebia))}
.boczne__grupa{position:relative;gap:0}
.boczne__grupa-nazwa{display:flex;align-items:center;gap:var(--s-2);padding:0;line-height:1.25}
.boczne__ikona{position:relative;z-index:1;flex:none;width:20px;height:20px;padding:2px;border:1px solid var(--c-trzcina);border-radius:50%;background:var(--c-biel);color:var(--c-woda)}
.boczne__grupa:has([aria-current="page"]) .boczne__ikona{background:var(--c-glebia);border-color:var(--c-glebia);color:var(--c-zloto)}
.boczne__grupa > .boczne__lista{padding-left:28px}
.boczne__link{padding:2px var(--s-2);gap:0 var(--s-2)}
.boczne__grupa::after{content:"";position:absolute;left:13px;bottom:12px;width:6px;height:6px;border:1.5px solid var(--c-trzcina);border-radius:50%;opacity:.8;pointer-events:none}
.boczne__grupa:nth-child(even)::after{width:5px;height:5px;bottom:24px}
@keyframes boczne-babel{0%{transform:translateY(0);opacity:0}15%{opacity:.85}80%{opacity:.4}100%{transform:translateY(-34px);opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .boczne__grupa::after{opacity:0;animation:boczne-babel 6s ease-in infinite}
  .boczne__grupa:nth-child(2)::after{animation-delay:1.4s}
  .boczne__grupa:nth-child(3)::after{animation-delay:2.8s}
  .boczne__grupa:nth-child(4)::after{animation-delay:.7s}
  .boczne__grupa:nth-child(5)::after{animation-delay:3.6s}
}
/* stopka panelu: „Blog o nurkowaniu →” + „Napisz”; na komputerze przyklejona do dołu menu (zawsze widoczna) */
.boczne__stopka{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-3);padding:var(--s-2) var(--s-3);border-top:1px solid var(--c-linia);background:var(--c-biel)}
.boczne__stopka .boczne__napisz{width:auto;flex:0 0 auto;padding-inline:var(--s-5)}
.boczne__stopka .boczne__napisz:only-child{flex:1 1 auto}
.boczne__blog{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;gap:var(--s-2);min-height:var(--cel);font-weight:600;line-height:1.25;color:var(--c-woda);text-decoration:none}
.boczne__blog:hover{color:var(--c-glebia);text-decoration:underline;text-decoration-thickness:2px}
@media (min-width:64rem){.boczne__blog > span:first-child{width:min-content}}
@media (min-width:64rem){
  .boczne__stopka{position:sticky;bottom:0;z-index:2;border-radius:0 0 calc(var(--r) - 1px) calc(var(--r) - 1px);box-shadow:0 -8px 12px -10px rgba(30,59,54,.35)}
}
/* C. 320 px: przycisk „Menu” w nagłówku zostaje w jednym wierszu z logo (wszystkie strony z .naglowek) */
@media (max-width:21.99rem){
  .naglowek__logo img{height:2rem}
  .naglowek__wnetrze{column-gap:var(--s-3)}
}
/* D. TK-07 10.10.2026 (uwaga Jacka): na /safari złota kreska bieżącej strony pod „Safari nurkowe” przecinała etykietę „Egipt · Morze Czerwone”
   (etykieta podciągnięta o 10 px) — przy bieżącym linku etykieta bez podciągnięcia */
.boczne__safari .boczne__tytul:has(a[aria-current="page"]) + .etykieta{margin-top:0}