/* artiklar.css – laddas bara av /sv/artiklar/ och artikelsidorna (Session E, sajt/articles.py).
   Bygger på site.css: samma variabler, knappar, .sect, .faq och tabeller. Ingen egen färg.
   Artikelmått: brödtexten max ca 70 tecken per rad (62ch i Manrope 18 px). */

.artikel .hero h1 { max-width: 30ch; }
.artikel .lead,
.artikel .sect > p,
.artikel .sect > ul,
.artikel .sect > ol,
.artikel .sect > h3,
.artikel .faq,
.artikel .table-wrap,
.artikel .toc { max-width: 62ch; }
.artikel .sect > ol { padding-inline-start: 1.4em; }
.artikel .sect > h3 { font-size: 22px; }
/* ankare hamnar inte under den klistrade headern */
.artikel [id] { scroll-margin-top: 96px; }

/* innehållsförteckning */
.toc { margin: 8px 0 0; }
.toc details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 4px 16px;
}
.toc summary { cursor: pointer; font-weight: 800; padding-block: 10px; }
.toc ol { margin: 4px 0 12px; padding-inline-start: 1.4em; }
.toc li { margin: .35em 0; }

/* "Räkna själv" (kalkylator) */
.calc-link {
  border-inline-start: 3px solid var(--mint); padding-inline-start: 12px; font-weight: 700; max-width: 62ch;
}

/* källor */
.kallor ul { font-size: 16px; color: var(--text-700); }

/* publiceringsdatum (visas först när Fakhri satt det) */
.art-date { font-size: 16px; color: var(--text-500); }

/* översikten /sv/artiklar/ */
ul.art-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
ul.art-list li {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
ul.art-list h2 { font-size: 22px; margin: 0; }
ul.art-list p { margin: 0; color: var(--text-700); max-width: 62ch; }

@media (min-width: 900px) {
  .artikel [id] { scroll-margin-top: 140px; }
  .artikel .sect > h3 { font-size: 24px; }
  ul.art-list { grid-template-columns: repeat(2, 1fr); }
  ul.art-list h2 { font-size: 24px; }
}