/* ============================================
   V-HERO - Freysta Signature Hero
   ============================================ */
.v-hero {
  /* Hoeydetaket for tittelen (Tom 13. sep 2026): paa en lav laptopskjerm
     fylte glassboksen 70 % av helten, fordi tittelen bare skalerte etter
     BREDDE og sto paa fullt tak fra 1440 px. Taket er 19,3 % av skjerm-
     hoeyden — 208 px paa 1080, altsaa uendret paa stor skjerm — og hver
     tittelregel under bruker det i forhold til sin egen maks, saa korte og
     lange navn beholder forholdet seg imellom. Breddeintervallet 375–1440
     (CLAUDE.md) er uroert; dette er et ekstra tak, ikke en ny skala. */
  --hero-hoydetak: 19.3vh;
  position: relative;
  /* Minst hele skjermen, og ellers så høy som innholdet. Et fast gulv i
     piksler (500/480/420) gjorde helten høyere enn en liggende telefon
     (390 px), og tittelen, som står nederst, havnet under kanten. */
  min-height: 100vh;
  min-height: 100dvh;
  /* Menyen er fast og ligger over helten. Innholdet står nederst, men blir
     det høyere enn plassen under menyen (liggende telefon), skal helten
     vokse, ikke skyve chipen «Lister · Agder» opp bak menyen. */
  padding-top: calc(var(--nav-height) + var(--space-md));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--surface-utility);
}

/* No full-cover overlay — hero image shown at full clarity.
   The placard (.v-hero-signature) has its own local backdrop. */

.v-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--v-hero-object-position, center);
}

@media (hover: hover) and (min-width: 769px) {
  .v-hero-media {
    animation: kenBurns 25s ease-in-out infinite alternate;
  }
  /* Toppvideoen beveger seg selv; ingen Ken Burns oppaa. */
  .v-hero-media--video { animation: none; }
}

/* Toppvideoen: to videoelementer over plakaten. Den aktive er synlig; den
   som tar over tones inn over ett sekund mens den forrige fortsatt spiller,
   saa omstarten ikke hakker (Flekkefjord by, Tom 11. sep). */
.v-hero-media--video {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.v-hero-media--video.is-aktiv { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .v-hero-media--video { display: none; }
}

@keyframes kenBurns {
  from { transform: scale(1) translateY(var(--parallax-y, 0)); }
  to   { transform: scale(1.12) translateY(var(--parallax-y, 0)); }
}

/* Editorial placard - magazine panel, not UI card. */
.v-hero-signature {
  position: relative;
  z-index: 2;
  max-width: 85%;
  /* Venstrekanten foelger Region Lister-mynten i headeren og kommunevaapenet
     (48 / 24 / 16 px, som .lister-stripe__inner). Toppen er like stor som
     avstanden fra region-etiketten ned til streken under den (20 px), saa
     etiketten sitter midt i sitt eget felt (Tom 13. sep 2026). */
  margin: 0 0 var(--space-4xl) var(--space-2xl);
  padding: 20px 48px 36px;
  /* Jevnere enn foer: handlingene i kommuneheroen (mobilgjennomgang, okt
     2026) gjorde boksen hoeyere, og tittelen havnet i den lyse oevre delen
     av gradienten (Lyngdal falt til 2,5:1). Maalt mot alle seks
     kommuneklippene ved 390 og 1440 px: tittel og slagord holder 3:1, ogsaa
     Kvinesdal, som brot kravet fra foer (24 % av flaten under). */
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--surface-utility) 74%, transparent) 0%,
    color-mix(in srgb, var(--surface-utility) 60%, transparent) 45%,
    color-mix(in srgb, var(--surface-utility) 40%, transparent) 85%,
    color-mix(in srgb, var(--surface-utility) 20%, transparent) 100%
  );
  backdrop-filter: blur(2px);
  border-left: 2px solid rgba(250, 248, 245, 0.35);
  box-shadow: -4px 0 12px rgba(10, 22, 40, 0.28),
              -1px 0  4px rgba(10, 22, 40, 0.45);
  border-radius: var(--radius-lg);
}

