/* ==========================================================================
   poradnikbiegowy.pl — system designu
   Jeden arkusz dla całego portalu. Zero zależności zewnętrznych, zero frameworków.
   Kolejność: 1) zmienne 2) reset 3) typografia 4) układ 5) komponenty 6) narzędzia
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ZMIENNE
   -------------------------------------------------------------------------- */
:root{
  /* Marka — pomarańcz biegowy: energia, ruch, widoczność. Używany oszczędnie. */
  --brand:        #F4511E;
  --brand-600:    #DC3F10;
  --brand-700:    #B8330B;
  --brand-50:     #FFF3EF;
  --brand-100:    #FFE3DA;

  /* Błękit danych — kalkulatory, tabele, liczby. Drugi głos systemu. */
  --data:         #0369A1;
  --data-600:     #025B8A;
  --data-50:      #EFF8FE;
  --data-100:     #DBEEFB;

  /* Zieleń wyniku — sukces, rekordy, potwierdzenia */
  --ok:           #15803D;
  --ok-50:        #F0FDF4;
  --ok-100:       #DCFCE7;

  /* Ostrzeżenie — kontuzje, limity, uwagi medyczne */
  --warn:         #B45309;
  --warn-50:      #FFFBEB;
  --warn-100:     #FEF3C7;

  /* Skala neutralna */
  --ink:          #0B1220;
  --ink-2:        #1E293B;
  --ink-3:        #475569;
  --muted:        #64748B;
  --muted-2:      #94A3B8;
  --line:         #E2E8F0;
  --line-2:       #F1F5F9;
  --bg:           #FFFFFF;
  --bg-soft:      #F8FAFC;
  --bg-tint:      #FBFCFE;

  /* Typografia */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Skala rozmiarów — płynna, oparta na clamp() */
  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1rem;
  --fs-lg:   1.0625rem;
  --fs-xl:   clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --fs-h4:   clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  --fs-h3:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-h2:   clamp(1.5rem, 1.3rem + 1vw, 1.9375rem);
  --fs-h1:   clamp(1.875rem, 1.5rem + 2vw, 2.9375rem);
  --fs-hero: clamp(2.125rem, 1.6rem + 2.8vw, 3.5rem);

  /* Odstępy */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* Promienie */
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  /* Cienie — subtelne, oparte na neutralnym granacie, nie na czerni */
  --sh-xs: 0 1px 2px rgba(11,18,32,.05);
  --sh-sm: 0 1px 3px rgba(11,18,32,.07), 0 1px 2px rgba(11,18,32,.04);
  --sh:    0 4px 12px rgba(11,18,32,.07), 0 1px 3px rgba(11,18,32,.05);
  --sh-lg: 0 12px 32px rgba(11,18,32,.10), 0 2px 8px rgba(11,18,32,.05);
  --sh-xl: 0 24px 56px rgba(11,18,32,.13), 0 4px 12px rgba(11,18,32,.06);

  /* Układ */
  /* 1350, nie 1240: kolumny boczne układu wpisu (250 px spis treści + 310 px pasek)
     mają stałą szerokość, więc każdy dodany piksel idzie w całości na tekst.
     Środkowa kolumna rośnie z 544 do 654 px, czyli ok. 72 znaków w wierszu —
     wciąż w granicach czytelności. Wyżej nie idziemy: przy 1450 wiersz przekracza
     80 znaków i oko zaczyna gubić początek następnej linii. */
  --wrap: 1350px;
  --wrap-narrow: 780px;
  --header-h: 68px;

  --ease: cubic-bezier(.4,0,.2,1);
  --speed: .18s;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
  /* clip, nie hidden — hidden na html/body psuje position:sticky */
  overflow-x:clip;
}
body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font-family:var(--font); font-size:var(--fs-lg); line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern","liga","cv11";
}
img,svg,video{ max-width:100%; height:auto; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; padding:0; }
a{ color:var(--data); text-decoration:none; }
a:hover{ text-decoration:underline; }
ul,ol{ padding-left:1.35em; }
table{ border-collapse:collapse; width:100%; }
hr{ border:none; border-top:1px solid var(--line); margin:var(--sp-10) 0; }
:focus-visible{ outline:3px solid var(--data); outline-offset:2px; border-radius:var(--r-sm); }
::selection{ background:var(--brand-100); color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* --------------------------------------------------------------------------
   3. TYPOGRAFIA
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display); color:var(--ink);
  line-height:1.18; letter-spacing:-.022em; margin:0 0 var(--sp-4);
  font-weight:800; text-wrap:balance;
}
h1{ font-size:var(--fs-h1); letter-spacing:-.03em; }
h2{ font-size:var(--fs-h2); margin-top:var(--sp-12); letter-spacing:-.026em; }
h3{ font-size:var(--fs-h3); margin-top:var(--sp-8); font-weight:750; }
h4{ font-size:var(--fs-h4); margin-top:var(--sp-6); font-weight:700; }
p{ margin:0 0 var(--sp-5); text-wrap:pretty; }
strong,b{ color:var(--ink); font-weight:680; }
small{ font-size:var(--fs-sm); }

.lead{ font-size:var(--fs-xl); line-height:1.6; color:var(--ink-3); }
.eyebrow{
  font-size:var(--fs-xs); font-weight:750; letter-spacing:.11em;
  text-transform:uppercase; color:var(--brand); margin-bottom:var(--sp-3);
  display:flex; align-items:center; gap:var(--sp-2);
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--brand); border-radius:2px; }
.eyebrow--center{ justify-content:center; }

