/* ============================================
   V-GLANCE - Opening folio + page nav
   ============================================ */
.v-glance {
  background: var(--color-cream);
  padding: 0 0 var(--space-lg);
  position: relative;
}

.v-glance__inner {
  max-width: none;
  margin: 0;
}

.v-glance__intro {
  background: var(--surface-utility);
  padding: 0 var(--space-xl) var(--space-3xl);
  margin-top: var(--space-3xl);
  position: relative;
  border-radius: 0;
  overflow-x: hidden;
  --intro-progress: 0;
  transform: scaleX(calc(0.45 + 0.55 * var(--intro-progress)));
  opacity: var(--intro-progress);
  transform-origin: center top;
  will-change: transform, opacity;
}

.v-glance__intro p {
  max-width: 740px;
  margin: var(--space-2xl) auto 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);
  font-weight: 400;
  font-style: italic;
  line-height: var(--linje-brod);
  color: rgba(250, 248, 245, 0.85);
  letter-spacing: var(--sperring-tett);
  text-align: left;
  border-left: 2px solid rgba(45, 106, 63, 0.5);
  padding-left: var(--space-xl);
  opacity: calc(-0.5 + 1.5 * var(--intro-progress));
  transform: translateY(calc(12px * (1 - var(--intro-progress))));
  will-change: transform, opacity;
}

/* Space between glance and first chapter */
.v-glance + .v-chapter {
  padding-top: var(--space-2xl);
}

/* Page nav */
/* Flikens tre alfa-trinn, avledet av --color-aurora. Navngitt her framfor
   spredt utover som raa rgba: en alfa er en farge man ikke har regnet paa,
   og seks loese verdier i fire regler er nettopp det CLAUDE.md advarer mot.
   Endres aksenten, endres disse ett sted. */
:root {
  --flik-fyll: linear-gradient(180deg, rgba(125, 211, 192, 0.20), rgba(125, 211, 192, 0.11));
  --flik-kant: rgba(125, 211, 192, 0.62);
  --flik-glod: inset 0 1px 0 rgba(255, 255, 255, 0.14),
               0 0 0 1px rgba(125, 211, 192, 0.16),
               0 20px 44px rgba(0, 0, 0, 0.45);
}

