/* ============================================================
   La Manuli - hub poradników i artykuły (redesign v2)
   Wspólny arkusz dla /poradniki i artykułów. Wymaga /css/lm.css
   (tokeny, .btn, .chip, .toy, .container, .icon, .sr-only, .bead-ring).
   Nie duplikuje lm.css - tylko to, czego tam brakuje.

   Spis:
     1. Aktywny punkt menu (kandydat do lm.css)
     2. Okruszki: komponent .breadcrumbs jest w lm.css (sekcja 16)
     3. Nagłówek strony .page-hero (kandydat do lm.css)
     4. Pasek CTA .cta-band + przycisk .btn--light (kandydat do lm.css)
     5. FAQ: komponent .faq jest w lm.css (sekcja 17); tu tylko osadzenie w artykule
     6. Hub: .hub-chips, .hub-group, .hub-grid, .guide-card
     7. Artykuł: .article, .article__toc, .article__body i komponenty (w tym tabela .table-wrap)
     8. Pasek postępu czytania .reading-progress
   Breakpointy: 640 / 768 / 1000 / 1280 (lm.css: 480 / 768 / 1000 / 1280).
   ============================================================ */

:root{
  --article-w:720px;      /* kolumna artykułu: tekst + szerokie komponenty (karty kroków, wskazówka, CTA) */
  /* miara tekstu: --measure z lm.css (36rem, ok. 70 znaków przy 17 px) */
  --toc-w:240px;
}

/* ---------- 1. Aktywny punkt menu ---------- */
/* aria-current="page" = ta strona (obsługuje lm.css); "true" = sekcja nadrzędna (artykuł w Poradnikach) */
.site-nav__link[aria-current="true"]{ background:var(--blue-soft); color:var(--blue-ink); }
.mobile-menu__link[aria-current]{ background:var(--blue-soft); }

/* ---------- 2. Okruszki ---------- */
/* Komponent .breadcrumbs: lm.css (sekcja 16). W nagłówku strony stoi nad wyśrodkowaną treścią,
   przy lewej krawędzi kontenera - w tym samym miejscu co na wzornikach i stronach informacyjnych. */

