/* ============================================================
   FORSIDEN (Forside C) — eies av src/components/forside/*.astro
   Én fil for de nye seksjonene: hero (fh), dører (fd), regnestykket (fr),
   fotovifte (fv), bo (fb), jobb (fj), avstander (fa) og den
   faste profilknappen (ff). Kart, Historier, fotoboka og støttespillerne
   har sine egne ark og er ikke her.

   Regler (CLAUDE.md): bare tokens for skrift, grad, linje, sperring, farge
   og radius. Ingen hex, ingen px-grader. Brytepunkt: 1180 px (desktop),
   768 px (nettbrett/mobil).

   Felles rytme: alle seksjonene har samme luft (--l-section-padding) og
   samme lesebredde (--l-content-wide / --l-content-max fra lister.css).
   ============================================================ */

.lister-page--forside {
  /* Radius inne i en ramme med 5 px innfelling: 14 − 5. */
  --fs-ramme-innfelling: 5px;
  --fs-radius-indre: calc(var(--l-card-radius) - var(--fs-ramme-innfelling));
  /* Bevegelse: husets kurver, to lengder for de store overgangene. */
  --fs-ease: var(--ease-out-expo);
  --fs-lang: 1100ms;
  --fs-mellom: 700ms;
  /* Sidemarg som også sveiperadene bruker. */
  --fs-marg: clamp(16px, 4vw, 56px);
}

/* Seksjonsskall: samme luft og marg overalt. */
.fh, .fd, .fk, .fr, .fb, .fj, .fa {
  padding: var(--l-section-padding) var(--fs-marg);
}
.fd__inner, .fk__inner, .fr__inner, .fb__inner, .fj__inner, .fa__inner {
  max-width: var(--l-content-wide);
  margin: 0 auto;
}

/* Bakgrunnsrytme etter designet: to like flater skal ikke stå inntil
   hverandre (hvit dører, midnatt fakta, krem Regnestykket). Mellom seksjonene her ligger fotoboka (skifer, etter
   Regnestykket), Historier (krem, etter Jobb) og kartet (varm hvit, etter
   Avstander). */
.fh { background: var(--l-midnight); }
.fd { background: var(--surface-card-light); }
.fk { background: var(--l-midnight); }
.fr { background: var(--l-cream); }
.fb { background: var(--surface-card-light); }
.fj { background: var(--surface-card-light); }
.fa { background: var(--l-midnight); }

/* Felles etikett i kort og lister: grad + versaler + sperring, én rolle. */
.fh__kommune-etikett, .fd__etikett, .fr__etikett, .fb__kommune, .fj__kommune, .fj__meta, .fb__finn-etikett, .fr__kalk-eyebrow {
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  font-weight: 700;
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  line-height: var(--linje-etikett);
  color: var(--aksent-tekst);
}

/* Tekstlenke med pil: etikett, lg-sperring. */
.fb__alle, .fj__alle, .fr__kalk-lenke {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--aksent-tekst);
  white-space: nowrap;
}
.fb__alle:hover, .fj__alle:hover, .fr__kalk-lenke:hover { text-decoration: underline; text-underline-offset: 0.3em; }

/* Runde knapper (bla, pause). 44 px: husets minste trykkflate. */
.fh__knapp, .fb__pil, .fj__pil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-full);
  border: 1px solid currentColor;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--duration-normal) var(--fs-ease), color var(--duration-normal) var(--fs-ease), opacity var(--duration-normal) var(--fs-ease);
}
.fh__knapp svg, .fb__pil svg, .fj__pil svg { width: 18px; height: 18px; }
.fh__knapp:hover, .fb__pil:hover, .fj__pil:hover { background: var(--color-text-primary); color: var(--color-warm-white); }
.fb__pil:disabled, .fj__pil:disabled { opacity: 0.35; pointer-events: none; }

/* Fokus: husets aurora-omriss på alt som kan trykkes på. */
.fh a:focus-visible, .fh button:focus-visible,
.fd a:focus-visible, .fr a:focus-visible, .fr button:focus-visible, .fr input:focus-visible,
.fb a:focus-visible, .fb button:focus-visible,
.fj a:focus-visible, .fj button:focus-visible, .fa a:focus-visible, .ff:focus-visible {
  outline: 2px solid var(--color-aurora);
  outline-offset: 3px;
}

/* Trykk-respons på berøringsskjerm: kort og knapper krymper litt. */
@media (hover: none) {
  .fd__dor:active, .fb__radkort:active, .fj__partner:active, .fj__brikke:active, .fj__flere:active, .ff:active, .fb__finn-lenke:active { transform: scale(0.98); }
}

/* ============================================================
   HERO (fh)
   ============================================================ */
