/* ============================================================
   KARTSEKSJONEN (Kartseksjon.astro) — felles for regionforsiden
   og kommunesidene. Portert fra Claude Design, aug 2026.

   Alle verdier er hentet fra nettstedets eksisterende skala i
   styles.css og kommune-v2.css. Handoffen oppga én ny kulør;
   revisjonen ved portering fant fem som ikke fantes i repoet.
   Fire er erstattet med verdier vi allerede bruker, og bare
   --ks-strek-lys er beholdt som ny. Se merknadene under.
   ============================================================ */

.kartseksjon {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vh, 104px) clamp(20px, 4vw, 56px);
  background: var(--ks-flate);
  font-family: var(--font-body);

  /* Låst av kartmotoren — legenden må vise samme farger som markørene.
   * Verdiene speiler lister-map.js og kan ikke velges fritt. */
  --ks-lag-bo: var(--color-leire-lys);
  --ks-lag-jobb: var(--color-aurora);
  --ks-lag-poi: #e3b97a;

  /* NY i denne seksjonen: illustrasjonsstrek på lys flate. Den eneste
   * kuløren som ikke fantes i repoet fra før. */
  --ks-strek-lys: #B4AB9C;
}

/* ---------- Flatevarianter ---------- */
.kartseksjon--lys {
  --ks-flate: var(--kv-papir, var(--color-warm-white));
  --ks-eyebrow: var(--kv-eyebrow, var(--color-gold-mork));
  --ks-tittel: var(--kv-ink, var(--color-midnight));
  --ks-ingress: var(--color-stein);
  /* Tallene har tittelens farge, og i lys variant er chip-kanten lik
     flaten. Uttrykt som kjeder: det er meningen at de er like. */
  --ks-tall: var(--ks-tittel);
  --ks-chip-flate: var(--kv-krem, var(--color-cream));
  --ks-chip-kant: var(--ks-chip-flate);
  --ks-chip-kant-hover: var(--kv-eyebrow, var(--color-gold-mork));
  --ks-chip-tekst: var(--color-stein);
  /* Handoffen ville ha #C9C2B6; dette er kantfargen vi allerede bruker på
   * våpenboksen og stillingskortene. */
  --ks-ramme: rgba(210, 200, 182, 0.55);
  --ks-kartflate: #D9D4CB;
  /* Handoffens #96A0AA og vår første #7A8794 gav begge under 4.5:1 mot den
   * varme flaten. Denne gir 4.8:1 og ligger fortsatt tydelig lysere enn
   * ingressen (#3A5266), så rangordenen i teksten består. */
  --ks-hint: #5F7180;
  /* Krediteringen er Mapbox' attribusjonskrav og må kunne leses.
   * .fs-kreditt sin 0.5-alfa gav 3.42:1; 0.66 gir 5.76:1. */
  --ks-kredit: rgba(10, 22, 40, 0.66);
  --ks-motiv-strek: var(--ks-strek-lys);
}

.kartseksjon--mork {
  --ks-flate: var(--kv-mork, var(--surface-utility));
  /* Gullet gir 4,18 som smaa versaler paa den moerke flaten — like under
   * kravet. --color-gold-lys er samme gull, 10% lysere, og gir 4,69. */
  --ks-eyebrow: var(--color-gold-lys);
  --ks-tittel: var(--kv-krem, var(--color-cream));
  --ks-ingress: #B8C4CF;
  --ks-tall: var(--ks-tittel);
  --ks-chip-flate: var(--color-kort-mork);
  --ks-chip-kant: rgba(125, 211, 192, 0.25);
  --ks-chip-kant-hover: var(--color-aurora);
  --ks-chip-tekst: #B8C4CF;
  --ks-ramme: rgba(125, 211, 192, 0.35);
  --ks-kartflate: var(--kv-ink, var(--color-midnight));
  /* Handoffen ville ha #8FA0B0 og #6B7E90; begge er alfa-varianter av
   * ingressfargen vi allerede bruker på mørk flate. */
  --ks-hint: rgba(184, 196, 207, 0.8);
  /* 0.45 gav 3.26:1 mot den mørke flaten; 0.62 gir 4.7:1. */
  --ks-kredit: rgba(241, 235, 227, 0.62);
  --ks-motiv-strek: rgba(125, 211, 192, 0.45);
}