.v-page-nav {
  --nav-logo-diameter: 48px;
  --nav-logo-margin: var(--space-xl);
  display: flex;
  align-items: center;
  position: relative;
  min-height: var(--nav-height);
  z-index: 100;
  /* Samme glassbehandling som headeren — de to stengene skal lese som
     samme materiale, ikke som to ulike flater. */
  background: linear-gradient(180deg,
    rgba(13, 29, 52, 0.90),
    rgba(10, 22, 40, 0.82));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  margin: 0 calc(-1 * var(--space-xl));
  /* Skygge naar den er dokket, saa stangen leser som aa ligge OVER innholdet
     og ikke som en del av det. I flyten trengs den ikke. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 1px 0 rgba(251, 249, 246, 0.07);
  opacity: calc(-0.3 + 1.3 * var(--intro-progress, 1));
  overflow-x: hidden;
  will-change: opacity;
}

.v-page-nav.is-fixed {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 1px 0 rgba(251, 249, 246, 0.07),
              0 14px 34px rgba(0, 0, 0, 0.28);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  z-index: 999;
}

/* FLIK AAPEN: hovedmenyen legger seg OVER, den erstatter ikke. Uten dette
   staar begge stengene paa top:0 og headeren dekker seksjonsmenyen — da har
   leseren mistet seksjonene i det oeyeblikket han ba om hovedmenyen. */
html[data-tilstand="flik"] .v-page-nav.is-fixed {
  top: var(--nav-height);
}
.v-page-nav.is-fixed {
  transition: top .34s cubic-bezier(.62, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .v-page-nav.is-fixed { transition: none; }
}

/* Logoen ligger I FLYTEN, og ::after under speiler bredden hennes paa hoeyre
 * side. Da blir lenkene staaende noeyaktig sentrert, samtidig som ingenting
 * kan gli under logoen naar de scroller vannrett.
 *
 * Foerste loesning var absolutt plassering pluss aa skjule logoen under 900px.
 * Sentreringen ble riktig, men logoen forsvant nettopp der skjermen er minst —
 * og det var aa loese overlappen ved aa fjerne det som overlappet. */
/* FLIKEN — veien tilbake til hovedmenyen.
 *
 * Her sto en logo-lenke som fadet inn naar menyen dokket. Den viste at merket
 * fantes, men gav ingen vei tilbake: Kommuner, Arbeidsliv og spraakbytteren
 * var utilgjengelige saa lenge man sto lenger nede paa sida. Fliken trekker
 * hele headeren ned igjen.
 *
 * Formen er en pille, ikke en flate: den skal lese som en KNAPP paa stangen,
 * ikke som en del av den. Fyllet er aurora paa lav alfa — samme aksent som
 * aktiv seksjonslenke, saa oeyet kjenner den igjen. */
/* KOMMUNEVAAPEN OG NAVN i seksjonsstangen. Naar hovedmenyen er kjoert opp er
   dette det eneste paa skjermen som sier HVOR leseren er — foer sto stangen
   med bare seksjonsnavn, og «Oversikt · Jobb · Oppvekst» kunne vaert hvilken
   som helst kommune.

   Skilt fra fliken med en haarstrek, ikke en ramme: to elementer som deler
   en stang skal skilles, ikke bokses inn. */
.v-page-nav__sted {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  gap: 10px;
  margin-left: 14px;
  padding-left: 14px;
  /* Lufta til hoeyre maa ligge HER, utenfor scrollcontaineren: innerens
     padding-left ruller vekk naar JS scroller aktiv lenke inn, og da laa
     foerste seksjonslenke 1px fra navnet (Toms innspill 30. aug). */
  margin-right: 34px;
  position: relative;
}
.v-page-nav__sted::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 26px;
  background: linear-gradient(180deg, transparent, rgba(251, 249, 246, 0.22), transparent);
}
html[data-tilstand="dokket"] .v-page-nav__sted,
html[data-tilstand="flik"] .v-page-nav__sted { display: inline-flex; }

.v-page-nav__vaapen {
  width: 26px;
  height: auto;
  display: block;
  object-fit: contain;      /* vaapenskjoldet er ikke kvadratisk */
}
/* Redaksjonell stemme, ikke etikett: stedsnavnet er det ene ordet paa
   stangen som ikke er navigasjon. Display-skrift i broedgrad skiller det
   fra seksjonslenkene rundt. */
.v-page-nav__stedsnavn {
  font-family: var(--font-display);
  /* --brod-kort, ikke --brod: 22 px tok for mye av stangen ved siden av
     seksjonslenker paa 11. Navnet skal si hvor du er, ikke rope det. */
  font-size: var(--brod-kort);
  font-weight: 400;
  line-height: var(--linje-tett);
  letter-spacing: var(--sperring-2xs);
  color: var(--color-warm-white);
  white-space: nowrap;
}

/* Under 1100 px baerer fliken merket alene og stedsnavnet faller bort —
   stangen maa ha plass til seksjonene. */
@media (max-width: 1100px) {
  .v-page-nav__sted { display: none !important; }
}

/* MORFEN. Ett element, over headeren, som reiser mellom stang og pille.
   Geometrien settes fra JS; her bor det som staar stille: fyll, kant og
   skygge — de samme tre alfa-trinnene som fliken bruker. */
.v-nav-morf {
  position: fixed;
  z-index: 1002;
  pointer-events: none;
  opacity: 0;
  background: var(--flik-fyll);
  border: 1px solid var(--flik-kant);
  box-shadow: var(--flik-glod);
  /* INGEN opacity-overgang inn. Foerste utkast fadet formen inn over 180 ms
     mens den allerede krympet — paa vei NED laa den da som et gjennomsiktig
     slor oppaa headeren de foerste 300 ms av en 520 ms bevegelse, og oeyet
     saa bare halen. Paa vei opp virket den, fordi en liten pille mot en
     moerk stang leser uansett.

     Naa: full styrke fra foerste malte bilde, og fade bare UT paa slutten. */
  transition: left .52s cubic-bezier(.62, 0, .2, 1),
              right .52s cubic-bezier(.62, 0, .2, 1),
              top .52s cubic-bezier(.62, 0, .2, 1),
              height .52s cubic-bezier(.62, 0, .2, 1),
              border-radius .52s cubic-bezier(.62, 0, .2, 1);
}
.v-nav-morf.er-paa { opacity: 1; }
.v-nav-morf.forsvinner {
  opacity: 0;
  transition: opacity .16s ease,
              left .52s cubic-bezier(.62, 0, .2, 1),
              right .52s cubic-bezier(.62, 0, .2, 1),
              top .52s cubic-bezier(.62, 0, .2, 1),
              height .52s cubic-bezier(.62, 0, .2, 1),
              border-radius .52s cubic-bezier(.62, 0, .2, 1);
}

/* Ingen morf for den som har bedt om mindre bevegelse — da bytter
   tilstanden direkte, og formen skal aldri vises. */
@media (prefers-reduced-motion: reduce) {
  .v-nav-morf { display: none; }
}

.v-page-nav__flik {
  flex: 0 0 auto;
  display: none;                       /* bare synlig i dokket tilstand */
  align-items: center;
  gap: 8px;
  margin-left: var(--nav-flik-margin, var(--space-xl));
  padding: 0 12px 0 5px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--flik-kant);
  background: var(--flik-fyll);
  box-shadow: var(--flik-glod);
  color: var(--color-warm-white);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-lg);
  line-height: var(--linje-etikett);
  text-transform: uppercase;
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
html[data-tilstand="dokket"] .v-page-nav__flik,
html[data-tilstand="flik"] .v-page-nav__flik { display: inline-flex; }

