/* ==========================================================================
   Fellesmøtene i Kristiansand — static rebuild
   Tokens, type scale and layout values mirror the Webflow project 1:1.
   Source of truth: docs/brand-guide.md §3–§5
   ========================================================================== */

/* --- Inter, self-hosted (latin + latin-ext only) -------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../font/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../font/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Design tokens (Webflow Variables: Base + FM26) ----------------------- */
:root {
  --fm26-beige: #f7e9d7;
  --fm26-purple: #5575ff;
  /* FM26 Purple mørknet til 5,0:1 mot kremfargen og 6,0:1 mot hvitt — til tekst.
     #5575ff gir bare 3,3:1 / 3,9:1 og er for lys til lenker og små etiketter. */
  --fm26-purple-tekst: #3555e0;
  --fm26-dark: #2c3142;
  --fm26-red: #f66;
  --dark-slate-blue: #2c3142;
  /* Dempet tekst — en egen designet tone, ikke en utregnet variant av
     --dark-slate-blue. Byttes profilfargen, byttes denne sammen med den. */
  --text-muted: #5b6273;
  /* Skygger bruker en kjøligere tone enn merkefargen. */
  --shadow-color: #1c2a33;
  --felles-bla: #85b2cb;
  --sky-blue: #52d2ec;
  --vipps: #ff5b24;
  --white: #fff;
  --black: #121212;

  /* Size scale */
  --0: 0rem;
  --1: 0.25rem;
  --2: 0.5rem;
  --3: 1rem;
  --3-5: 1.5rem;
  --4: 2rem;
  --4-5: 3rem;
  --5: 4rem;
  --5-5: 6.5rem;
  --6: 9rem;

  --shadow-button: 0 6px 16px -4px #00304426;
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* --- Reset + base -------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100%;
  background-color: var(--fm26-beige);
  color: var(--dark-slate-blue);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, p { margin-top: 0; }

/* Browser surfaces themed from the palette rather than left at defaults */
::selection {
  background-color: var(--fm26-purple);
  color: var(--white);
}

:focus-visible {
  outline: 3px solid var(--fm26-purple);
  outline-offset: 3px;
  border-radius: var(--2);
}

.gen-section.dark :focus-visible,
.gen-section.blue :focus-visible,
.gen-section.footer :focus-visible { outline-color: var(--sky-blue); }

@supports (scrollbar-color: auto) {
  html {
    scrollbar-color: var(--felles-bla) var(--fm26-beige);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--2);
  left: var(--2);
  z-index: 4000;
  padding: var(--2) var(--3);
  border-radius: var(--2);
  background-color: var(--fm26-dark);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --- Shared layout ------------------------------------------------------- */
.page-wrapper {
  z-index: 0;
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1360px;
  padding-left: 80px;
  padding-right: 80px;
}

.wrapper.colums {
  z-index: 10;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.gen-section {
  position: relative;
  /* anchor links (#sponsors) must clear the fixed header */
  scroll-margin-top: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 120px;
}

.gen-section.dark { background-color: var(--dark-slate-blue); color: var(--white); }
.gen-section.white { background-color: var(--white); }
/* --black, ikke arvet --dark-slate-blue: #2c3142 på Vipps-oransje gir 4,17:1
   og stryker så vidt på WCAG AA. #121212 gir 6,04:1. Oransjen er Vipps'
   merkefarge og er urørt. */
.gen-section.vipps { background-color: var(--vipps); color: var(--black); }
.gen-section.blue {
  position: relative;
  background-color: var(--felles-bla);
  background-image: linear-gradient(to bottom, var(--felles-bla), var(--sky-blue));
  /* Mørk tekst, ikke hvit: hvit på #85b2cb gir 2,28:1 og stryker på WCAG AA.
     Samme behandling som .subpage-hero, som bruker den identiske gradienten. */
  color: var(--dark-slate-blue);
}
.gen-section.footer {
  margin-top: auto;
  background-color: var(--black);
  color: var(--white);
  text-align: center;
}

/* --- Typography ---------------------------------------------------------- */
.section-heading {
  margin-top: 0;
  font-size: 48px;
  font-weight: 900;
  line-height: 1.15em;
  letter-spacing: -0.025em;
  text-decoration: none;
  text-wrap: balance;
}
.section-heading.centered { text-align: center; }
.section-heading.no-margin { margin-bottom: 0; }

.paragraph-big { margin-bottom: 24px; font-size: 20px; line-height: 28px; }
.paragraph-big.centered { text-align: center; }
.paragraph-big.link {
  color: var(--dark-slate-blue);
  font-weight: 600;
  text-decoration: none;
}
.paragraph-big.link:hover { text-decoration: underline; }

.hero-ingress { margin-bottom: var(--3-5); font-size: var(--3-5); }

/* --- Navigation ---------------------------------------------------------- */
.nav {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.nav.transparent { background-color: transparent; }

.nav-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1360px;
  padding: 24px 80px;
}

.nav-brand {
  display: flex;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}
.brand-img { width: 100%; height: 100%; }

.nav-menu { display: flex; align-items: center; }

.nav-link {
  padding: 16px;
  color: var(--fm26-dark);
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, transform 0.2s;
}
.nav-link:hover { color: var(--fm26-purple); transform: translateY(2px); }
.nav-link[aria-current='page'] { color: var(--dark-slate-blue); transform: translateY(2px); }
.nav-link.live { border-radius: var(--3); background-color: var(--fm26-red); }
.nav-link.hide { display: none; }

/* Med sju synlige lenker (etter at Bildegallerier kom inn) er det trangt
   mellom 1200 og 1360px. Strammere polstring holder logoen på 120px og
   lenkene på én linje. Under 1200px tar hamburgeren over (se 1199-blokka). */
@media screen and (max-width: 1360px) and (min-width: 1200px) {
  .nav-container { padding: 24px 40px; }
  .nav-link { padding: 16px 10px; }
}

.hamburger-icon {
  position: relative;
  z-index: 102;
  display: none;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hamburger-lines {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 40px;
  height: 40px;
  padding: 8px;
}
.habburger-line {
  width: 100%;
  height: 4px;
  background-color: var(--white);
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.habburger-line.upper { align-self: flex-start; width: 60%; }
.habburger-line.lower { align-self: flex-end; width: 60%; }

.nav-spacer { margin: 0; padding: 0; background-color: var(--felles-bla); }

/* --- Hero ---------------------------------------------------------------- */
._26-hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 144px;
  padding-bottom: 10vw;
  background-color: var(--fm26-beige);
}

.wrapper._26-hero-wrapper { margin-top: var(--4); }
.wrapper._26-hero-ingress-wrapper { margin-bottom: var(--4-5); }

._2026-hero-grid {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  margin-bottom: var(--5);
}
._2026-hero-grid.takk { grid-template-columns: 1fr 1fr; }

._26-hero-image {
  width: 100%;
  height: 100%;
  max-height: 60svh;
  border-radius: var(--3);
  object-fit: cover;
}

._26-hero-title-wrapper {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
}

._26-hero-title {
  margin-bottom: var(--5);
  padding-top: var(--4);
  color: var(--fm26-purple);
  font-size: var(--5);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: left;
}

._26-hero-super {
  display: block;
  color: var(--dark-slate-blue);
  font-size: var(--4);
  font-weight: 800;
  text-transform: uppercase;
}

._26-hero-slogan-wrapper {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-self: flex-start;
  align-items: flex-start;
}

._26-hero-slogan {
  width: 440px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--6);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.05em;
}
._26-hero-slogan.takk { line-height: 1; }

._26-hero-doodle { position: absolute; }
._26-hero-doodle._1 { width: 10%; inset: -12% 12% auto auto; }
._26-hero-doodle._1.takk { top: 0%; right: 14%; }
._26-hero-doodle._2 { width: 60%; bottom: -17%; left: -20%; }

._26-ingress-link { color: var(--fm26-purple-tekst); text-decoration: underline; }

._26-secondary-menu {
  position: relative;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  margin-left: auto;
}
._26-secondary-menu.flex {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
}

._26-hero-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Som originalen: 4px kant kun på høyre og bunn, flush mot det mørke
     feltet. Faste px-verdier, ikke var() — med variabler falt bredden
     tilbake til nettleserens `medium` (3px) ved hover, og knappen vokste. */
  padding: 16px 32px;
  border: 0 solid transparent;
  border-right: 4px solid var(--fm26-purple);
  border-bottom: 4px solid var(--fm26-purple);
  border-radius: var(--2);
  background-color: var(--fm26-dark);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease-out);
}
/* Nøyaktig som originalen: rammen flyttes fra høyre/bunn til topp/venstre.
   Summen er 4px på hver akse i begge tilstander, så de ytre målene er
   uendret og ingenting rundt knappen flytter seg. Den beige rammen er
   samme farge som sidebakgrunnen, så kanten ser ut til å forsvinne. */
/* Kanten flytter seg til motsatt hjørne. Summen er 4px på hver akse i begge
   tilstander, så de ytre målene er uendret og ingenting rundt knappen rører
   seg. Beige er samme farge som sidebakgrunnen, så kanten ser ut til å
   forsvinne. Bare fargene animeres; bredden byttes momentant. */
._26-hero-button:hover,
._26-hero-button:focus-visible {
  border-top: 4px solid var(--fm26-beige);
  border-left: 4px solid var(--fm26-beige);
  border-right: 0 solid transparent;
  border-bottom: 0 solid transparent;
}

._26-hero-button-icon {
  display: inline-flex;
  align-items: center;
}
._26-hero-button-icon.right { margin-left: var(--2); }
/* height:1em + width:auto gjengir glyfen i samme størrelsesforhold som fonten */
._26-hero-button-icon svg { height: 1em; width: auto; fill: currentColor; }

.skyline {
  position: absolute;
  inset: auto 0 -1px;
  display: block;
  width: 100%;
}

/* --- Forside 2027 («Plakaten») ------------------------------------------
   Årets tittel bærer forsiden. Fakta står i én stripe under, uka som
   dagkort. Ligger i ._26-hero-section for nav-overlapp og skyline. */
.fp-section { align-items: stretch; }
/* stretch + max-width 1360px la wrapperne inntil venstre kant på skjermer
   bredere enn 1360px. margin-inline: auto sentrerer dem i samme beholder
   som .nav-container, så venstrekanten flukter med logoen. */
.fp-section > .wrapper { margin-inline: auto; }

.fp-hero { position: relative; width: 100%; margin-top: var(--4); }
.fp-eyebrow {
  margin: 0;
  color: var(--fm26-purple-tekst);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fp-title {
  margin: 12px 0 0;
  color: var(--fm26-dark);
  font-size: clamp(4.2rem, 15vw, 13.5rem);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.055em;
}
.fp-q { color: var(--fm26-purple); }
.fp-doodle { position: absolute; top: 18%; right: 4%; width: clamp(48px, 7vw, 96px); }
.fp-swoosh { display: block; width: clamp(180px, 30vw, 380px); margin: 18px 0 0 -8px; }

.fp-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: var(--3-5);
  margin-top: clamp(32px, 5vw, 56px);
  padding: var(--3-5) 0;
  border-top: 2px solid var(--fm26-dark);
  border-bottom: 2px solid var(--fm26-dark);
}
.fp-fact { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.4; }
.fp-fact b {
  display: block;
  color: var(--fm26-dark);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.fp-count { margin: 0; text-align: right; color: var(--text-muted); font-size: 15px; }
.fp-count b {
  color: var(--fm26-purple);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.fp-ctas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 28px; }
.fp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 2px solid var(--fm26-dark);
  border-radius: 100px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.fp-btn:focus-visible { outline: 3px solid var(--fm26-purple); outline-offset: 3px; }
.fp-btn-primary { background-color: var(--fm26-dark); color: var(--white); }
.fp-btn-primary:hover,
.fp-btn-primary:focus-visible { background-color: var(--fm26-purple-tekst); border-color: var(--fm26-purple-tekst); }
.fp-btn-ghost { background-color: transparent; color: var(--fm26-dark); }
.fp-btn-ghost:hover,
.fp-btn-ghost:focus-visible { background-color: var(--white); }

/* Abonnementsmenyen fra /program, her som sekundærknapp */
.fp-sub .program-sub-btn {
  padding: 12px 22px;
  border: 2px solid var(--fm26-dark);
  background-color: transparent;
  color: var(--fm26-dark);
  font-size: 16px;
}
.fp-sub .program-sub-btn:hover,
.fp-sub .program-sub-btn:focus-visible,
.fp-sub[open] .program-sub-btn { background-color: var(--white); }
.fp-sub .program-sub-menu { right: auto; left: 0; }

.fp-photo { margin-top: clamp(40px, 6vw, 80px); border-radius: 20px; overflow: hidden; aspect-ratio: 21 / 9; }
.fp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.fp-h2 {
  margin: 6px 0 0;
  color: var(--fm26-dark);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.fp-week { width: 100%; padding-top: clamp(56px, 8vw, 104px); }
.fp-week-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--3); margin-bottom: 28px; }
.fp-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.fp-day { padding: 20px 18px 22px; border-radius: 16px; background-color: var(--white); color: var(--fm26-dark); }
.fp-day-last { background-color: var(--fm26-dark); color: var(--white); }
.fp-day-name { margin: 0; color: var(--fm26-purple-tekst); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.fp-day-last .fp-day-name { color: #aab9ff; }
.fp-day-num { margin: 4px 0 14px; font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -0.04em; }
.fp-mt {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  font-size: 15px;
  line-height: 1.35;
}
/* Lange sammensatte ord (Familiegudstjeneste) skal brytes med bindestrek,
   ikke renne ut av kortet i 2-kolonners rutenett på mobil. ­ i HTML-en
   gir bruddet Familie-gudstjeneste; hyphens/overflow-wrap er sikkerhetsnett
   for andre navn. min-width: 0 lar grid-kortet krympe under ordlengden. */
.fp-day { min-width: 0; }
.fp-mt, .program-heading { overflow-wrap: break-word; }
.fp-mt + .fp-mt { margin-top: 10px; }
.fp-mt time { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }

.fp-back {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  width: 100%;
  padding-top: clamp(64px, 9vw, 120px);
  /* Skyline-silhuetten er litt høyere enn seksjonens bunnpolstring */
  padding-bottom: clamp(40px, 6vw, 80px);
}
.fp-back-text p:not(.fp-eyebrow) { max-width: 46ch; margin: 14px 0 0; color: var(--text-muted); font-size: 18px; line-height: 1.55; }
.fp-back-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }

@media screen and (max-width: 991px) {
  .fp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-count { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; text-align: left; }
  .fp-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 600px) {
  .fp-facts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fp-photo { aspect-ratio: 4 / 3; }
  .fp-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-mt, .program-heading { -webkit-hyphens: auto; hyphens: auto; }
  .fp-back { grid-template-columns: minmax(0, 1fr); }
}
/* Smale telefoner (320–360): litt mindre sidepolstring i dagkortene så
   Ungdomsmøte o.l. får plass uten unødig orddeling. */
@media screen and (max-width: 360px) {
  .fp-day { padding-left: 14px; padding-right: 14px; }
}

/* --- Buttons ------------------------------------------------------------- */
.button-bar {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -16px;
  margin-left: -8px;
  margin-right: -8px;
}
.button-bar.centered { justify-content: center; }
.button-bar.top-margin { margin-top: 40px; }

.button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 8px 16px;
  padding: 16px 32px;
  border-radius: 100px;
  background-color: var(--white);
  color: var(--black);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-button);
  transition: box-shadow 0.2s, transform 0.2s;
}
.button:hover { transform: translateY(2px); box-shadow: 0 0 #00304426; }
/* Mørk etikett, ikke hvit: hvit på #85b2cb gir 2,28:1. Bakgrunnen beholdes —
   den står på en mørk seksjon og har 5,68:1 som form. */
.button.blue { background-color: var(--felles-bla); color: var(--dark-slate-blue); }

/* --- Photo gallery ------------------------------------------------------- */
.photo-gallery-grid {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.lightbox-link {
  display: block;
  width: 100%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}
.lightbox-link:hover { transform: scale(0.95); }

.lightbox-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}
.lightbox-link:hover .lightbox-image { transform: scale(1.15); }

/* Native dialog lightbox — replaces the jQuery Webflow lightbox */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  border: 0;
  /* the dialog fills the viewport, so paint the scrim on it as well as on
     ::backdrop — belt and braces for engines that skip the pseudo-element */
  background: #000000e6;
  overflow: hidden;
}
.lightbox::backdrop { background: #000000e6; }

.lightbox-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 5vh 6vw;
}
.lightbox-figure { margin: 0; }
.lightbox-full {
  display: block;
  max-width: 88vw;
  max-height: 86vh;
  border-radius: var(--2);
  object-fit: contain;
}