/* ---------- 3. Nagłówek strony (hero z kropkami) ---------- */
.page-hero{
  background-color:var(--blue-soft);
  background-image:radial-gradient(circle, #C9E4F4 2px, transparent 2.6px);
  background-size:24px 24px;
  background-position:12px 12px;
  border-radius:0 0 clamp(28px, 5vw, 48px) clamp(28px, 5vw, 48px);
  padding-block:var(--crumbs-before) clamp(28px, 4.4vw, 56px);
}
/* artykuł ma pod nagłówkiem serwisu pasek postępu czytania (4 px) - okruszki zostają na tej samej wysokości */
.reading-progress + main .page-hero{ padding-top:max(0px, calc(var(--crumbs-before) - 4px)); }
.page-hero__inner{
  max-width:880px;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(12px, 1.8vw, 20px);
}
/* H1: --fs-h1 z lm.css (jak każda strona poza home) */
.page-hero__lead{
  max-width:680px;
  font-size:var(--fs-lead);
  line-height:1.6;
  color:var(--ink);
}
.page-hero__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.page-hero__meta{
  display:flex;
  align-items:center;
  gap:8px;
  font:800 var(--fs-micro)/1 var(--font-head);
  color:var(--ink);
}
.page-hero__meta .icon{ color:var(--blue-deep); width:18px; height:18px; }
/* czas czytania + daty artykułu (publikacja, aktualizacja) w jednym bloku pod przyciskami */
.page-hero__info{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.page-hero__dates{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  font:600 var(--fs-micro)/1.4 var(--font-body);
  color:var(--ink-soft);
}
.page-hero__dates span{ white-space:nowrap; }
.page-hero__dates span + span::before{ content:"\00B7"; margin-inline:8px; }
@media (max-width:479px){
  .page-hero__dates{ flex-direction:column; align-items:center; gap:2px; }
  .page-hero__dates span + span::before{ content:none; }
}

/* ---------- 4. Pasek CTA ---------- */
.cta-band{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:clamp(22px, 3.6vw, 40px);
  border-radius:var(--radius-lg);
  background-color:var(--blue);
  background-image:radial-gradient(circle, rgba(255,255,255,.25) 2px, transparent 2.6px);
  background-size:22px 22px;
  box-shadow:0 6px 0 var(--blue-edge);
  color:var(--blue-ink);
}
.cta-band h2{ font-size:var(--fs-h2-text); line-height:1.15; color:var(--blue-ink); }
.cta-band p{ font-size:var(--fs-body); line-height:1.6; color:var(--blue-ink); }
.cta-band__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.cta-band :focus-visible{ outline-color:var(--blue-ink); }
/* wersja pozioma (hub): tekst po lewej, przyciski po prawej */
.cta-band--row{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.cta-band--row .cta-band__text{ display:flex; flex-direction:column; gap:12px; max-width:580px; }
/* biały przycisk na kolorowym tle (ton: błękit) */
.btn--light{
  --btn-bg:#fff;
  --btn-bg-hover:var(--blue-soft);
  --btn-fg:var(--blue-ink);
  --btn-edge:var(--blue-edge);
  padding:0 22px 0 18px;
}

/* ---------- 5. FAQ ---------- */
.faq-section{
  padding-block:clamp(48px, 6vw, 80px);
  margin-top:clamp(32px, 4vw, 56px);
  background:var(--bg-alt);
}
/* komponent: lm.css (sekcja 17); w artykule blok ma szerokość kolumny tekstu i stoi na środku */
.faq-section .faq{ max-width:var(--article-w); margin-inline:auto; }

/* ---------- 6. Hub poradników ---------- */
.hub{
  --hub-gap:clamp(14px, 1.6vw, 20px);
  display:flex;
  flex-direction:column;
  gap:clamp(28px, 4vw, 48px);
  padding-block:clamp(12px, 2.4vw, 28px) clamp(48px, 6vw, 80px);
}

/* chipy grup: przyklejone pod nagłówkiem; bez JS to linki skoku, z JS filtr (radiogroup) */
.hub-chips{
  position:sticky;
  top:var(--header-h-sm);
  z-index:30;
  margin-inline:calc(-1 * var(--gutter));
  padding:10px var(--gutter);
  background:rgba(255,255,255,.94);
}
.hub-chips ul{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  padding:6px;                  /* miejsce na obrys fokusu wewnątrz przewijanego rzędu */
  margin:-6px;
  list-style:none;
  scrollbar-width:none;
}
.hub-chips ul::-webkit-scrollbar{ display:none; }
.hub-chips .chip{
  --dot:var(--blue);
  flex:0 0 auto;
  padding-left:8px;
  cursor:pointer;
}
.hub-chips .chip::before{
  content:"";
  flex:0 0 18px;
  width:18px;                   /* jawna szerokość: Safari 17 nie wlicza flex-basis do szerokości przycisku i liczba wystaje */
  height:18px;
  margin-right:2px;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0 26%, var(--dot) 30%);
}
.hub-chips .chip[aria-checked="true"]::before{
  background:radial-gradient(circle, var(--blue-deep) 0 26%, #fff 30%);
}
.hub-chips .chip--peach{ --dot:var(--peach-edge); }
.hub-chips .chip--violet{ --dot:var(--violet); }
.hub-chips .chip--mint{ --dot:var(--mint); }
.hub-chips .chip--coral{ --dot:var(--coral); }
.hub-chips .chip--yellow{ --dot:var(--yellow-soft-edge); }

.hub-group{ display:flex; flex-direction:column; gap:clamp(14px, 1.8vw, 20px); }
.hub-group__title{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:var(--fs-h2-text);
  line-height:1.2;
  scroll-margin-top:72px;
}
.hub-group__title::before{
  content:"";
  flex:0 0 22px;
  height:22px;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0 26%, var(--toy-edge) 30%);
}

/* siatka kart - jedna wielkość karty we wszystkich grupach:
   do 640 px jedna kolumna, 640-1099 px dwie (nieparzysta ostatnia karta zajmuje cały rząd),
   od 1100 px wspólna siatka 5 kolumn: grupa zajmuje tyle kolumn, ile ma kart (.hub-group--2/--3/--5,
   klasa nadana w HTML, bez :has()), więc grupy 3 + 2 stoją obok siebie w jednym rzędzie */
.hub-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:var(--hub-gap);
  padding-bottom:6px;           /* miejsce na twardą krawędź kart */
  list-style:none;
}
/* li jako jednokomórkowa siatka: karta rozciąga się na całą wysokość rzędu bez height:100%
   (procent wysokości w elemencie siatki Safari 17 rozwiązuje względem złej wysokości) */
.hub-grid > li{ display:grid; grid-template-columns:minmax(0, 1fr); min-width:0; }

/* karta poradnika (a.guide-card.toy.toy--{ton}.toy--tinted) */
.guide-card{
  --toy-edge-w:5px;
  display:flex;
  flex-direction:row;
  gap:12px;
  padding:8px;
  border-radius:24px;
}
/* miniatura: telefon - kwadrat 88 px o stałych wymiarach; od 1000 px blok 4:3 (patrz media query).
   Zawartość nie ma procentowych wysokości w przepływie: zdjęcia są pozycjonowane absolutnie,
   wzór SVG ma szerokość w % i wysokość auto - inaczej Safari 17 zawyża wysokość rzędu siatki. */
.guide-card__art{
  position:relative;
  flex:0 0 88px;
  align-self:flex-start;
  width:88px;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:18px;
  background:#fff;
}
.guide-card__art > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.guide-card__art--split > img{ width:50%; }
.guide-card__art--split > img + img{ left:50%; }
.guide-card__art .pattern-svg{ display:block; flex:none; width:88%; height:auto; aspect-ratio:1; }
.guide-card__sizes{ display:flex; align-items:flex-end; gap:4px; }
.guide-card__sizes .bead{ --bead-hole:#fff; }
.guide-card__sizes .bead:nth-child(1){ --c:var(--violet); --bead-size:14px; }
.guide-card__sizes .bead:nth-child(2){ --c:var(--blue); --bead-size:22px; }
.guide-card__sizes .bead:nth-child(3){ --c:var(--coral); --bead-size:32px; }
.guide-card__badge{
  position:absolute;
  right:6px;
  bottom:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 0 var(--toy-edge);
  color:var(--blue-ink);
}
.guide-card__badge .icon{ width:14px; height:14px; }
.guide-card__body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:0 4px 4px;
}
.guide-card__title{ font:900 var(--fs-h4)/1.25 var(--font-head); color:var(--blue-ink); text-wrap:pretty; }
.guide-card__desc{ font-size:.875rem; line-height:1.5; color:var(--ink); }
.guide-card__meta{
  display:flex;
  align-items:center;
  gap:6px;
  font:800 .75rem/1 var(--font-head);
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.guide-card__meta .icon{ width:14px; height:14px; color:var(--blue-deep); }
.guide-card__tag{
  margin-left:4px;
  padding:3px 8px;
  border-radius:var(--radius-pill);
  background:#fff;
  color:var(--blue-ink);
}

@media (min-width:640px){
  .hub-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:640px) and (max-width:1099.98px){
  /* nieparzysta liczba kart: ostatnia na całą szerokość zamiast samotnej karty z pustym polem obok */
  .hub-grid > li:last-child:nth-child(odd){ grid-column:1 / -1; }
}
@media (min-width:1000px){
  .hub-chips{ top:var(--header-h); }
  .hub-chips ul{ flex-wrap:wrap; overflow:visible; padding:0; margin:0; }
  .hub-group__title{ scroll-margin-top:120px; }   /* pod paskiem chipów (2 rzędy, 116 px) */
}
@media (min-width:1100px){
  /* karta jako zwykły blok: miniatura 4:3 to blok o szerokości kolumny i wysokości auto z aspect-ratio
     (nie element flex) - tak samo w Safari, Firefoksie i Chromium */
  .guide-card{ display:block; padding:10px 10px 14px; }
  .guide-card__art{ width:auto; height:auto; aspect-ratio:4 / 3; }
  .guide-card__art .pattern-svg{ width:66%; }   /* 88% wysokości bloku 4:3 */
  .guide-card__badge{ width:32px; height:32px; }
  .guide-card__badge .icon{ width:18px; height:18px; }
  .guide-card__sizes{ gap:10px; }
  .guide-card__sizes .bead:nth-child(1){ --bead-size:26px; }
  .guide-card__sizes .bead:nth-child(2){ --bead-size:46px; }
  .guide-card__sizes .bead:nth-child(3){ --bead-size:70px; }
  .guide-card__body{ justify-content:flex-start; margin-top:12px; }
  /* wspólna siatka 5 kolumn dla całego huba; elementy na całą szerokość poza grupami 2 i 3 kart */
  .hub{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    column-gap:var(--hub-gap);
    row-gap:clamp(28px, 4vw, 48px);
  }
  .hub > *{ grid-column:1 / -1; min-width:0; }
  .hub > .hub-group--3{ grid-column:span 3; }
  .hub > .hub-group--2{ grid-column:span 2; }
  .hub-grid{ flex:1 1 auto; grid-template-columns:repeat(5, minmax(0, 1fr)); }
  .hub-group--3 > .hub-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .hub-group--2 > .hub-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ---------- 7. Artykuł ---------- */
.article{ padding-top:clamp(20px, 4vw, 56px); }
.article__layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:24px;
  align-items:start;
}

/* spis treści: dwie wersje tej samej listy - boczna (od 1000 px) i zwijana (poniżej) */
.article__toc{ display:none; }
.article__toc-title{
  padding:0 8px 8px;
  font:800 .75rem/1 var(--font-head);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.article__toc ol,
.article__toc-fold ol{ list-style:none; display:flex; flex-direction:column; gap:2px; }
.article__toc a,
.article__toc-fold a{
  --c:var(--blue);
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:44px;
  padding:8px;
  border-radius:12px;
  color:var(--blue-ink);
  font:800 .875rem/1.3 var(--font-head);
  text-decoration:none;
}
.article__toc a::before,
.article__toc-fold a::before{
  content:"";
  flex:0 0 14px;
  height:14px;
  margin-top:2px;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0 26%, var(--c) 30%);
}
.article__toc li:nth-child(6n+2) a,
.article__toc-fold li:nth-child(6n+2) a{ --c:var(--peach-edge); }
.article__toc li:nth-child(6n+3) a,
.article__toc-fold li:nth-child(6n+3) a{ --c:var(--coral); }
.article__toc li:nth-child(6n+4) a,
.article__toc-fold li:nth-child(6n+4) a{ --c:var(--mint); }
.article__toc li:nth-child(6n+5) a,
.article__toc-fold li:nth-child(6n+5) a{ --c:var(--violet); }
.article__toc li:nth-child(6n+6) a,
.article__toc-fold li:nth-child(6n+6) a{ --c:var(--yellow-soft-edge); }
.article__toc a:hover,
.article__toc-fold a:hover{ background:var(--blue-soft); color:var(--blue-ink); }
.article__toc a[aria-current="true"]{ background:#fff; }
.article__toc a:focus-visible,
.article__toc-fold a:focus-visible{ outline-offset:-3px; }

.article__toc-fold{
  margin-bottom:24px;
  padding:0 16px;
  border-radius:18px;
  background:var(--bg-alt);
}
.article__toc-fold summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:52px;
  cursor:pointer;
  list-style:none;
  font:900 .9375rem/1 var(--font-head);
  color:var(--blue-ink);
}
.article__toc-fold summary::-webkit-details-marker{ display:none; }
.article__toc-fold summary::after{
  content:"";
  border:6px solid transparent;
  border-top-color:var(--blue-deep);
  border-bottom-width:0;
  transition:transform var(--dur-2) var(--ease-out);
}
.article__toc-fold[open] summary::after{ transform:rotate(180deg); }
.article__toc-fold ol{ padding-bottom:14px; }
.article__toc-fold summary:focus-visible{ outline-offset:-3px; border-radius:18px; }

/* tekst artykułu */
.article__body{
  min-width:0;
  max-width:var(--article-w);
  font-size:var(--fs-text);      /* 17 px */
  line-height:var(--lh-text);
}
.article__body > * + *{ margin-top:clamp(18px, 2.4vw, 24px); }
.article__body > p,
.article__body > h2,
.article__body > h3,
.article__body > ul,
.article__body > ol:not(.article-steps){ max-width:var(--measure); }
.article__body a{ font-weight:700; }
.article__lead{
  font:600 var(--fs-lead)/1.7 var(--font-body);
  color:var(--blue-ink);
}
.article__body h2{
  margin-top:clamp(32px, 4vw, 40px);
  font-size:var(--fs-h2-text);
  line-height:1.2;
  letter-spacing:0;
  color:var(--blue-deep);
  text-wrap:pretty;
  scroll-margin-top:24px;
}
.article__body h2 + *{ margin-top:16px; }
.article__body h3{
  margin-top:28px;
  font-size:var(--fs-h3);
  line-height:1.3;
}
.article__body h3 + *{ margin-top:8px; }
.article__body ul:not(.checks),
.article__body ol:not(.steps):not(.article-steps){ padding-left:1.4em; }
.article__body ul:not(.checks) > li + li,
.article__body ol:not(.steps):not(.article-steps) > li + li{ margin-top:.4em; }

/* lista z koralikami (ul.checks) */
.checks{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.checks li{ --c:var(--mint); position:relative; padding-left:34px; line-height:1.6; }
.checks li::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0 26%, var(--c) 30%);
}
.checks li:nth-child(4n+2){ --c:var(--peach-edge); }
.checks li:nth-child(4n+3){ --c:var(--coral); }
.checks li:nth-child(4n+4){ --c:var(--blue); }

/* lista numerowana (ol.steps) */
.steps{ counter-reset:step; list-style:none; display:flex; flex-direction:column; gap:14px; }
.steps li{ counter-increment:step; position:relative; padding-left:52px; line-height:1.65; }
.steps li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0 54%, var(--blue) 58%);
  font:900 1rem/1 var(--font-head);
  color:var(--blue-ink);
}
.steps li > strong:first-child{ display:block; font-family:var(--font-head); color:var(--blue-ink); }