.v-page-nav__flik:hover { transform: translateY(-1px); }
/* Tydelig fokusring, ikke bare en tone (WCAG 2.4.7, samlet gjennomgang 28. sep 2026). */
.v-page-nav__flik:focus-visible {
  outline: 2px solid var(--color-aurora);
  outline-offset: 2px;
}
.v-page-nav__flik .lister-brand__coin { width: 30px; height: 30px; }
.v-page-nav__flik .lister-brand__coin img { width: 18px; height: 18px; }
.v-page-nav__flik-tekst { white-space: nowrap; }

/* Pila snur naar menyen er nede — retningen sier hva klikket gjoer. */
.v-page-nav__flik-pil { transition: transform .28s cubic-bezier(.62, 0, .2, 1); }
html[data-tilstand="flik"] .v-page-nav__flik-pil { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .v-page-nav__flik,
  .v-page-nav__flik-pil { transition: none; }
}

/* Under 1100 px baerer fliken hele merket alene, og stedsnavnet faller bort. */
@media (max-width: 1100px) {
  .v-page-nav__flik-tekst { display: none; }
  .v-page-nav__flik { padding: 0 8px 0 5px; }
}

/* Speiler logoens fotavtrykk paa hoeyre side, saa lenkene faar samme luft paa
 * begge kanter og sentreringen blir ekte.
 *
 * Dette MAA vaere et ekte element, ikke ::after. Pseudoelementene ::before og
 * ::after paa .v-page-nav er alt i bruk til kantgradientene som viser at menyen
 * kan scrolles — de er absolutt plassert, og en flex-spacer i samme
 * pseudoelement ville enten drept gradienten eller blitt drept av den. */
.v-page-nav__balance {
  flex: 0 0 auto;
  width: calc(var(--nav-logo-diameter) + var(--nav-logo-margin));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--space-md);
  box-sizing: border-box;
}
/* Bryteren i motvekten vises bare når menyen er dokket og hovedmenyen er
   skjult; ellers står den i hovedmenyen, og to brytere samtidig ville
   forvirret. visibility tar den også ut av tabrekkefølgen. */
