/* =============================================================
   SD Kampanjsite – Sidnivå & landningssido-specifika stilar (site.css)
   Delad över alla landningssidor. Kräver tokens/base/components/shell/
   editorial/charts/article. Här bor: minimal LP-header, hero-stats,
   ingress, bevisfigur, cookie-banner, interaktiv räknare, footer-nav.
   ============================================================= */

/* ---------- Minimal landningssido-header ---------- */
.lp-header { position: sticky; top: 0; z-index: var(--z-header); background:#fff; border-bottom: var(--hairline); }
.lp-header__inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:64px; }
.brand-logo { display:inline-flex; align-items:center; }
.brand-logo img { height: 34px; width: auto; display:block; }

/* ---------- Hero-stödelement ---------- */
.hero-stats { display:grid; gap:var(--space-5); margin-top:var(--space-7); }
@media (min-width:620px){ .hero-stats { grid-template-columns:repeat(3,1fr);} }
/* Beloppen får inte radbryta ("+3 500 kr" ska hållas ihop). Nedskalad
   siffra som ryms i tre kolumner, med tillräckligt liten min för mobil. */
.hero-stats .stat__num { font-size:clamp(1.75rem, 4.2vw, 2.75rem); white-space:nowrap; }

/* ---------- Ingress / lede ---------- */
.lede { font-size:var(--text-xl); line-height:var(--leading-snug); max-width:var(--measure); margin:0 0 var(--space-6); }

/* ---------- Bevisfigur / bild ---------- */
.proof-figure { margin:0; }
.proof-figure img { width:100%; border-radius:var(--radius-lg); display:block; }
.proof-figure figcaption { margin-top:var(--space-3); color:var(--color-text-muted); font-size:var(--text-sm); }
.balloon { width:100%; border-radius:var(--radius-lg); display:block; }

/* ---------- Bild-galleri (kampanjbilder i rutnät) ---------- */
/* Regel: aldrig 3+1 föräldralös. Fyra delar = 2x2 (--2), åtta = 4x2 (--4),
   tre/sex = 3-kolumn (--3). Basen är 2 kolumner (funkar för 2, 4, 6). */
.img-gallery { display:grid; gap:var(--space-4); grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){
  .img-gallery--2 { grid-template-columns:repeat(2,1fr); max-width:760px; }
  .img-gallery--3 { grid-template-columns:repeat(3,1fr);}
  .img-gallery--4 { grid-template-columns:repeat(4,1fr);}
}
.img-gallery figure { margin:0; }
.img-gallery img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-md); display:block; box-shadow:var(--shadow-1); }
.img-gallery figcaption { margin-top:var(--space-2); font-size:var(--text-sm); color:var(--color-text-muted); }

.planbok-stats { margin-top: var(--space-8); }
.planbok-stats .stat__num { white-space: nowrap; font-size: clamp(2.25rem, 5vw, 3.25rem); }

.demo-label { font-size: var(--text-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--sd-gray); }

/* ---------- Interaktiv räknare / reglage ---------- */
.calc {
  display:grid; gap:var(--space-7); align-items:center;
  background:var(--sd-cream); border-radius:var(--radius-lg);
  padding:clamp(24px,4vw,44px); max-width:var(--content-max);
}
@media (min-width:760px){ .calc { grid-template-columns:1.2fr 1fr; } }
.calc__label { display:block; font-family:var(--font-heading); font-weight:var(--weight-bold); color:var(--sd-navy); font-size:var(--text-lg); margin-bottom:var(--space-3); }
.calc__label output { color:var(--sd-red); }
.calc__slider {
  -webkit-appearance:none; appearance:none; width:100%; height:8px;
  background:var(--sd-line-2); border-radius:var(--radius-pill); outline:none; margin:0;
}
.calc__slider::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:28px; height:28px; border-radius:50%;
  background:var(--sd-red); cursor:pointer; border:3px solid #fff; box-shadow:var(--shadow-2);
}
.calc__slider::-moz-range-thumb {
  width:28px; height:28px; border-radius:50%;
  background:var(--sd-red); cursor:pointer; border:3px solid #fff; box-shadow:var(--shadow-2);
}
.calc__slider:focus-visible { box-shadow:var(--focus-ring); }
.calc__scale { display:flex; justify-content:space-between; margin-top:var(--space-2); font-size:var(--text-xs); color:var(--color-text-muted); font-weight:var(--weight-bold); }
.calc__result { display:grid; gap:var(--space-6); }
/* Räknarens resultatsiffror ska aldrig spilla över den smala kolumnen på mobil. */
.calc__result .stat__num { font-size:clamp(1.9rem, 8vw, 2.75rem); overflow-wrap:anywhere; }
@media (max-width:759px){
  .calc__result .stat__num { white-space:nowrap; }
  /* Hero-stats staplas snyggt på mobil med lite mindre siffror. */
  .hero-stats .stat__num { font-size:clamp(1.6rem, 8vw, 2.4rem); }
}

/* ---------- Ja/Nej-omröstning (interaktiv avslöjning) ---------- */
.poll { max-width:var(--measure); }
.poll__q { font-family:var(--font-heading); font-weight:var(--weight-bold); font-size:var(--text-2xl); color:var(--sd-navy); margin:0 0 var(--space-5); }
.poll__btns { display:flex; gap:var(--space-3); flex-wrap:wrap; }
.poll__reveal { margin-top:var(--space-5); padding:var(--space-5); border-radius:var(--radius-md); background:var(--sd-mist); }
.poll__reveal[hidden] { display:none; }

/* ---------- Footer-navigering (områdeslänkar) ---------- */
.footer-nav { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); margin-top:var(--space-6); }
.footer-nav a { color:var(--invert-muted); text-decoration:none; font-size:var(--text-sm); font-weight:var(--weight-bold); }
.footer-nav a:hover { color:#fff; }

/* ---------- Cookie-samtycke ---------- */
.cookie { position: fixed; left: var(--space-5); bottom: var(--space-5); z-index: var(--z-modal); max-width: 380px;
  background:#fff; border:1px solid var(--sd-line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: var(--space-5); }
.cookie[hidden] { display:none; }
.cookie__text { font-size: var(--text-sm); color: var(--sd-navy); line-height: var(--leading-snug); margin:0 0 var(--space-4); }
.cookie__actions { display:flex; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width:520px){ .cookie { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); max-width:none; } }

/* ---------- Hub / hemsida ---------- */
.topic-grid { display:grid; gap:var(--space-4); grid-template-columns:1fr; }
@media (min-width:640px){ .topic-grid { grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .topic-grid { grid-template-columns:repeat(3,1fr);} }
/* Gula brickor med röd text — matchar kampanjannonserna (tunnelbana, buss).
   INGA bakgrundsbilder (kampanjbilderna bär egen inbränd text). */
.topic-card {
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-6);
  min-height:170px; border-radius:var(--radius-lg); overflow:hidden; position:relative;
  text-decoration:none; background:var(--sd-yellow); color:var(--sd-red);
  padding:var(--space-6); box-shadow:var(--shadow-1);
  transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.topic-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-3); background:var(--sd-yellow-accent); }
.topic-card__kicker { font-size:var(--text-2xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--sd-navy-poster); }
.topic-card__title { font-family:var(--font-heading); font-weight:var(--weight-bold); font-size:var(--text-2xl); margin:0; line-height:1.1; color:var(--sd-red); }
.topic-card__title::after { content:" →"; color:var(--sd-red); }