.fh {
  color: var(--color-text-inverse);
  padding: var(--nav-height) 0 4px;
  /* Heroen er nøyaktig første skjerm, også på en laptop med 125 % skalering
     (rundt 680 px vindu): hodet øverst, navnefeltet nederst og filmene i alt
     som er igjen. Ingenting av heroen skal kreve scrolling. Gulvet hindrer
     bare at filmene forsvinner i et svært lavt vindu. */
  height: 100svh;
  min-height: 540px;
  display: flex;
  flex-direction: column;
}
.fh__inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.fh__hode {
  max-width: var(--l-content-wide);
  width: 100%;
  margin: 0 auto;
  padding: clamp(16px, 3.5vh, 48px) var(--fs-marg) clamp(14px, 3vh, 36px);
  display: grid;
  /* Tittelen til venstre, betjeningen til høyre på grunnlinja. */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
.fh__eyebrow { color: var(--color-aurora); margin: 0 0 12px; }
.fh__tittel {
  font-family: var(--font-display);
  /* Filmene er hovedsaken: tittelen på én linje over dem (Tom 19. okt 2026),
     ikke designets 84 px på to. */
  font-size: var(--text-4xl);
  font-weight: 300;
  line-height: var(--linje-hero);
  letter-spacing: var(--sperring-tett);
  color: var(--color-warm-white);
  text-wrap: balance;
  margin: 0;
}
.fh__tittel em { font-style: italic; font-weight: 400; color: var(--color-warm-white); }

/* Streker: bare i stories. */
.fh__streker { display: none; }

/* Stripa: seks filmer side om side. Den aktive får flex 5, de andre 1. */
.fh__stripe {
  position: relative;
  display: flex;
  gap: 4px;
  flex: 1;
  min-height: 0;
  padding: 0 4px;
}
.fh__film {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  transition: flex var(--fs-lang) var(--fs-ease);
}
.fh__film.is-aktiv { flex: 5 1 0; }
.fh__ramme {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--fs-ramme-innfelling);
  border: 1px solid rgba(241, 235, 227, 0.16);
  border-radius: var(--l-card-radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--fs-mellom) var(--fs-ease);
}
.fh__film.is-aktiv .fh__ramme { border-color: rgba(241, 235, 227, 0.5); }
.fh__media {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--fs-radius-indre) var(--fs-radius-indre) 0 0;
  background: var(--color-kort-mork);
}
.fh__media img, .fh__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Plakaten ligger under filmen og tones ut når filmen faktisk spiller. */
.fh__media img { z-index: 1; transition: opacity var(--fs-lang) var(--fs-ease); }
.fh__film.is-levende .fh__media img { opacity: 0; }
/* De inaktive filmene dempes litt og står med lett zoom; ingen filter over
   den aktive. Dempingen er på filmen, ikke et lag over. */
.fh__media video {
  transition: filter var(--fs-lang) var(--fs-ease), transform var(--fs-lang) var(--fs-ease);
  filter: brightness(0.55) saturate(0.75);
  transform: scale(1.14);
}
.fh__film.is-aktiv .fh__media video { filter: none; transform: none; }

/* Navnefeltet: kremplate under den aktive, bare navnet under de andre. */
.fh__navn {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  height: 96px;
  margin-top: var(--fs-ramme-innfelling);
  padding: 0 22px;
  border-radius: 0 0 var(--fs-radius-indre) var(--fs-radius-indre);
  background: var(--color-kort-mork);
  color: var(--color-text-inverse);
  overflow: hidden;
  transition: background var(--fs-mellom) var(--fs-ease), color var(--fs-mellom) var(--fs-ease);
}
.fh__film.is-aktiv .fh__navn { background: var(--l-cream); color: var(--color-text-primary); }
.fh__vaapen {
  flex: none;
  width: 40px;
  height: 48px;
  object-fit: contain;
}
.fh__navn-tekst { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* Bredden på filmene skifter over --fs-lang. Det liggende navnet (våpen,
   navn, tagline) og det loddrette står begge i feltet hele tiden og tones
   mot hverandre: ut med en gang, inn når bredden nesten er på plass.
   Før byttet teksten retning i det øyeblikket filmen begynte å skifte, og
   navnene ble kuttet underveis («Lyng», «kkefjor»). */
.fh__vaapen, .fh__navn-tekst {
  opacity: 0;
  transition: opacity 200ms var(--fs-ease);
}
.fh__film.is-aktiv .fh__vaapen, .fh__film.is-aktiv .fh__navn-tekst {
  opacity: 1;
  /* Bredden er over 90 % på plass etter rundt 300 ms (--fs-ease er en
     expo-kurve). Da kommer navnet, så plata aldri står tom lenge. */
  transition: opacity 350ms var(--fs-ease) 280ms;
}
/* Pila sier at plata er en lenke til kommunesiden (Tom 19. okt 2026), i
   samme form som husets runde knapper: en tynn ring med en liten pil. Den
   lander med navnet (tones og skaleres fra 90 %). Ved hover og fokus fylles
   ringen med midnatt fra midten, og pila blir krem og glir litt fram. */
.fh__pil {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-left: auto;
  border: 1px solid var(--color-text-primary);
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 200ms var(--fs-ease), transform 200ms var(--fs-ease);
}
.fh__pil::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--l-midnight);
  transform: scale(0);
  transition: transform var(--duration-slow) var(--fs-ease);
}
.fh__pil svg {
  position: relative;
  width: 18px;
  height: 18px;
  /* Optisk sentrering (Tom 19. okt 2026): pila er geometrisk midt i
     ringen, men spissen med to vinger har mer blekk enn den tynne halen,
     så tyngdepunktet ligger ~1,6 px til høyre. Én hel piksel mot halen
     retter inntrykket uten å gjøre streken uskarp. Hover-flyttet under er
     justert tilsvarende, så bevegelsen fortsatt er 3 px. */
  transform: translateX(-1px);
  transition: transform var(--duration-slow) var(--fs-ease), color var(--duration-slow) var(--fs-ease);
}
.fh__film.is-aktiv .fh__pil {
  opacity: 1;
  transform: none;
  transition: opacity 350ms var(--fs-ease) 280ms, transform var(--fs-mellom) var(--fs-ease) 280ms;
}
.fh__film.is-aktiv .fh__ramme:hover .fh__pil::before,
.fh__film.is-aktiv .fh__ramme:focus-visible .fh__pil::before { transform: scale(1); }
.fh__film.is-aktiv .fh__ramme:hover .fh__pil svg,
.fh__film.is-aktiv .fh__ramme:focus-visible .fh__pil svg { transform: translateX(2px); color: var(--color-warm-white); }
.fh__smalnavn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: var(--linje-tett);
  white-space: nowrap;
  color: var(--color-text-inverse);
  opacity: 1;
  transition: opacity 350ms var(--fs-ease) 280ms;
}
.fh__film.is-aktiv .fh__smalnavn { opacity: 0; transition: opacity 200ms var(--fs-ease); }
.fh__kommune {
  font-family: var(--font-display);
  /* Passer i navnefeltet på 96 px sammen med to linjer tagline; høye
     skjermer får designets større navn (under). */
  font-size: var(--text-2xl);
  font-weight: 300;
  line-height: var(--linje-tett);
  letter-spacing: var(--sperring-tett);
  white-space: nowrap;
  /* Smale filmer: navnet står loddrett, så det får plass. */
}
.fh__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  line-height: var(--linje-kort);
  color: var(--tekst-dempet);
  max-width: 48ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Betjening: i hodet, til høyre for profilknappen. */