/* --------------------------------------------------------------------------
   4. UKŁAD
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--sp-5); }
.wrap--narrow{ max-width:var(--wrap-narrow); }
.section{ padding-block:var(--sp-16); }
.section--tight{ padding-block:var(--sp-12); }
.section--soft{ background:var(--bg-soft); }
.section--tint{ background:var(--bg-tint); }

.grid{ display:grid; gap:var(--sp-6); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.stack{ display:flex; flex-direction:column; gap:var(--sp-4); }
.row{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.row--between{ justify-content:space-between; }

/* Układ treść + kolumna boczna */
.layout{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:var(--sp-12); align-items:start; }
.layout--toc{ grid-template-columns:250px minmax(0,1fr) 310px; }
/* KLUCZOWE: element gridu ma domyślnie min-width:auto i nie kurczy się poniżej swojej
   zawartości. Bez tego szeroka tabela (min-width:520px) rozpycha kolumnę i całą stronę
   na telefonie, mimo że siedzi w kontenerze z przewijaniem. */
.layout > *,.layout--toc > *,.grid > *{ min-width:0; }
.sticky{ position:sticky; top:calc(var(--header-h) + var(--sp-5)); }

@media (max-width:1180px){
  .layout--toc{ grid-template-columns:minmax(0,1fr) 320px; }
  .layout--toc .toc-col{ display:none; }
}
@media (max-width:960px){
  .layout,.layout--toc{ grid-template-columns:1fr; gap:var(--sp-10); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .sticky{ position:static; }
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .section{ padding-block:var(--sp-12); }
}

/* --------------------------------------------------------------------------
   5. KOMPONENTY
   -------------------------------------------------------------------------- */

/* ---- 5.1 Placeholder grafiki ---------------------------------------------
   Każdy obraz w makiecie jest podmienialnym placeholderem. Podpis w rogu mówi,
   jaki rozmiar i jaki motyw ma tam trafić. */
.ph{
  position:relative; display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(135deg, var(--brand-50) 0%, var(--data-50) 55%, var(--line-2) 100%);
  border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  color:var(--muted); text-align:center;
}
.ph::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(11,18,32,.035) 0 2px, transparent 2px 11px);
}
.ph__label{
  font-size:var(--fs-xs); font-weight:650; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); background:rgba(255,255,255,.82); backdrop-filter:blur(4px);
  padding:6px 12px; border-radius:var(--r-full); border:1px solid rgba(11,18,32,.07);
  max-width:88%; line-height:1.4;
}
.ph--16-9{ aspect-ratio:16/9; }
.ph--4-3{ aspect-ratio:4/3; }
.ph--3-2{ aspect-ratio:3/2; }
.ph--1-1{ aspect-ratio:1/1; }
.ph--21-9{ aspect-ratio:21/9; }
.ph--avatar{ aspect-ratio:1/1; border-radius:var(--r-full); }

/* ---- 5.2 Przyciski ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:11px 20px; border-radius:var(--r-full); font-size:var(--fs-base); font-weight:680;
  letter-spacing:-.005em; border:1px solid transparent; text-decoration:none;
  transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease),
             transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
  white-space:nowrap;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--brand); color:#fff; box-shadow:0 2px 8px rgba(244,81,30,.25); }
.btn--primary:hover{ background:var(--brand-600); box-shadow:0 6px 18px rgba(244,81,30,.32); }
.btn--data{ background:var(--data); color:#fff; box-shadow:0 2px 8px rgba(3,105,161,.22); }
.btn--data:hover{ background:var(--data-600); box-shadow:0 6px 18px rgba(3,105,161,.3); }
.btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--sh-xs); }
.btn--ghost:hover{ border-color:var(--muted-2); background:var(--bg-soft); }
.btn--quiet{ background:var(--line-2); color:var(--ink-2); }
.btn--quiet:hover{ background:var(--line); }
.btn--lg{ padding:14px 28px; font-size:var(--fs-md); }
.btn--sm{ padding:8px 15px; font-size:var(--fs-sm); }
.btn--block{ width:100%; }

/* ---- 5.3 Etykiety kategorii i plakietki ---- */
.tag{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px;
  border-radius:var(--r-full); font-size:var(--fs-xs); font-weight:750;
  letter-spacing:.045em; text-transform:uppercase; text-decoration:none;
  background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-100);
  transition:background var(--speed) var(--ease);
}
.tag:hover{ background:var(--brand-100); text-decoration:none; }
.tag--data{ background:var(--data-50); color:var(--data-600); border-color:var(--data-100); }
.tag--ok{ background:var(--ok-50); color:var(--ok); border-color:var(--ok-100); }
.tag--warn{ background:var(--warn-50); color:var(--warn); border-color:var(--warn-100); }
.tag--plain{ background:var(--line-2); color:var(--ink-3); border-color:var(--line); }

.pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 13px;
  border-radius:var(--r-full); font-size:var(--fs-sm); font-weight:600;
  background:#fff; border:1px solid var(--line); color:var(--ink-3);
  text-decoration:none; transition:all var(--speed) var(--ease); white-space:nowrap;
}
.pill:hover{ border-color:var(--ink-3); color:var(--ink); text-decoration:none; }
.pill[aria-current="true"],.pill--active{
  background:var(--ink); border-color:var(--ink); color:#fff;
}

/* ---- 5.4 Metadane wpisu ---- */
.meta{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  font-size:var(--fs-sm); color:var(--muted);
}
.meta__item{ display:inline-flex; align-items:center; gap:5px; }
.meta__sep{ width:3px; height:3px; border-radius:50%; background:var(--muted-2); flex:none; }

/* ---- 5.5 Karta artykułu ---- */
.card{
  display:flex; flex-direction:column; background:#fff; border-radius:var(--r-lg);
  overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-xs);
  transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease),
             border-color var(--speed) var(--ease);
  height:100%;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); border-color:var(--line-2); }
