/* =============================================================
   SD Kampanjsite – Långform & listor (article.css)
   Kräver tokens.css + base.css. Läskolumn, ingress, artikelkropp,
   dropcap, figur, related, prev/next, paginering, filter-bar, TOC.
   ============================================================= */

/* ---------- Artikel-layout (innehåll + ev. TOC-aside) ---------- */
.article-layout { display: grid; gap: var(--space-8); }
@media (min-width: 1000px) {
  .article-layout--toc { grid-template-columns: 1fr minmax(200px, 240px); align-items: start; }
}

/* ---------- Läskolumn ---------- */
.article { max-width: var(--measure); }
.article__lede {
  font-size: var(--text-xl); line-height: var(--leading-snug);
  color: var(--color-text); font-weight: var(--weight-regular);
  margin: 0 0 var(--space-6);
}

/* Element-rytm inuti artikelkroppen */
.article__body > * { margin-bottom: var(--space-5); }
.article__body > h2 { font-size: var(--text-3xl); margin-top: var(--space-8); }
.article__body > h3 { font-size: var(--text-2xl); margin-top: var(--space-7); }
.article__body > p { font-size: var(--text-base); }
.article__body > ul, .article__body > ol { padding-left: 1.3em; }
.article__body > :last-child { margin-bottom: 0; }

/* Anfang / dropcap */
.dropcap::first-letter {
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  color: var(--sd-red); font-size: 3.4em; line-height: .8;
  float: left; margin: 6px 10px 0 0;
}

/* Figur */
.article-figure { margin: var(--space-6) 0; }
.article-figure img, .article-figure .ph {
  width: 100%; border-radius: var(--radius-md); background: var(--sd-mist); aspect-ratio: 16/9;
}
.article-figure figcaption { margin-top: var(--space-2); }

/* ---------- Related ---------- */
.related { margin-top: var(--space-9); padding-top: var(--space-7); border-top: 2px solid var(--sd-navy); }
.related__title { font-size: var(--text-2xl); margin-bottom: var(--space-5); }

/* ---------- Prev / Next ---------- */
.prevnext { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
@media (min-width: 640px) { .prevnext { grid-template-columns: 1fr 1fr; } }
.prevnext__item {
  display: block; text-decoration: none; color: inherit;
  border: var(--hairline); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.prevnext__item:hover { border-color: var(--sd-navy); }
.prevnext__item--next { text-align: right; }
.prevnext__dir { font-size: var(--text-sm); color: var(--color-text-muted); }
.prevnext__title { font-weight: var(--weight-bold); color: var(--sd-navy); }

/* ---------- Paginering ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-8) 0 0; }
.pagination a, .pagination span {
  display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px;
  border: var(--hairline); border-radius: var(--radius-sm); text-decoration: none;
  color: var(--sd-navy); font-weight: var(--weight-bold);
}
.pagination a:hover { border-color: var(--sd-navy); }
.pagination [aria-current="page"] { background: var(--sd-navy); color: #fff; border-color: var(--sd-navy); }

/* ---------- Filter-bar (kategori) ---------- */
.filter-bar {
  display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center;
  padding-bottom: var(--space-5); border-bottom: var(--hairline); margin-bottom: var(--space-6);
}
.filter-bar__chip {
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  padding: 8px 16px; border-radius: var(--radius-pill); text-decoration: none;
  border: var(--hairline); color: var(--sd-navy); background: #fff;
}
.filter-bar__chip:hover { border-color: var(--sd-navy); }
.filter-bar__chip[aria-current="true"] { background: var(--sd-navy); color: #fff; border-color: var(--sd-navy); }

/* ---------- Innehållsförteckning (sticky) ---------- */
.toc { position: sticky; top: 88px; font-size: var(--text-sm); }
.toc__title { text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-2xs); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.toc__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); border-left: 2px solid var(--color-border); }
.toc__list a { display: block; padding: 2px 0 2px var(--space-4); margin-left: -2px; color: var(--sd-navy); text-decoration: none; border-left: 2px solid transparent; }
.toc__list a:hover, .toc__list a[aria-current="true"] { border-left-color: var(--sd-red); color: var(--sd-red); }

/* ---------- Tom-tillstånd / 404 ---------- */
.empty-state { text-align: center; padding-block: var(--space-10); max-width: 40rem; margin-inline: auto; }
.empty-state__code { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-6xl); color: var(--sd-red); line-height: 1; }