.fh__styring { display: flex; gap: 8px; }
.fh__knapp { color: var(--color-text-inverse); }
.fh__knapp:hover { background: var(--color-warm-white); color: var(--color-midnight); }
.fh__knapp svg { width: 16px; height: 16px; }
.fh__ikon-spill { display: none; }
.is-pauset .fh__ikon-pause { display: none; }
.is-pauset .fh__ikon-spill { display: block; }

/* Lave laptopvinduer (under 760 px, typisk 125 % skalering med faner og
   oppgavelinje): tittelen ett trinn til ned, så filmene er hovedsaken. */
@media (min-width: 1180px) and (max-height: 760px) {
  .fh__tittel { font-size: var(--text-3xl); }
}

/* Høye skjermer (fra 1000 px vindu): designets navnefelt. Tittelen blir
   på --text-4xl, så den står på én linje også her. */
@media (min-width: 1180px) and (min-height: 1000px) {
  .fh__navn { height: 118px; }
  .fh__kommune { font-size: var(--text-3xl); }
  .fh__tagline { font-size: var(--text-lg); }
}

/* ---- Stories (under 1180 px) ---- */
@media (max-width: 1179px) {
  .fh {
    padding: var(--nav-height) 0 0;
    min-height: 0;
  }
  .fh__hode {
    display: block;
    padding: 14px var(--fs-marg) 14px;
  }
  .fh { position: relative; }
  .fh__eyebrow { display: none; }
  .fh__smalnavn, .fh__pil { display: none; }
  .fh__vaapen, .fh__navn-tekst, .fh__film.is-aktiv .fh__vaapen, .fh__film.is-aktiv .fh__navn-tekst { opacity: 1; transition: none; }
  .fh__tittel { font-size: var(--text-4xl); }

  /* Strekene på bunnen, ikke oppå filmen (hvit himmel). Den aktive fylles
     over --fh-sekunder (satt av skriptet). */
  .fh__streker {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0 var(--fs-marg) 10px;
    list-style: none;
  }
  .fh__strek {
    flex: 1;
    height: 2px;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(251, 249, 246, 0.2);
  }
  .fh__strek > span {
    display: block;
    height: 100%;
    background: var(--color-warm-white);
    transform-origin: left;
    transform: scaleX(0);
  }
  .fh__strek.is-ferdig > span { transform: scaleX(1); }
  .fh__strek.is-aktiv > span { animation: fh-fyll var(--fh-sekunder, 8s) linear forwards; }
  .is-stoppet .fh__strek.is-aktiv > span, .is-holdt .fh__strek.is-aktiv > span { animation-play-state: paused; }

  /* Én film fyller resten av skjermen; de andre ligger under med opasitet 0
     og krysstoner inn. */
  /* Stripa er en loddrett flexboks: den aktive filmen står i flyten og
     fyller resten av skjermen, de andre ligger oppå den med opasitet 0. */
  .fh__stripe {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
  }
  .fh__film {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1200ms var(--fs-ease);
  }
  .fh__film.is-aktiv { opacity: 1; pointer-events: auto; position: relative; flex: 1 1 auto; }
  .fh__ramme { padding: 0; border: 0; border-radius: 0; }
  .fh__media { border-radius: 0; }
  .fh__media video { filter: none; transform: scale(1.06); transition: transform 2400ms var(--fs-ease); }
  .fh__film.is-aktiv .fh__media video { transform: none; }

  /* Kremplata nederst, alltid, med våpen og tagline. */
  .fh__navn, .fh__film:not(.is-aktiv) .fh__navn {
    height: auto;
    min-height: 84px;
    margin: 0;
    /* Til høyre står pauseknappen (44 px) oppå plata; teksten skal ikke
       løpe inn under den. */
    padding: 14px calc(var(--fs-marg) + 56px) 14px var(--fs-marg);
    border-radius: 0;
    background: var(--l-cream);
    color: var(--color-text-primary);
    justify-content: flex-start;
  }
  .fh__kommune { font-size: var(--text-2xl); }
  .fh__tagline { opacity: 1; font-size: var(--text-base); }
  .fh__film.is-aktiv .fh__navn-tekst > * { animation: fh-plate-inn var(--fs-mellom) var(--fs-ease) both; }
  .fh__film.is-aktiv .fh__tagline { animation-delay: 120ms; }

  /* Pausen står på plata; forrige/neste er skjult for syn (filmen er
     velgeren) men i tastaturrekkefølgen. En synlig neste-pil på plata ble
     prøvd 20. okt 2026, men kunne leses som lenka til kommunen. */
  .fh__styring { position: absolute; right: var(--fs-marg); bottom: 20px; z-index: 2; }
  .fh__knapp { color: var(--color-text-primary); border-color: rgba(26, 26, 26, 0.2); }
  .fh__knapp:hover { background: var(--color-text-primary); color: var(--color-warm-white); }
  .fh__knapp:not(.fh__knapp--pause) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  .fh__knapp:not(.fh__knapp--pause):focus-visible { position: static; width: 44px; height: 44px; clip: auto; }

  /* «Sveip for neste» nede til høyre på filmen (Marion 20. okt 2026): det
     var vanskelig å oppfatte at man kan bla mellom kommunene. Ligger på
     filmen, ikke på plata, så det ikke forveksles med lenka til kommunen.
     Tones bort etter første sveip eller trykk: da vet leseren det. */
  .fh__sveip {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px 7px 13px;
    border-radius: 999px;
    background: rgba(10, 22, 40, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--color-warm-white);
    font-family: var(--font-body);
    font-size: var(--etikett-liten);
    line-height: 1;
    letter-spacing: var(--sperring-md);
    text-transform: uppercase;
    pointer-events: none;
    transition: opacity 600ms var(--fs-ease);
  }
  .fh__sveip svg { width: 14px; height: 14px; animation: fh-sveip 2.4s var(--fs-ease) infinite; }
  .fh.har-sveipt .fh__sveip { opacity: 0; }
}
.fh__sveip { display: none; }
@media (max-width: 1179px) { .fh__sveip { display: inline-flex; } }
@keyframes fh-sveip {
  0%, 60%, 100% { transform: translateX(0); }
  30% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .fh__sveip svg { animation: none; } }
