/* =========================================================
   OM REGION LISTER OG KONTAKT — /om/
   =========================================================
   Skissen ble tegnet på Claude Design-canvaset 9. sep 2026 og portert hit;
   bildene kom til 10. sep («mer levende og premium»). Flatene i rekkefølge:

     0. Hero         horisonten — tittel og dek over kveldslyset
     1. Regionen     krem       — tre tall i venstre spalte, fire avsnitt,
                                  og de seks kommunene fra lufta i en stripe
     2. Prosjektet   varm hvit  — foto med det mørke «Hvem står bak»-panelet
                                  lagt over nedkanten, tre avsnitt
     3. Kontakt      midnatt    — to innganger (losen / prosjektet) og
                                  kontaktpersonene i kommunene
     4. Støttespillere           — .l-partners fra lister.css, samme
                                  komponent som forsiden

   Skillet i kontaktseksjonen er hele poenget med sida: tilflytteren skal
   til losen og portalen, alle andre til prosjektleder. De to kortene har
   derfor hver sin flate — lys mot mørk — så øyet velger før det leser.

   Delte roller (.l-eyebrow, .l-section-title, .l-section-intro) kommer fra
   lister.css. Alt her er sidas egne komponenter, med .om-prefiks.
   ========================================================= */

.om-page { background: var(--color-cream); }

/* ---- 0. Hero ---- */
.om-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Gulvet er aldri høyere enn skjermen: på liggende telefon (390 px) ga
     et fast gulv en helt som var høyere enn skjermen, og tittelen, som står
     nederst, havnet under kanten. */
  min-height: clamp(min(560px, 100svh), 82vh, 900px);
  /* Toppstripa er fast (73 px) og ligger over; heroen begynner bak den. */
  padding: calc(var(--nav-height) + 48px) clamp(20px, 5vw, 56px) clamp(56px, 8vh, 96px);
  background: var(--color-midnight);
  overflow: hidden;
}
.om-hero__bilde {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kirka på neset og husene nederst til høyre skal bli; sola oppe til
     venstre kan gå. */
  object-position: 62% 72%;
  animation: om-hero-inn 1.8s var(--ease-out-expo) both;
}
/* Sløret: mørkt nederst der teksten står, lett i toppen så himmelen lever.
   Samme oppbygging som forsidens hero, litt lettere. */
.om-hero__slor {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 22, 40, 0.28) 0%, rgba(10, 22, 40, 0.08) 38%, rgba(10, 22, 40, 0.42) 70%, rgba(10, 22, 40, 0.74) 100%),
    radial-gradient(ellipse 60% 55% at 14% 92%, rgba(10, 22, 40, 0.62), transparent 70%);
}
.om-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--l-content-max);
  margin: 0 auto;
}
.om-hero__tekst {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  animation: om-tekst-inn 1.1s var(--ease-out-expo) 0.25s both;
}
.om-eyebrow--lys {
  color: var(--color-aurora);
  text-shadow: 0 1px 10px rgba(10, 22, 40, 0.5);
}
.om-hero__tittel {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-5xl);
  line-height: var(--linje-hero);
  letter-spacing: var(--sperring-tett);
  color: var(--color-warm-white);
  text-shadow: 0 2px 24px rgba(10, 22, 40, 0.45);
}
.om-hero__dek {
  margin: clamp(16px, 2.4vh, 24px) 0 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--brod-loft);
  line-height: var(--linje-kort);
  letter-spacing: var(--sperring-tett);
  color: var(--color-cream);
  text-shadow: 0 1px 14px rgba(10, 22, 40, 0.45);
}
@keyframes om-hero-inn {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@keyframes om-tekst-inn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Seksjonsramme ---- */
.om-seksjon {
  padding: clamp(64px, 9vh, 110px) clamp(20px, 5vw, 56px);
}
.om-seksjon--region {
  padding-bottom: 0;
  background: var(--color-cream);
}
.om-seksjon--prosjekt {
  background: var(--color-warm-white);
  border-top: 1px solid rgba(10, 22, 40, 0.06);
}
.om-seksjon--kontakt {
  position: relative;
  background: var(--color-midnight);
}
/* Hårstreken øverst på den mørke flaten: aurora som tynner ut mot høyre,
   samme grep som los-stripa. */
.om-seksjon--kontakt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-aurora), rgba(125, 211, 192, 0.12));
}