.card__media{ position:relative; }
.card__media .ph{ border-radius:0; }
.card__tag{ position:absolute; top:12px; left:12px; z-index:2; box-shadow:var(--sh-sm); background:#fff; }
.card__body{ padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); flex:1; }
.card__title{
  font-size:var(--fs-h4); font-weight:750; line-height:1.32; margin:0;
  letter-spacing:-.018em;
}
.card__title a{ color:var(--ink); text-decoration:none; }
.card__title a:hover{ color:var(--brand-700); }
.card__excerpt{ font-size:var(--fs-base); color:var(--ink-3); margin:0; line-height:1.6; }
.card__foot{ margin-top:auto; padding-top:var(--sp-3); border-top:1px solid var(--line-2); }

/* Karta pozioma — do list kategorii i kolumny bocznej */
.card--row{ flex-direction:row; align-items:stretch; }
.card--row .card__media{ flex:0 0 240px; }
.card--row .card__media .ph{ height:100%; min-height:160px; }
.card--row .card__body{ padding:var(--sp-5) var(--sp-6); }
@media (max-width:640px){
  .card--row{ flex-direction:column; }
  .card--row .card__media{ flex:none; }
  .card--row .card__media .ph{ aspect-ratio:16/9; min-height:0; }
}

/* Karta kompaktowa — kolumna boczna, „popularne” */
.card--mini{ flex-direction:row; gap:var(--sp-3); border:none; box-shadow:none; background:none; padding:0; }
.card--mini:hover{ transform:none; box-shadow:none; }
.card--mini .card__media{ flex:0 0 84px; }
.card--mini .card__media .ph{ border-radius:var(--r); aspect-ratio:1/1; }
.card--mini .card__body{ padding:0; gap:6px; justify-content:center; }
.card--mini .card__title{ font-size:var(--fs-base); font-weight:700; line-height:1.4; }

/* Karta wyróżniona — hero */
.card--feature .card__body{ padding:var(--sp-6) var(--sp-8) var(--sp-8); }
.card--feature .card__title{ font-size:var(--fs-h2); letter-spacing:-.028em; }

/* ---- 5.6 Ocena gwiazdkowa ---- */
.rating{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.stars{ display:inline-flex; gap:2px; color:var(--brand); }
.stars svg{ width:16px; height:16px; }
.stars--lg svg{ width:22px; height:22px; }
.rating__value{ font-weight:750; color:var(--ink); font-size:var(--fs-base); }
.rating__count{ font-size:var(--fs-sm); color:var(--muted); }

.rate-box{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  padding:var(--sp-5) var(--sp-6); background:var(--bg-soft);
  border:1px solid var(--line); border-radius:var(--r-lg); flex-wrap:wrap;
}
.rate-box__btns{ display:flex; gap:4px; }
.rate-box__star{
  width:38px; height:38px; display:grid; place-items:center; border-radius:var(--r-sm);
  color:var(--muted-2); transition:color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.rate-box__star:hover{ color:var(--brand); background:var(--brand-50); }
.rate-box__star svg{ width:26px; height:26px; }

/* ---- 5.7 Ramki treściowe ---- */
.box{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-6);
  background:#fff; margin-block:var(--sp-8);
}
.box__title{
  display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-md);
  font-weight:750; color:var(--ink); margin:0 0 var(--sp-3); letter-spacing:-.01em;
}
.box p:last-child,.box ul:last-child,.box ol:last-child{ margin-bottom:0; }

.box--key{ background:var(--data-50); border-color:var(--data-100); }
.box--key .box__title{ color:var(--data-600); }
.box--warn{ background:var(--warn-50); border-color:var(--warn-100); }
.box--warn .box__title{ color:var(--warn); }
.box--ok{ background:var(--ok-50); border-color:var(--ok-100); }
.box--ok .box__title{ color:var(--ok); }
.box--brand{ background:var(--brand-50); border-color:var(--brand-100); }
.box--brand .box__title{ color:var(--brand-700); }

/* Ramka „W skrócie” — najważniejszy element pod fragmenty rozszerzone */
.summary-box{
  background:linear-gradient(180deg, var(--data-50), #fff);
  border:1px solid var(--data-100); border-left:4px solid var(--data);
  border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-6) var(--sp-5);
  margin-block:var(--sp-8);
}
.summary-box ul{ margin:0; padding-left:1.2em; }
.summary-box li{ margin-bottom:var(--sp-2); }
.summary-box li::marker{ color:var(--data); }

/* Cytat */
blockquote{
  margin:var(--sp-8) 0; padding:var(--sp-2) 0 var(--sp-2) var(--sp-6);
  border-left:3px solid var(--brand); font-size:var(--fs-xl); line-height:1.6;
  color:var(--ink); font-weight:500; font-style:normal;
}
blockquote cite{ display:block; margin-top:var(--sp-3); font-size:var(--fs-base);
  color:var(--muted); font-style:normal; font-weight:600; }