html.bevegelse-av .fh__sveip svg { animation: none; }
@keyframes fh-fyll { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fh-plate-inn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Nettbrett stående: stories, men større typografi. */
@media (min-width: 768px) and (max-width: 1179px) {
  .fh__hode { padding-top: 28px; }
  .fh__tittel { font-size: var(--text-5xl); }
  .fh__navn { min-height: 104px; }
  .fh__kommune { font-size: var(--text-3xl); }
  .fh__tagline { font-size: var(--text-lg); }
}

/* ============================================================
   DØRER (fd)
   ============================================================ */
.fd__hode { margin-bottom: clamp(28px, 4vh, 56px); }
.fd__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}
.fd__dor {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-decoration: none;
  color: var(--color-text-primary);
}
.fd__dor:hover .fd__tittel { color: var(--aksent-tekst); }
.fd__bilde {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--l-card-radius);
  overflow: hidden;
}
.fd__bilde img { width: 100%; height: 100%; object-fit: cover; }
.fd__tekst { display: flex; flex-direction: column; gap: 10px; }
.fd__tittel {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  line-height: var(--linje-hero);
  letter-spacing: var(--sperring-tett);
  transition: color var(--duration-normal) var(--fs-ease);
}
.fd__beskrivelse {
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--color-text-secondary);
}
.fd__beskrivelse--kort, .fd__radpil { display: none; }

@media (max-width: 767px) {
  .fd__liste { display: block; border-top: 1px solid var(--color-text-primary); }
  .fd__dor {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-sand);
  }
  .fd__bilde { width: 72px; height: 72px; aspect-ratio: auto; border-radius: var(--radius-md); }
  .fd__tekst { gap: 4px; }
  .fd__tittel { font-size: var(--text-xl); line-height: var(--linje-tittel); }
  .fd__pil, .fd__beskrivelse--lang { display: none; }
  .fd__beskrivelse--kort { display: block; font-size: var(--brod-liten); color: var(--tekst-dempet); }
  .fd__radpil { display: block; width: 24px; color: var(--aksent-tekst); }
}

/* ============================================================
   REGNESTYKKET (fr)
   ============================================================ */
.fr__topp {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  margin-bottom: clamp(56px, 8vh, 88px);
}
/* Anslaget: fortellingen saken åpner med, under temaet i overskriften. */
.fr__anslag {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--brod-loft);
  line-height: var(--linje-kort);
  color: var(--color-text-primary);
  max-width: 30ch;
  text-wrap: balance;
}
.fr__les { margin-top: 32px; white-space: nowrap; }
.fr__film { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.fr__filmramme {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--l-card-radius);
  overflow: hidden;
  background: var(--color-midnight);
}
.fr__filmramme video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fr__bildetekst {
  font-family: var(--font-body);
  font-size: var(--etikett-stor);
  letter-spacing: var(--sperring-xs);
  color: var(--tekst-dempet);
}

/* Kapitlene: på desktop et vanlig tre-kolonners grid; Sveiperad-skallet
   nøytraliseres med en egen klasse (ikke overstyring av sveiperad.css, men
   forsidens egne verdier for sin egen variant). */
.fr__kapitler { margin-bottom: clamp(56px, 8vh, 80px); }
.fr__kapittel { display: flex; flex-direction: column; gap: 10px; }
.fr__tall {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 300;
  line-height: var(--linje-tett);
  letter-spacing: var(--sperring-tett);
  color: var(--color-text-primary);
  white-space: nowrap;
}
.fr__kapittel-tittel {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: var(--linje-tittel);
  margin: 10px 0 0;
}
.fr__kapittel-tekst {
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod);
  color: var(--color-text-secondary);
  margin: 0;
}
@media (min-width: 1180px) {
  .fr__rad .sveiperad__vindu { margin-inline: 0; overflow: visible; }
  .fr__rad .sveiperad__spor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 48px); width: auto; padding: 0; }
  .fr__rad .sveiperad__kort { flex: none; }
  .fr__rad .sveiperad__fot { display: none; }
  .fr__kapittel { padding-top: 24px; border-top: 1px solid var(--color-text-primary); }
}
@media (max-width: 1179px) {
  .fr__rad { --sveiperad-luft: var(--fs-marg); }
  .fr__kapittel {
    padding: 22px 20px 24px;
    background: var(--color-warm-white);
    border-radius: var(--l-card-radius-lg);
    height: 100%;
  }
  .fr__tall { font-size: var(--text-4xl); }
}

/* Kalkulatoren: midnattspanel i to kolonner. */
.fr__kalk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--l-card-radius-lg);
  background: var(--l-midnight);
  color: var(--color-text-inverse);
}
.fr__kalk-eyebrow { color: var(--color-aurora); display: block; margin-bottom: 14px; }
.fr__kalk-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--linje-tittel);
  color: var(--color-warm-white);
}
.fr__kalk-label-kort { display: none; }
.fr__kalk-felt { display: flex; align-items: center; gap: 20px; margin-top: 26px; }
.fr__kalk-slider { flex: 1; height: 44px; accent-color: var(--color-gold); cursor: pointer; }
.fr__kalk-verdi {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--linje-tett);
  color: var(--color-warm-white);
  white-space: nowrap;
  min-width: 5ch;
  text-align: right;
}
.fr__kalk-fot {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: var(--brod-liten);
  line-height: var(--linje-brod-tett);
  color: var(--tekst-dempet-mork);
}
.fr__kalk-svar { display: flex; flex-direction: column; gap: 10px; }
.fr__kalk-faar {
  font-family: var(--font-body);
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--tekst-dempet-mork);
}
.fr__kalk-tall { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.fr__kalk-timer {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: 300;
  line-height: var(--linje-tett);
  letter-spacing: var(--sperring-tett);
  color: var(--color-warm-white);
}
.fr__kalk-tall em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  color: var(--aksent-tekst-mork);
}
.fr__kalk-bruk {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--linje-kort);
  color: var(--color-mist);
}
.fr__kalk-lenke { margin-top: 14px; color: var(--aksent-tekst-mork); align-self: flex-start; }