.om-inner {
  max-width: var(--l-content-max);
  margin: 0 auto;
}
.om-to-kol {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.om-to-kol--prosjekt { grid-template-columns: 5fr 7fr; }

.om-hode {
  display: flex;
  flex-direction: column;
}
/* Mellomtitlene (h2) er ett trinn under sidetittelen og i normal vekt. */
.om-tittel--h2 {
  font-size: var(--text-3xl);
  font-weight: 400;
}
.om-eyebrow--aurora { color: var(--color-aurora); }

.om-prosa { max-width: 640px; }
.om-prosa--etter { margin-top: 24px; }
.om-prosa p {
  margin: 0 0 1.2em;
  font-family: var(--font-body);
  font-size: var(--brod);
  line-height: var(--linje-brod);
  color: var(--color-text-secondary);
}
.om-prosa p:last-child { margin-bottom: 0; }
/* Anslaget: første avsnitt ett trinn opp, i husets anslagsrolle. */
.om-prosa--anslag p:first-child {
  font-size: var(--brod-loft);
  line-height: var(--linje-brod-tett);
  color: var(--color-text-primary);
  margin-bottom: 1em;
}

/* ---- Tre tall i venstre spalte ---- */
.om-fakta {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Klebrig, så tallene følger teksten et stykke ned. */
  position: sticky;
  top: calc(var(--nav-height) + 32px);
}
.om-fakta__post {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--color-sand);
}
.om-fakta__tall {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl);
  line-height: var(--linje-tett);
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.om-fakta__etikett {
  font-family: var(--font-body);
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--tekst-dempet);
}

/* ---- De seks fra lufta ---- */
.om-kommuner {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
  max-width: var(--l-content-max);
  margin: clamp(56px, 8vh, 96px) auto 0;
  padding: 0;
  list-style: none;
  /* Stripa er sidas bunn i denne flaten: den ligger halvveis over
     kanten til neste seksjon, som et bilde lagt på bordet. */
  transform: translateY(clamp(28px, 5vh, 56px));
  position: relative;
  z-index: 1;
}
.om-kommuner__kort {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-midnight);
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(10, 22, 40, 0.16);
}
.om-kommuner__bilde {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out-expo), filter 1.2s var(--ease-out-expo);
}
.om-kommuner__navn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 12px 14px;
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-md);
  text-transform: uppercase;
  color: var(--color-warm-white);
  background: linear-gradient(180deg, transparent, rgba(10, 22, 40, 0.78));
}
.om-kommuner__kort:hover .om-kommuner__bilde,
.om-kommuner__kort:focus-visible .om-kommuner__bilde {
  transform: scale(1.08);
}
.om-kommuner__kort:focus-visible {
  outline: 2px solid var(--color-aurora);
  outline-offset: 4px;
}
/* Kommunen uten side: bildet står, men leser ikke som en lenke. */
.om-kommuner__kort--stille { cursor: default; }
.om-kommuner__kort--stille .om-kommuner__bilde { filter: saturate(0.85); }