/* ---- 5.8 Tabele ---- */
.table-wrap{ overflow-x:auto; margin-block:var(--sp-8); border:1px solid var(--line);
  border-radius:var(--r-lg); background:#fff; -webkit-overflow-scrolling:touch; }
.table{ font-size:var(--fs-base); min-width:520px; }
.table caption{
  text-align:left; padding:var(--sp-4) var(--sp-5); font-size:var(--fs-sm);
  color:var(--muted); border-bottom:1px solid var(--line); font-weight:600;
}
.table th,.table td{ padding:12px var(--sp-4); text-align:left; border-bottom:1px solid var(--line-2); }
.table thead th{
  background:var(--bg-soft); color:var(--ink); font-weight:700; font-size:var(--fs-sm);
  letter-spacing:.02em; position:sticky; top:0; white-space:nowrap;
}
.table tbody tr:last-child td{ border-bottom:none; }
.table tbody tr:hover{ background:var(--bg-tint); }
.table td.num{ font-variant-numeric:tabular-nums; font-weight:650; color:var(--ink); }
.table .hl{ background:var(--brand-50); }

/* ---- 5.9 Spis treści ---- */
.toc{ border:1px solid var(--line); border-radius:var(--r-lg); background:#fff;
  padding:var(--sp-5); box-shadow:var(--sh-xs); }
.toc__title{
  font-size:var(--fs-xs); font-weight:750; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 var(--sp-4);
}
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc li{ counter-increment:toc; margin-bottom:2px; }
.toc a{
  display:flex; gap:var(--sp-3); padding:7px var(--sp-3); border-radius:var(--r-sm);
  font-size:var(--fs-base); color:var(--ink-3); text-decoration:none; line-height:1.45;
  border-left:2px solid transparent; transition:all var(--speed) var(--ease);
}
.toc a::before{ content:counter(toc); font-variant-numeric:tabular-nums; color:var(--muted-2);
  font-weight:700; font-size:var(--fs-sm); flex:none; }
.toc a:hover{ background:var(--bg-soft); color:var(--ink); }
.toc a[aria-current="true"]{
  color:var(--brand-700); background:var(--brand-50); border-left-color:var(--brand); font-weight:650;
}
.toc a[aria-current="true"]::before{ color:var(--brand); }
.toc--inline{ margin-block:var(--sp-8); background:var(--bg-soft); }

/* ---- 5.10 FAQ — natywny accordion, bez JS ---- */
.faq{ display:flex; flex-direction:column; gap:var(--sp-3); margin-block:var(--sp-6); }
.faq__item{
  border:1px solid var(--line); border-radius:var(--r-lg); background:#fff;
  overflow:hidden; transition:border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.faq__item[open]{ border-color:var(--data-100); box-shadow:var(--sh-sm); }
.faq__q{
  display:flex; align-items:flex-start; gap:var(--sp-4); padding:var(--sp-5);
  font-weight:700; color:var(--ink); font-size:var(--fs-md); cursor:pointer;
  list-style:none; line-height:1.45; letter-spacing:-.012em;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:hover{ background:var(--bg-tint); }
.faq__q::after{
  content:""; flex:none; width:11px; height:11px; margin-top:6px; margin-left:auto;
  border-right:2.5px solid var(--muted); border-bottom:2.5px solid var(--muted);
  transform:rotate(45deg); transition:transform var(--speed) var(--ease);
}
.faq__item[open] .faq__q::after{ transform:rotate(-135deg); border-color:var(--data); }
.faq__a{ padding:0 var(--sp-5) var(--sp-5); color:var(--ink-3); }
.faq__a > :last-child{ margin-bottom:0; }

/* ---- 5.11 Widget kalkulatora — sygnał rozpoznawczy portalu ---- */
.calc{
  border:1px solid var(--data-100); border-radius:var(--r-xl); overflow:hidden;
  background:#fff; box-shadow:var(--sh); margin-block:var(--sp-10);
}
.calc__head{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-6); background:linear-gradient(135deg, var(--data-50), var(--brand-50));
  border-bottom:1px solid var(--data-100);
}
.calc__icon{
  flex:none; width:42px; height:42px; border-radius:var(--r); display:grid; place-items:center;
  background:var(--data); color:#fff; box-shadow:0 3px 10px rgba(3,105,161,.3);
}
.calc__icon svg{ width:22px; height:22px; }
.calc__title{ font-size:var(--fs-md); font-weight:780; color:var(--ink); margin:0; letter-spacing:-.015em; }
.calc__sub{ font-size:var(--fs-sm); color:var(--ink-3); margin:2px 0 0; }
.calc__body{ padding:var(--sp-6); }
.calc__fields{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-4); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:var(--fs-sm); font-weight:650; color:var(--ink-3); }
.field input,.field select{
  padding:11px var(--sp-4); border:1px solid var(--line); border-radius:var(--r);
  background:#fff; font-size:var(--fs-md); font-weight:650; color:var(--ink);
  font-variant-numeric:tabular-nums; transition:border-color var(--speed) var(--ease),
  box-shadow var(--speed) var(--ease);
}
.field input:focus,.field select:focus{
  outline:none; border-color:var(--data); box-shadow:0 0 0 3px var(--data-100);
}
.calc__presets{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-4); }
.calc__result{
  margin-top:var(--sp-5); padding:var(--sp-5) var(--sp-6); border-radius:var(--r-lg);
  background:var(--ink); color:#fff; display:flex; align-items:center;
  justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap;
}
.calc__result-label{ font-size:var(--fs-sm); color:var(--muted-2); font-weight:600; margin:0 0 2px; }
.calc__result-value{
  font-size:clamp(1.75rem,1.4rem + 1.6vw,2.5rem); font-weight:820; letter-spacing:-.035em;
  line-height:1; font-variant-numeric:tabular-nums; margin:0; color:#fff;
}
.calc__result-unit{ font-size:var(--fs-md); font-weight:650; color:var(--muted-2); margin-left:6px; }
.calc__foot{
  padding:var(--sp-4) var(--sp-6); border-top:1px solid var(--line-2);
  background:var(--bg-soft); display:flex; justify-content:space-between;
  align-items:center; gap:var(--sp-4); flex-wrap:wrap; font-size:var(--fs-sm); color:var(--muted);
}

/* ---- 5.12 Autor ---- */
.author{
  display:flex; gap:var(--sp-5); padding:var(--sp-6); border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--bg-soft); margin-block:var(--sp-10);
}
.author__avatar{ flex:none; width:72px; }
.author__name{ font-size:var(--fs-md); font-weight:780; color:var(--ink); margin:0 0 2px; }
.author__role{ font-size:var(--fs-sm); color:var(--brand-700); font-weight:650; margin:0 0 var(--sp-3); }
.author__bio{ font-size:var(--fs-base); color:var(--ink-3); margin:0 0 var(--sp-3); }
@media (max-width:520px){ .author{ flex-direction:column; gap:var(--sp-4); } }