@media (prefers-reduced-motion: reduce) {
  .v-hero-meta,
  .v-hero-title,
  .v-hero-word,
  .v-hero-media {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Region metadata */
.v-hero-meta {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(250, 248, 245, 0.22);
}

.v-hero-region {
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 400;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  /* Full opasitet + egen flate. Maalt paa foto uten begge deler:
     Aana-Sira 3,11 og Feda 3,61, mot WCAG AA sitt krav paa 4,5.
     Halvgjennomsiktig tekst koster mye — rgba(...,0.65) trengte 0,75 fyll,
     full farge klarer seg med 0,60. */
  color: var(--color-text-inverse);
  background: rgba(10, 22, 40, 0.6);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
}

/* Village name — shrinks to fit container, line-break only as last resort */
.v-hero-title {
  font-family: var(--font-body);
  font-size: min(clamp(3.5rem, 0.1549rem + 14.2723vw, 13rem), var(--hero-hoydetak));
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--sperring-xs);
  line-height: 0.88;
  color: var(--color-warm-white);
  margin-bottom: 20px;
  text-shadow: 0 2px 24px rgba(10, 22, 40, 0.35);
  /* Står fast fra første bilde. Den gled opp før, og Marion ville ha den
     fast (Herad, 7. okt 2026); det gjelder alle stedssidene. */
  overflow-wrap: break-word;
  max-width: 100%;
}

.v-hero-title__first {
  display: inline-block;
  white-space: nowrap;
}

/* Stedsnavnet skal KRYMPE, ikke brekke midt i ordet (Toms innspill 2. sep:
   «KORSHAM / N» paa 1136 px). Sida sender antall tegn i --hero-tegn, og
   0,74 em per tegn er maalt paa Glacial i versaler med --sperring-xs
   (0,699 paa KORSHAMN, der M, H og N er de brede) pluss litt margin.

   Containeren er HERO-SEKSJONEN, ikke glassboksen: boksen er et flex-barn
   som krymper rundt innholdet, og inline-size-containment paa den gav
   0 px bredde — og dermed 0 px tittel. Heroen har bredde fra viewporten.
   Tilgjengelig linje = boksens tak (85 %) minus venstremarg og polstring.
   Bare stedssidene: kommunesidene har fit-content-boks og egen
   brekklogikk i .is-long. */
.village-page .v-hero {
  container-type: inline-size;
}
.village-page .v-hero-title:not(.is-long):not(.is-very-long):not(.is-mega-long) {
  /* Standard for --hero-tegn; VillageHero setter det reelle tallet inline. */
  --hero-tegn: 10;
  --hero-linje: calc(85cqi - var(--space-2xl) - 96px);
  white-space: nowrap;
  overflow-wrap: normal;
  font-size: min(clamp(3.5rem, 0.1549rem + 14.2723vw, 13rem), calc(var(--hero-linje) / (var(--hero-tegn) * 0.74)), var(--hero-hoydetak));
}

/* ── Glassboksen paa KOMMUNESIDENE ──────────────────────────────
 *
 * Boksen laa paa max-width: 85% og ble derfor like bred uansett hva som
 * stod i den. «FLEKKEFJORD KOMMUNE» brakk i to linjer et stykke inne i
 * boksen, og resten var tomt glass utover mot hoeyre kant — over en video
 * kommunen har betalt for aa faa laget.
 *
 * Naa hugger boksen innholdet: width: fit-content, og tittelen brekker
 * DER VI BESTEMMER framfor der linja tilfeldigvis tar slutt. Stedsnavnet
 * og «kommune» er allerede to felt i dataene (titleFirst / titleRest), saa
 * bruddet er en opplysning vi har, ikke et gjett.
 *
 * Bare .kv-page: stedssidene (VillageHero) deler klassen og har en annen
 * tittelform, og de er ikke det Tom ba om. */
.kv-page .v-hero-title__first {
  display: block;
}

.kv-page .v-hero-signature {
  width: fit-content;
  /* 85% staar igjen som TAK, ikke som bredde: et langt kommunenavn skal
     fortsatt stoppe foer det naar videoens hoeyre kant. */
  max-width: 85%;
}

.v-hero-title.is-long {
  font-size: min(clamp(3.2rem, 0.5239rem + 11.4178vw, 10.8rem), calc(var(--hero-hoydetak) * 0.831));
  letter-spacing: var(--sperring-xs);
  max-width: min(100%, 18ch);
  line-height: var(--linje-tett);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.v-hero-title.is-very-long {
  font-size: min(clamp(2.9rem, 0.6113rem + 9.7653vw, 9.4rem), calc(var(--hero-hoydetak) * 0.723));
  letter-spacing: var(--sperring-xs);
  max-width: min(100%, 16ch);
  line-height: var(--linje-tett);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.v-hero-title.is-mega-long {
  font-size: min(clamp(2.5rem, 0.5634rem + 8.2629vw, 8rem), calc(var(--hero-hoydetak) * 0.615));
  letter-spacing: var(--sperring-xs);
  max-width: min(100%, 14ch);
  line-height: var(--linje-tett);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Tagline */
.v-hero-tagline {
  /* Ekte kursiv: Cormorant har egne tegnede kursivformer, mens broedskriften
     bare kan skraastilles. Graden er satt 9 %% opp fordi Cormorants x-hoeyde
     er 80 mot Glacials 87 ved samme pikselverdi — uten det hadde teksten
     krympet synlig ved familiebyttet. */
  font-family: var(--font-display);
  font-size: clamp(1.425rem, 1.3128rem + 0.4788vw, 1.7437rem);
  font-weight: 400;
  font-style: italic;
  line-height: var(--linje-etikett);
  /* Full farge, ikke 70 % alfa. Paa telefon er slagordet 16 px og ikke
     «stor tekst», og alfaen gav 3,7–4,1:1 over bildet paa Lyngdal by
     (krav 4,5). Avstanden til tittelen baeres av kursiv og grad. */
  color: var(--color-warm-white);
  letter-spacing: var(--sperring-tett);
}

.v-hero-word {
  /* Taglinen står stille fra start. Ordene tonet inn ett og ett med
     uskarphet; det leste som om teksten «danset inn» (innholdsprodusenten
     30. sep 2026, gjelder alle stedssidene). */
  display: inline-block;
  margin-right: 0.35rem;
}

.v-hero-word:last-child {
  margin-right: 0;
}

@media (max-width: 768px) {
  .v-hero-signature,
  .kv-page .v-hero-signature {
    /* Under 768 er skjermen smalere enn tittelen uansett — da er en
       hugget boks bare en boks med tilfeldig kant. Full bredde igjen. */
    width: auto;
    max-width: none;
    padding: 20px 20px 20px;
    margin: 0 var(--space-lg) 18px;
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--surface-utility) 80%, transparent) 0%,
      color-mix(in srgb, var(--surface-utility) 64%, transparent) 55%,
      color-mix(in srgb, var(--surface-utility) 44%, transparent) 100%
    );
    backdrop-filter: blur(2px);
  }

  .v-hero-title {
    font-size: clamp(3rem, 1.5915rem + 6.0094vw, 7rem);
  }

  /* Krymp-regelen paa mobil: boksen er full bredde med 24 px marg og
     20 px polstring paa hver side (2 x 24 + 2 x 20 = 88), og mobilskalaen
     over er taket. */
  .village-page .v-hero-title:not(.is-long):not(.is-very-long):not(.is-mega-long) {
    --hero-linje: calc(100cqi - 88px);
    font-size: min(clamp(3rem, 1.5915rem + 6.0094vw, 7rem), calc(var(--hero-linje) / (var(--hero-tegn) * 0.74)));
  }

  .v-hero-title.is-long {
    font-size: clamp(2.8rem, 1.5324rem + 5.4085vw, 6.4rem);
    max-width: min(100%, 18ch);
    line-height: var(--linje-tett);
  }

  .v-hero-title.is-very-long {
    font-size: clamp(2.5rem, 1.338rem + 4.9577vw, 5.8rem);
    max-width: min(100%, 16ch);
    line-height: var(--linje-hero);
  }

  .v-hero-title.is-mega-long {
    font-size: clamp(2.3rem, 1.2789rem + 4.3568vw, 5.2rem);
    max-width: min(100%, 14ch);
    line-height: var(--linje-display);
  }

  .v-hero-tagline {
    font-size: var(--text-lg);
  }

}

@media (max-height: 820px) and (min-width: 769px) {
  .v-hero-signature {
    max-width: 85%;
    padding: 14px 30px 22px;
    margin: 0 0 var(--space-2xl) var(--space-2xl);
  }

  .v-hero-title {
    font-size: min(clamp(3.5rem, 1.7394rem + 7.5117vw, 8.5rem), var(--hero-hoydetak));
    margin-bottom: 12px;
  }

  .v-hero-title.is-long {
    font-size: min(clamp(3.1rem, 1.5155rem + 6.7606vw, 7.6rem), calc(var(--hero-hoydetak) * 0.894));
    max-width: min(100%, 18ch);
    line-height: var(--linje-tett);
  }

  .v-hero-title.is-very-long {
    font-size: min(clamp(2.8rem, 1.3915rem + 6.0094vw, 6.8rem), calc(var(--hero-hoydetak) * 0.8));
    max-width: min(100%, 16ch);
    line-height: var(--linje-tett);
  }

  .v-hero-title.is-mega-long {
    font-size: min(clamp(2.5rem, 1.1972rem + 5.5587vw, 6.2rem), calc(var(--hero-hoydetak) * 0.729));
    max-width: min(100%, 14ch);
    line-height: var(--linje-hero);
  }

  .v-hero-tagline {
    font-size: var(--text-lg);
  }

  .v-hero-meta {
    margin-bottom: 18px;
    padding-bottom: 14px;
  }

  .v-hero-region {
    font-size: var(--etikett-liten);
    letter-spacing: var(--sperring-lg);
  }
}

@media (max-width: 480px) {
  /* Gjelder kommunesidene ogsaa: foer overstyrte .kv-page-regelen i
     768-blokka denne, og kommunene fikk en annen boks enn boomraadene. */
  .v-hero-signature,
  .kv-page .v-hero-signature {
    margin: 0 var(--space-md) var(--space-lg) var(--space-md);
    padding: 20px var(--space-md) var(--space-md);
  }

  /* 2 x 16 marg + 2 x 16 polstring = 64. */
  .village-page .v-hero-title:not(.is-long):not(.is-very-long):not(.is-mega-long) {
    --hero-linje: calc(100cqi - 64px);
  }

  .v-hero-title {
    font-size: clamp(2.4rem, 1.4845rem + 3.9061vw, 5rem);
  }

  .v-hero-title.is-long {
    font-size: clamp(2.2rem, 1.3549rem + 3.6056vw, 4.6rem);
    max-width: min(100%, 18ch);
    line-height: var(--linje-hero);
  }

  .v-hero-title.is-very-long {
    font-size: clamp(2rem, 1.2254rem + 3.3052vw, 4.2rem);
    max-width: min(100%, 16ch);
    line-height: var(--linje-display);
  }

  .v-hero-title.is-mega-long {
    font-size: clamp(1.9rem, 1.1958rem + 3.0047vw, 3.9rem);
    max-width: min(100%, 14ch);
    line-height: var(--linje-display);
  }

  .v-hero-tagline {
    font-size: var(--text-base);
  }

}

/* ── KOMMUNESIDENE: navnet skal KRYMPE, ikke renne ut av glassboksen ──
 *
 * «HÆGEBOSTAD KOMMUNE» er 17 bokstaver og lengste ord 10. Det er under
 * begge tersklene i village-editorial.js (18 bokstaver / 13 i ett ord),
 * saa skriptet fjerner is-long uten aa sette noe i stedet — og da faller
 * tittelen tilbake paa grunnregelens stoerste grad. Navnet staar paa egen
 * linje med white-space: nowrap, saa det kan ikke brekke heller. Resultatet
 * var at «HÆGEBOSTAD» stakk ut av boksen paa smalere skjermer.
 *
 * FLEKKEFJORD slapp unna med 18 bokstaver og fikk is-very-long. Det var
 * flaks, ikke design: de fire andre kommunene ligger i samme hull og er
 * bare reddet av kortere navn.
 *
 * Loesningen er den samme som stedssidene alt bruker: ANTALL TEGN styrer
 * taket. Den staar paa barna og ikke paa <h1>, og er derfor relativ til
 * hva forelderen enn ender paa (1em) — da gjelder taket like godt inne i
 * mediesporringene lenger opp, uten aa kopiere en eneste klamp.
 *
 * 0,74 em per tegn er samme maal som i .village-page-regelen over: maalt
 * 0,696 paa HÆGEBOSTAD i versaler med --sperring-xs, pluss margin. */
.kv-page .v-hero {
  container-type: inline-size;
}

.kv-page .v-hero-title {
  /* Reserve; KommunePageV2 setter det reelle tallet inline. */
  --hero-tegn: 10;
  /* Boksens tak (85 %) minus polstringen paa 48 px i hver ende. */
  --kv-hero-linje: calc(85cqi - 96px);
}

.kv-page .v-hero-title__first,
.kv-page .v-hero-title__rest {
  font-size: min(1em, calc(var(--kv-hero-linje) / (var(--hero-tegn) * 0.74)));
}

/* Kreditering av toppvideoen, brukt av stedssidene og kommunesidene. Sider
   med kildeliste nederst krediterer videoen der i stedet. */
.v-hero-credit {
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 3;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--etikett-stor);
  letter-spacing: var(--sperring-xs);
  /* Den ligger over VIDEO, ikke stillbilde. Maalt 14 ganger mens klippet
     spilte: kontrasten svingte mellom 2,29 og 5,28 og laa under kravet i 12
     av 14. Det kan ikke loeses med et bedre bilde eller en tekstskygge —
     krediteringen maa ha sin egen flate. */
  color: var(--color-warm-white);
  background: rgba(10, 22, 40, 0.62);
  padding: 3px 9px;
  border-radius: 999px;
  text-shadow: 0 1px 4px rgba(10, 22, 40, 0.6);
}
/* På smal skjerm fyller tittelboksen bunnen av helten, og krediteringen
   ville ligget oppå hjørnet av den. Der står den oppe til høyre, under
   menylinja. */
@media (max-width: 700px) {
  .v-hero-credit { bottom: auto; top: calc(var(--nav-height) + var(--space-sm)); right: 12px; }
}
/* Alltid oppe til høyre, på alle bredder: kommunesidene, der tittelboksen
   kan være bred nok til å nå hjørnet også på nettbrett (Hægebostad). */
.v-hero-credit--oppe { bottom: auto; top: calc(var(--nav-height) + var(--space-sm)); }