/* karty kroków (ol.article-steps > li.step-card.toy.toy--tinted) */
.article-steps{
  counter-reset:step;
  list-style:none;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:78%;
  gap:14px;
  margin-inline:calc(-1 * var(--gutter));
  padding:4px var(--gutter) 14px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gutter);
  scrollbar-width:none;
}
.article-steps::-webkit-scrollbar{ display:none; }
.article-steps:focus-visible{ outline-offset:-3px; }
.step-card{
  --toy-edge-w:5px;
  --toy-edge:var(--blue);
  --toy-soft:var(--blue-soft);
  counter-increment:step;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:8px 8px 16px;
  border-radius:24px;
  scroll-snap-align:start;
}
.step-card:nth-child(6n+2){ --toy-edge:var(--mint-edge); --toy-soft:var(--mint-soft); }
.step-card:nth-child(6n+3){ --toy-edge:var(--peach-edge); --toy-soft:var(--peach-soft); }
.step-card:nth-child(6n+4){ --toy-edge:var(--coral-edge); --toy-soft:var(--coral-soft); }
.step-card:nth-child(6n+5){ --toy-edge:var(--violet-edge); --toy-soft:var(--violet-soft); }
.step-card:nth-child(6n+6){ --toy-edge:var(--yellow-soft-edge); --toy-soft:var(--yellow-soft); }
/* kwadrat: jawna szerokość zamiast rozciągania w kolumnie flex, zdjęcie pozycjonowane absolutnie */
.step-card__media{
  position:relative;
  flex:none;
  width:100%;
  height:auto;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:18px;
  background:#fff;
}
.step-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.step-card__media::before{
  content:counter(step);
  position:absolute;
  left:10px;
  top:10px;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0 52%, var(--toy-edge) 56%);
  font:900 1rem/1 var(--font-head);
  color:var(--blue-ink);
}
.article__body .step-card h3{ margin:0; padding:0 6px; font:900 var(--fs-h4)/1.25 var(--font-head); color:var(--blue-ink); }
.article__body .step-card p{ margin:0; padding:0 6px; font-size:.875rem; line-height:1.55; color:var(--ink); }