/* Sygnatura weryfikacji — E-E-A-T */
.verified{
  display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  background:var(--ok-50); border:1px solid var(--ok-100); border-radius:var(--r);
  font-size:var(--fs-sm); color:var(--ink-3);
}
.verified svg{ width:18px; height:18px; color:var(--ok); flex:none; }

/* ---- 5.13 Komentarze ---- */
.comments{ margin-top:var(--sp-12); }
.comment-form{
  padding:var(--sp-6); border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg-soft); margin-bottom:var(--sp-8);
}
.comment-form textarea{
  width:100%; min-height:110px; padding:var(--sp-4); border:1px solid var(--line);
  border-radius:var(--r); resize:vertical; font-size:var(--fs-base); background:#fff;
}
.comment-form textarea:focus{ outline:none; border-color:var(--data); box-shadow:0 0 0 3px var(--data-100); }
.comment{ display:flex; gap:var(--sp-4); padding-block:var(--sp-6); border-top:1px solid var(--line-2); }
.comment__avatar{ flex:none; width:46px; }
.comment__head{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:6px; }
.comment__name{ font-weight:720; color:var(--ink); font-size:var(--fs-base); }
.comment__badge{
  font-size:var(--fs-xs); font-weight:700; padding:2px 8px; border-radius:var(--r-full);
  background:var(--brand-50); color:var(--brand-700); letter-spacing:.03em;
}
.comment__body{ font-size:var(--fs-base); color:var(--ink-3); margin:0 0 var(--sp-3); }
.comment__actions{ display:flex; gap:var(--sp-4); font-size:var(--fs-sm); }
.comment__action{ color:var(--muted); font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.comment__action:hover{ color:var(--data); }
.comment--reply{ margin-left:var(--sp-12); border-top:none;
  border-left:2px solid var(--line); padding-left:var(--sp-5); }
@media (max-width:600px){ .comment--reply{ margin-left:var(--sp-5); } }

/* ---- 5.14 Newsletter ---- */
.newsletter{
  position:relative; overflow:hidden; border-radius:var(--r-2xl); padding:var(--sp-12);
  background:linear-gradient(135deg, var(--ink) 0%, #16233B 50%, #1D3557 100%);
  color:#fff; box-shadow:var(--sh-xl);
}
.newsletter::before{
  content:""; position:absolute; top:-40%; right:-8%; width:460px; height:460px;
  background:radial-gradient(circle, rgba(244,81,30,.34), transparent 68%); pointer-events:none;
}
.newsletter::after{
  content:""; position:absolute; bottom:-55%; left:-12%; width:520px; height:520px;
  background:radial-gradient(circle, rgba(3,105,161,.32), transparent 68%); pointer-events:none;
}
.newsletter > *{ position:relative; z-index:1; }
.newsletter h2,.newsletter h3{ color:#fff; }
.newsletter p{ color:rgba(255,255,255,.76); }
.newsletter__form{ display:flex; gap:var(--sp-3); max-width:520px; flex-wrap:wrap; }
.newsletter__form input{
  flex:1 1 240px; padding:13px var(--sp-5); border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.1);
  color:#fff; font-size:var(--fs-base);
}
.newsletter__form input::placeholder{ color:rgba(255,255,255,.5); }
.newsletter__form input:focus{ outline:none; border-color:var(--brand); background:rgba(255,255,255,.16); }
.newsletter__note{ font-size:var(--fs-sm); color:rgba(255,255,255,.55); margin:var(--sp-4) 0 0; }
@media (max-width:640px){ .newsletter{ padding:var(--sp-8) var(--sp-6); } }

/* ---- 5.15 Okruszki ---- */
.crumbs{ font-size:var(--fs-sm); color:var(--muted); padding-block:var(--sp-5); }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  list-style:none; margin:0; padding:0; }
.crumbs li{ display:flex; align-items:center; gap:var(--sp-2); }
.crumbs li:not(:last-child)::after{ content:"›"; color:var(--muted-2); }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--data); }
.crumbs [aria-current]{ color:var(--ink-3); font-weight:600; }

/* ---- 5.16 Paginacja ---- */
.pager{ display:flex; justify-content:center; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-12); flex-wrap:wrap; }
.pager a,.pager span{
  min-width:42px; height:42px; padding:0 var(--sp-3); display:inline-flex;
  align-items:center; justify-content:center; border-radius:var(--r);
  border:1px solid var(--line); background:#fff; color:var(--ink-3);
  font-weight:650; font-size:var(--fs-base); text-decoration:none;
  transition:all var(--speed) var(--ease);
}
.pager a:hover{ border-color:var(--ink-3); color:var(--ink); text-decoration:none; }
.pager [aria-current="page"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.pager .pager__gap{ border:none; background:none; color:var(--muted-2); min-width:24px; }

/* ---- 5.17 Nagłówek strony ---- */
.topbar{
  background:var(--ink); color:rgba(255,255,255,.72); font-size:var(--fs-sm);
  padding-block:8px; border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar a{ color:rgba(255,255,255,.82); font-weight:600; }
.topbar a:hover{ color:#fff; text-decoration:none; }
.topbar__links{ display:flex; gap:var(--sp-5); flex-wrap:wrap; }
/* Ten sam próg co dla nawigacji — inaczej między 820 a 980 px linki do kalkulatorów
   znikają z topbara, a nie ma ich jeszcze w menu mobilnym. */
@media (max-width:980px){ .topbar{ display:none; } }

.header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
}
.header__inner{ display:flex; align-items:center; gap:var(--sp-6); height:var(--header-h); }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; }
.logo__mark{
  width:36px; height:36px; border-radius:var(--r); display:grid; place-items:center;
  background:linear-gradient(135deg, var(--brand), var(--brand-700)); color:#fff;
  box-shadow:0 3px 10px rgba(244,81,30,.32); flex:none;
}
.logo__mark svg{ width:21px; height:21px; }
.logo__text{ display:flex; flex-direction:column; line-height:1.05; }
.logo__name{ font-family:var(--font-display); font-weight:850; font-size:1.0625rem;
  color:var(--ink); letter-spacing:-.032em; }
.logo__tld{ font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.14em;
  text-transform:uppercase; }

.nav{ display:flex; align-items:center; gap:2px; margin-right:auto; }
.nav__link{
  padding:9px var(--sp-4); border-radius:var(--r-sm); font-size:var(--fs-base);
  font-weight:650; color:var(--ink-2); text-decoration:none;
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease);
  display:inline-flex; align-items:center; gap:5px;
}
.nav__link:hover{ background:var(--bg-soft); color:var(--brand-700); text-decoration:none; }
.nav__link--active{ color:var(--brand-700); }
.nav__link--tool{ color:var(--data); }
@media (max-width:980px){ .nav{ display:none; } }