@media (max-width: 1179px) {
  .fr__topp { grid-template-columns: minmax(0, 1fr); }
  .fr__filmramme { aspect-ratio: 16 / 9; }
  .fr__kalk { grid-template-columns: minmax(0, 1fr); }
  /* Tallet øverst, glidebryteren under, nær tommelen. */
  .fr__kalk-svar { order: -1; }
  .fr__kalk-sporsmal { padding-top: 20px; border-top: 1px solid rgba(241, 235, 227, 0.16); }
  .fr__kalk-label-lang { display: none; }
  .fr__kalk-label-kort { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-xl); }
  .fr__kalk-felt { margin-top: 12px; }
  .fr__kalk-timer { font-size: var(--text-5xl); }
}
@media (max-width: 767px) {
  .fr__les { width: 100%; max-width: 320px; justify-content: center; }
}

/* ============================================================
   FOTOVIFTE (fv) — rendres inne i .l-album__shelf (ListerPhotoAlbum)
   ============================================================ */
.fv { position: absolute; inset: 0; pointer-events: none; }
.fv__foto {
  position: absolute;
  width: 300px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 8px solid var(--album-ramme);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.6);
}
.fv__foto--1 { left: calc(50% - 560px); top: 70px; transform: rotate(-7deg); }
.fv__foto--2 { left: calc(50% - 470px); top: 300px; transform: rotate(4deg); }
.fv__foto--3 { left: calc(50% + 260px); top: 60px; transform: rotate(6deg); }
.fv__foto--4 { left: calc(50% + 180px); top: 300px; transform: rotate(-4deg); }
@media (max-width: 1179px) {
  .fv__foto { width: 240px; border-width: 6px; }
  .fv__foto--1 { left: 40px; top: 60px; }
  .fv__foto--2, .fv__foto--3 { display: none; }
  .fv__foto--4 { left: auto; right: 40px; top: 280px; transform: rotate(7deg); }
}
@media (max-width: 767px) {
  .fv__foto { width: 170px; }
  .fv__foto--1 { left: -34px; top: 40px; transform: rotate(-8deg); }
  .fv__foto--4 { right: -34px; top: 250px; }
}

/* ============================================================
   BO (fb)
   ============================================================ */
/* Ingressen står under overskriften, ikke ved siden av (Tom 19. okt 2026). */
.fb__hode {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(32px, 5vh, 56px);
}
.fb__ingress { margin-top: 0; }

/* Mosaikk: fire kolonner og to rader per side. Kortene står absolutt og
   plasseres med --c/--r (kolonne/rad) og --w/--h (bredde/høyde i celler),
   som skriptet setter via data-c, data-r og data-stor. Plassen glir når det
   store kortet flytter seg. Sidene ligger i et spor som skyves sideveis. */
.fb__mosaikk {
  --fb-rad: clamp(272px, 22.5vw, 320px);
  --fb-luft: 16px;
  --fb-glid: cubic-bezier(0.65, 0, 0.15, 1);
  overflow: hidden;
}
.fb__spor {
  --fb-side: 0;
  display: flex;
  gap: var(--fb-luft);
  transform: translateX(calc(var(--fb-side) * -1 * (100% + var(--fb-luft))));
  transition: transform 1000ms var(--fb-glid);
}
.fb__side {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: calc(var(--fb-rad) * 2 + var(--fb-luft));
  list-style: none;
  margin: 0;
  padding: 0;
}
.fb__kort {
  --c: 0;
  --r: 0;
  --w: 1;
  --h: 1;
  position: absolute;
  left: calc((100% - 3 * var(--fb-luft)) / 4 * var(--c) + var(--fb-luft) * var(--c));
  top: calc((var(--fb-rad) + var(--fb-luft)) * var(--r));
  width: calc((100% - 3 * var(--fb-luft)) / 4 * var(--w) + var(--fb-luft) * (var(--w) - 1));
  height: calc(var(--fb-rad) * var(--h) + var(--fb-luft) * (var(--h) - 1));
  display: flex;
  transition: left 900ms var(--fb-glid), top 900ms var(--fb-glid), width 900ms var(--fb-glid), height 900ms var(--fb-glid);
}
.fb__kort[data-c="1"] { --c: 1; }
.fb__kort[data-c="2"] { --c: 2; }
.fb__kort[data-c="3"] { --c: 3; }
.fb__kort[data-r="1"] { --r: 1; }
.fb__kort[data-stor] { --w: 2; --h: 2; }
.fb__kort-lenke, .fb__radkort {
  position: relative;
  flex: 1;
  display: block;
  border-radius: var(--l-card-radius-lg);
  overflow: hidden;
  background: var(--color-kort-mork);
  text-decoration: none;
  color: var(--color-text-primary);
}
.fb__bilde { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fb__plate {
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-card-light);
}
.fb__navn {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--linje-display);
  /* Navnet brytes heller enn å kuttes: «Lyngdal by» skal ikke bli
     «Lyngdal …» i et smalt kort. */
  overflow-wrap: anywhere;
  hyphens: auto;
  text-wrap: balance;
}
/* Taglinen folder seg ut bare på det store kortet, etter at kortet har
   vokst (grid-raden går fra 0fr til 1fr). */