.kartseksjon__inner {
  position: relative; /* over motivet */
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 3.5vw, 44px);
}

/* ---------- Header ---------- */
.kartseksjon__header {
  display: flex;
  flex-direction: column;
  /* Ikke én felles gap: eyebrowen hører til overskriften og skal ligge
   * tett (naboseksjonene bruker 10–16px), mens ingressen er en ny tanke
   * og tåler mer luft. Én verdi for begge gjorde eyebrowen løsest på
   * hele siden. */
  gap: 0;
  /* Viker for motivet i stedet for å ligge under det. Et fast brytepunkt
   * traff feil (ved 1200 px overlappet motivet overskriften selv med 1180
   * som grense); en andel av bredden skalerer i stedet med flaten. */
  max-width: min(860px, 58%);
}
.kartseksjon__eyebrow {
  margin: 0 0 12px;
  font-weight: 400;
  font-size: var(--kv-etikett, 0.9375rem);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: var(--ks-eyebrow);
}
.kartseksjon__tittel {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.6254rem + 3.3052vw, 4.6rem);
  line-height: var(--linje-hero);
  letter-spacing: var(--sperring-tett);
  color: var(--ks-tittel);
  text-wrap: balance;
}
.kartseksjon__ingress {
  margin: 18px 0 0;
  /* Handoffen hadde clamp(19px, 2.2vw, 24px) — 19px finnes ikke på skalaen
   * vår. --text-xl er allerede 20–24px og gjør samme jobb. */
  font-size: var(--brod);
  line-height: var(--linje-brod-tett);
  color: var(--ks-ingress);
  max-width: 44ch;
  text-wrap: pretty;
}

/* ---------- Lagknapper: tall og legende i ett ---------- */
.kartseksjon__lag {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
/* Lagknappene er kartets forklaring og skal ligge tett på kartet, ikke
   med samme luft som mellom overskrift og kart (Tom, 10. okt 2026). */
.kartseksjon__lag + .kartseksjon__figur { margin-top: calc(-1 * clamp(16px, 1.8vw, 24px)); }
.lagknapp {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 16px;
  border-radius: 999px;
  background: var(--ks-chip-flate);
  border: 1px solid var(--ks-chip-kant);
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.lagknapp:hover { border-color: var(--ks-chip-kant-hover); }
.lagknapp__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--lag-farge);
  background: var(--lag-farge);
  flex-shrink: 0;
}
.lagknapp--bo { --lag-farge: var(--ks-lag-bo); }
.lagknapp--jobb { --lag-farge: var(--ks-lag-jobb); }
.lagknapp--poi { --lag-farge: var(--ks-lag-poi); }
.lagknapp__antall {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--linje-tett);
  color: var(--ks-tall);
}
.lagknapp__navn {
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--ks-chip-tekst);
}
/* Av-tilstand. Motoren setter både aria-pressed og .is-off. */
.lagknapp[aria-pressed='false'],
.lagknapp.is-off {
  opacity: 0.45;
}
.lagknapp[aria-pressed='false'] .lagknapp__dot,
.lagknapp.is-off .lagknapp__dot {
  background: transparent;
}