.header__actions{ display:flex; align-items:center; gap:var(--sp-2); flex:none; }
.icon-btn{
  width:38px; height:38px; border-radius:var(--r-sm); display:grid; place-items:center;
  color:var(--ink-3); transition:background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.icon-btn:hover{ background:var(--bg-soft); color:var(--ink); }
.icon-btn svg{ width:20px; height:20px; }
.burger{ display:none; }
@media (max-width:980px){ .burger{ display:grid; } }
@media (max-width:520px){ .header__actions .btn{ display:none; } }

/* ---- 5.17a Przełącznik języka ---- */
.langsw{
  display:inline-flex; align-items:center; gap:2px; padding:2px;
  background:var(--line-2); border-radius:var(--r-full); flex:none;
}
.langsw__opt{
  padding:5px 11px; border-radius:var(--r-full); font-size:var(--fs-xs);
  font-weight:750; letter-spacing:.04em; color:var(--muted); text-decoration:none;
  transition:background var(--speed) var(--ease), color var(--speed) var(--ease);
}
.langsw__opt:hover{ color:var(--ink); text-decoration:none; }
.langsw__opt[aria-current="true"]{ background:#fff; color:var(--ink); box-shadow:var(--sh-xs); }
@media (max-width:980px){ .langsw{ display:none; } }

/* ---- 5.17b Menu mobilne ---- */
.mnav{
  display:none; position:absolute; top:100%; left:0; right:0;
  background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--sh-lg);
  max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
  padding:var(--sp-4) 0 var(--sp-6);
}
.mnav[data-open="true"]{ display:block; }
.mnav__list{ list-style:none; margin:0; padding:0; }
.mnav__link{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:14px var(--sp-5); font-size:var(--fs-xl); font-weight:700; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--line-2);
}
.mnav__link:hover,.mnav__link:focus{ background:var(--bg-soft); text-decoration:none; }
.mnav__link--tool{ color:var(--data); }
.mnav__section{
  font-size:var(--fs-xs); font-weight:750; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding:var(--sp-5) var(--sp-5) var(--sp-2);
}
.mnav__tools{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-2); padding:0 var(--sp-5);
}
.mnav__tool{
  display:block; padding:11px var(--sp-4); border:1px solid var(--line);
  border-radius:var(--r); font-size:var(--fs-base); font-weight:650;
  color:var(--ink-2); text-decoration:none; background:var(--bg-soft);
}
.mnav__tool:hover{ border-color:var(--data); color:var(--data); text-decoration:none; }
.mnav__cta{ padding:var(--sp-5) var(--sp-5) 0; }
@media (min-width:981px){ .mnav{ display:none !important; } }

/* Blokada przewijania tła przy otwartym menu */
body.is-locked{ overflow:hidden; }

/* Pasek postępu czytania */
.progress{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:200;
  background:transparent; pointer-events:none; }
.progress__bar{ height:100%; width:38%; background:linear-gradient(90deg,var(--brand),var(--data));
  border-radius:0 3px 3px 0; }

/* ---- 5.18 Stopka ---- */
.footer{ background:var(--ink); color:rgba(255,255,255,.62); padding-block:var(--sp-16) var(--sp-8);
  font-size:var(--fs-base); margin-top:var(--sp-20); }
.footer h4{ color:#fff; font-size:var(--fs-sm); letter-spacing:.1em; text-transform:uppercase;
  margin:0 0 var(--sp-4); font-weight:750; }
.footer a{ color:rgba(255,255,255,.62); text-decoration:none; }
.footer a:hover{ color:#fff; text-decoration:none; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:var(--sp-8); }
.footer__bottom{
  margin-top:var(--sp-12); padding-top:var(--sp-6); border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap;
  font-size:var(--fs-sm); color:rgba(255,255,255,.45);
}
.footer .logo__name{ color:#fff; }
.footer .logo__tld{ color:rgba(255,255,255,.45); }
@media (max-width:900px){ .footer__grid{ grid-template-columns:repeat(2,1fr); gap:var(--sp-8); } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }

/* ---- 5.19 Kafelek narzędzia ---- */
.tool{
  display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-5);
  border:1px solid var(--line); border-radius:var(--r-lg); background:#fff;
  text-decoration:none; height:100%; box-shadow:var(--sh-xs);
  transition:transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease),
             border-color var(--speed) var(--ease);
}
.tool:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg);
  border-color:var(--data-100); text-decoration:none; }
.tool__icon{
  width:44px; height:44px; border-radius:var(--r); display:grid; place-items:center;
  background:var(--data-50); color:var(--data); flex:none;
}
.tool__icon svg{ width:22px; height:22px; }
.tool__name{ font-size:var(--fs-md); font-weight:750; color:var(--ink); margin:0; letter-spacing:-.015em; }
.tool__desc{ font-size:var(--fs-base); color:var(--ink-3); margin:0; line-height:1.55; }
.tool__go{ margin-top:auto; font-size:var(--fs-sm); font-weight:700; color:var(--data);
  display:inline-flex; align-items:center; gap:5px; }

