/* iwaszka.pl — „Wiedza” (E2): lista artykułów i wpis. Prefiks wz-.
   Wymaga /style.css (tokeny, .container, .sh, .eyebrow, .lead, .prose, .card, .btn, .todo, .label).
   Tylko barwy marki: grafit, złoto (linie, tła pod grafitem), biel, papier, piasek, kreska, popiół, mgła. */

.wz h1{font-size:clamp(2.25rem,1.5rem + 2.6vw,3.5rem);line-height:1.06;letter-spacing:-.03em}
.wz-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-bottom:24px;font-size:var(--fs-small);color:var(--popiol)}
.wz-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--grafit)}
.wz-head{max-width:52rem}
.wz-meta{display:flex;flex-wrap:wrap;gap:16px 40px;margin:8px 0 0;padding-top:20px;border-top:1px solid var(--kreska)}
.wz-meta div{display:grid;gap:4px}
.wz-meta dt{font-size:var(--fs-label);line-height:1.3;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--popiol)}
.wz-meta dd{margin:0;font-weight:500}

/* układ: spis treści + treść */
.wz-layout{display:grid;gap:40px;align-items:start}
.wz-toc{display:grid;gap:8px;padding:20px 24px;background:var(--papier);border:1px solid var(--kreska);border-radius:var(--r-md)}
.wz-toc ol{list-style:none;margin:0;padding:0;display:grid;counter-reset:wz}
.wz-toc li+li{border-top:1px solid var(--kreska)}
.wz-toc a{display:flex;align-items:baseline;gap:12px;min-height:44px;padding:10px 0;font-size:var(--fs-small);line-height:1.35;font-weight:500;text-decoration:none;color:var(--grafit)}
.wz-toc a::before{counter-increment:wz;content:counter(wz,decimal-leading-zero);flex:none;font-variant-numeric:tabular-nums;color:var(--popiol);font-weight:600}
.wz-toc__t{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-color .18s var(--ease)}
.wz-toc a:hover .wz-toc__t{text-decoration-color:var(--zloto)}
@media (min-width:1024px){
  .wz-layout{grid-template-columns:minmax(0,3fr) minmax(0,8fr);column-gap:64px}
  .wz-layout--bez-spisu{grid-template-columns:minmax(0,1fr)}
  .wz-toc{position:sticky;top:104px}
}

/* treść */
.wz-prose{max-width:46rem}
.wz-prose h2{scroll-margin-top:96px}
.wz-prose h3{margin-top:16px;scroll-margin-top:96px}
.wz-prose h2+h3{margin-top:0}
.wz-prose strong{font-weight:600}

/* tabela — przewija się w swoim polu, nigdy cała strona */
.wz-table{overflow-x:auto;border:1px solid var(--kreska);border-radius:var(--r-sm);background:var(--biel)}
.wz-table:focus-visible{outline:2px solid var(--grafit);outline-offset:3px}
.wz-table table{width:100%;border-collapse:collapse;font-size:var(--fs-small);line-height:1.45}
.wz-table caption{padding:14px 16px 0;text-align:left;font-weight:600}
.wz-table th{padding:12px 16px;text-align:left;vertical-align:bottom;font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--popiol);border-bottom:1px solid var(--kreska)}
.wz-table td{padding:12px 16px;vertical-align:top;border-bottom:1px solid var(--kreska)}
.wz-table tr:last-child td{border-bottom:0}
.wz-table td:first-child{font-weight:600;white-space:nowrap}

/* ramki „Zanim zaczniesz” / „Z naszego doświadczenia” */
.wz-box{position:relative;display:grid;gap:10px;margin-block:8px;padding:24px;background:var(--papier);border:1px solid var(--kreska);border-radius:var(--r-md)}
.wz-box::before{content:"";position:absolute;left:24px;top:-1px;width:56px;height:3px;border-radius:0 0 3px 3px;background:var(--zloto)}
.wz-box .label{color:var(--grafit)}
.wz-box--exp{background:var(--zloto-jasne);border-color:var(--zloto-jasne)}
.wz-box--exp::before{background:var(--grafit)}
@media (min-width:640px){.wz-box{padding:28px 32px}.wz-box::before{left:32px}}

/* ramka z liczbami — liczby zawsze z tekstu artykułu */
.wz-nums{display:grid;gap:20px;margin:16px 0 8px;padding:28px 24px;background:var(--grafit);color:var(--biel);border-radius:var(--r-lg)}
.wz-nums .label{color:var(--mgla)}
.wz-nums__list{display:grid;margin:0}
.wz-nums__list div{display:flex;flex-direction:column;gap:4px;padding:16px 0;border-top:1px solid var(--wegiel-kreska)}
.wz-nums__list dt{order:2;color:var(--mgla);font-size:var(--fs-small);line-height:1.4}
.wz-nums__list dd{order:1;margin:0;font-size:clamp(2rem,1.6rem + 1.4vw,2.75rem);line-height:1.05;font-weight:600;letter-spacing:-.03em;color:var(--biel)}
.wz-nums__list dd::after{content:"";display:block;width:24px;height:3px;margin-top:12px;background:var(--zloto)}
.wz-nums__list p{order:3;color:var(--mgla);font-size:var(--fs-small);line-height:1.4}
@media (min-width:640px){
  .wz-nums{padding:32px}
  .wz-nums__list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
}

/* nota redakcyjna */
.wz-note{margin-top:24px;padding-top:20px;border-top:1px solid var(--kreska);font-size:var(--fs-small);color:var(--popiol)}
.wz-note .label{display:inline;margin-right:8px;color:var(--grafit)}

/* zobacz też */
.wz-cards{display:grid;gap:var(--gap);margin:0;padding:0;list-style:none}
.wz-card{gap:12px}
.wz-card p:not(.label){color:var(--popiol)}
.wz-card__a{text-decoration:none;color:var(--grafit)}
.wz-card__a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.wz-card__a:focus-visible{outline:none}
.wz-card:has(.wz-card__a:focus-visible){outline:2px solid var(--grafit);outline-offset:3px}
@media (min-width:640px){.wz-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* lista artykułów */
.wz-list{display:grid;gap:var(--gap);margin:0;padding:0;list-style:none}
.wz-tile{gap:16px}
.wz-tile__h{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);line-height:1.12;letter-spacing:-.022em;max-width:30ch}
.wz-tile__lead{color:var(--popiol);max-width:62ch}
.wz-tile__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--fs-small);color:var(--popiol)}
@media (min-width:1024px){.wz-tile{padding:40px}}