.lightbox-btn {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background-color: #ffffff1f;
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out);
}
.lightbox-btn:hover { background-color: #ffffff3d; }
.lightbox-btn svg { width: 1.25rem; height: 1.25rem; }
.lightbox-close { top: var(--3); right: var(--3); }
.lightbox-prev { top: 50%; left: var(--3); transform: translateY(-50%); }
.lightbox-next { top: 50%; right: var(--3); transform: translateY(-50%); }

.lightbox-count {
  position: absolute;
  bottom: var(--3);
  left: 50%;
  transform: translateX(-50%);
  color: #ffffffb8;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* --- Bildegalleriene (/bildegallerier) ----------------------------------- */
.galleri-tilbake { margin: 0 0 var(--2); font-size: 15px; }

.galleri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin: var(--4) 0 0;
  padding: 0;
  list-style: none;
}
.galleri-grid li { margin: 0; }
.lightbox-link.galleri-rute {
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--2);
  background-color: #ffffff40;
}
.lightbox-link.galleri-rute img { display: block; height: 100%; }
.lightbox-link.galleri-rute:hover { transform: none; }
.lightbox-link.galleri-rute:hover .lightbox-image { transform: scale(1.06); }
.lightbox-link.galleri-rute:focus-visible { outline: 3px solid var(--dark-slate-blue); outline-offset: 2px; }
/* Myk innlasting: ingen alt-tekst synlig mens bildet laster, en rolig plassholder som pulserer svakt, og bildet toner inn. */
.galleri-rute, .galleri-kort { background-color: #ffffff40; }
.galleri-rute img, .galleri-kort img { color: transparent; }
.js .galleri-rute img, .js .galleri-kort img { opacity: 0; transition: opacity .5s ease, transform .35s ease; }
.js .galleri-rute img.lastet, .js .galleri-kort img.lastet { opacity: 1; }
.js .galleri-rute:has(img:not(.lastet)) { animation: galleri-puls 1.6s ease-in-out infinite; }
@keyframes galleri-puls { 50% { background-color: #ffffff66; } }
@media (prefers-reduced-motion: reduce) {
  .js .galleri-rute img, .js .galleri-kort img { transition: none; }
  .js .galleri-rute:has(img:not(.lastet)) { animation: none; }
}

.galleri-oversikt {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--3);
  margin: var(--4) 0 0;
  padding: 0;
  list-style: none;
}
.galleri-oversikt li { display: flex; margin: 0; }
.galleri-kort {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--3);
  background-color: var(--white);
  color: var(--dark-slate-blue);
  text-decoration: none;
  box-shadow: 0 10px 30px -12px #1c2a3359;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.galleri-kort:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -12px #1c2a3373; }
.galleri-kort:focus-visible { outline: 3px solid var(--dark-slate-blue); outline-offset: 3px; }
.galleri-kort img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.galleri-kort-tekst { display: block; padding: var(--3) var(--3) var(--3-5); }
.galleri-kort-år { display: block; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.galleri-kort-meta { display: block; margin-top: var(--1); color: var(--text-muted); font-size: 15px; }

@media screen and (max-width: 479px) {
  .galleri-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .lightbox-link.galleri-rute { aspect-ratio: 1; border-radius: 4px; }
  .galleri-oversikt { grid-template-columns: 1fr 1fr; gap: var(--2); }
  .galleri-kort-tekst { padding: var(--2) var(--2) var(--3); }
  .galleri-kort-år { font-size: 22px; }
  .galleri-kort-meta { font-size: 13px; }
}

/* --- Vipps / giving ------------------------------------------------------ */
.vipps-heading-wrapper {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}
.vipps-logo { width: 200px; margin-right: 16px; padding-top: 8px; }

.columns { display: grid; grid-template-rows: auto; gap: 40px 38px; }
.columns.vipps { grid-template-columns: 2fr 1fr; }

.vipps-number-item {
  padding: 24px 48px;
  border-radius: 500px;
  background-color: var(--white);
  text-align: center;
}
.vipps-number-description { font-size: 24px; font-weight: 600; line-height: 32px; }
.vipps-number {
  font-size: 56px;
  font-weight: 800;
  line-height: 64px;
  font-variant-numeric: tabular-nums;
}

.img-fellesskap { width: 100%; object-fit: contain; }

.text-wrapper { display: flex; flex-direction: column; justify-content: center; }

/* --- Sponsorer -----------------------------------------------------------
   Logoen bærer navnet, så kortet er i hovedsak bare logo. Bransjetekst vises
   kun der logoen ikke sier det selv. Lenkede kort har en pil som er synlig i
   hvile — ikke bare ved hover, som er ubrukelig på mobil. Ulenkede kort er
   flate og ikke tabbbare, så fraværet av affordans er konsekvent.
   -------------------------------------------------------------------------- */
.sponsor-grid {
  display: grid;
  gap: 16px;
  justify-content: center;
  margin-bottom: 16px;
  padding: 0;
  list-style: none;
}
/* Sporene har en øvre grense, og overskuddsplassen fordeles av justify-content.
   Uten taket ville et enslig kort på siste rad blitt strukket over hele bredden. */
.sponsor-grid.big-logos { grid-template-columns: repeat(auto-fit, minmax(256px, 352px)); }
.sponsor-grid.medium-logos {
  grid-template-columns: repeat(auto-fit, minmax(186px, 264px));
  margin-top: 16px;
}

.sponsor-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--2);
  height: 100%;
  min-height: 150px;
  padding: 28px 32px;
  border: 1px solid color-mix(in srgb, var(--dark-slate-blue) 7.843%, transparent);
  border-radius: 12px;
  background-color: var(--white);
  color: inherit;
  text-decoration: none;
}
.sponsor-wrapper.big { min-height: 196px; padding: 32px 40px; }

/* Lenkede kort: pil i hvile, løft ved hover */
a.sponsor-wrapper {
  border-color: color-mix(in srgb, var(--dark-slate-blue) 18.039%, transparent);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out);
}
a.sponsor-wrapper:hover,
a.sponsor-wrapper:focus-visible {
  transform: translateY(-4px);
  border-color: var(--felles-bla);
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--dark-slate-blue) 25.098%, transparent);
}