/* ---- 5.20 Statystyki / liczby ---- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-6); }
.stat__value{
  font-size:clamp(1.75rem,1.4rem + 1.4vw,2.375rem); font-weight:850; color:var(--ink);
  letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums; margin:0 0 6px;
}
.stat__label{ font-size:var(--fs-sm); color:var(--muted); margin:0; font-weight:600; }

/* ---- 5.21 Nagłówek sekcji ---- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-5); margin-bottom:var(--sp-8); flex-wrap:wrap; }
.section-head h2{ margin:0; }
.section-head p{ margin:var(--sp-2) 0 0; color:var(--muted); font-size:var(--fs-base); }

/* ---- 5.22 Udostępnianie ---- */
.share{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.share__btn{
  width:38px; height:38px; border-radius:var(--r-full); display:grid; place-items:center;
  border:1px solid var(--line); color:var(--ink-3); background:#fff;
  transition:all var(--speed) var(--ease);
}
.share__btn:hover{ border-color:var(--ink); color:var(--ink); transform:translateY(-2px); }
.share__btn svg{ width:17px; height:17px; }

/* --------------------------------------------------------------------------
   6. NARZĘDZIA POMOCNICZE
   -------------------------------------------------------------------------- */
.visually-hidden{
  position:absolute!important; 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:-9999px; top:0; z-index:300; background:var(--ink); color:#fff;
  padding:12px 20px; border-radius:0 0 var(--r) 0; font-weight:700;
}
.skip-link:focus{ left:0; }

.muted{ color:var(--muted); }
.small{ font-size:var(--fs-sm); }
.center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.mt-4{ margin-top:var(--sp-4); } .mt-6{ margin-top:var(--sp-6); }
.mt-8{ margin-top:var(--sp-8); } .mt-10{ margin-top:var(--sp-10); }
.mb-4{ margin-bottom:var(--sp-4); } .mb-6{ margin-bottom:var(--sp-6); }
.mb-8{ margin-bottom:var(--sp-8); }
.divider{ height:1px; background:var(--line); margin-block:var(--sp-10); }

/* Blok reklamowy — makieta miejsca na reklamę */
.ad{
  display:grid; place-items:center; background:var(--bg-soft); border:1px dashed var(--line);
  border-radius:var(--r); color:var(--muted-2); font-size:var(--fs-xs); font-weight:650;
  letter-spacing:.08em; text-transform:uppercase; margin-block:var(--sp-8);
}
.ad--leaderboard{ min-height:120px; }
.ad--rect{ min-height:280px; }

/* Treść wpisu — style typograficzne dla obszaru artykułu */
.prose{ font-size:var(--fs-lg); }
.prose > h2:first-child{ margin-top:0; }
.prose figure{ margin:var(--sp-8) 0; }
.prose figcaption{ font-size:var(--fs-sm); color:var(--muted); margin-top:var(--sp-3);
  text-align:center; }
.prose ul,.prose ol{ margin-bottom:var(--sp-5); }
.prose li{ margin-bottom:var(--sp-2); }
.prose li::marker{ color:var(--brand); }
.prose a{ text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1.5px; text-decoration-color:var(--data-100); font-weight:550; }
.prose a:hover{ text-decoration-color:var(--data); }

/* ==========================================================================
   23. KOMPONENTY PRZENIESIONE Z MAKIET DO SYSTEMU
   Style, które siedziały w <style> w mockup/wpis.html i mockup/index.html.
   Widoki PHP nie mają własnych arkuszy, więc ich miejsce jest tutaj.
   Wyłącznie na zmiennych — zero nowych kolorów.
   ========================================================================== */

/* --- Hero wpisu: dwie kolumny, żeby góra strony nie zostawiała pustki po prawej --- */
.post-hero{
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:var(--sp-12); align-items:center;
  margin-block:var(--sp-2) var(--sp-10);
}
.post-hero h1{ font-size:clamp(1.75rem,1.35rem + 1.7vw,2.5rem); margin-top:var(--sp-3); }
.post-hero .lead{ font-size:var(--fs-xl); margin-bottom:0; }
.post-hero__meta{ margin-top:var(--sp-6); }
.post-hero__bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  flex-wrap:wrap; margin-top:var(--sp-5); padding-top:var(--sp-5);
  border-top:1px solid var(--line);
}
.post-hero__media{ margin:0; }
.post-hero__media img,.post-hero__media .ph{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-xl); box-shadow:var(--sh-lg);
}
.post-hero__media figcaption{
  font-size:var(--fs-sm); color:var(--muted); margin-top:var(--sp-3); text-align:left;
}
/* Wpis bez zdjęcia — hero nie ma czym wypełnić drugiej kolumny */
.post-hero--nomedia{ grid-template-columns:1fr; max-width:var(--wrap-narrow); }

/* --- Pasek kluczowych liczb: odpowiedź jeszcze nad zgięciem strony --- */
.keyfacts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; margin-bottom:var(--sp-10);
}
.keyfact{ background:#fff; padding:var(--sp-5) var(--sp-6); }
.keyfact__value{
  font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem); font-weight:850; color:var(--ink);
  letter-spacing:-.03em; line-height:1.1; margin:0 0 4px; font-variant-numeric:tabular-nums;
}
.keyfact__value span{ font-size:var(--fs-md); font-weight:700; color:var(--muted); }
.keyfact__label{ font-size:var(--fs-sm); color:var(--muted); margin:0; line-height:1.45; }
.keyfact:first-child .keyfact__value{ color:var(--brand); }

/* --- Kolumna spisu treści --- */
.toc-actions{ display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-4); }