.v-page-nav__bevegelse { visibility: hidden; }
html[data-tilstand="dokket"] .v-page-nav.is-fixed .v-page-nav__bevegelse { visibility: visible; }

.v-page-nav__inner {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-md) var(--space-2xl);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  /* Ingen synlig rullefelt: stangen er 73 px hoey, og et rullefelt under
     lenkene ville spist en tredel av den. */
  scrollbar-width: none;
  /* Gapet foelger bredden i stedet for aa vaere fast. Under 1100 px har
     stangen mistet stedsnavnet, og da er det gapet som avgjoer om ni
     seksjoner faar plass foer rullingen begynner. */
  gap: clamp(12px, 1.6vw, 20px);
}
.v-page-nav__inner::-webkit-scrollbar { display: none; }

/* Fademaske der det er mer aa rulle, saa en etikett aldri klippes midt i
   ordet. Bare i den kanten det faktisk finnes mer — en maske i begge ender
   naar bare den ene ruller, ser ut som en feil. */
.v-page-nav.has-overflow-left .v-page-nav__inner {
  mask-image: linear-gradient(90deg, transparent, #000 28px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px);
}
.v-page-nav.has-overflow-right .v-page-nav__inner {
  mask-image: linear-gradient(270deg, transparent, #000 28px);
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 28px);
}
.v-page-nav.has-overflow-left.has-overflow-right .v-page-nav__inner {
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

/* Centre links when no overflow; left-align when scrollable */
.v-page-nav:not(.has-overflow-right):not(.has-overflow-left) .v-page-nav__inner {
  justify-content: center;
}

/* Her stod en «tynn, elegant» rullefelt-styling (scrollbar-width: thin +
   ::-webkit-scrollbar paa 3px). Den var skrevet for gamle Chrome der bare
   ::-webkit-gjaldt — men Chrome 121+ leser scrollbar-width, saa thin slo
   naar none lenger opp og tegnet et synlig felt UNDER lenkene. Feltet tok
   layoutplass i stangen: lenkeraden ble dyttet opp mens stedsnavnet ble
   staaende sentrert, og de to kom ut av linje (Toms innspill 30. aug).
   Rullingen varsles allerede av fademaskene og kantgradientene — feltet
   er fjernet, og scrollbar-width: none i grunnregelen faar staa. */

/* Edge-fade gradients — signals overflow content */
.v-page-nav::before,
.v-page-nav::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.v-page-nav::before {
  left: 0;
  background: linear-gradient(to right, rgba(10, 22, 40, 0.85), transparent);
}
.v-page-nav::after {
  right: 0;
  background: linear-gradient(to left, rgba(10, 22, 40, 0.85), transparent);
}
/* JS toggles these classes based on scroll position */
.v-page-nav.has-overflow-left::before {
  opacity: 1;
}
.v-page-nav.has-overflow-right::after {
  opacity: 1;
}

/* Samme skriftspraak som headeren. Foer var denne display-serif i
   --etikett-stor med --sperring-md og gull aksent, mens headeren var sans i
   --etikett-liten med --sperring-lg og aurora. To stenger paa samme hoeyde
   som saa ut som én komponent, men leste som to.

   0,56 alfa mot --color-midnight gir 6,03:1 — godt over AA. Den var 0,82
   foer, og da skilte aktiv tilstand seg knapt ut. */
.v-page-nav__link {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  /* 400, ikke 500: lenkene byttet fra display til broedskrift, og Glacial
     har bare 400 og 700. 500 ville tegnes som 400 uansett — da skal koden
     si det som vises. */
  font-weight: 400;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  /* Default to high-contrast text; keep gold as the accent on hover/active. */
  color: rgba(251, 249, 246, 0.56);
  text-decoration: none;
  padding: 0.5em 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.3s var(--ease-out-quart);
}

/* Gold dot separator between nav links */
.v-page-nav__link + .v-page-nav__link::before {
  content: '';
  position: absolute;
  left: calc(-0.5 * var(--space-lg));
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(196, 145, 138, 0.45);
}

.v-page-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-aurora);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease-out-expo);
}