.sponsor-arrow {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 13px;
  height: 13px;
  color: color-mix(in srgb, var(--dark-slate-blue) 34.902%, transparent);
  transition: color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
a.sponsor-wrapper:hover .sponsor-arrow,
a.sponsor-wrapper:focus-visible .sponsor-arrow {
  color: var(--felles-bla);
  transform: translate(2px, -2px);
}

.sponsor-logo {
  width: 100%;
  max-height: 88px;
  object-fit: contain;
  transition: filter 0.25s var(--ease-out);
}
.sponsor-wrapper.big .sponsor-logo { max-height: 124px; }
.sponsor-logo.multiply { mix-blend-mode: multiply; }

/* Bransje — bare der logoen ikke sier det selv */
.sponsor-kind {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.sponsor-wrapper.cta {
  border-color: transparent;
  background-color: var(--felles-bla);
  color: var(--dark-slate-blue);
  transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.sponsor-wrapper.cta:hover,
.sponsor-wrapper.cta:focus-visible {
  transform: translateY(-4px);
  border-color: transparent;
  background-color: var(--fm26-purple);
  color: var(--white);
}

.spons-cta-text { font-size: 20px; font-weight: 400; line-height: 1.25; text-align: center; }
.spons-cta-highlight { font-weight: 800; text-decoration: underline; }

@media screen and (max-width: 479px) {
  .sponsor-grid { gap: 12px; }
  .sponsor-grid.big-logos,
  .sponsor-grid.medium-logos { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
  .sponsor-wrapper { min-height: 104px; padding: 18px; }
  .sponsor-wrapper.big { min-height: 124px; padding: 20px; }
  .sponsor-logo { max-height: 56px; }
  .sponsor-wrapper.big .sponsor-logo { max-height: 72px; }
  .spons-cta-text { font-size: 16px; }
}

/* Skylinen er en gjennomsiktig SVG med bare silhuetten. «Himmelen» er
   elementets bakgrunnsfarge, og må settes til sluttfargen på seksjonen rett
   over — ellers blir det en synlig skjøt. Samme varianter som originalen. */
.skyline-above-footer { display: block; width: 100%; }
.skyline-above-footer.beige-bg { background-color: var(--fm26-beige); }
.skyline-above-footer.cyan-bg { background-color: var(--sky-blue); }
.skyline-above-footer.blue-bg { background-color: var(--felles-bla); }
.skyline-above-footer.white-bg { background-color: var(--white); }

/* --- Footer -------------------------------------------------------------- */
.footer-text { margin-bottom: 0; }
.footer-text.link { color: var(--felles-bla); text-decoration: none; }
.footer-text.link:hover { text-decoration: underline; }

/* ==========================================================================
   Breakpoints — mirrored from the Webflow project (991 / 767 / 479)
   ========================================================================== */

/* Hamburger fra 1199px: sju lenker får ikke plass på én linje med 120px logo
   under den bredden, og logoen ble klemt. Innhold/helt typografi blir stående
   på 991px som før. */
@media screen and (max-width: 1199px) {
  .nav { position: fixed; background-color: var(--felles-bla); transition: background-color 0.2s; }
  .nav.transparent { background-color: transparent; }

  /* Fast navigasjon som ligger oppå innholdet. Gjennomsiktig fungerer over
     helten, men ikke over tekst lenger nede — der la logoen seg rett oppå
     medlemslista. Bakgrunnen slår inn så snart siden er scrollet.
     Fargen er den .nav allerede har på denne bredden; .transparent fjernet den. */
  .nav.transparent.scrolled { background-color: var(--felles-bla); }
  .nav-container { justify-content: center; padding: 16px 40px 0; }

  .nav-menu {
    position: fixed;
    inset: 0%;
    z-index: 2000;
    display: none;
    flex-direction: column;
    justify-content: center;
    background-color: var(--fm26-purple);
  }
  .nav-menu[data-open='true'] { display: flex; }
  .nav-link:hover { color: var(--fm26-beige); }

  /* Logoen hang tidligere 40px under baren (margin-bottom: -40px) og la seg
     oppå innholdet. Nå holder den seg innenfor: 16px toppmarg + 80px logo =
     96px, som er nøyaktig barhøyden og .nav-spacer på denne bredden. */
  .nav-brand { width: 80px; height: 80px; margin-bottom: 0; }
  .nav-brand { position: relative; z-index: 3000; }

  .hamburger-icon { position: absolute; inset: 0% 40px 0% auto; display: flex; }
  .hamburger-lines { width: 48px; height: 48px; }
  .habburger-line { height: 5px; background-color: var(--fm26-dark); }

  .hamburger-icon[aria-expanded='true'] .habburger-line { background-color: var(--white); }
  .hamburger-icon[aria-expanded='true'] .habburger-line.upper,
  .hamburger-icon[aria-expanded='true'] .habburger-line.lower { opacity: 0; }

  .nav-spacer { height: 96px; }
  ._26-hero-section { margin-top: -96px; padding-top: 176px; }
}

@media screen and (max-width: 991px) {
  .gen-section { padding-top: 80px; padding-bottom: 80px; }
  .wrapper { padding-left: 40px; padding-right: 40px; }
  .wrapper.colums { grid-template-rows: auto; grid-template-columns: 1fr; }
  .wrapper._26-hero-wrapper { margin-top: -5rem; }

  ._2026-hero-grid { margin-bottom: var(--5-5); grid-template-columns: 1fr; }
  ._26-hero-title { margin-bottom: var(--3-5); font-size: var(--4-5); }
  ._26-hero-super { font-size: var(--3-5); }
  ._26-hero-slogan { width: 560px; font-size: var(--5-5); }
  ._26-hero-slogan.takk { width: auto; }
  ._26-hero-image { width: 100%; max-height: 40svh; }
  ._26-hero-doodle._1 { top: -38%; right: -8%; }
  ._26-hero-doodle._1.takk { top: 2%; right: 5%; }
  ._26-hero-doodle._2 { bottom: -44%; }
  ._26-hero-doodle._2.takk { bottom: -16%; }
}

@media screen and (max-width: 767px) {
  /* Ankerlenker under den faste baren: 56px bar + 24px luft. */
  .gen-section { padding-top: 64px; padding-bottom: 64px; scroll-margin-top: 80px; }
  .wrapper { padding-left: 24px; padding-right: 24px; }
  .wrapper._26-hero-wrapper { margin-top: -2rem; }
  .wrapper._26-hero-ingress-wrapper { margin-bottom: var(--4); }

  .paragraph-big { font-size: 18px; line-height: 26px; }

  /* Logoen er like stor som hamburgerknappen (40px), og begge står midt i
     baren. Hamburgeren er absolutt plassert over hele barhøyden og sentrert
     der, så logoen trenger like mye luft over som under for å havne på samme
     linje: 8px + 40px + 8px = 56px, lik .nav-spacer her. */
  .nav-container { padding: 8px 24px; }
  .nav-menu { flex-flow: wrap; align-content: center; }
  .nav-brand { width: 40px; height: 40px; margin-bottom: 0; }
  .hamburger-lines { width: 40px; height: 40px; }
  .habburger-line { height: 4px; }
  .nav-spacer { height: 56px; }

  .photo-gallery-grid { grid-template-columns: repeat(4, 1fr); }
  .lightbox-link { height: 125px; }

  .columns.vipps { grid-template-columns: 2fr; }

  ._26-hero-section { background-image: none; margin-top: -56px; padding-top: 120px; }
  ._2026-hero-grid { margin-bottom: var(--4-5); grid-template-columns: 1fr 1fr; }
  ._26-hero-title { font-size: var(--4); letter-spacing: 0; }
  ._26-hero-super { font-size: var(--3); }
  ._26-hero-slogan { width: 344px; font-size: var(--5); }
  ._26-hero-doodle._1 { right: -6%; }
  .hero-ingress { font-size: var(--3); }
}

@media screen and (max-width: 479px) {
  .wrapper { padding-left: 16px; padding-right: 16px; }

  .sponsor-grid { gap: 12px; }
  .spons-cta-text { font-size: 19px; }

  .button { display: flex; justify-content: center; width: 100%; text-align: center; }
  .nav-menu { flex-direction: column; justify-content: center; }

  .section-heading { font-size: 40px; }

  .photo-gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .lightbox-link { height: 100px; }

  .vipps-logo { margin-right: 0; padding-top: 0; padding-bottom: 8px; }
  .vipps-heading-wrapper { flex-direction: column; align-items: center; text-align: center; }

  ._2026-hero-grid { margin-bottom: var(--3-5); grid-template-columns: 1fr; }
  ._2026-hero-grid.takk { grid-template-columns: 1fr; }
  ._26-hero-title-wrapper.takk { padding-top: var(--0); }
  ._26-hero-title { padding-top: var(--0); }
  ._26-hero-slogan { width: auto; font-size: 6rem; }
  ._26-hero-slogan.takk { font-size: 5rem; }
  ._26-hero-slogan-wrapper { width: 276px; }
  ._26-hero-doodle._1 { top: -12%; right: 9%; }
  ._26-hero-doodle._1.takk { top: 0%; right: 24%; }
  ._26-hero-doodle._2 { bottom: -20%; }

  ._26-secondary-menu { display: flex; flex-flow: wrap; min-width: auto; }
  ._26-hero-button { flex: 1; }

  .lightbox-prev { left: var(--2); }
  .lightbox-next { right: var(--2); }
}

/* Mobil: når siden er scrollet, er baren Felles Blå med 82 % dekkevne og gjør
   innholdet bak uskarpt. Uten backdrop-filter beholder den den hele blåfargen
   fra 991-blokka — gjennomskinnelig uten uskarphet blir urolig bak logoen.

   Flaten ligger på ::before og ikke på .nav selv: backdrop-filter gjør
   elementet til containing block for position: fixed, og da ville den åpne
   menyen (.nav-menu, fixed inset 0) blitt klemt inn i den 56px høye baren.

   Kontrast: logo og hamburger (#2c3142) mot blått med 18 % svart bak gir
   4,0:1 i verste fall, mot 5,7:1 på hel blå. Baren har ingen tekst, og
   kravet for grafikk er 3:1. */
@media screen and (max-width: 767px) {
  @supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    .nav.transparent.scrolled { background-color: transparent; }
    .nav::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background-color: rgb(133 178 203 / 82%);
      background-color: color-mix(in srgb, var(--felles-bla) 82%, transparent);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      opacity: 0;
      transition: opacity 0.2s;
    }
    .nav.scrolled::before { opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Programside — ny side. Radstrukturen følger den ubrukte Webflow-stilen
   `_26-schedule-card` / `.program-2024-item`: tid, tittel, taler.
   Innholdet ligger på hvite kort over gradienten, slik at teksten får
   full kontrast (hvit tekst på Felles Blå er 2,3:1 og altfor svakt).
   ========================================================================== */

.gen-section.subpage-hero {
  justify-content: flex-start;
  padding-top: 208px;
  background-color: var(--felles-bla);
  background-image: linear-gradient(to bottom, var(--felles-bla) 1%, var(--sky-blue));
}

.page-heading {
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--dark-slate-blue);
  font-size: 56px;
  font-weight: 900;
  line-height: 1.15em;
  letter-spacing: -0.025em;
}

.page-lead { max-width: 62ch; color: var(--dark-slate-blue); }

/* --- Årsvelger ----------------------------------------------------------- */
.year-submenu-wrapper {
  display: flex;
  flex-flow: wrap;
  gap: 8px;
  margin-bottom: var(--4);
}

.year-pill {
  padding: 8px 20px;
  border: 2px solid var(--dark-slate-blue);
  border-radius: 100px;
  color: var(--dark-slate-blue);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
a.year-pill:hover,
a.year-pill:focus-visible {
  background-color: var(--dark-slate-blue);
  color: var(--white);
}
.year-pill[aria-current='page'] {
  background-color: var(--dark-slate-blue);
  color: var(--white);
}

/* --- Programkort --------------------------------------------------------- */
.program-card {
  padding: var(--4) var(--4-5) var(--4);
  border-radius: 16px;
  background-color: var(--white);
  color: var(--dark-slate-blue);
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--shadow-color) 32.157%, transparent);
}

.program-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--3);
  margin-bottom: var(--4);
  padding-bottom: var(--3);
  border-bottom: 2px solid var(--dark-slate-blue);
}

.program-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.program-theme {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.program-dates {
  margin: 6px 0 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.program-addall {
  display: inline-flex;
  align-items: center;
  gap: var(--2);
  color: var(--dark-slate-blue);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--felles-bla);
  transition: border-color 0.2s var(--ease-out);
}
.program-addall:hover,
.program-addall:focus-visible { border-color: var(--dark-slate-blue); }

/* Kalenderabonnement: knapp som folder ut en liten meny */
.program-cal { display: flex; flex-direction: column; align-items: flex-end; gap: var(--2); }
.program-sub { position: relative; }
.program-sub-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--2);
  padding: 10px 18px;
  border-radius: 100px;
  background-color: var(--dark-slate-blue);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out);
}
.program-sub-btn::-webkit-details-marker { display: none; }
.program-sub-btn:hover,
.program-sub-btn:focus-visible,
.program-sub[open] .program-sub-btn { background-color: var(--fm26-purple-tekst); }
.program-sub-btn:focus-visible { outline: 3px solid var(--fm26-purple); outline-offset: 3px; }