.fb__tagline {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 700ms var(--fs-ease);
}
.fb__tagline > span { overflow: hidden; min-height: 0; }
.fb__tagline > span > span {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--linje-kort);
  color: var(--color-text-secondary);
  opacity: 0;
  transition: opacity 500ms ease;
}
.fb__kort[data-stor] .fb__tagline { grid-template-rows: 1fr; transition-delay: 450ms; }
.fb__kort[data-stor] .fb__tagline > span > span { opacity: 1; transition-delay: 450ms; }
/* Sveiperaden viser alltid taglinen. */
.fb__radkort .fb__tagline { grid-template-rows: 1fr; }
.fb__radkort .fb__tagline > span > span { opacity: 1; }

.fb__bla {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
}
.fb__venstre { display: flex; align-items: center; gap: 22px; }
.fb__prikker { display: flex; align-items: center; gap: 6px; }
/* Prikken er 8 px å se på, men 24 px å treffe (WCAG 2.5.8). */
.fb__prikk {
  position: relative;
  width: 8px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width 600ms var(--fb-glid);
}
.fb__prikk::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-sand);
  transition: background 400ms ease;
}
.fb__prikk[aria-current] { width: 32px; }
.fb__prikk[aria-current]::before { background: var(--l-midnight); }
.fb__piler { display: flex; align-items: center; gap: 10px; }
.fb__pil--stor { width: 56px; height: 56px; border-color: var(--l-midnight); color: var(--l-midnight); }
/* Venstrepil: samme optiske korreksjon som .fh__pil, speilvendt. */
.fb__pil--stor svg { width: 22px; height: 22px; transform: translateX(1px); }
.fb__flere {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 26px 0 28px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--l-midnight);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: var(--etikett-stor);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-normal) var(--fs-ease);
}
.fb__flere svg { width: 22px; height: 22px; transition: transform var(--duration-normal) var(--fs-ease); }
.fb__flere:hover { background: var(--color-kort-mork); }
.fb__flere:hover svg { transform: translateX(3px); }

/* Sveiperad: bare under 1180 px. */
.fb__rad { display: none; }
.fb__radkort { display: block; aspect-ratio: 3 / 4; }

/* FINN: én linje med tekst og lenker. */
.fb__finn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: clamp(40px, 6vh, 64px);
  padding: 22px 0;
  border-top: 1px solid var(--color-sand);
  border-bottom: 1px solid var(--color-sand);
}
.fb__finn-tekst {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--color-text-primary);
}
.fb__finn-etikett { margin-right: 16px; }
.fb__finn-lenker { display: flex; gap: 28px; flex: none; }
.fb__finn-lenke {
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-underline-offset: 0.3em;
  color: var(--color-midnight);
  white-space: nowrap;
}
.fb__finn-kort { display: none; }

@media (max-width: 1179px) {
  .fb { padding-inline: 0; }
  .fb__inner { padding-inline: var(--fs-marg); }
  .fb__mosaikk { display: none; }
  .fb__rad { display: block; --sveiperad-luft: var(--fs-marg); }
  .fb__rad .fb__alle { margin-top: 16px; }
  .fb__finn { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 0; }
  .fb__finn-etikett { display: block; margin: 0 0 6px; }
  .fb__finn-lenker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .fb__finn-lenke {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    border: 1px solid var(--color-midnight);
    border-radius: var(--radius-full);
    text-decoration: none;
    letter-spacing: var(--sperring-sm);
  }
  .fb__finn-lang { display: none; }
  .fb__finn-kort { display: inline; }
}

/* ============================================================
   JOBB (fj)
   ============================================================ */
.fj__hode { max-width: 760px; margin-bottom: clamp(40px, 6vh, 64px); }
.fj__stillinger { margin-bottom: clamp(64px, 9vh, 96px); }

/* To undertitler med samme tyngde og samme strek under. */
.fj__under {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-text-primary);
}
.fj__undertittel {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 300;
  line-height: var(--linje-hero);
  letter-spacing: var(--sperring-tett);
}
.fj__undertittel--partnere { padding-bottom: 14px; border-bottom: 1px solid var(--color-text-primary); margin-bottom: 24px; }
.fj__bla { display: flex; align-items: center; gap: 8px; }
.fj__teller {
  margin-right: 8px;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  color: var(--tekst-dempet);
  white-space: nowrap;
}
.fj__pil--neste { background: var(--l-midnight); color: var(--color-text-inverse); border-color: var(--l-midnight); }
.fj__pil--neste:hover { background: var(--color-kort-mork); }

/* Filterbrikker: bare under 1180 px. */
.fj__filter { display: none; }

/* Lista. Rader med fast høyde, så sju alltid tar samme plass. */
.fj__liste { list-style: none; margin: 0; padding: 0; }
/* Streken under hver rad ligger på raden, ikke på lenka: lenka har radius
   (for den aktive flaten), og da ville streken krummet i endene. */
.fj__rad { border-bottom: 1px solid var(--color-sand); }
.fj__rad[hidden] { display: none; }
.fj__lenke {
  position: relative;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto auto;
  gap: 4px 28px;
  align-items: center;
  min-height: 92px;
  padding: 16px 20px;
  margin: 0 -20px;
  border-radius: var(--l-card-radius);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: background var(--duration-normal) var(--fs-ease), transform var(--duration-normal) var(--fs-ease), opacity var(--duration-normal) var(--fs-ease);
}
.fj__meta { display: contents; }
.fj__kommune { grid-column: 1; grid-row: 1; }
.fj__frist {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  color: var(--tekst-dempet);
  white-space: nowrap;
}
.fj__tittel {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--linje-tittel);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fj__arbeidsgiver {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  line-height: var(--linje-kort);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fj__radpil { grid-column: 4; grid-row: 1 / span 2; width: 34px; color: var(--aksent-tekst); }
/* Detaljene vises bare på den aktive raden. */
.fj__detaljer {
  grid-column: 2;
  grid-row: 3;
  display: none;
  gap: 18px;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  color: var(--tekst-dempet);
}
.fj__rad.is-aktiv .fj__lenke { background: var(--l-cream); transform: translateX(6px); }
.fj__rad.is-aktiv .fj__detaljer { display: flex; animation: fh-plate-inn var(--duration-slow) var(--fs-ease) both; }
.fj__rad.is-aktiv .fj__tittel { font-style: italic; }
/* De andre dempes mens én er aktiv. */
.fj__liste:has(.is-aktiv) .fj__rad:not(.is-aktiv) .fj__lenke { opacity: 0.55; }
.fj__rad.is-inn-ned { animation: fj-inn-ned 620ms var(--fs-ease) var(--fj-forsinkelse, 0ms) both; }
.fj__rad.is-inn-opp { animation: fj-inn-opp 620ms var(--fs-ease) var(--fj-forsinkelse, 0ms) both; }
@keyframes fj-inn-ned { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes fj-inn-opp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.fj__flere { display: none; }
.fj__fot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
}
.fj__varsel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  color: var(--color-text-secondary);
  text-decoration: none;
}
.fj__varsel:hover { color: var(--aksent-tekst); }
.fj__prikk { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-aurora); }
.fj__varsel-kort { display: none; }