.v-page-nav__link:hover::after {
  transform: scaleX(1);
  background: linear-gradient(90deg, var(--color-aurora), rgba(125, 211, 192, 0.2));
}

.v-page-nav__link.is-active::after {
  transform: scaleX(1);
}

.v-page-nav__link:hover,
.v-page-nav__link.is-active {
  color: var(--color-aurora);
}

@media (max-width: 768px) {
  .v-page-nav {
    margin-left: calc(-1 * var(--space-xl));
    margin-right: calc(-1 * var(--space-xl));
    width: calc(100% + (2 * var(--space-xl)));
  }

  .v-page-nav.is-fixed {
    top: 0;
    margin: 0;
    /* Følg kantene (left/right 0) når menyen ligger fast. Bredden over,
       100 % + 2 × space-xl, er for flyten; fast ble menyen 48 px bredere
       enn skjermen, og høyre ende (med bryteren) havnet utenfor. */
    width: auto;
  }

  .v-glance__intro {
    transform: none;
    opacity: var(--intro-progress);
  }
}

@media (max-width: 480px) {
  .v-page-nav {
    position: relative;
    margin-left: calc(-1 * var(--space-lg));
    margin-right: calc(-1 * var(--space-lg));
    width: calc(100% + (2 * var(--space-lg)));
  }
}

/* Drop cap */

/* Cream zone: section label + facts */
.v-glance__facts-header {
  max-width: 1060px;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-xl) 0;
}

.v-glance__section-label {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  /* 0,85 ga 4,04 mot krem — under kravet med et halvt trinn.
   * 0,92 gir 4,62. Samme groenn. */
  color: rgba(45, 106, 63, 0.92);
  margin-bottom: var(--space-xl);
}

.v-glance__section-label::before,
.v-glance__section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  /* Linjene var så svake at de ble lest som rusk på skjermen (Marion,
   * 21. sep 2026). Tonet ut bare mot ytterkanten, og tettere grønn. */
  background: linear-gradient(to right, transparent, rgba(45, 106, 63, 0.5) 45%);
}
.v-glance__section-label::after {
  background: linear-gradient(to left, transparent, rgba(45, 106, 63, 0.5) 45%);
}

.v-glance__facts {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.v-glance__facts-hero {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xl);
  padding: var(--space-2xl) 0 var(--space-4xl);
}

.v-glance__fact--hero {
  text-align: center;
  position: relative;
  padding: 0 var(--space-xl);
}

.v-glance__fact--hero:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 56px;
  width: 1px;
  /* Hel strek, ikke tonet i begge ender: den tonede forsvant mot kremen. */
  background: var(--color-gold);
}

.v-glance__fact--hero .v-glance__label {
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  /* 0,85 ga 4,04 mot krem — under kravet med et halvt trinn.
   * 0,92 gir 4,62. Samme groenn. */
  color: rgba(45, 106, 63, 0.92);
  margin-bottom: var(--space-xs);
}

.v-glance__fact--hero .v-glance__value {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.8979rem + 1.5023vw, 3.25rem);
  font-weight: 400;
  font-style: italic;
  line-height: var(--linje-display);
  color: var(--color-text-primary);
  letter-spacing: var(--sperring-tett);
}

/* Tall-varianten (vekt 300, normal stil) er fjernet: to stiler side om
 * side i samme rad leste som to fonter — Marions «seks ulike størrelsar».
 * Tallene settes i samme kursiv som de andre hero-verdiene. */

.v-glance__facts-detail {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: var(--space-lg) 0 var(--space-xl);
  border-top: 1px solid rgba(45, 106, 63, 0.3);
}

.v-glance__facts-detail.is-sparse {
  gap: var(--space-lg);
}

@media (min-width: 900px) {
  .v-glance__facts-detail.is-sparse {
    gap: var(--space-2xl);
  }
}