.program-sub-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, calc(100vw - 32px));
  padding: var(--3);
  border-radius: 14px;
  background-color: var(--white);
  box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--shadow-color) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--dark-slate-blue) 12%, transparent);
}
.program-sub-hint { margin: 0 0 var(--2); color: var(--text-muted); font-size: 14px; line-height: 1.4; }
.program-sub-opt {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--dark-slate-blue);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.program-sub-opt:hover,
.program-sub-opt:focus-visible { background-color: var(--fm26-beige); }
.program-sub-addr { margin: var(--2) 0 0; padding-top: var(--2); border-top: 1px solid color-mix(in srgb, var(--dark-slate-blue) 12%, transparent); color: var(--text-muted); font-size: 13px; line-height: 1.4; }
.program-sub-addr code { display: block; margin-top: 4px; color: var(--dark-slate-blue); font-size: 13px; word-break: break-all; user-select: all; }

@media screen and (max-width: 767px) {
  .program-cal { align-items: flex-start; }
  .program-sub-menu { right: auto; left: 0; }
}

.program-list { margin: 0; padding: 0; list-style: none; }

.program-item {
  display: grid;
  grid-template-columns: 190px 1fr auto;
  align-items: center;
  gap: var(--3-5);
  padding: var(--3) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--dark-slate-blue) 12.157%, transparent);
}
.program-item:last-child { border-bottom: 0; }

