@charset "UTF-8";
/*
 * Norea — regionsiden, /prosjekter/region/<slug>/ (taxonomy-nrea_region.php og template-parts/region/).
 *
 * Lastes av malen selv, etter components.css, map.css og sider/artikkel.css (brødsmulen og
 * kortlistene). nrea_sidestil() gir i tillegg sider/prosjekt.css (prosjektkortet og framdriften).
 * Bare regionsidens egne klasser her, og bare farger fra tokens.css.
 *
 * Farger, målt (WCAG 2.1, DESIGN.md «Tillatte par»):
 *   sort på sand 16,06 · blå på sand 9,79 (tittelen i utforming 2) · sort på oransje 6,94 (Gi)
 *   sand på blå 9,79 og sand på dyp blå 12,73 (kartet, regionen som vises: dyp blå rad)
 *   oransje strek og Blink på dyp blå 5,50 (aldri oransje tekst)
 * Ingen skygger, ingen avrunding på flater, ingen gradient. Sirkelen står bare i utforming 2, uten
 * bilde, avkuttet av høyre kant og aldri over tekst (.el--kun-bred: skjult under 56.25em).
 *
 * Innhold
 *   1 Felles: toppen, overskriftene, tom tilstand, lydklippet
 *   2 Kartutsnittet (utforming 1)
 *   3 Fortellingen
 *   4 Be · Gi
 *   5 Toppen i utforming 2
 *   6 Det fremhevede prosjektet (utforming 2)
 */

/* ── 1 Felles ──────────────────────────────────────── */
.region__topp--tynn { padding-block: var(--space-xs); }

.region__h2 { margin-bottom: var(--space-lg); }

.region .brodsmule + .utformingsbryter { margin-top: var(--space-xs); }

.region-tom {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
  max-width: var(--measure);
}

.region-klipp { margin-top: var(--space-lg); }

/* ── 2 Kartutsnittet ───────────────────────────────── */
/*
 * Kartet zoomes inn på regionens sentrum (--rx, --ry fra template-parts/region/kart.php) og flyttes så
 * sentrum står midt i utsnittet. Pinnene får samme flytting, men beholder størrelsen. Det som havner
 * utenfor, klippes (og kan ikke trykkes på). Kartet er aria-hidden, lista ved siden av er veien.
 */
.region-kart--utsnitt { --zoom: 2; }

.region-kart--utsnitt .nk__lerret { overflow: clip; }

.region-kart--utsnitt .nk-svg {
  transform-origin: var(--rx) var(--ry);
  transform: translate(calc(50% - var(--rx)), calc(50% - var(--ry))) scale(var(--zoom));
}

.region-kart--utsnitt .nk__pinne {
  top: calc(50% + (var(--y) - var(--ry)) * var(--zoom));
  left: calc(50% + (var(--x) - var(--rx)) * var(--zoom));
}

/* Tittelen er sidens h1: samme størrelse som på /prosjekter/ */
.region--1 .nk__tittel {
  font-size: clamp(var(--text-h1), 1rem + 4cqi, var(--text-hero));
  line-height: 1.05;
  letter-spacing: -0.03em;
  hyphens: manual;
  overflow-wrap: break-word;
}

/* ── 3 Fortellingen ────────────────────────────────── */
.region-fortelling__tekst > * + * { margin-top: var(--space-md); }
.region-fortelling__tekst > .strek + * { margin-top: var(--space-md); }

@media (min-width: 56.25em) {
  .region-fortelling__rutenett {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: var(--space-xl);
    align-items: start;
  }

  .region-fortelling__rutenett > .region__h2 { margin-bottom: 0; }
}

/* ── 4 Be · Gi ─────────────────────────────────────── */
.region-begi__rutenett {
  display: grid;
  gap: var(--space-xl);
}

.region-begi__be > * + * { margin-top: var(--space-md); }
.region-begi__be > .region__h2 { margin-bottom: 0; }

.region-begi__emner { padding-left: 1.25em; list-style: disc; max-width: var(--measure); }
.region-begi__emner li + li { margin-top: var(--space-xs); }

.region-begi__gi { padding: var(--space-lg); }
.region-begi__gi > * + * { margin-top: var(--space-md); }
.region-begi__gi > .region__h2 { margin-bottom: 0; }

.region-begi__formal { display: grid; gap: var(--space-xs); font-weight: 500; }

.region-begi__knapp svg { width: 1.125rem; height: 1.125rem; flex: none; }

.region-begi__andre {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-ink);
  font-weight: 500;
}

@media (min-width: 48em) {
  .region-begi__gi { padding: var(--space-xl); }
}