.v-glance__fact--detail {
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  position: relative;
}

.v-glance__facts-detail.is-sparse .v-glance__fact--detail::after {
  display: none;
}

.v-glance__fact--detail .v-glance__label {
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  /* 0,85 ga 4,04 mot krem — under kravet med et halvt trinn.
   * 0,92 gir 4,62. Samme groenn. */
  color: rgba(45, 106, 63, 0.92);
  margin-bottom: 2px;
}

.v-glance__fact--detail .v-glance__value {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: var(--linje-kort);
  color: var(--color-text-secondary);
  letter-spacing: var(--sperring-2xs);
}

.v-glance__fact {
  display: flex;
  flex-direction: column;
}

.v-glance__facts-hero,
.v-glance__facts-detail { margin: 0; }
.v-glance__label,
.v-glance__value {
  display: block;
  margin: 0;
}

@media (max-width: 768px) {
  .v-glance {
    padding: 0;
  }

  .v-glance__intro {
    padding: 0 var(--space-xl) var(--space-2xl);
    margin-top: var(--space-2xl);
  }

  .v-glance__intro p {
    margin-top: var(--space-xl);
    font-size: clamp(1.375rem, 1.287rem + 0.3756vw, 1.625rem);
  }

  
  .v-glance__facts-header {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }

  .v-glance__facts {
    padding: 0 var(--space-xl);
  }
}

@media (max-width: 480px) {
  .v-glance {
    padding: 0;
  }

  .v-glance__intro {
    padding: 0 var(--space-lg) var(--space-xl);
    margin-top: var(--space-xl);
  }

  .v-glance__intro p{
    margin-top: var(--space-lg);
    font-size: var(--brod);
    line-height: var(--linje-brod);
  }

  
  .v-glance__facts-header {
    padding: var(--space-xl) var(--space-lg) 0;
  }

  .v-glance__facts {
    padding: 0 var(--space-lg);
  }
}
/* Blokken over manglet sin avsluttende klamme fra første versjon. Da gjaldt
   alt som sto under den i fila, bare under 480 px: redusert bevegelse,
   logoen i seksjonsmenyen (639 px) og nye regler (funnet 30. sep 2026). */

@media (prefers-reduced-motion: reduce) {
  .v-glance__intro,
  .v-glance__intro p {
    --intro-progress: 1;
    transform: none;
    opacity: 1;
    will-change: auto;
  }
}



/* Lange tekstverdier i toppraden: ett trinn mindre, og verdien brytes over
   to linjer i stedet for å skyve den siste faktaen ned på egen rad
   (satt av VillageGlance.astro, heroLang). Under 768 px blir raden en
   liste, se «Kort fortalt» under. */
@media (min-width: 768px) {
  .v-glance__facts-hero--lang .v-glance__fact--hero .v-glance__value {
    display: inline-block;
    max-width: 6em;
    font-size: var(--text-3xl);
    text-wrap: balance;
  }
}

/* ============================================
   «KORT FORTALT» UNDER 768 PX (mobilgjennomgang, okt 2026)
   Under 480 px sto hovedfaktaene midtstilt og stablet med gullstreker
   mellom, og detaljene i to venstrestilte kolonner: to justeringer, to
   grader og tre slags streker i samme blokk. Lange verdier brakk i en smal
   halvkolonne. Naa er alt venstrestilt paa én akse:
   - hovedfaktaene paa én rad, verdien foer etiketten (tallet leses foerst),
     med haarstreker mellom cellene;
   - detaljene som liste, etikett til venstre og verdi til hoeyre.
   Har toppraden lange tekstverdier (heroLang: Byremo), blir den liste ogsaa.
   ============================================ */