/* wskazówka i uwaga: komponent .callout z lm.css (sekcja 18) */

/* tabela (div.table-wrap[role=region][tabindex=0] > table.article-table z <caption>)
   kontener przewija się sam (overflow-x), więc strona nigdy nie przewija się w poziomie */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:2px solid var(--border-subtle);
  border-radius:18px;
  background:#fff;
}
.table-wrap:focus-visible{ outline-offset:2px; }
.article-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9375rem;
  line-height:1.5;
}
.article-table caption{
  padding:12px 14px;
  text-align:left;
  font:900 1rem/1.3 var(--font-head);
  color:var(--blue-ink);
}
.article-table th,
.article-table td{
  padding:10px 14px;
  border-top:1px solid var(--border-subtle);
  text-align:left;
  vertical-align:top;
  color:var(--ink);
}
.article-table thead th{
  background:var(--blue-soft);
  font:900 .8125rem/1.3 var(--font-head);
  color:var(--blue-ink);
}
.article-table tbody th{
  width:32%;
  font:800 .9375rem/1.4 var(--font-head);
  color:var(--blue-ink);
}
@media (max-width:479px){
  .article-table{ font-size:.875rem; }
  .article-table caption,
  .article-table th,
  .article-table td{ padding-inline:10px; }
  .article-table tbody th{ font-size:.875rem; }
}

