/* =============================================================
   SD Kampanjsite – Editoriella moduler (editorial.css)
   Direkt kodade ur folder-/affischmaterialet.
   Punktlista, 2-kol definitionslista, Nej/Ja-block, stort tal,
   faktaruta, pull quote.
   ============================================================= */

/* ---------- Punktlista med streck (folder-manér) ---------- */
.policy-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); max-width: var(--measure); }
.policy-list > li {
  position: relative; padding-left: 1.6em; margin-bottom: var(--space-3);
  color: var(--sd-navy); line-height: var(--leading-snug);
}
.policy-list > li::before {
  content: "–"; position: absolute; left: 0; top: 0;
  color: var(--sd-red); font-weight: var(--weight-bold);
}
.policy-list--tight > li { margin-bottom: var(--space-2); }
.policy-list--on-dark > li { color: #fff; }
.policy-list--on-dark > li::before { color: var(--invert-accent); }

/* ---------- 2-kolumns definitionslista (Migration-uppslaget) ---------- */
.deflist { display: grid; gap: var(--space-5) var(--space-6); }
@media (min-width: 720px) { .deflist { grid-template-columns: minmax(180px, 15rem) 1fr; } }
.deflist__term {
  font-weight: var(--weight-bold); color: var(--sd-navy);
  font-size: var(--text-lg); line-height: var(--leading-snug); margin: 0;
}
.deflist__desc { color: var(--color-text); margin: 0; }
.deflist__row { display: contents; }
/* På radnivå (valfritt): hårlinje mellan rader */
.deflist--ruled .deflist__term,
.deflist--ruled .deflist__desc { padding-bottom: var(--space-5); border-bottom: var(--hairline); }

/* ---------- Nej / Ja kontrastblock (retoriskt grepp) ---------- */
.verdict { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .verdict { grid-template-columns: 1fr 1fr; } }
.verdict__side {
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6);
  border: 2px solid var(--color-border); background: #fff;
}
.verdict__label {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  font-size: var(--text-2xl); text-transform: uppercase; margin-bottom: var(--space-3);
}
.verdict__side--no  { border-color: var(--sd-blue-mid); }
.verdict__side--no  .verdict__label { color: var(--sd-blue-mid); }
.verdict__side--yes { border-color: var(--sd-red); }
.verdict__side--yes .verdict__label { color: var(--sd-red); }
.verdict__mark { width: 22px; height: 22px; border-radius: 50%; background: currentColor; display: inline-block; }
.verdict__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.verdict__list li { color: var(--sd-navy); font-size: var(--text-base); }

/* ---------- Stort tal / stat ---------- */
.stat { text-align: left; }
.stat__num {
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  font-size: var(--text-5xl); line-height: 1; color: var(--sd-navy);
  letter-spacing: var(--tracking-tight);
}
.stat__num--red { color: var(--sd-red); }
.stat__label { display: block; margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-base); max-width: 28ch; }
.stat-row { display: grid; gap: var(--space-6); }
@media (min-width: 640px) { .stat-row--3 { grid-template-columns: repeat(3, 1fr); } }
.section--dark .stat__num { color: #fff; }
.section--dark .stat__num--red { color: var(--invert-accent); }

/* ---------- Faktaruta (invert-huvud) ---------- */
.factbox { border: 2px solid var(--sd-navy-800); border-radius: var(--radius-lg); overflow: hidden; max-width: var(--measure); }
.factbox__head {
  background: var(--invert-bg); color: var(--invert-on);
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  padding: var(--space-3) var(--space-5); font-size: var(--text-lg);
  display: flex; align-items: center; gap: var(--space-2);
}
.factbox__body { padding: var(--space-5); background: #fff; }
.factbox__body > :last-child { margin-bottom: 0; }

/* ---------- Pull quote ---------- */
.pullquote {
  border-left: 4px solid var(--sd-red); padding-left: var(--space-5);
  margin: var(--space-7) 0; max-width: var(--measure);
}
.pullquote__text {
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--sd-navy); margin: 0 0 var(--space-3);
}
.pullquote__cite { font-size: var(--text-sm); color: var(--color-text-muted); font-style: normal; }

/* ---------- Story / personberättelse (landningssida) ---------- */
.story { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 760px) { .story { grid-template-columns: minmax(220px, 320px) 1fr; } }
.story__portrait {
  aspect-ratio: 4/5; width: 100%; border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--sd-mist), #d7dced); object-fit: cover;
}
.story__quote {
  font-family: var(--font-heading); font-weight: var(--weight-bold);
  font-size: var(--text-2xl); line-height: var(--leading-snug);
  color: var(--sd-navy); margin: 0 0 var(--space-4);
}
.story__body { color: var(--color-text); max-width: 52ch; }
.story__name { font-weight: var(--weight-bold); color: var(--sd-navy); margin-top: var(--space-4); }
.story__role { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Vallöften-galleri (gula kort) ---------- */
.promise {
  background: var(--sd-yellow); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.promise__kicker { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--sd-red); }
.promise__title { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-xl); color: var(--sd-navy-poster); margin: 0; }
.promise__text { color: var(--sd-navy-poster); margin: 0; font-size: var(--text-base); }

/* ---------- Partijämförelse-tabell ---------- */
.compare { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.compare th, .compare td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: var(--hairline); }
.compare thead th { font-family: var(--font-heading); font-weight: var(--weight-bold); color: var(--sd-navy); }
.compare th[scope="row"] { font-weight: var(--weight-regular); color: var(--color-text); }
.compare .col-sd { background: color-mix(in srgb, var(--sd-yellow) 22%, #fff); text-align: center; width: 8rem; }
.compare .col-other { text-align: center; width: 8rem; color: var(--color-text-muted); }
.compare .yes { color: var(--sd-success); font-weight: var(--weight-bold); }
.compare .no { color: var(--sd-danger); font-weight: var(--weight-bold); }
.compare thead .col-sd { color: var(--sd-red); }

/* ---------- Ståndpunkts-kort (SD vs motståndare) — gult, röd Franxurter, loggor ---------- */
.standpoints { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .standpoints { grid-template-columns: 1fr 1fr; } }
.standpoint { background: var(--sd-yellow); border-radius: var(--radius-lg); padding: var(--space-6); }
.standpoint .standpoint__title,
.section--dark .standpoint__title {
  font-family: var(--font-display); color: var(--sd-red); text-transform: uppercase;
  line-height: .9; letter-spacing: -.005em; font-size: clamp(1.9rem, 4vw, 2.75rem); margin: 0;
}
.standpoint__logos { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-4) 0 var(--space-5); min-height: 52px; }
.standpoint__logos img {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  background: #fff; padding: 6px; object-fit: contain; flex: 0 0 auto;
}
.standpoint__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.standpoint__list li {
  position: relative; padding-left: 1.5em; color: var(--sd-navy-poster);
  font-weight: 600; font-size: var(--text-base); line-height: var(--leading-snug);
}
.standpoint__list li::before { content: "–"; position: absolute; left: 0; color: var(--sd-red); font-weight: 700; }
