/* Motyw „poradnik”: serwis z działami w poziomym menu, wyróżniony najnowszy
   artykuł, numerowane rozdziały i przyklejony spis treści obok tekstu.
   Kolor akcentu i tło przychodzą z site.yaml (--akcent, --tlo); odcienie
   pochodne liczy color-mix, więc każda strona ma spójną własną paletę. */

*,*::before,*::after{box-sizing:border-box}
:root{
  --tekst:#1d2126;
  --szary:#5d646e;
  --linia:color-mix(in srgb,var(--akcent) 12%,#e4e2dc);
  --tint:color-mix(in srgb,var(--akcent) 7%,#fff);
  --tint2:color-mix(in srgb,var(--akcent) 15%,#fff);
  --ciemny:color-mix(in srgb,var(--akcent) 35%,#14171b);
  --promien:12px;
  --cien:0 1px 2px rgba(20,24,30,.05),0 6px 20px -8px rgba(20,24,30,.12);
}
html{font-size:106.25%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tlo);color:var(--tekst);line-height:1.6;
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif}
/* Krój dotyczy tekstu czytanego: tytułów i prozy. Interfejs zostaje bezszeryfowy. */
.kroj-szeryf :is(h1,h2:not(.sekcja),h3,.proza,.lead,.wyrozniony-opis){font-family:Charter,"Iowan Old Style","Sitka Text",Cambria,"Noto Serif","Source Serif Pro",Georgia,serif}
a{color:var(--akcent);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
.w{max-width:72rem;margin:0 auto;padding:0 1.5rem}

/* --- nagłówek --- */
.gora{background:#fff;border-top:4px solid var(--akcent);border-bottom:1px solid var(--linia)}
.gora-w{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;padding-bottom:1rem}
.marka{display:flex;align-items:center;gap:.7rem;color:var(--tekst);text-decoration:none;font-weight:700;font-size:1.2rem;letter-spacing:-.01em}
.znak{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:9px;background:var(--akcent);color:#fff;font-size:1.15rem;font-weight:800}
.jezyki{list-style:none;display:flex;gap:.25rem;margin:0;padding:.2rem;background:var(--tint);border-radius:999px}
.jezyki a{display:block;padding:.2rem .6rem;border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--szary);text-decoration:none}
.jezyki a[aria-current]{background:#fff;color:var(--akcent);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.dzialy{border-top:1px solid var(--linia)}
.dzialy-w{display:flex;gap:1.6rem;overflow-x:auto;scrollbar-width:none}
.dzialy a{flex:none;padding:.75rem 0;font-size:.92rem;font-weight:500;color:var(--szary);text-decoration:none;border-bottom:2px solid transparent}
.dzialy a:hover{color:var(--tekst)}
.dzialy a[aria-current]{color:var(--akcent);border-bottom-color:var(--akcent)}

/* --- strona główna --- */
.powitanie{background:radial-gradient(60rem 18rem at 15% 0,var(--tint2),transparent 70%);padding:3.2rem 0 2.6rem}
.powitanie h1{max-width:46rem;margin:0;font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.18;letter-spacing:-.02em}
.powitanie .lead{max-width:40rem}
.powitanie-maly{padding:2rem 0 1.6rem}
.etykieta{margin:0 0 .5rem;font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--akcent)}
.etykieta a{text-decoration:none}
.wyrozniony{position:relative;background:#fff;border:1px solid var(--linia);border-radius:var(--promien);box-shadow:var(--cien);padding:2rem 2.2rem;overflow:hidden}
.wyrozniony::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--akcent)}
.wyrozniony h2{margin:.2rem 0 .7rem;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.2;letter-spacing:-.015em}
.wyrozniony h2 a{color:var(--tekst);text-decoration:none}
.wyrozniony h2 a:hover{color:var(--akcent)}
.wyrozniony-opis{max-width:44rem;margin:0 0 1.4rem;font-size:1.08rem;color:#3b424b}
.wyrozniony-stopka{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:0;color:var(--szary);font-size:.88rem}
.przycisk{display:inline-block;padding:.55rem 1.1rem;border-radius:999px;background:var(--akcent);color:#fff;font-weight:600;font-size:.92rem;text-decoration:none}
.przycisk:hover{background:var(--ciemny)}
.sekcja{margin:2.8rem 0 1rem;font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--szary);display:flex;align-items:center;gap:1rem}
.sekcja::after{content:"";flex:1;height:1px;background:var(--linia)}
.kafle{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.1rem}
.kafel{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linia);border-radius:var(--promien);padding:1.3rem 1.4rem;transition:transform .15s ease,box-shadow .15s ease}
.kafel:hover{transform:translateY(-2px);box-shadow:var(--cien)}
.kafel h3{margin:0 0 .5rem;font-size:1.15rem;line-height:1.3}
.kafel h3 a{color:var(--tekst);text-decoration:none}
.kafel:hover h3 a{color:var(--akcent)}
.kafel .caly::after{content:"";position:absolute;inset:0}
.kafel .etykieta a{position:relative;z-index:1}
.kafel p{margin:0 0 1rem;font-size:.95rem;color:#454c55}
.kafel time{margin-top:auto;font-size:.82rem;color:var(--szary)}
.dzialy-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.6rem}
.dzialy-lista a{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.1rem;border-radius:10px;background:var(--tint);color:var(--tekst);font-weight:600;text-decoration:none}
.dzialy-lista a:hover{background:var(--tint2)}
.licznik{min-width:1.8rem;padding:.1rem .5rem;border-radius:999px;background:#fff;color:var(--akcent);font-size:.8rem;text-align:center}

/* --- artykuł --- */
.okruszki{padding-top:1.6rem;font-size:.85rem;color:var(--szary)}
.okruszki a{color:var(--szary)}
.artykul-glowa{max-width:46rem;padding:1.2rem 0 1.6rem}
.artykul-glowa h1{margin:0 0 .8rem;font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.15;letter-spacing:-.02em}
.lead{margin:0 0 1rem;font-size:1.2rem;line-height:1.55;color:#3b424b}
.metryka{margin:0;font-size:.85rem;color:var(--szary)}
.artykul-uklad{padding-bottom:3rem}
.artykul-uklad.ze-spisem{display:grid;grid-template-columns:minmax(0,44rem) 15rem;grid-template-areas:"tekst spis";gap:3.5rem;align-items:start}
.ze-spisem .proza{grid-area:tekst}
.spis{grid-area:spis;position:sticky;top:1.5rem;padding-left:1.1rem;border-left:2px solid var(--linia)}
.spis h2,.kroj-szeryf .spis h2{font-family:"Segoe UI",Roboto,Arial,sans-serif;margin:0 0 .6rem;font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--szary)}
.spis ol{list-style:none;margin:0;padding:0;counter-reset:s}
.spis li{counter-increment:s;margin:.45rem 0;font-size:.9rem;line-height:1.35}
.spis li::before{content:counter(s,decimal-leading-zero);display:inline-block;width:1.7rem;color:var(--akcent);font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
.spis a{color:var(--tekst);text-decoration:none}
.spis a:hover{color:var(--akcent)}

.proza{max-width:44rem;font-size:1.1rem;line-height:1.72;counter-reset:rozdzial}
.proza > :first-child{margin-top:0}
.proza p,.proza ul,.proza ol{margin:0 0 1.15rem}
.proza h2{counter-increment:rozdzial;margin:2.6rem 0 .9rem;font-size:1.5rem;line-height:1.25;letter-spacing:-.01em;scroll-margin-top:1rem}
.proza h2::before{content:counter(rozdzial,decimal-leading-zero);display:block;margin-bottom:.2rem;font-family:"Segoe UI",Roboto,Arial,sans-serif;font-size:.78rem;font-weight:800;letter-spacing:.1em;color:var(--akcent)}
.proza-prosta h2::before{content:none}
.proza h3{margin:2rem 0 .6rem;font-size:1.2rem}
.proza li{margin:.35rem 0}
.proza li::marker{color:var(--akcent)}
.proza strong{color:#0f1215}
.proza blockquote{margin:1.6rem 0;padding:1rem 1.3rem;border-radius:0 10px 10px 0;border-left:4px solid var(--akcent);background:var(--tint)}
.proza blockquote p:last-child{margin:0}
.tabela{margin:1.6rem 0;overflow-x:auto;border:1px solid var(--linia);border-radius:10px;background:#fff}
.tabela table{width:100%;border-collapse:collapse;font-family:"Segoe UI",Roboto,Arial,sans-serif;font-size:.92rem;line-height:1.45}
.tabela th{background:var(--tint);color:var(--ciemny);font-weight:700;text-align:left;padding:.65rem .9rem;border-bottom:1px solid var(--linia);white-space:nowrap}
.tabela td{padding:.6rem .9rem;border-bottom:1px solid var(--linia);vertical-align:top}
.tabela tr:last-child td{border-bottom:0}
.tabela tbody tr:nth-child(even){background:color-mix(in srgb,var(--tint) 45%,#fff)}
.tabela td:first-child{font-weight:600}
.proza code{font-size:.9em;padding:.1rem .35rem;border-radius:5px;background:var(--tint)}

.pokrewne{background:#fff;border-top:1px solid var(--linia);padding:.5rem 0 2.5rem}
.pokrewne .sekcja{margin-top:2rem}
.pokrewne p:last-child{margin:1.2rem 0 0}

/* --- stopka --- */
.dol{margin-top:4rem;background:var(--ciemny);color:rgba(255,255,255,.75);font-size:.9rem}
.dol-w{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;padding-top:2.4rem;padding-bottom:1.6rem}
.dol-marka{margin:0 0 .3rem;color:#fff;font-weight:700;font-size:1.05rem}
.dol-opis{margin:0;max-width:28rem}
.dol ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;align-content:start}
.dol a{color:#fff;text-decoration:none;opacity:.85}
.dol a:hover{opacity:1;text-decoration:underline}
.prawa{margin:0 auto;padding-top:1rem;padding-bottom:1.6rem;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;color:rgba(255,255,255,.55)}

@media (max-width:64rem){
  .artykul-uklad.ze-spisem{grid-template-columns:minmax(0,1fr);grid-template-areas:"spis" "tekst";gap:1.5rem}
  .spis{position:static;padding:1rem 1.2rem;border-left:0;border-radius:10px;background:var(--tint)}
}
@media (max-width:40rem){
  html{font-size:100%}
  .w{padding:0 1.1rem}
  .powitanie{padding:2.2rem 0 1.8rem}
  .wyrozniony{padding:1.5rem 1.4rem 1.5rem 1.7rem}
  .proza{font-size:1.05rem}
}