/* powiązany poradnik: aside.related-card.toy.toy--{ton}.toy--tinted (gen_article_v2.py: related_card_html)
   ikona z /assets/icons.svg w kółku-koraliku (pierścień w kolorze tonu), tytuł, akapit z linkami */
.related-card{
  --toy-edge-w:5px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px 18px;
  border-radius:24px;
}
.related-card__icon{
  flex:0 0 52px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0 62%, var(--toy-edge) 66%);
  color:var(--blue-ink);
}
.related-card__icon .icon{ width:26px; height:26px; }
.related-card__body{ display:flex; flex-direction:column; gap:4px; min-width:0; max-width:var(--measure); }
.related-card__title{ font:900 var(--fs-h4)/1.25 var(--font-head); color:var(--blue-ink); text-wrap:pretty; }
.related-card__text{ font-size:var(--fs-body); line-height:1.6; color:var(--ink); }
@media (min-width:640px){
  .related-card{ align-items:center; gap:16px; padding:18px 22px 20px 18px; }
}

/* zdjęcie w tekście (figure.article-figure) */
.article-figure{ max-width:min(100%, 560px); }
.article-figure img{
  width:100%;
  border:2px solid var(--border-card);
  border-radius:18px;
}
.article-figure figcaption{
  margin-top:8px;
  text-align:center;
  font-size:.875rem;
  line-height:1.5;
  color:var(--ink-soft);
}