/* Partnerbedrifter: fire kort i rad på desktop (Sveiperad-skallet
   nøytralisert som i Regnestykket). */
.fj__partner {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--l-card-radius-lg);
  overflow: hidden;
  background: var(--surface-card-light);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: transform var(--duration-normal) var(--fs-ease), box-shadow var(--duration-normal) var(--fs-ease);
}
.fj__partner:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.fj__partner-bilde { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--l-cream); }
.fj__partner-bilde img { width: 100%; height: 100%; object-fit: cover; }
.fj__partner-tekst { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; }
.fj__partner-navn {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--linje-tittel);
}
.fj__partner-om {
  font-family: var(--font-body);
  font-size: var(--brod-liten);
  line-height: var(--linje-brod-tett);
  color: var(--color-text-secondary);
  /* Sammendragene fra Portalen er av svært ulik lengde; kortene skal stå
     like. Hele teksten står på profilen. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* «Se alle»-kortet hører bare til sveiperaden under 1180 px. To klasser,
   fordi sveiperad.css lastes etter dette arket og setter visningen på
   .sveiperad__kort. */
.fj__partnerrad .fj__partner-alle-kort { display: none; }
/* Logoveggen under kortene. Rutenettet og kortene er husets
   (.l-jobb__logos / .l-jobb-logo i lister.css). */
.fj__logovegg { margin-top: clamp(40px, 5vw, 64px); }
.fj__logovegg-tekst {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--brod-kort);
  line-height: var(--linje-kort);
  color: var(--color-text-secondary);
  text-align: center;
}
.fj__logovegg .l-jobb__logos { list-style: none; margin: 0; padding: 0; }
.fj__logo { display: flex; }
.fj__fot--partnere { justify-content: center; margin-top: clamp(28px, 4vw, 40px); }
/* Tre i bredden på telefon: med husets 110 px minimum ble det to, og
   veggen 2 300 px høy. */
@media (max-width: 639px) {
  .fj__logovegg .l-jobb__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fj__logovegg .l-jobb-logo { padding: 10px; }
}
@media (min-width: 1180px) {
  .fj__partnerrad .sveiperad__vindu { margin-inline: 0; overflow: visible; }
  .fj__partnerrad .sveiperad__spor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; width: auto; padding: 0; }
  .fj__partnerrad .sveiperad__kort { flex: none; }
  .fj__partnerrad .sveiperad__fot { display: none; }
}

@media (max-width: 1179px) {
  .fj__under { align-items: center; }
  .fj__bla { display: none; }
  .fj__filter {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 16px calc(-1 * var(--fs-marg));
    padding: 0 var(--fs-marg);
    scrollbar-width: none;
  }
  .fj__filter::-webkit-scrollbar { display: none; }
  .fj__brikke {
    flex: none;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-sand);
    background: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--etikett);
    font-weight: 700;
    letter-spacing: var(--sperring-sm);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
  }
  .fj__brikke.is-aktiv { background: var(--l-midnight); color: var(--color-text-inverse); border-color: var(--l-midnight); }
  .fj__brikke-tall { font-weight: 400; color: var(--tekst-dempet); }
  .fj__brikke.is-aktiv .fj__brikke-tall { color: var(--tekst-dempet-mork); }
  .fj__liste { border-top: 1px solid var(--color-text-primary); }
  .fj__lenke {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    height: 124px;
    min-height: 0;
    margin: 0;
    padding: 12px 0;
    border-radius: 0;
    align-content: center;
  }
  .fj__meta { display: flex; gap: 12px; grid-column: 1 / -1; grid-row: 1; }
  .fj__kommune, .fj__frist { grid-column: auto; grid-row: auto; }
  .fj__tittel { grid-column: 1; grid-row: 2; font-size: var(--text-lg); }
  .fj__arbeidsgiver { grid-column: 1; grid-row: 3; font-size: var(--brod-liten); }
  .fj__radpil { grid-column: 2; grid-row: 2 / span 2; width: 26px; }
  .fj__detaljer, .fj__rad.is-aktiv .fj__detaljer { display: none; }
  .fj__rad.is-aktiv .fj__lenke { background: transparent; transform: none; }
  .fj__liste:has(.is-aktiv) .fj__rad:not(.is-aktiv) .fj__lenke { opacity: 1; }
  .fj__flere {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 320px;
    margin: 20px auto 0;
    min-height: 52px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-text-primary);
    background: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--etikett);
    font-weight: 700;
    letter-spacing: var(--sperring-sm);
    text-transform: uppercase;
    cursor: pointer;
  }
  .fj__flere[hidden] { display: none; }
  .fj__varsel-lang { display: none; }
  .fj__varsel-kort { display: inline; }
  .fj__partnerrad { --sveiperad-luft: var(--fs-marg); }
  .fj__partnerrad .fj__partner-alle-kort { display: flex; }
  .fj__partner--alle {
    justify-content: space-between;
    padding: 22px 20px;
    background: var(--l-cream);
    box-shadow: none;
  }
  .fj__partner--alle svg { width: 40px; color: var(--aksent-tekst); }
  .fj__fot { flex-wrap: wrap; }
}
/* Uten JS: de første sju står; «Vis 5 til» og pilene skjules. */
html:not(.js) .fj__bla, html:not(.js) .fj__flere, html:not(.js) .fj__filter { display: none; }

