/* ============================================================
   GLÄNNE & SÖNER — artikelsektionen
   Laddas av artiklar.html och artikel-*.html, efter site.css och
   blog.css. Läslayouten (.article, .blog-layout, .side-card,
   .share, .tag-list) kommer från blog.css — här ligger bara det
   som är artiklarnas eget.
   ============================================================ */

/* --- Hubbens sidhuvud --- */
.artikel-hero { background: var(--dark); color: var(--white); padding: 150px 0 70px; }
.artikel-hero .page-badge { background: rgba(255,255,255,0.12); color: var(--gold-light); }
.artikel-hero .page-title { color: var(--white); }
.artikel-hero .page-subtitle { color: rgba(255,255,255,0.72); max-width: 58ch; }
.artikel-hero .page-subtitle a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.artikel-hero .page-subtitle a:hover { color: var(--white); }
/* Ämnesblocken är ankarmål från artikelsidorna — samma navbarshöjd att ta hänsyn till. */
.amne-block { scroll-margin-top: 96px; }
@media (max-width: 900px) { .artikel-hero { padding: 130px 0 54px; } }

/* --- Ämnesgrupper på hubben --- */
.amne-block + .amne-block { margin-top: 52px; }
.amne-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.amne-head h2 { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 500; color: var(--dark); }
.amne-head p { font-size: 0.9rem; color: var(--muted); margin: 0; }

/* --- Artikelkort --- */
.artikel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; }
.artikel-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; padding: 30px 32px 32px; transition: box-shadow 0.25s ease, transform 0.25s ease; }
.artikel-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,0.09); transform: translateY(-3px); }
.artikel-card h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 500; color: var(--dark); line-height: 1.32; margin-bottom: 12px; }
.artikel-card h3 a { color: inherit; text-decoration: none; }
.artikel-card h3 a::after { content: ''; position: absolute; inset: 0; }
.artikel-card:hover h3 a { color: var(--gold-dark); }
.artikel-card p { color: var(--text); font-size: 0.96rem; margin-bottom: 18px; }
.artikel-card .post-link { margin-top: auto; }
.artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--muted); margin-bottom: 14px; }
.artikel-meta .sep { opacity: 0.5; }

/* --- Planerade artiklar: ärlig lista, inte länkar som inte leder någonstans --- */
.artikel-planned { margin-top: 28px; background: var(--white); border: 1px dashed var(--gold-light); border-radius: 16px; padding: 30px 34px; }
.artikel-planned h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--dark); margin-bottom: 10px; }
.artikel-planned p { font-size: 0.93rem; color: var(--muted); margin-bottom: 16px; }
.artikel-planned ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.artikel-planned li { position: relative; padding-left: 22px; font-size: 0.93rem; color: var(--text); }
.artikel-planned li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-light); }
.artikel-planned li em { font-style: normal; font-size: 0.83rem; color: var(--muted); }

/* Sajten saknar global a-regel, så en länk i en sidokorts-text hade blivit
   blå och understruken. .article-body a sköts av blog.css. */
.side-card p a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }
.side-card p a:hover { color: var(--gold-dark); }
.side-cta p a { color: var(--gold-light); }

/* --- Innehållsförteckning i sidospalten --- */
.toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; }
.toc li { counter-increment: toc; }
.toc li + li { border-top: 1px solid rgba(0,0,0,0.06); margin-top: 10px; padding-top: 10px; }
.toc a { display: flex; gap: 10px; color: var(--text); text-decoration: none; font-size: 0.89rem; line-height: 1.45; }
.toc a::before { content: counter(toc); font-size: 0.72rem; font-weight: 700; color: var(--gold-dark); background: var(--gold-light); border-radius: 50%; width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.toc a:hover { color: var(--gold-dark); }

/* Navbaren är fixerad och 72 px hög, så ett ankarmål landar annars under den.
   scroll-margin löser det utan JS — sidans egna hopplänkar behöver ingen handler. */
.article-body h2[id] { scroll-margin-top: 96px; }

/* --- Kort svar: sammanfattningen direkt efter ingressen --- */
.key-answer { background: var(--gold-light); border-radius: 14px; padding: 24px 28px; margin: 0 0 34px; }
.key-answer h2 { font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold-dark); margin: 0 0 10px; }
.key-answer p { max-width: none; margin-bottom: 12px; color: var(--dark); }
.key-answer p:last-child { margin-bottom: 0; }

/* --- Jämförelse: två definitionslistor sida vid sida ---
   Medvetet inte en <table>: kortläge på mobil via display:block hade tagit bort
   tabellrollerna ur tillgänglighetsträdet, och en vågrätt rullande tabell är
   sämre att läsa på telefon än två kort under varandra. */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 34px 0; }
.compare-card { background: var(--beige); border: 1px solid rgba(0,0,0,0.06); border-radius: 14px; padding: 24px 26px; }
.compare-card > h3 { font-family: 'Playfair Display', serif; font-size: 1.12rem; font-weight: 500; color: var(--dark); margin: 0 0 4px; }
.compare-sub { font-size: 0.79rem; color: var(--muted); margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.compare-card dl { margin: 0; }
.compare-card dt { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-top: 15px; }
.compare-card dt:first-of-type { margin-top: 0; }
.compare-card dd { margin: 3px 0 0; font-size: 0.92rem; line-height: 1.6; color: var(--text); }

/* --- Signalkort: två listor med ledtrådar --- */
.signals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 30px 0; }
.signal-card { background: var(--white); border: 1px solid rgba(0,0,0,0.07); border-radius: 14px; padding: 24px 26px; }
.signal-card > h3 { font-family: 'Playfair Display', serif; font-size: 1.08rem; font-weight: 500; color: var(--dark); margin: 0 0 14px; }
.article-body .signal-card ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.article-body .signal-card li { position: relative; padding-left: 24px; margin: 0 0 11px; font-size: 0.93rem; line-height: 1.6; }
.article-body .signal-card li:last-child { margin-bottom: 0; }
.signal-card li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.signal-care { background: var(--beige); }
.signal-care li::before { background: var(--gold-dark); }

/* --- Notisruta --- */
.callout { border-left: 3px solid var(--gold); background: var(--beige); border-radius: 0 14px 14px 0; padding: 24px 28px; margin: 34px 0; }
.callout > h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 500; color: var(--dark); margin: 0 0 10px; }
.callout p { max-width: none; font-size: 0.96rem; margin-bottom: 12px; }
.callout p:last-child { margin-bottom: 0; }
.article-body .callout ul { list-style: none; margin: 14px 0 0; padding: 0; max-width: none; }
.article-body .callout li { margin: 0 0 9px; font-size: 0.95rem; line-height: 1.6; }
.article-body .callout li:last-child { margin-bottom: 0; }
.callout strong { color: var(--dark); }

/* --- Vidare till tjänsten, i stället för bloggens taggmoln --- */
.next-step { display: flex; align-items: center; gap: 22px; background: var(--dark); color: var(--white); border-radius: 14px; padding: 28px 32px; margin-top: 30px; }
.next-step h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 500; color: var(--white); margin-bottom: 6px; }
.next-step p { font-size: 0.92rem; color: rgba(255,255,255,0.72); margin: 0; max-width: 46ch; }
.next-step .btn { flex-shrink: 0; }

@media (max-width: 700px) {
    .compare, .signals { grid-template-columns: 1fr; }
    .key-answer, .callout { padding: 20px 22px; }
    .artikel-card { padding: 26px 24px 28px; }
    .next-step { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 24px 26px; }
}