.article__body .article__cta{ margin-top:clamp(28px, 4vw, 40px); }
.article__body .article__cta h2{ margin-top:0; font-size:var(--fs-h2-text); line-height:1.15; color:var(--blue-ink); }
.article__body .article__cta h2 + *{ margin-top:0; }

/* od 768 px karty kroków w rzędzie bez przewijania */
@media (min-width:768px){
  /* dwie kolumny kart poziomych (zdjęcie obok tekstu): cztery karty w rzędzie w kolumnie 720 px
     dawały tekst po 2-3 słowa w wierszu i karty o bardzo różnej wysokości */
  .article-steps{
    grid-auto-flow:row;
    grid-auto-columns:auto;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    margin-inline:0;
    padding:4px 0 14px;
    overflow:visible;
  }
  .step-card{
    display:grid;
    grid-template-columns:clamp(112px, 36%, 140px) minmax(0, 1fr);
    grid-template-rows:auto 1fr;
    align-content:start;
    gap:6px 14px;
    padding:8px 14px 12px 8px;
  }
  .step-card__media{ grid-row:1 / span 2; align-self:start; }
  .article__body .step-card h3{ padding:8px 0 0; }
  .article__body .step-card p{ padding:0; }
}

/* od 1000 px: spis treści z boku, zwijany znika */
@media (min-width:1000px){
  .article__layout{
    grid-template-columns:var(--toc-w) minmax(0, var(--article-w));
    gap:clamp(32px, 5vw, 64px);
    justify-content:center;
  }
  .article__toc{
    position:sticky;
    top:calc(var(--header-h) + 24px);
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:18px;
    border-radius:var(--radius);
    background:var(--bg-alt);
  }
  .article__toc-fold{ display:none; }
}

