/* Sidbredder — Valvguiden.
 *
 * `signal` ger olika band olika bredd redan från början. Mätt på larmguide.se
 * (samma mall, inga overrides) vid 1440 px: prose 672, brief/hero/data 736,
 * figure 960, topic 1216. Fyra tydliga steg och ett spann på 544 px — det är
 * kontrasten som gör att sidan känns rymlig.
 *
 * En tidigare version av den här filen satte ETT möbel-mått på 68rem för alla
 * strukturband. Det kapade topic-bandet från mallens 1216 ned till 1088 — det
 * bredaste elementet på sidan blev alltså smalare än i grundmallen — och tryckte
 * ihop allt till två bredder. Resultatet blev plattare och upplevdes smalare,
 * trots att snittet var bredare. Rättat här.
 *
 * Principen: behåll mallens trappa, men flytta de yttre stegen utåt.
 *
 * Specificiteten är avsiktlig. WordPress regel är
 * `.is-layout-constrained > :where(...)` och :where() väger noll; genom att ta med
 * .is-layout-constrained i vår egen selektor vinner vi oavsett laddningsordning.
 */

:root {
  --vg-measure: 46rem;   /* 736 — löptext och sammanfattningar */
  --vg-data: 68rem;      /* 1088 — jämförelsetabeller, behöver mer än larmguides 736 */
  --vg-hero: 68rem;      /* 1088 — sidhuvudet får ta plats */
  --vg-figure: 72rem;    /* 1152 — bilder är 1200 px breda */
  --vg-wide: 76rem;      /* 1216 — mallens wide-size, topic-bandet ska nå hit */
}

/* Löptext */
.sg-band--prose.is-layout-constrained > *,
.sg-band--brief.is-layout-constrained > * {
  max-width: var(--vg-measure);
}

/* Tabeller */
.sg-band--data.is-layout-constrained > * {
  max-width: var(--vg-data);
}

/* Sidhuvud */
.sg-band--page-hero.is-layout-constrained > * {
  max-width: var(--vg-hero);
}

/* Bilder */
.sg-band--figure.is-layout-constrained > * {
  max-width: var(--vg-figure);
}

/* Kortband och temarad — hela mallens bredd, som i grundmallen */
.sg-band--topic.is-layout-constrained > *,
.sg-band--rail-nav.is-layout-constrained > * {
  max-width: var(--vg-wide);
}

/* Tabeller ska aldrig tvinga fram horisontell sidscroll på mobil. */
.sg-band--data table { inline-size: 100%; }

@media (max-width: 48rem) {
  .sg-band--data > * { overflow-x: auto; }
}

/* Sidhuvud och sidfot.
 *
 * Header och footer är våra egna theme parts i design/overrides/theme-parts/ och
 * använder layout:constrained. Det innebär att WordPress klämmer deras barn till
 * content-size (42rem = 672 px) — vilket mättes på live: menyn låg på 672 medan
 * topic-bandet på samma sida låg på 1216. Grundmallens masthead ligger på 1216
 * (mätt på larmguide.se), så vi matchar den.
 *
 * Alla tre har redan has-global-padding (57,6 px vid 1440) — lägg därför INTE till
 * padding här, det skulle dubbleras.
 */
.sg-utility.is-layout-constrained > *,
.sg-masthead__main.is-layout-constrained > *,
.sg-footer.is-layout-constrained > * {
  max-width: var(--vg-wide);
}