@media (min-width: 56.25em) {
  .region-begi__rutenett:not(.region-begi__rutenett--en) {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-2xl);
    align-items: start;
  }
}

/* ── 5 Toppen i utforming 2 ────────────────────────── */
/*
 * Lav topp: tittelen og setningen til venstre, bildet beskåret liggende til høyre i samme høyde
 * (object-fit), så det ikke blir tom luft over tittelen. Høyden følger vinduet (vh), så det
 * fremhevede prosjektet under står helt i første skjermbilde på 1366 × 768 og 1440 × 900.
 */
.region-hero { padding-block: 0 var(--space-lg); }

/* Sirkelen står i kanten av toppen, ikke bak tittelen: plassen er reservert med reserver-hoyre */
.region-hero--sirkel { --kutt: 0.5; }

.region-hero__rutenett {
  display: grid;
  gap: var(--space-md) var(--space-xl);
}

.region-hero__rutenett > * { min-width: 0; }

.region-hero__tekst { display: grid; justify-items: start; gap: var(--space-sm); margin-top: var(--space-xs); }

.region-hero__tittel {
  font-size: clamp(2rem, 1rem + 3.4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  hyphens: manual;
  overflow-wrap: break-word;
}

.region-hero__ingress { max-width: var(--measure); font-size: var(--text-body); }

.region-hero__media { margin: 0; }

/* Liggende utsnitt. Fokuspunktet er litt over midten, der motivet oftest står. */
.region-hero__bilde {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 35%;
  background: var(--color-surface-deep);
}

.region-hero__kreditt { margin-top: var(--space-xs); font-size: var(--text-small); font-weight: 500; }

.region-hero .region-klipp { margin-top: var(--space-xs); }

@media (min-width: 56.25em) {
  .region-hero { padding-block: 0 var(--space-lg); } /* ett trinn mer luft til det fremhevede prosjektet (Eirik 22.10) */

  .region-hero--bilde .region-hero__rutenett {
    grid-template-columns: 7fr 5fr;
    align-items: center;
  }

  .region-hero__ingress { font-size: var(--text-h3); }

  .region-hero__bilde {
    aspect-ratio: auto;
    height: clamp(10rem, 24vh, 16rem);
  }
}

/* ── 6 Det fremhevede prosjektet ───────────────────── */
/*
 * Én hvit boks rett under toppen: bildet, teksten med knappen og framdriften. Fra 64em står
 * framdriften loddrett i en egen spalte til høyre, så boksen blir lav og bred. Pila er
 * blokker/framdrift.php med stilen fra prosjekt.css; her bare loddrett, som i prosjektoversikten.
 */
.region-fremhevet { padding-block: 0 var(--space-xl); }

.region-fremhevet__rutenett {
  display: grid;
  background: var(--color-field);
}

.region-fremhevet__rutenett > * { min-width: 0; }

.region-fremhevet__bilde {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-surface-deep);
}

.region-fremhevet__tekst {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md);
}

.region-fremhevet__hoved {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: var(--space-sm);
}

.region-fremhevet__tekst > .framdrift { margin-top: 0; }

/* Smal skjerm: teksten først i boksen, så tittelen synes i første skjermbilde under toppens bilde */
@media (max-width: 56.24em) {
  .region-fremhevet__media { order: 1; }
}

.region-fremhevet__merker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.region-fremhevet__tittel {
  font-size: clamp(var(--text-h3), 1rem + 1vw, 1.75rem);
  line-height: 1.1;
  hyphens: manual;
  overflow-wrap: break-word;
}

.region-fremhevet__ingress { font-size: var(--text-body); }
.region-fremhevet__knapp { margin-top: var(--space-xs); }

@media (min-width: 56.25em) {
  .region-fremhevet__rutenett:not(.region-fremhevet__rutenett--uten-bilde) { grid-template-columns: 1fr 2fr; }
  .region-fremhevet__bilde { aspect-ratio: auto; }
  .region-fremhevet__tekst { padding: var(--space-md) var(--space-lg); }
}

@media (min-width: 64em) {
  .region-fremhevet__tekst {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-lg);
    align-items: start;
  }

  .region-fremhevet .framdrift { display: block; }
  .region-fremhevet .framdrift__steg { padding: 0 0 var(--space-xs) 2.5rem; }
  .region-fremhevet .framdrift__steg::before { top: 0.15em; }

  .region-fremhevet .framdrift__steg::after {
    top: 1.75em;
    right: auto;
    bottom: 0;
    left: calc(0.75rem - 2px);
    width: 4px;
    height: auto;
  }
}