.program-when {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.program-day {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.program-when time { color: var(--text-muted); }

.program-heading {
  margin: 0 0 2px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.program-speaker { margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.4; }

.program-actions { display: flex; flex-wrap: wrap; gap: var(--2); margin: 0; }

.program-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--dark-slate-blue) 20%, transparent);
  border-radius: 100px;
  color: var(--dark-slate-blue);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.program-link:hover,
.program-link:focus-visible {
  border-color: var(--dark-slate-blue);
  background-color: var(--fm26-beige);
}

.program-cal-icon { flex: none; width: 15px; height: 15px; }

.program-note {
  margin: var(--4) 0 0;
  padding-top: var(--3);
  border-top: 1px solid color-mix(in srgb, var(--dark-slate-blue) 12.157%, transparent);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
}
.program-note a { color: var(--dark-slate-blue); font-weight: 600; }

/* Actions drop to their own row before the title column gets cramped */
@media screen and (max-width: 1100px) {
  .program-item {
    grid-template-columns: 170px 1fr;
    row-gap: var(--3);
  }
  .program-actions { grid-column: 2; }
}

@media screen and (max-width: 991px) {
  .gen-section.subpage-hero { padding-top: 80px; }
  .page-heading { font-size: 48px; }
  .program-card { padding: var(--3-5) var(--4) var(--3-5); }
}

@media screen and (max-width: 767px) {
  .gen-section.subpage-hero { padding-top: 64px; }
  .program-item {
    grid-template-columns: 1fr;
    gap: var(--2);
    padding: var(--3-5) 0;
  }
  .program-actions { grid-column: 1; margin-top: var(--2); }
  .program-when { display: flex; align-items: baseline; gap: var(--2); }
  .program-day { display: inline; font-size: 16px; }
  .program-title { font-size: 24px; }
}

@media screen and (max-width: 479px) {
  .page-heading { font-size: 40px; }
  .program-card { padding: var(--3-5) var(--3-5) var(--3); border-radius: 12px; }
  .program-heading { font-size: 19px; }
  .program-link { flex: 1; justify-content: center; }
}

/* --- Videoarkiv ----------------------------------------------------------
   Kortene er en «fasade»: bare miniatyrbilde til noen klikker. Først da
   lastes YouTube-spilleren. Ingen tredjepart kontaktes før brukeren velger det.
   -------------------------------------------------------------------------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--3-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.video-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background-color: var(--white);
  color: var(--dark-slate-blue);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 14px 32px -22px color-mix(in srgb, var(--shadow-color) 32.157%, transparent);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.video-card:hover,
.video-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -20px color-mix(in srgb, var(--shadow-color) 40%, transparent);
}

.video-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background-color: var(--fm26-dark);
}

.video-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-thumb-empty { display: block; width: 100%; height: 100%; }

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 100px;
  background-color: color-mix(in srgb, var(--dark-slate-blue) 80%, transparent);
  color: var(--white);
  transform: translate(-50%, -50%);
  transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.video-play svg { width: 26px; height: 26px; margin-left: 2px; }
.video-card:hover .video-play,
.video-card:focus-visible .video-play {
  background-color: var(--fm26-purple);
  transform: translate(-50%, -50%) scale(1.08);
}

.video-body { display: block; padding: var(--3) var(--3) var(--3-5); }

.video-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.video-date {
  display: block;
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Spilleren i lysboksen, og som tilbakefall inne i kortet uten <dialog> */
.video-player {
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 0;
  border-radius: 14px;
  background-color: var(--fm26-dark);
}

/* Lysboks for videoarkivet — samme mønster som Facebook-spilleren på forsiden. */
html.video-spiller-aapen,
html.video-spiller-aapen body { overflow: hidden; }
.video-spiller {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 24px; border: 0;
  background: #0b0d14f2; color: var(--white);
}
.video-spiller[open] { display: grid; place-items: center; animation: fb-tone-inn .2s ease-out; }
.video-spiller::backdrop { background: #0b0d14f2; }
.video-spiller-boks {
  position: relative; width: min-content; display: flex; flex-direction: column; gap: 14px;
  animation: fb-boks-inn .28s cubic-bezier(.2, .7, .2, 1);
}
.video-spiller-ramme {
  --video-maks-h: calc(100dvh - 200px);
  width: min(1100px, 92vw, calc(var(--video-maks-h) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 30px 80px #00000080;
}
.video-spiller-ramme .video-player,
.video-spiller-ramme iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; }
.video-spiller-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.video-spiller-tittel {
  margin: 0; color: var(--white); font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em;
}
.video-spiller-dato { margin: 0; color: #ffffffb3; font-size: 14px; font-variant-numeric: tabular-nums; }
.video-spiller-lukk {
  position: static; align-self: flex-end; width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; background: #ffffff33; color: var(--white); cursor: pointer; transition: background-color .2s;
}
.video-spiller-lukk:hover { background: #ffffff4d; }
.video-spiller-lukk svg { width: 20px; height: 20px; }
.video-spiller :focus-visible { outline: 3px solid var(--sky-blue); outline-offset: 2px; }
@media (min-width: 900px) {
  .video-spiller { padding: 32px 72px; }
  .video-spiller-lukk { position: absolute; top: 0; right: -60px; align-self: auto; }
}
@media (max-width: 599px) {
  .video-spiller { padding: 20px 12px; }
  .video-spiller-ramme { --video-maks-h: calc(100dvh - 220px); width: min(100vw - 24px, calc(var(--video-maks-h) * 16 / 9)); border-radius: 12px; }
  .video-spiller-tittel { font-size: 16px; }
  .video-spiller-boks { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-spiller[open], .video-spiller-boks { animation: none; }
}

@media screen and (max-width: 479px) {
  .video-grid { grid-template-columns: 1fr; gap: var(--3); }
}

/* --- Om Fellesmøtene ------------------------------------------------------
   Skrevet mobil først (min-width), i motsetning til resten av arket. Luft
   kommer fra størrelsesskalaen: seksjonene får --5 til --6 i høyden, og hver
   overskrift har en liten etikett over seg i stedet for å stå tett på teksten.
   -------------------------------------------------------------------------- */
.om-seksjon { padding-top: var(--5); padding-bottom: var(--5); }
.gen-section.subpage-hero.om-intro { padding-bottom: var(--5); }

.om-eyebrow {
  margin-bottom: var(--2);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Én skala for alle h2 på siden — mindre enn .section-heading (48px) */
.om-h2 {
  margin-bottom: var(--3-5);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.om-h1 { margin-bottom: var(--3-5); font-size: 40px; text-wrap: balance; }

.om-seksjon-topp { max-width: 40rem; margin-bottom: var(--4); }
.om-seksjon-topp .om-h2:last-child { margin-bottom: 0; }
.om-seksjon-ingress { margin-bottom: 0; font-size: 18px; line-height: 1.5; }

/* Intro: tekst + nøkkeltall og bilde */
.om-intro-grid { display: grid; gap: var(--4); }

.om-ingress {
  max-width: 34rem;
  margin-bottom: var(--3);
  font-size: 19px;
  line-height: 1.5;
}
.om-ingress:last-child { margin-bottom: 0; }

.om-intro-side { display: flex; flex-direction: column; gap: var(--3); }

.om-tall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: var(--3) 0;
  border-radius: var(--3);
  background-color: var(--white);
  list-style: none;
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--shadow-color) 32.157%, transparent);
}
.om-tall li {
  display: flex;
  flex-direction: column;
  gap: var(--1);
  min-width: 0;
  padding: 0 12px;
}
.om-tall li + li {
  border-left: 1px solid color-mix(in srgb, var(--dark-slate-blue) 12.157%, transparent);
}
.om-tall-verdi {
  font-size: clamp(16px, 5vw, 22px);
  white-space: nowrap;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.om-tall-tekst { color: var(--text-muted); font-size: 13px; line-height: 1.35; }

.om-intro-bilde {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--3);
  object-fit: cover;
}

/* Formål: fire kort, nummeret fra vedtektene øverst */
.om-formaal {
  display: grid;
  gap: var(--3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.om-formaal-kort {
  display: flex;
  flex-direction: column;
  gap: var(--2);
  padding: var(--3-5);
  border-top: 4px solid var(--felles-bla);
  border-radius: var(--3);
  background-color: var(--fm26-beige);
  font-size: 17px;
  line-height: 1.5;
}
.om-formaal-nr {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* Andre setning i 1.4 er et forbehold, ikke et eget formål */
.om-formaal-merknad {
  display: block;
  margin-top: var(--2);
  color: var(--text-muted);
  font-size: 15px;
}

/* Styret: navnekort */
.om-styret {
  display: grid;
  gap: var(--3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.om-person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--1) var(--2);
  padding: var(--3) var(--3-5);
  border-radius: var(--3);
  background-color: var(--white);
}
.om-person-navn { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.om-person-rolle {
  padding: 2px 10px;
  border-radius: 100px;
  background-color: var(--dark-slate-blue);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Egen linje under navnet, uansett om det står en rolle mellom */
.om-person-sted { flex-basis: 100%; color: var(--text-muted); font-size: 15px; }

/* Medlemmer: lukket <details> med knapp, liste i kolonner når den åpnes */
.om-medlemmer-knapp {
  display: inline-flex;
  align-items: center;
  gap: var(--2);
  padding: 12px 24px;
  border: 2px solid var(--dark-slate-blue);
  border-radius: 100px;
  color: var(--dark-slate-blue);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.om-medlemmer-knapp::-webkit-details-marker { display: none; }
.om-medlemmer-knapp:hover,
.om-medlemmer-knapp:focus-visible {
  background-color: var(--dark-slate-blue);
  color: var(--white);
}
.om-chevron { width: 18px; height: 18px; transition: transform 0.2s var(--ease-out); }
.om-medlemmer[open] .om-chevron { transform: rotate(180deg); }
.om-vis-apen,
.om-medlemmer[open] .om-vis-lukket { display: none; }
.om-medlemmer[open] .om-vis-apen { display: inline; }

.om-medlemsliste {
  margin: var(--4) 0 0;
  padding: 0;
  list-style: none;
  column-count: 2;
  column-gap: var(--3-5);
  font-size: 14px;
  line-height: 1.4;
}
.om-medlemsliste li {
  break-inside: avoid;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--dark-slate-blue) 12.157%, transparent);
}

/* Vedtekter: knappen er dagens ._26-hero-button. Den lange etiketten må få
   bryte linje på smale skjermer, og ikonet står til venstre. */
.om-pdf-knapp {
  align-self: flex-start;
  gap: var(--2);
  white-space: normal;
  text-align: left;
}
.om-pdf-ikon { flex: none; width: 1.4em; height: 1.4em; }

@media screen and (min-width: 600px) {
  .om-formaal { grid-template-columns: repeat(2, 1fr); }
  .om-styret { grid-template-columns: repeat(2, 1fr); }
  .om-tall li { padding: 0 var(--3); }
  .om-tall-verdi { font-size: 28px; }
  .om-tall-tekst { font-size: 14px; }
}

@media screen and (min-width: 768px) {
  .om-seksjon { padding-top: var(--5-5); padding-bottom: var(--5-5); }
  .gen-section.subpage-hero.om-intro { padding-bottom: var(--5-5); }
  .om-h1 { font-size: 48px; }
  .om-h2 { font-size: 36px; }
  .om-ingress { font-size: 21px; }
  .om-medlemsliste { column-count: 3; font-size: 15px; }
  .om-pdf-knapp { white-space: nowrap; }
}

@media screen and (min-width: 992px) {
  .om-seksjon { padding-top: var(--6); padding-bottom: var(--6); }
  .gen-section.subpage-hero.om-intro { padding-bottom: var(--6); }
  .om-intro-grid {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: var(--5);
  }
  .om-h1 { font-size: 56px; }
  .om-h2 { font-size: 40px; }
  .om-ingress { font-size: 23px; }
  .om-styret { grid-template-columns: repeat(3, 1fr); }
  .om-medlemsliste { column-count: 4; }
}

@media screen and (min-width: 1200px) {
  .om-formaal { grid-template-columns: repeat(4, 1fr); }
}

/* --- Podkast ---------------------------------------------------------------
   Bygges av build/build-podcast.py fra RSS-feeden. Mobil først, som Om-siden.
   Gradient øverst (omslag, nøkkeltall, siste episode), beige arkiv under.
   Uten JavaScript vises alle episodene med nettleserens egen lydspiller;
   podkast.js legger på egen spiller, årsfilter og «Vis flere».
   -------------------------------------------------------------------------- */
.gen-section.subpage-hero.pod-hero { padding-bottom: var(--5); }

.pod-hero-grid { display: grid; gap: var(--3-5); }

.pod-eyebrow {
  margin-bottom: var(--2);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pod-h1 { margin-bottom: var(--3-5); font-size: 40px; text-wrap: balance; }

.pod-ingress {
  max-width: 34rem;
  margin-bottom: var(--4);
  font-size: 19px;
  line-height: 1.5;
}

/* Nøkkeltallene: samme kort som på Om-siden */
.pod-tall {
  display: grid;
  /* Årsspennet («2008–2026») er lengst og får den bredeste kolonnen */
  grid-template-columns: 0.8fr 1fr 1.3fr;
  max-width: 34rem;
  margin: 0 0 var(--4);
  padding: var(--3) 0;
  border-radius: var(--3);
  background-color: var(--white);
  list-style: none;
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--shadow-color) 32.157%, transparent);
}
.pod-tall li { display: flex; flex-direction: column; gap: var(--1); min-width: 0; padding: 0 12px; }
.pod-tall li + li { border-left: 1px solid color-mix(in srgb, var(--dark-slate-blue) 12.157%, transparent); }
.pod-tall-verdi {
  font-size: clamp(16px, 5vw, 22px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pod-tall-tekst { color: var(--text-muted); font-size: 13px; line-height: 1.35; }

.pod-abonner { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }

/* Forsideknappen. Kanten som «forsvinner» ved hover er beige på forsiden —
   her ligger knappen på gradienten, så den gjøres gjennomsiktig i stedet,
   og bakgrunnen holdes innenfor kanten. */
.pod-knapp { gap: 10px; padding: 14px 24px; background-clip: padding-box; }
.pod-knapp:hover,
.pod-knapp:focus-visible { border-top-color: transparent; border-left-color: transparent; }
.pod-knapp svg { flex: none; width: 20px; height: 20px; }
.pod-knapp-lys { background-color: var(--white); color: var(--dark-slate-blue); }

/* På mobil står omslaget lite, over overskriften. Ved siden av fra 992px. */
.pod-omslag-ramme {
  order: -1;
  justify-self: start;
  width: 132px;
  padding: 6px;
  border-radius: 18px;
  background-color: var(--white);
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--shadow-color) 45%, transparent);
}
.pod-omslag { display: block; width: 100%; height: auto; border-radius: 12px; }

/* --- Siste episode --- */
.pod-siste {
  display: grid;
  gap: var(--3-5);
  margin-top: var(--4-5);
  padding: var(--3-5);
  border-radius: 20px;
  background-color: var(--white);
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--shadow-color) 32.157%, transparent);
}
.pod-siste-merke {
  display: inline-flex;
  align-items: center;
  gap: var(--2);
  margin-bottom: var(--2);
  color: var(--fm26-purple-tekst);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pod-puls {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--fm26-purple);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--fm26-purple) 50%, transparent);
  animation: pod-puls 2s var(--ease-out) infinite;
}
@keyframes pod-puls {
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.pod-siste-tittel {
  margin-bottom: var(--1);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pod-siste .pod-tekst:last-child,
.pod-siste .pod-tekst-wrap:last-child { margin-bottom: 0; }

/* --- Arkivet --- */
.pod-arkiv { padding-top: var(--5); padding-bottom: var(--5); }
.pod-arkiv-topp { max-width: 40rem; margin-bottom: var(--4); }
.pod-arkiv-tittel {
  margin-bottom: var(--2);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.pod-arkiv-ingress { margin-bottom: 0; color: var(--text-muted); font-size: 17px; line-height: 1.5; }

/* Årsvelgeren ruller sidelengs på mobil i stedet for å bli fire rader høy */
.pod-filter {
  display: flex;
  gap: 8px;
  margin: 0 -24px var(--4);
  padding: 4px 24px 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-padding-inline: 24px;
}
.pod-filter .year-pill { flex: none; background-color: var(--white); }
.pod-filter .year-pill[aria-current='true'] { background-color: var(--dark-slate-blue); color: var(--white); }

.pod-arkiv [hidden] { display: none !important; }

.pod-ar + .pod-ar { margin-top: var(--4-5); }
.pod-ar { scroll-margin-top: 104px; }
.pod-ar-tittel {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: var(--3);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--dark-slate-blue);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pod-ar-antall { color: var(--text-muted); font-size: 15px; font-weight: 600; letter-spacing: 0; }

.pod-liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.pod-kort {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--3);
  padding: var(--3);
  border-radius: var(--3);
  background-color: var(--white);
  scroll-margin-top: 104px;
}

.pod-kalender {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--felles-bla) 22%, var(--white));
  line-height: 1;
}
.pod-kalender-dag { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pod-kalender-mnd { margin-top: 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

.pod-kort-tittel {
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.pod-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pod-tekst { max-width: 65ch; margin-bottom: var(--3); font-size: 16px; line-height: 1.55; }
.pod-tekst-wrap { margin-bottom: var(--3); }
.pod-tekst-wrap .pod-tekst { margin-bottom: 0; }
.pod-mer > summary {
  display: inline-block;
  margin-top: 6px;
  color: var(--dark-slate-blue);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline 2px var(--felles-bla);
  text-underline-offset: 3px;
  list-style: none;
  cursor: pointer;
}
.pod-mer > summary::-webkit-details-marker { display: none; }
.pod-mer > summary:hover { text-decoration-color: var(--dark-slate-blue); }
.pod-mer[open] > summary { margin: 0 0 6px; }
.pod-mer-apen,
.pod-mer[open] .pod-mer-lukket { display: none; }
.pod-mer[open] .pod-mer-apen { display: inline; }
/* Den kuttede teksten viker for hele når den er åpnet */
.pod-tekst-wrap:has(.pod-mer[open]) .pod-tekst-kort { display: none; }

/* --- Spilleren --- */
.pod-spiller audio { display: block; width: 100%; max-width: 560px; height: 40px; }
.pod-spiller.klar audio { display: none; }

.pod-kontroller { display: flex; align-items: center; gap: 12px; max-width: 640px; }
.pod-knapp-spill,
.pod-hopp {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.pod-knapp-spill {
  width: 44px;
  height: 44px;
  background-color: var(--dark-slate-blue);
  color: var(--white);
}
.pod-knapp-spill:hover { background-color: var(--fm26-purple); }
.pod-knapp-spill:active { transform: scale(0.94); }
.pod-knapp-spill svg { width: 18px; height: 18px; fill: currentColor; }
.pod-knapp-spill .pod-ikon-pause,
.pod-spiller.spiller .pod-ikon-spill { display: none; }
.pod-spiller.spiller .pod-ikon-pause { display: block; }
.pod-spiller.laster .pod-knapp-spill { animation: pod-laster 1s linear infinite; }
@keyframes pod-laster { 50% { opacity: 0.55; } }

.pod-hopp {
  width: 44px;
  height: 44px;
  background-color: transparent;
  color: var(--dark-slate-blue);
}
.pod-hopp:hover { background-color: var(--fm26-beige); }
.pod-hopp svg { width: 30px; height: 30px; }

.pod-spor { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
/* Den fylte delen tegnes med --fylt, som podkast.js oppdaterer */
.pod-skrubb {
  --fylt: 0%;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.pod-skrubb::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--dark-slate-blue) var(--fylt), color-mix(in srgb, var(--dark-slate-blue) 14%, transparent) var(--fylt));
}
.pod-skrubb::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--dark-slate-blue) var(--fylt), color-mix(in srgb, var(--dark-slate-blue) 14%, transparent) var(--fylt));
}
.pod-skrubb::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background-color: var(--dark-slate-blue);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--shadow-color) 40%, transparent);
  -webkit-appearance: none;
  appearance: none;
}
.pod-skrubb::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background-color: var(--dark-slate-blue);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--shadow-color) 40%, transparent);
}
.pod-skrubb:focus-visible { outline-offset: 2px; }
.pod-tid {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pod-feil { margin: 8px 0 0; color: var(--dark-slate-blue); font-size: 14px; }
.pod-feil a { color: inherit; font-weight: 700; }

.pod-spiller-stor .pod-knapp-spill { width: 56px; height: 56px; }
.pod-spiller-stor .pod-knapp-spill svg { width: 22px; height: 22px; }

.pod-flere-wrap { display: flex; justify-content: center; margin-top: var(--4); }
.pod-flere {
  padding: 12px 28px;
  border: 2px solid var(--dark-slate-blue);
  border-radius: 100px;
  background-color: transparent;
  color: var(--dark-slate-blue);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.pod-flere:hover,
.pod-flere:focus-visible { background-color: var(--dark-slate-blue); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .pod-puls,
  .pod-spiller.laster .pod-knapp-spill { animation: none; }
}

/* Den faste baren er 56px her (se .nav-spacer), ikke 96px. */
@media screen and (max-width: 767px) {
  .pod-ar,
  .pod-kort { scroll-margin-top: 80px; }
}

@media screen and (max-width: 479px) {
  .pod-filter { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .pod-abonner li { flex: 1 1 100%; }
  .pod-abonner .pod-knapp { width: 100%; padding-block: 11px; }
  .pod-kort { grid-template-columns: 1fr; gap: 12px; }
  .pod-kalender { display: none; }
  .pod-hopp { display: none; }
}

@media screen and (min-width: 768px) {
  .gen-section.subpage-hero.pod-hero { padding-bottom: var(--5-5); }
  .pod-h1 { font-size: 48px; }
  .pod-ingress { font-size: 21px; }
  .pod-tall li { padding: 0 var(--3); }
  .pod-tall-verdi { font-size: 28px; }
  .pod-tall-tekst { font-size: 14px; }
  .pod-arkiv { padding-top: var(--5-5); padding-bottom: var(--5-5); }
  .pod-arkiv-tittel { font-size: 36px; }
  .pod-filter { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .pod-kort { grid-template-columns: 64px minmax(0, 1fr); gap: var(--3-5); padding: var(--3-5); }
  .pod-kalender { height: 64px; }
  .pod-kalender-dag { font-size: 24px; }
  .pod-kort-tittel { font-size: 20px; }
  .pod-siste { padding: var(--4); }
  .pod-siste-tittel { font-size: 28px; }
}

@media screen and (min-width: 992px) {
  .pod-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: var(--5); }
  .pod-omslag-ramme { order: 0; justify-self: end; width: min(100%, 400px); padding: 10px; border-radius: 24px; }
  .pod-omslag { border-radius: 15px; }
  .pod-h1 { font-size: 56px; }
  .pod-ingress { font-size: 23px; }
  .pod-siste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--5); padding: var(--4-5); }
  .pod-arkiv-tittel { font-size: 40px; }
}

/* Ett kort i full bredde blir for det meste tom flate. To kolonner fra 1100px. */
@media screen and (min-width: 1100px) {
  .pod-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--3); }
  /* Spilleren nederst, så spillerne står på linje i hver rad */
  .pod-kort-innhold { display: flex; flex-direction: column; }
  .pod-kort-innhold .pod-spiller { margin-top: auto; }
}