/* ---- 2. Prosjektet: foto med panel over nedkanten ---- */
.om-seksjon--prosjekt {
  /* stripa over henger 28–56 px ned i denne flaten; gi den plass */
  padding-top: calc(clamp(64px, 9vh, 110px) + clamp(28px, 5vh, 56px));
}
.om-prosjekt__bilde {
  display: flex;
  flex-direction: column;
}
.om-figur {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 4 / 3;
  box-shadow: 0 24px 60px rgba(10, 22, 40, 0.14);
}
.om-figur img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.om-figur__kredit {
  margin: 14px 24px 0;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  letter-spacing: var(--sperring-xs);
  color: var(--tekst-dempet);
  text-align: right;
}
.om-panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--color-midnight);
  border-radius: 18px;
  padding: 36px 34px;
  box-shadow: 0 18px 50px rgba(10, 22, 40, 0.22);
  /* Lagt over bildets nedkant, trukket litt inn fra sidene — ikke mer
     enn at paret på bildet står fritt over panelet. */
  margin: -44px 24px 0;
  position: relative;
}
.om-panel__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--etikett);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
  color: var(--color-aurora);
}
.om-panel__liste {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}
.om-panel__post {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(241, 235, 227, 0.12);
}
.om-panel__post:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.om-panel__rolle {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--tekst-dempet-mork);
}
.om-panel__navn {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--linje-tittel);
  color: var(--color-cream);
}
.om-panel__tekst {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--color-cream);
}
.om-prosjekt__tekst { padding-top: 8px; }

/* ---- 3. Kontakt: to innganger ---- */
.om-kontakt {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vh, 56px);
}
.om-kontakt__hode { max-width: 640px; }
.om-kontakt__innganger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  /* Like høye: bunnblokkene (knapp / adresse) sitter på samme linje, og
     punktlista i det lyse kortet fyller høyden det mørke får av portrettet
     (Tom 10. sep: «strukturen sitter ikke helt»). */
  align-items: stretch;
}
.om-kort {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 18px;
  padding: 36px 34px;
}
.om-kort__bunn {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding-top: 8px;
}
/* Tre punkter i det lyse kortet: en liten aurora-prikk foran hvert. */
.om-kort__liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 10px;
  padding: 0;
  list-style: none;
}
.om-kort__liste li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--color-text-primary);
}
.om-kort__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold-mork);
}
/* Prosjektleder med portrett */
.om-person {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(241, 235, 227, 0.12);
}
.om-person__portrett {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
  border: 2px solid rgba(125, 211, 192, 0.55);
}
.om-kort--lys {
  background: var(--color-cream);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.om-kort--ramme {
  /* Egen flate, ikke bare en ramme paa seksjonsbunnen (Tom 10. sep):
     husets moerke kortflate, ett trinn lysere enn midnatt. */
  background: var(--color-kort-mork);
  border: 1px solid rgba(241, 235, 227, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.om-kort__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--etikett);
  letter-spacing: var(--sperring-xl);
  text-transform: uppercase;
}
.om-kort--lys .om-kort__eyebrow { color: var(--aksent-tekst); }
.om-kort--ramme .om-kort__eyebrow { color: var(--color-aurora); }
.om-kort__tittel {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--linje-display);
  letter-spacing: var(--sperring-tett);
  color: var(--color-text-primary);
  text-wrap: balance;
}
.om-kort--ramme .om-kort__tittel { color: var(--color-cream); }
.om-kort__tekst {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  line-height: var(--linje-brod-tett);
  color: var(--color-text-secondary);
}
.om-kort--ramme .om-kort__tekst { color: var(--color-cream); }
.om-kort__handling {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
}
.om-knapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 34px;
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-sm);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-full);
  background: var(--color-gold-mork);
  color: var(--color-warm-white);
  transition: background var(--duration-normal) var(--ease-out-expo),
              transform var(--duration-normal) var(--ease-out-expo);
}
.om-knapp:hover,
.om-knapp:focus-visible {
  background: var(--color-midnight);
  color: var(--color-warm-white);
  transform: translateY(-1px);
}
.om-lenke {
  font-family: var(--font-body);
  font-size: var(--etikett);
  letter-spacing: var(--sperring-sm);
  text-transform: uppercase;
  color: var(--aksent-tekst);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.om-lenke:hover,
.om-lenke:focus-visible { color: var(--color-text-primary); }
.om-kort__note {
  margin: 2px 0 0;
  font-family: var(--font-body);
  font-size: var(--brod-liten);
  letter-spacing: var(--sperring-xs);
  color: var(--tekst-dempet);
}

/* Én kontaktperson: rolle, navn, e-post (og telefon). */
.om-kontaktrad {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-style: normal;
}
.om-kontaktrad--skille {
  margin-top: 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(241, 235, 227, 0.12);
}
.om-kontaktrad__rolle {
  font-family: var(--font-body);
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--aksent-tekst-mork);
}
.om-kontaktrad__navn {
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  font-weight: 700;
  color: var(--color-cream);
}
.om-kontaktrad__merknad {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: var(--brod-liten);
  line-height: var(--linje-brod-tett);
  color: var(--tekst-dempet-mork);
}
.om-kontaktrad a {
  font-family: var(--font-body);
  font-size: var(--brod-kort);
  color: var(--color-cream);
  text-decoration: underline;
  text-decoration-color: var(--color-aurora);
  text-underline-offset: 0.2em;
  /* lange e-postadresser skal brekke, ikke sprenge kortet på mobil */
  overflow-wrap: anywhere;
}
.om-kontaktrad a:hover,
.om-kontaktrad a:focus-visible { text-decoration-color: var(--color-cream); }