@media (max-width: 767px) {
  .v-glance__section-label {
    gap: 0;
    margin-bottom: var(--space-md);
  }
  .v-glance__section-label::before,
  .v-glance__section-label::after { display: none; }

  .v-glance__facts-hero {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 0;
    padding: 0;
    margin-bottom: var(--space-md);
    border-top: 1px solid rgba(45, 106, 63, 0.3);
    border-bottom: 1px solid rgba(45, 106, 63, 0.3);
  }
  .v-glance__facts-hero:has(> :nth-child(2):last-child) { grid-template-columns: auto 1fr; }
  .v-glance__fact--hero {
    padding: var(--space-md);
    text-align: left;
    border-left: 1px solid rgba(45, 106, 63, 0.3);
  }
  .v-glance__fact--hero:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .v-glance__fact--hero:not(:last-child)::after { display: none; }
  .v-glance__fact--hero .v-glance__value {
    order: -1;
    font-size: var(--text-3xl);
  }
  .v-glance__fact--hero .v-glance__value--lang { font-size: var(--text-2xl); }
  .v-glance__fact--hero .v-glance__label {
    margin: 0;
    color: var(--tekst-dempet);
    font-size: var(--etikett-stor);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
  }

  /* Detaljene, og toppraden naar den har lange tekstverdier: liste. */
  .v-glance__facts-detail,
  .v-glance__facts-detail.is-sparse {
    display: block;
    gap: 0;
    padding: 0 0 var(--space-lg);
    border-top: 0;
  }
  .v-glance__facts-hero--lang {
    display: block;
    border-top: 0;
    border-bottom: 0;
    margin-bottom: 0;
  }
  .v-glance__fact--detail,
  .v-glance__facts-hero--lang .v-glance__fact--hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-left: 0;
    border-bottom: 1px solid rgba(45, 106, 63, 0.3);
    text-align: left;
  }
  .v-glance__fact--detail .v-glance__label,
  .v-glance__facts-hero--lang .v-glance__fact--hero .v-glance__label {
    margin: 0;
    color: rgba(45, 106, 63, 0.92);
    font-size: var(--etikett);
    font-weight: 700;
    letter-spacing: var(--sperring-md);
    text-transform: uppercase;
  }
  .v-glance__fact--detail .v-glance__value,
  .v-glance__facts-hero--lang .v-glance__fact--hero .v-glance__value {
    order: 0;
    color: var(--color-text-primary);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-style: normal;
    font-weight: 400;
    line-height: var(--linje-tittel);
    letter-spacing: 0;
  }
  /* Siste sperre, bare i listeoppsettet: et ord som er bredere enn sin
     kolonne, brytes heller enn at raden kuttes. Ikke i radoppsettet: der
     ville raden da aldri blitt for bred, village-editorial.js ville ikke
     gjort den om til liste, og ordene ble delt midt i (21. okt 2026). */
  .v-glance__fact--detail,
  .v-glance__facts-hero--lang .v-glance__fact--hero { min-width: 0; }
  .v-glance__fact--detail :is(.v-glance__value, .v-glance__label),
  .v-glance__facts-hero--lang :is(.v-glance__value, .v-glance__label) { overflow-wrap: anywhere; }
}

/* ============================================
   «INNHOLD» UNDER 768 PX (mobilgjennomgang, okt 2026)
   Den vannrette seksjonsmenyen viste 4 av 9 lenker paa 360 px, og ingenting
   sa at det fantes flere. Under 768 px er stangen i stedet: merket (aapner
   hovedmenyen), navnet paa seksjonen du er i, og «Innhold», som aapner et
   ark med alle seksjonene. En haarstrek i bunnen viser hvor langt du har
   kommet. Over 767 px er alt som foer. Uten JS staar lenkeraden.
   ============================================ */
.v-page-nav__mobil,
.v-innhold { display: none; }