/* --- Kontakt -------------------------------------------------------------- */
/* Skjema og kanaler på hvite kort over gradienten, som programsiden: mørk
   tekst på hvitt gir full kontrast, og feltene får en ren bakgrunn. */
.kontakt-hilsen { margin-bottom: var(--4-5); font-weight: 600; }

.kontakt-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  align-items: start;
  gap: var(--4);
}

.kontakt-kort {
  padding: var(--4) var(--4-5);
  border-radius: 16px;
  background-color: var(--white);
  color: var(--dark-slate-blue);
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--shadow-color) 32.157%, transparent);
}

.kontakt-tittel {
  margin: 0 0 var(--3-5);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.kontakt-undertittel {
  margin: var(--3-5) 0 var(--2);
  font-size: 18px;
  font-weight: 800;
}
.kontakt-andre p { margin-bottom: var(--2); }

.kontakt-link { color: var(--dark-slate-blue); text-decoration: underline; }
.kontakt-link.sterk { font-weight: 700; }
.kontakt-link:hover { color: var(--fm26-purple); }

.skjema-varsel {
  margin-bottom: var(--3-5);
  padding: var(--3);
  border-left: 4px solid var(--dark-slate-blue);
  border-radius: var(--2);
  background-color: var(--fm26-beige);
}
.skjema-varsel p { margin: 0 0 var(--2); }
.skjema-varsel p:last-child { margin-bottom: 0; }

/* Fieldseten er bare der for å kunne slå av hele skjemaet samlet */
.skjema-innhold { min-width: 0; margin: 0; padding: 0; border: 0; }
.skjema-innhold:disabled .skjema-input { background-color: var(--fm26-beige); cursor: not-allowed; }

.skjema-kolonner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--3);
}