/* ---------- Kart ---------- */
.kartseksjon__figur {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kartramme {
  position: relative;
  border: 1px solid var(--ks-ramme);
  border-radius: 18px;
  padding: 10px;
}
.kartflate {
  position: relative;
  background: var(--ks-kartflate);
  border-radius: 12px;
  height: clamp(380px, 44vw, 620px);
  overflow: hidden;
}
/* Regionoversikten viser seks kommuner der en kommuneside viser én, og den
 * gamle forsiden gav kartet 560–760px. Uten dette taper den ~130px i byttet. */
.kartseksjon--stort-kart .kartflate {
  height: clamp(480px, 54vw, 760px);
}
.kartseksjon--mork .kartflate {
  background-image:
    repeating-linear-gradient(0deg, rgba(125, 211, 192, 0.05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(125, 211, 192, 0.05) 0 1px, transparent 1px 72px);
}
.kartseksjon__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.kartseksjon__hint {
  font-size: var(--text-sm);
  color: var(--ks-hint);
}
.kartseksjon__kredit {
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--ks-kredit);
}

/* ---------- Fullskjerm ----------
 * Rammen er fullskjerm-elementet (data-map-fs-container), men kartflaten
 * beholdt sin clamp-hoyde — saa kartdataene fylte bare toppen av skjermen.
 * Den gamle malen hadde reglene; de falt ut da markupen ble komponent.
 * Legenden og popup-kortet ligger inni rammen og blir med. */
.kartramme:fullscreen,
.kartramme:-webkit-full-screen {
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ks-kartflate);
}
.kartramme:fullscreen .kartflate,
.kartramme:-webkit-full-screen .kartflate {
  height: 100%;
  border-radius: 0;
}

/* ---------- Motiv ---------- */
.kartseksjon__motiv {
  position: absolute;
  right: clamp(20px, 6vw, 110px);
  top: clamp(48px, 6vw, 88px);
  height: clamp(180px, 24vw, 330px);
  color: var(--ks-motiv-strek);
  pointer-events: none;
  user-select: none;
}
.kartseksjon__motiv svg { height: 100%; width: auto; }
/* Losskøytas seilfelt er losbåtenes kjennemerke — et felt, ikke en bokstav.
 * På lys flate trenger det en mørkere verdi for å bli synlig. */
.kartseksjon--lys .losfelt { fill: rgba(36, 61, 79, 0.65); }

/* Under 900 px blir teksten for trang ved siden av et motiv, og motivet
 * for lite til å bety noe. Da vies plassen til teksten. */
@media (max-width: 900px) {
  .kartseksjon__motiv { display: none; }
  .kartseksjon__header { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kartseksjon__motiv svg * { animation: none !important; }
}

/* Alternativet til kartet: hvor innholdet i kartet finnes som egne sider
   (tilgjengelighet 2.1.1, 28. sep 2026). Samme grad og farge som hinten. */

/* ---------- «Vis alle punktene i kartet» (KartPunktliste) ----------
   Kartets punkter som lenker, rett under kartet. Fargene er seksjonens egne
   roller, så lista virker i både lys og mørk variant. */
/* Knappen står i hintlinja og ser ut som en lenke; den er en knapp fordi
   den åpner og lukker lista (aria-expanded). */
.kartliste__knapp {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ks-tittel);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  cursor: pointer;
}
.kartliste__knapp:hover { text-decoration-thickness: 2px; }
.kartliste__knapp:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
/* Navnet står fast; pila viser åpen/lukket for øyet, aria-expanded for
   skjermleseren. Tom alt-tekst, så pila ikke leses opp. */
.kartliste__knapp::after { content: '\00a0\25BE' / ''; display: inline-block; }
.kartliste__knapp[aria-expanded='true']::after { transform: rotate(180deg); }
.kartliste__innhold { margin-top: var(--space-lg); }
.kartliste__innhold[hidden] { display: none; }
.kartliste__tittel {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--linje-tittel);
  color: var(--ks-tittel);
}
.kartliste__grupper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-lg) var(--space-xl);
}
.kartliste__gruppenavn {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  line-height: var(--linje-etikett);
  text-transform: uppercase;
  color: var(--ks-eyebrow);
}
.kartliste__tall { letter-spacing: var(--sperring-xs); }
.kartliste__punkter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.kartliste__punkter li {
  font-size: var(--brod-liten);
  line-height: var(--linje-brod-tett);
  color: var(--ks-ingress);
}
.kartliste__punkter a {
  color: var(--ks-tittel);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.kartliste__punkter a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Mobil: seksjonsluften (styles.css, --mobil-seksjon). */
@media (max-width: 767px) {
  .kartseksjon { padding-block: var(--mobil-seksjon); }
}