@media (max-width: 767px) {
  html.js .v-page-nav__flik,
  html.js .v-page-nav__sted,
  html.js .v-page-nav__inner,
  html.js .v-page-nav__balance { display: none; }
  html.js .v-page-nav__mobil {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 0 var(--space-md);
  }
  .v-page-nav.is-fixed { min-height: 56px; }
  /* Mens hovedmenyen er aapen, staar topplinja oeverst; stangen viker. */
  html.meny-aapen .v-page-nav.is-fixed { visibility: hidden; }

  /* Merket aapner hovedmenyen. I flyten staar topplinja med sitt eget merke
     rett over, saa her vises det bare naar stangen er dokket. */
  .v-page-nav__merke {
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    cursor: pointer;
  }
  .v-page-nav.is-fixed .v-page-nav__merke { display: inline-flex; }
  .v-page-nav__merke .lister-brand__coin { width: 36px; height: 36px; }
  .v-page-nav__merke .lister-brand__coin img { width: 22px; height: 22px; }

  .v-page-nav__gjeldende {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--color-warm-white);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--linje-tittel);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .v-page-nav__innhold {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-aurora) 14%, transparent);
    color: var(--color-aurora);
    font-family: var(--font-body);
    font-size: var(--etikett);
    font-weight: 700;
    letter-spacing: var(--sperring-lg);
    text-transform: uppercase;
    cursor: pointer;
  }
  .v-page-nav__merke:focus-visible,
  .v-page-nav__innhold:focus-visible { outline: 2px solid var(--color-aurora); outline-offset: 2px; }

  /* Fremdriften: haarstrek paa 3 px nederst i stangen. */
  .v-page-nav__fremdrift {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--color-sand);
  }
  .v-page-nav__fremdrift::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-aurora);
    transform: scaleX(var(--fremdrift, 0));
    transform-origin: left center;
  }

  /* Arket: en dialog fra bunnen. */
  .v-innhold[open] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    max-height: 85dvh;
    margin: auto 0 0;
    padding: var(--space-lg) var(--space-lg) max(var(--space-md), env(safe-area-inset-bottom));
    border: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--color-warm-white);
    color: var(--color-text-primary);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .v-innhold::backdrop { background: color-mix(in srgb, var(--color-midnight) 45%, transparent); }
  /* Dragehaandtaket er pynt: arket lukkes med Escape, sloeret eller et valg. */
  .v-innhold[open]::before {
    content: '';
    flex: none;
    align-self: center;
    width: 40px;
    height: 4px;
    margin: calc(-1 * var(--space-sm)) 0 var(--space-md);
    border-radius: var(--radius-full);
    background: var(--color-sand);
  }
  .v-innhold__tittel {
    margin: 0 0 var(--space-sm);
    color: var(--aksent-tekst);
    font-size: var(--etikett);
    font-weight: 700;
    letter-spacing: var(--sperring-lg);
    text-transform: uppercase;
  }
  .v-innhold__liste {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .v-innhold__lenke {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--brod-kort);
    text-decoration: none;
  }
  /* Prikken: ring for kommende, fylt aurora for passerte, aksent for aktiv. */
  .v-innhold__lenke::before {
    content: '';
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--tekst-dempet);
  }
  .v-innhold__lenke.er-passert { color: var(--tekst-dempet); }
  .v-innhold__lenke.er-passert::before { border-color: var(--color-aurora); background: var(--color-aurora); }
  .v-innhold__lenke[aria-current="location"] {
    background: var(--color-sand-lys);
    font-weight: 700;
  }
  .v-innhold__lenke[aria-current="location"]::before { border-color: var(--aksent-tekst); background: var(--aksent-tekst); }
  .v-innhold__lenke:focus-visible { outline: 2px solid var(--color-fjord); outline-offset: -2px; }
  .v-innhold__fot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-sand);
  }
  .v-innhold__knapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-fjord);
    font-family: var(--font-body);
    font-size: var(--brod-liten);
    cursor: pointer;
  }
  .v-innhold__knapp:focus-visible { outline: 2px solid var(--color-fjord); outline-offset: 2px; }
  .v-innhold__knapp .lister-brand__coin { width: 28px; height: 28px; background: var(--color-midnight); }
  .v-innhold__knapp .lister-brand__coin img { width: 18px; height: 18px; }
  .v-innhold__knapp svg { width: 16px; height: 16px; }
}