.skjema-felt { display: flex; flex-direction: column; margin-bottom: var(--3); }

.skjema-etikett { margin-bottom: var(--1); font-weight: 700; }

/* Kanten er --text-muted: 6,2:1 mot hvitt. En lysere grå ser mykere ut,
   men stryker på kravet om 3:1 for skjemafelt (WCAG 1.4.11). */
.skjema-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--text-muted);
  border-radius: var(--2);
  background-color: var(--white);
  color: var(--dark-slate-blue);
  font: inherit;
}
.skjema-input::placeholder { color: var(--text-muted); opacity: 1; }
.skjema-input:focus-visible { border-color: var(--fm26-purple); }
.skjema-tekst { min-height: 160px; resize: vertical; }

/* Honningkrukka: utenfor skjermen, ikke display:none — noen roboter hopper
   over felt de ser er skjult. */
.skjema-felle {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skjema-personvern { color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.skjema-personvern .kontakt-link { color: inherit; }

/* .button setter display: flex, som ellers ville overstyrt hidden-attributtet */
.kontaktskjema [hidden],
.skjema-varsel[hidden] { display: none; }

/* Feltfeil fra app.js. Mørk rød, ca. 7:1 mot det hvite kortet (--fm26-red er for lys til tekst). */
.skjema-feltfeil { margin: var(--1) 0 0; color: #a3261c; font-size: 14px; font-weight: 600; }
.skjema-input[aria-invalid="true"] { border-color: #a3261c; }

.skjema-turnstile:not(:empty) { margin-bottom: var(--3); }

.button.dark {
  border: 0;
  background-color: var(--dark-slate-blue);
  color: var(--white);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.button.dark:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.kontaktskjema[aria-busy="true"] .button.dark { cursor: progress; }

.skjema-svar { margin-top: var(--3-5); }
.skjema-melding {
  display: none;
  margin: 0;
  padding: var(--3);
  border-radius: var(--2);
  background-color: var(--fm26-beige);
  font-weight: 600;
}
.skjema-melding.ok { background-color: color-mix(in srgb, var(--sky-blue) 25%, var(--white)); }
.skjema-melding:target,
.skjema-melding.vis { display: block; }

@media screen and (max-width: 991px) {
  .kontakt-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 479px) {
  .kontakt-kort { padding: var(--3-5) var(--3-5) var(--3); border-radius: 12px; }
  .skjema-kolonner { grid-template-columns: 1fr; gap: 0; }
}

/* --- Personvern: lesbar brødtekst ------------------------------------------ */
.personvern > p,
.personvern > ul { max-width: 62ch; color: var(--dark-slate-blue); }
.personvern > p { margin-bottom: var(--3); }
.personvern > ul { margin: 0 0 var(--3); padding-left: 1.25em; }
.personvern li { margin-bottom: 0.4em; }
.personvern .om-h2 { margin-top: var(--4); margin-bottom: var(--3); }
.personvern-dato { margin-top: var(--4); font-size: 14px; }

/* --- Mobilnavigasjon uten JavaScript ----------------------------------------
   Under 1199px ligger navigasjonen fast og gjennomsiktig oppå siden, får
   bakgrunn først når app.js legger på .scrolled, og menyen åpnes bare av
   hamburgerknappen. Uten JavaScript ble logoen liggende oppå teksten, og
   menyen kunne ikke åpnes i det hele tatt.

   Her blir baren en vanlig blå stripe øverst som ruller bort med siden, med
   lenkene synlige under logoen. Nettlesere som ikke kjenner «scripting»
   (før Chrome 120 / Safari 17 / Firefox 113) hopper over blokka. Står sist
   i fila så den vinner over bruddpunktene over. */
@media (scripting: none) and (max-width: 1199px) {
  .nav,
  .nav.transparent { position: relative; background-color: var(--felles-bla); }
  .nav-container { flex-direction: column; align-items: center; padding-bottom: var(--2); }
  .hamburger-icon { display: none; }
  .nav-menu {
    position: static;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    background-color: transparent;
  }
  .nav-link { padding: 10px 12px; font-size: 14px; }
  .nav-link:hover { color: var(--fm26-purple); }
  .nav-spacer { display: none; }

  /* Helten trakk seg opp under den faste baren (margin-top: -96px). Nå tar
     baren plass selv, så den skal stå under den. */
  ._26-hero-section { margin-top: 0; padding-top: 80px; }
}
@media (scripting: none) and (max-width: 767px) {
  ._26-hero-section { margin-top: 0; padding-top: 64px; }
}

/* ===== Siste nytt fra Facebook (build/build-facebook.py, assets/js/fb-feed.js) ===== */
/* Kortet er en <article> med én strukket lenke (.fb-lenke::after dekker hele
   kortet). Del-knappen ligger over lenka (z-index), så den ikke er nestet i <a>. */
.fb-feed .section-heading { margin-bottom: 12px; }
.fb-undertittel { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 48px; font-size: 18px; font-weight: 600; color: var(--fm26-dark); }
.fb-undertittel .fb-ikon { width: 22px; height: 22px; color: var(--fm26-purple-tekst); }
.fb-ikon { width: 1.15em; height: 1.15em; flex: none; }

.fb-grid { list-style: none; margin: 0 0 48px; padding: 0; display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .fb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .fb-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

.fb-kort { display: flex; }
.fb-innhold {
  position: relative; display: flex; flex-direction: column; width: 100%;
  background: var(--white); border-radius: 18px; overflow: hidden;
  box-shadow: 0 1px 2px #2c31420f, 0 10px 28px -6px #2c31421f;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}

/* Bildet: avspillingsknapp og varighet på videoer, lite ↗-merke på andre */
.fb-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fm26-dark); }
.fb-bilde { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.fb-spill {
  position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  display: grid; place-items: center; border-radius: 50%;
  background: #ffffffeb; color: var(--fm26-purple-tekst);
  box-shadow: 0 8px 24px #0000004d; transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .3s, color .3s;
}
.fb-spill svg { width: 28px; height: 28px; margin-left: 4px; }
.fb-varighet {
  position: absolute; padding: 4px 9px; border-radius: 8px; background: #1b1f2cb3; color: var(--white);
  font-size: 12px; font-weight: 700; line-height: 1.3;
}
.fb-varighet { top: 12px; right: 12px; font-size: 13px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.fb-ut {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--white); color: var(--fm26-purple-tekst); box-shadow: 0 4px 12px #00000033;
  opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s cubic-bezier(.2, .7, .2, 1);
}
.fb-ut svg { width: 18px; height: 18px; }

/* Teksten */
.fb-tekst { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 20px 24px 8px; }
.fb-tekst time { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fm26-purple-tekst); }
.fb-tekst p:not(.fb-tall) { margin: 0; line-height: 1.55; color: var(--fm26-dark); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.fb-lenke { color: inherit; text-decoration: none; }
.fb-lenke::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
@supports selector(:has(a)) { .fb-lenke:focus-visible { outline: none; } }

/* Bunnraden: reaksjoner/kommentarer til venstre, Del til høyre */
.fb-rad { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto -12px 0 0; min-height: 44px; }
.fb-tall { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.fb-tall > span { display: inline-flex; align-items: center; gap: 6px; }
.fb-tall svg { width: 16px; height: 16px; }
.fb-tall-reaksjoner svg { color: var(--fm26-red); }
.fb-del {
  position: relative; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #2c314280; cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s;
}
.fb-del[hidden] { display: none; }
.fb-del svg { width: 19px; height: 19px; }
.fb-del:hover, .fb-del[aria-expanded="true"] { background: #eef1ff; color: var(--fm26-purple-tekst); }
.fb-del:active { transform: scale(.94); }

.fb-meny {
  position: absolute; right: 0; bottom: calc(100% + 4px); z-index: 3; min-width: 216px; padding: 6px;
  background: var(--white); border-radius: 14px; box-shadow: 0 2px 6px #2c31421f, 0 18px 40px -8px #2c314247;
  animation: fb-meny-inn .18s cubic-bezier(.2, .7, .2, 1);
}
.fb-meny > * {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px;
  background: none; color: var(--fm26-dark); font: inherit; font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.fb-meny > *:hover, .fb-meny > *:focus-visible { background: #eef1ff; color: var(--fm26-purple-tekst); outline: none; }
.fb-meny svg { width: 20px; height: 20px; flex: none; color: var(--fm26-purple-tekst); }
@keyframes fb-meny-inn { from { opacity: 0; transform: translateY(6px) scale(.98); } }

.fb-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 50; margin: 0; padding: 12px 20px; border-radius: 100px;
  background: var(--fm26-dark); color: var(--white); font-size: 15px; font-weight: 700; box-shadow: 0 10px 30px #0000004d;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.fb-toast[data-vis="true"] { opacity: 1; transform: translate(-50%, 0); }
.fb-toast::before { content: "✓"; margin-right: 8px; color: var(--sky-blue); }

/* Innlegg uten bilde: fargeflate med sitattegn, så kortet ser bevisst ut */
.fb-kort--tekst .fb-innhold {
  background: radial-gradient(120% 80% at 100% 0%, #ffffff26 0%, transparent 55%), linear-gradient(160deg, var(--fm26-purple) 0%, var(--fm26-purple-tekst) 70%);
  color: var(--white);
}
.fb-kort--tekst .fb-innhold::before {
  /* Stort, svakt Facebook-merke nederst i hjørnet */
  content: ""; position: absolute; right: -40px; bottom: -40px; width: 220px; height: 220px; opacity: .08; pointer-events: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fb-kort--tekst .fb-tekst { padding: 36px 32px 12px; gap: 16px; }
.fb-sitat { width: 52px; height: 40px; color: var(--white); opacity: .45; }
.fb-kort--tekst .fb-tekst time { color: #ffffffd9; }
.fb-kort--tekst .fb-tekst p:not(.fb-tall) { color: var(--white); font-size: clamp(1.5rem, 1.1rem + 1vw, 1.9rem); line-height: 1.25; font-weight: 800; letter-spacing: -.015em; -webkit-line-clamp: 7; line-clamp: 7; text-wrap: pretty; }
.fb-kort--tekst .fb-tall { color: #ffffffd9; }
.fb-kort--tekst .fb-tall-reaksjoner svg { color: var(--white); }
.fb-kort--tekst .fb-del { color: #ffffffb3; }
.fb-kort--tekst .fb-del:hover, .fb-kort--tekst .fb-del[aria-expanded="true"] { background: #ffffff26; color: var(--white); }

/* «Følg oss på Facebook» */
.button.fb-folg { gap: 12px; background: var(--fm26-purple-tekst); color: var(--white); }
.button.fb-folg .fb-ikon { width: 22px; height: 22px; }

/* Hover (bare mus) og tastaturfokus: løft, litt zoom, større lilla avspillingsknapp */
.fb-kort:has(.fb-lenke:focus-visible) .fb-innhold { outline: 3px solid var(--fm26-purple); outline-offset: 4px; }
@media (hover: hover) {
  .fb-kort:hover .fb-innhold, .fb-kort--meny .fb-innhold { transform: translateY(-6px); box-shadow: 0 2px 4px #2c314214, 0 24px 48px -10px #2c314240; }
  .fb-kort:hover .fb-bilde { transform: scale(1.05); }
  .fb-kort:hover .fb-spill { transform: scale(1.12); background: var(--fm26-purple-tekst); color: var(--white); }
  .fb-kort:hover .fb-ut { opacity: 1; transform: none; }
}
.fb-kort:has(.fb-lenke:focus-visible) .fb-innhold { transform: translateY(-6px); }
.fb-kort:has(.fb-lenke:focus-visible) .fb-bilde { transform: scale(1.05); }
.fb-kort:has(.fb-lenke:focus-visible) .fb-spill { transform: scale(1.12); background: var(--fm26-purple-tekst); color: var(--white); }
.fb-kort:has(.fb-lenke:focus-visible) .fb-ut { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fb-innhold, .fb-bilde, .fb-spill, .fb-ut, .fb-toast, .fb-del { transition: none; }
  .fb-meny { animation: none; }
  .fb-kort:hover .fb-innhold, .fb-kort--meny .fb-innhold, .fb-kort:has(.fb-lenke:focus-visible) .fb-innhold,
  .fb-kort:hover .fb-bilde, .fb-kort:has(.fb-lenke:focus-visible) .fb-bilde,
  .fb-kort:hover .fb-spill, .fb-kort:has(.fb-lenke:focus-visible) .fb-spill { transform: none; }
}
@media (max-width: 599px) {
  .fb-undertittel { margin-bottom: 32px; font-size: 16px; }
  .fb-tekst { padding: 18px 20px 6px; }
  .fb-kort--tekst .fb-tekst { padding: 28px 24px 10px; }
}

/* Videospilleren (lysboks, fb-feed.js). Facebook-iframen settes inn først ved klikk. */
html.fb-spiller-aapen { overflow: hidden; }
.fb-spiller {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: #0b0d14e6; color: var(--white);
}
.fb-spiller[open] { display: grid; place-items: center; animation: fb-tone-inn .2s ease-out; }
.fb-spiller::backdrop { background: #0b0d14b3; }
.fb-spiller-boks { position: relative; width: min-content; display: flex; flex-direction: column; gap: 14px; animation: fb-boks-inn .28s cubic-bezier(.2, .7, .2, 1); }
.fb-spiller-ramme {
  /* Størst mulig innenfor skjermen: bredden begrenses også av høyden (minus bunnlinja). */
  --fb-maks-h: calc(100dvh - 180px);
  width: min(1040px, 92vw, calc(var(--fb-maks-h) * var(--fb-r, 1.7778)));
  aspect-ratio: var(--fb-ratio, 16 / 9);
  border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 30px 80px #00000080;
}
.fb-spiller-ramme iframe { display: block; width: 100%; height: 100%; border: 0; }
.fb-spiller-bunn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; font-size: 14px; }
.fb-spiller-bunn p { margin: 0; color: #ffffffb3; }
.fb-spiller-bunn p a { color: var(--white); }
.fb-spiller-ut {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 100px;
  background: #ffffff1f; color: var(--white); font-weight: 700; text-decoration: none; transition: background-color .2s;
}
.fb-spiller-ut:hover { background: #ffffff38; }
.fb-spiller-ut[hidden] { display: none; }
.fb-spiller-ut svg { width: 18px; height: 18px; }
.fb-spiller-lukk {
  position: absolute; top: -56px; right: 0; width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; background: #ffffff1f; color: var(--white); cursor: pointer; transition: background-color .2s;
}
.fb-spiller-lukk:hover { background: #ffffff38; }
.fb-spiller-lukk svg { width: 20px; height: 20px; }
.fb-spiller :focus-visible { outline-color: var(--sky-blue); }
.fb-spiller[data-staende="true"] .fb-spiller-bunn { flex-direction: column; text-align: center; }
/* Brede skjermer: lukkeknappen ved siden av videoen, så den aldri havner utenfor toppen. */
@media (min-width: 900px) { .fb-spiller-lukk { top: 0; right: -60px; } }
.fb-spiller-plakat { position: relative; display: block; width: 100%; height: 100%; color: var(--white); text-decoration: none; }
.fb-spiller-plakat img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fb-spiller-plakat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #000000a6, #00000026 55%, transparent); }
.fb-spiller-plakat-knapp {
  position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 90%;
  display: flex; flex-direction: column; align-items: center; gap: 14px; font-weight: 800; font-size: 17px; text-align: center; text-shadow: 0 1px 8px #0009;
}
.fb-spiller-plakat-knapp svg {
  box-sizing: content-box; width: 36px; height: 36px; padding: 22px 20px 22px 24px; border-radius: 50%;
  background: var(--white); color: var(--fm26-dark); box-shadow: 0 10px 30px #00000059;
}
.fb-spiller-plakat:active .fb-spiller-plakat-knapp svg { transform: scale(.94); }
.fb-spiller-plakat:focus-visible { outline: 3px solid var(--sky-blue); outline-offset: -3px; }
@keyframes fb-tone-inn { from { opacity: 0; } }
@keyframes fb-boks-inn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (max-width: 599px) {
  .fb-spiller-ramme { --fb-maks-h: calc(100dvh - 250px); width: min(100vw - 24px, calc(var(--fb-maks-h) * var(--fb-r, 1.7778))); border-radius: 12px; }
  .fb-spiller-bunn { flex-direction: column; align-items: stretch; text-align: center; }
  .fb-spiller-ut { justify-content: center; }
  .fb-spiller-lukk { top: -52px; }
}
@media (prefers-reduced-motion: reduce) { .fb-spiller[open], .fb-spiller-boks { animation: none; } }

/* --- Helteingressen: lesbar linjelengde og luft under doodlen ------------- */
.wrapper._26-hero-ingress-wrapper { max-width: 760px; margin-left: auto; margin-right: auto; }
.hero-ingress { line-height: 1.55; color: var(--fm26-dark); overflow-wrap: normal; hyphens: manual; }
._26-ingress-link { font-weight: 700; text-underline-offset: 3px; }
@media screen and (max-width: 767px) {
  .wrapper._26-hero-ingress-wrapper { margin-top: 48px; padding-left: 0; padding-right: 0; }
  .hero-ingress { font-size: 18px; }
}

/* --- Lukkeknapp i mobilmenyen (lages av app.js) -------------------------- */
.nav-close { display: none; }
@media screen and (max-width: 1199px) {
  .nav-menu[data-open='true'] .nav-close {
    position: absolute;
    top: 6px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--white);
    cursor: pointer;
  }
  .nav-close svg { width: 28px; height: 28px; }
  .nav-close:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
  .nav-menu[data-open='true'] { overflow-y: auto; overscroll-behavior: contain; }
}