/* --- Hero strony głównej i nagłówki sekcji --- */
.hero{ padding-block:var(--sp-16) var(--sp-10); background:var(--bg-soft);
  border-bottom:1px solid var(--line); }
.hero h1{ max-width:18ch; }
.section-title{ font-size:var(--fs-h2); letter-spacing:-.028em; margin:0 0 var(--sp-6); }

/* --- Kafelek narzędzia: karta bez zdjęcia, z akcentem danych --- */
.card--tool{ padding:var(--sp-6); text-decoration:none; }
.card--tool h3{
  font-size:var(--fs-h4); font-weight:750; color:var(--ink); margin:0 0 var(--sp-2);
  letter-spacing:-.02em;
}
.card--tool p{ font-size:var(--fs-base); color:var(--ink-3); margin:0; line-height:1.6; }
.card--tool:hover h3{ color:var(--data-600); }

/* --- Kolumna boczna wpisu --- */
.side__block{ margin-bottom:var(--sp-10); }
.side__title{
  font-size:var(--fs-xs); font-weight:750; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 var(--sp-4);
}
.side__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
  gap:var(--sp-3); }
.side__list a{ font-size:var(--fs-base); font-weight:600; color:var(--ink-2); }
.side__list a:hover{ color:var(--brand-700); }

/* --- Tabela liczbowa: przeliczniki, normy, rozkłady czasów.
   Wszystkie wartości w kolumnie mają tę samą długość (mm:ss, tabular-nums),
   więc wyśrodkowanie daje równy obraz i nie rozjeżdża się z nagłówkiem.
   Dla tabel opisowych zostaje domyślne wyrównanie do lewej. --- */
.table--num th,
.table--num td{ text-align:center; font-variant-numeric:tabular-nums; }
.table--num caption{ text-align:center; }
/* Pierwsza kolumna to klucz odczytu — po niej szuka się wiersza */
.table--num tbody td:first-child{ font-weight:700; color:var(--ink); }
.table--num thead th:first-child{ color:var(--ink); }
/* Delikatna zebra: przy pięćdziesięciu wierszach oko gubi linię */
.table--num tbody tr:nth-child(even){ background:var(--bg-tint); }
.table--num tbody tr:hover{ background:var(--data-50); }

/* Tabela dwukolumnowa w szerokiej kolumnie narzędzia rozstrzeliwuje się na całą
   dostępną przestrzeń i między wartościami zieje pustka, przez którą oko gubi wiersz.
   Ramka dopasowuje się wtedy do treści, zamiast treść do ramki. */
.table-wrap--slim{ max-width:620px; margin-inline:auto; }

/* Strona narzędzia nie ma prawej kolumny, więc treść dostaje ponad 1000 px.
   Tabelom przeliczników to służy — mają po siedem kolumn. Akapitowi nie: wiersz
   robi się dłuższy niż 110 znaków i przy przejściu do nowej linii oko gubi początek.
   Ograniczamy więc sam tekst, a nie kolumnę, żeby tabele zachowały pełną szerokość. */
.layout--tool .prose > p,
.layout--tool .prose > ul,
.layout--tool .prose > ol,
.layout--tool .prose > h2,
.layout--tool .prose > h3,
.layout--tool .prose > blockquote{ max-width:74ch; }

/* --- Układ strony narzędzia: spis treści + szeroka treść, bez prawej kolumny.
   Tabele przeliczników mają po 7 kolumn i w wąskiej kolumnie stają się nieczytelne. --- */
.layout--tool{ grid-template-columns:250px minmax(0,1fr); }
@media (max-width:1200px){
  .layout--tool{ grid-template-columns:1fr; }
  .layout--tool .toc-col{ display:none; }
}

/* --- Uzupełnienie kalkulatora: suwak i interpretacja wyniku --- */
.calc__range{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; margin-top:var(--sp-5);
  border-radius:var(--r-full); background:var(--data-100); cursor:pointer;
}
.calc__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--data); border:3px solid #fff; box-shadow:0 2px 8px rgba(3,105,161,.35);
}
.calc__range::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--data);
  border:3px solid #fff; box-shadow:0 2px 8px rgba(3,105,161,.35);
}
.calc__range:focus-visible{ outline:2px solid var(--data); outline-offset:4px; }
/* Wynik z interpretacją słowną, nie samą liczbą — wymóg z ARCHITEKTURA-SERWISU 5.3 */
.calc__meaning{
  font-size:var(--fs-base); color:var(--ink-3); line-height:1.65;
  margin:var(--sp-5) 0 0;
}
.calc__meaning strong{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* --- Miejsce montowania kalkulatora --- */
.calc-embed{ margin-block:var(--sp-8); }
.calc-embed:empty{
  min-height:120px; display:grid; place-items:center; background:var(--bg-soft);
  border:1px dashed var(--line); border-radius:var(--r-lg); color:var(--muted-2);
  font-size:var(--fs-sm);
}
.calc-embed:empty::before{ content:"Kalkulator wczytuje się…"; }

@media (max-width:960px){
  .post-hero{ grid-template-columns:1fr; gap:var(--sp-8); margin-bottom:var(--sp-8); }
  .post-hero__media img,.post-hero__media .ph{ aspect-ratio:16/9; }
}
@media (max-width:600px){
  .keyfact{ padding:var(--sp-4) var(--sp-5); }
  .post-hero__bar{ gap:var(--sp-4); }
  .post-hero .lead{ font-size:var(--fs-lg); }
  .table-wrap{ position:relative; overscroll-behavior-x:contain; }
}

@media print{
  .header,.topbar,.footer,.ad,.newsletter,.comments,.share,.progress{ display:none!important; }
  body{ font-size:11pt; }
  .layout,.layout--toc{ grid-template-columns:1fr; }
  .toc-col,.layout--toc aside,.side{ display:none; }
}