/* ---------- 8. Pasek postępu czytania ---------- */
.reading-progress{
  position:sticky;
  top:var(--header-h-sm);
  z-index:40;
  height:4px;
  background:rgba(14,77,110,.08);
}
.reading-progress__bar{
  display:block;
  height:100%;
  transform-origin:0 50%;
  transform:scaleX(0);
  background:linear-gradient(90deg, var(--blue), var(--mint), var(--yellow), var(--coral), var(--violet));
}
@media (min-width:1000px){
  .reading-progress{ top:var(--header-h); }
}

/* ---------- 9. Ramka "Z tego artykułu dowiesz się", pole autora, "Czytaj dalej" ---------- */
/* etykiety to zwykłe akapity (p), nie nagłówki - wykaz H1/H2/H3 strony zostaje bez zmian */

/* notatka pod nagłówkiem (dawniej akapit z inline style) */
.article__note{ font-size:var(--fs-body); line-height:1.65; color:var(--ink-soft); }

/* ramka korzyści na początku treści: div.learn.toy.toy--{ton}.toy--tinted; lista to ul.checks (koraliki z palety) */
.learn{
  --toy-edge-w:5px;
  padding:16px 18px 20px;
  border-radius:24px;
}
.learn__head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.learn__icon{
  flex:0 0 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
  border-radius:14px;
  background:#fff;
  color:var(--blue-ink);
}
.learn__icon .icon{ width:26px; height:26px; }
.learn__label{ font:900 var(--fs-h4)/1.25 var(--font-head); color:var(--blue-ink); }
.learn__list{ gap:8px; }
.learn__list li{ font-size:var(--fs-body); line-height:1.55; color:var(--ink); }

/* pole autora pod treścią: logo-koralik, zespół, miejsce, opcjonalnie data aktualizacji */
.author{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  border:2px solid var(--border-card);
  border-radius:var(--radius);
  background:var(--bg-alt);
}
.author__logo{
  flex:0 0 64px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 3px var(--blue);
}
.author__logo img{ width:46px; height:46px; max-width:none; }
.author__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.author__name{ font:900 var(--fs-h4)/1.25 var(--font-head); color:var(--blue-ink); }
.author__name a{ color:inherit; font-weight:inherit; text-decoration:none; }
.author__name a:hover{ text-decoration:underline; }
.author__desc,
.author__date{ font-size:.875rem; line-height:1.45; color:var(--ink-soft); }
.author__date{ font-size:.8125rem; }

/* "Czytaj dalej": 3 karty tekstowe (bez miniatur) w siatce o szerokości układu artykułu */
.read-next{ padding-block:clamp(36px, 5vw, 64px) clamp(48px, 6vw, 80px); }
.section-label{
  display:flex;
  align-items:center;
  gap:12px;
  font:900 var(--fs-h2-text)/1.2 var(--font-head);
  color:var(--blue-ink);
}
.section-label::before{
  content:"";
  flex:0 0 22px;
  height:22px;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0 26%, var(--blue) 30%);
}
.read-next .section-label,
.read-next__grid{
  max-width:calc(var(--toc-w) + var(--article-w) + 64px);
  margin-inline:auto;
}
.read-next__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:clamp(14px, 1.6vw, 20px);
  margin-top:16px;
  padding-bottom:6px;           /* miejsce na twardą krawędź kart */
  list-style:none;
}
.read-next__grid > li{ display:grid; grid-template-columns:minmax(0, 1fr); min-width:0; }
/* karta bez miniatury (.guide-card z huba): kolumna, meta przyklejona do dołu */
.guide-card.guide-card--text{ display:flex; flex-direction:column; padding:16px 18px 18px; }
.guide-card--text .guide-card__body{ justify-content:flex-start; gap:8px; margin-top:0; padding:0; }
.guide-card--text .guide-card__meta{ margin-top:auto; padding-top:4px; }
@media (min-width:768px){
  .read-next__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}