.om-adresse {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(241, 235, 227, 0.12);
  font-style: normal;
}
.om-adresse__navn {
  font-family: var(--font-body);
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--tekst-dempet-mork);
}
.om-adresse__tekst {
  font-family: var(--font-body);
  font-size: var(--brod-liten);
  line-height: var(--linje-brod-tett);
  color: var(--tekst-dempet-mork);
}

/* ---- Kontaktpersonene i kommunene ---- */
.om-koordinatorer {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 8px;
}
.om-koordinatorer__grid {
  display: grid;
  /* Fem kontakter siden Hægebostad kom til. Fem i bredden får ikke plass
     (lengste navn/adresse ~267 px, spalten 1180), og fire ga én alene på
     andre rad — tre gir 3 + 2. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.om-koordinatorer__grid .om-kontaktrad {
  padding-top: 16px;
  border-top: 1px solid rgba(241, 235, 227, 0.12);
}

/* ---- Innfading ved scroll (samme kurve som stedssidene) ---- */
.js .om-page [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.js .om-page [data-reveal].revealed {
  opacity: 1;
  transform: none;
}
/* Kommunestripa har sin egen forskyvning; innfadingen må ende der. */
.js .om-page .om-kommuner[data-reveal] { transform: translateY(calc(clamp(28px, 5vh, 56px) + 20px)); }
.js .om-page .om-kommuner[data-reveal].revealed { transform: translateY(clamp(28px, 5vh, 56px)); }

/* ---- Smalere flater ---- */
@media (max-width: 900px) {
  .om-to-kol,
  .om-to-kol--prosjekt {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .om-fakta {
    position: static;
    flex-direction: row;
    gap: 16px;
  }
  .om-fakta__post { flex: 1 1 0; }
  .om-fakta__tall { font-size: var(--text-3xl); }
  .om-kommuner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .om-panel { margin: -48px 16px 0; }
  .om-kontakt__innganger { grid-template-columns: minmax(0, 1fr); }
  .om-koordinatorer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}
@media (max-width: 480px) {
  .om-hero { min-height: clamp(min(520px, 100svh), 78vh, 700px); }
  .om-fakta { gap: 12px; }
  .om-kommuner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .om-kort,
  .om-panel { padding: 28px 22px; }
  .om-panel { margin: -36px 12px 0; }
  .om-person { align-items: flex-start; gap: 14px; }
  .om-person__portrett { width: 72px; height: 72px; }
  .om-knapp { padding: 16px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .om-hero__bilde,
  .om-hero__tekst { animation: none; }
  .om-knapp,
  .om-kommuner__bilde { transition: none; }
  .js .om-page [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .om-page .om-kommuner[data-reveal] { transform: translateY(clamp(28px, 5vh, 56px)); }
}