/* ============================================================
   AVSTANDER (fa) — ny ramme rundt den gamle tavla
   ============================================================ */
.fa { color: var(--color-text-inverse); }
.fa__inner {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.fa__tekst { position: sticky; top: calc(var(--nav-height) + 48px); }
.fa__eyebrow { color: var(--aksent-tekst-mork); }
.fa__cta { margin-top: 32px; }
@media (max-width: 1179px) {
  .fa__inner { grid-template-columns: minmax(0, 1fr); }
  .fa__tekst { position: static; }
}
@media (max-width: 767px) {
  .fa__cta { width: 100%; max-width: 320px; justify-content: center; }
}

/* ============================================================
   FAKTA OM LISTER (fk) — rett etter dørene, før Regnestykket. Faste
   fakta om regionen i en definisjonsliste, rutenett av hårstreker
   (gap: 1px på fjord-bunn). Statisk: ingen lenker, hover eller
   opptelling. Tekster og kilder i src/data/forsideFakta.ts.
   ============================================================ */
.fk { color: var(--color-text-inverse); }
.fk__eyebrow { color: var(--aksent-tekst-mork); }

/* Hodet: overskriften til venstre, fyret til høyre på grunnlinja. */
.fk__hode {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

/* Rutenett av hårstreker: punktene ligger på fjord-bunn med 1 px gap. */
.fk__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 56px 0 0;
  background: var(--l-fjord);
  border: 1px solid var(--l-fjord);
  border-radius: var(--l-card-radius-lg);
  overflow: hidden;
}
.fk__punkt {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px 36px;
  background: var(--l-midnight);
}
.fk__punkt--bred { grid-column: span 2; }
.fk__punkt--hoved { padding: 40px 36px 44px; }

.fk__dt {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  line-height: var(--linje-display);
  letter-spacing: var(--sperring-tett);
  color: var(--color-warm-white);
  text-wrap: balance;
}
.fk__punkt--hoved .fk__dt { font-size: var(--text-4xl); }

.fk__dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--color-mist);
  text-wrap: pretty;
}
.fk__punkt--bred .fk__dd { max-width: 44ch; }

.fk__vaapen { display: flex; gap: 10px; margin: 6px 0 0; }
.fk__vaapen img { display: block; width: auto; height: 36px; }

/* Kildenoten tett under lista. */
.fk__kilder {
  max-width: 110ch;
  margin: 20px 0 0;
  font-family: var(--font-body);
  font-size: var(--brod-liten);
  line-height: var(--linje-brod-tett);
  color: var(--tekst-dempet-mork);
  text-wrap: pretty;
}
.fk__kilder-etikett {
  margin-right: 10px;
  font-size: var(--etikett-liten);
  font-weight: 700;
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
}
.fk__fyr {
  flex: none;
  display: block;
  width: 150px;
  height: auto;
  color: var(--aksent-tekst-mork);
  opacity: 0.75;
}

@media (max-width: 1179px) {
  .fk__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; }
  .fk__punkt { gap: 12px; padding: 28px 24px 32px; }
  .fk__punkt--hoved { padding: 32px 24px 36px; }
  .fk__punkt--bred .fk__dd { max-width: none; }
  .fk__vaapen { gap: 9px; margin-top: 4px; }
  .fk__vaapen img { height: 34px; }
  .fk__fyr { width: 124px; }
}
@media (max-width: 767px) {
  .fk__liste { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .fk__punkt--bred { grid-column: auto; }
  .fk__punkt { gap: 10px; padding: 22px 20px 24px; }
  .fk__punkt--hoved { padding: 26px 20px 28px; }
  .fk__vaapen { gap: 8px; }
  .fk__vaapen img { height: 30px; }
  .fk__kilder-etikett { margin-right: 8px; }
  .fk__fyr { width: 92px; }
}

/* ============================================================
   FAST PROFILKNAPP (ff)
   ============================================================ */
.ff {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 22px 0 18px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(251, 249, 246, 0.14);
  background: var(--l-midnight);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-2xl);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--fs-ease), transform var(--duration-slow) var(--fs-ease), background var(--duration-normal) var(--fs-ease);
}
.ff.is-synlig { opacity: 1; transform: none; pointer-events: auto; }
.ff:hover { background: var(--color-kort-mork); }
.ff__prikk { width: 8px; height: 8px; border-radius: 50%; background: var(--color-aurora); }
@media (max-width: 767px) {
  .ff { right: 16px; left: 16px; justify-content: center; bottom: calc(16px + env(safe-area-inset-bottom)); }
}
/* Fokus og ankerlenker skal ikke havne bak knappen mens den vises
   (WCAG 2.4.11), som los-linja. */
html.js:has(.ff.is-synlig) {
  scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* ============================================================
   BEVEGELSE AV
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fh__film, .fh__ramme, .fh__media img, .fh__media video, .fh__navn, .fh__vaapen, .fh__tagline, .fh__navn-tekst, .fh__smalnavn, .fh__pil, .fh__pil::before, .fh__pil svg,
  .fb__kort, .fb__spor, .fb__tagline, .fb__tagline > span > span, .fb__prikk, .fb__prikk::before, .fb__flere svg, .fj__lenke, .fj__rad, .ff, .fd__tittel, .fj__partner {
    transition: none;
    animation: none;
  }
  .fh__strek.is-aktiv > span { animation: none; transform: scaleX(1); }
}

/* Mobil: seksjonsluften (styles.css, --mobil-seksjon). Heroen har egen
   topp under menyen og er ikke med. */
@media (max-width: 767px) {
  .fd, .fk, .fr, .fb, .fj, .fa { padding-block: var(--mobil-seksjon); }
  /* FINN-knappene er det siste i Bo. En strek under dem rett før den
     mørke Portal-flaten delte ingenting, bare la til 18 px luft. */
  .fb__finn { padding-bottom: 0; border-bottom: 0; }
}