@charset "UTF-8";
/*
 * Norea — prosjektsiden, prosjektarkivet og regionene.
 *
 * Lastes etter components.css på nrea_prosjekt (enkeltside og arkiv) og nrea_region, se
 * nrea_sidestil() i inc/assets.php. Prosjektsiden laster i tillegg sider/artikkel.css (brødsmulen,
 * kortene, Dette er Norea) og seksjoner.css (gave, galleri, sitat, video, nøkkeltall). Bare sidens egne
 * klasser her, og bare farger fra tokens.css. Tekst ligger aldri over bilder.
 *
 * Innhold
 *   1 Aksenten og eksempelmerkingen
 *   2 Toppen: stor (utforming 1) og kompakt (utforming 2)
 *   3 Framdriften (.od-fremdrift fra Oppdraget-skissen), med steg som kan åpnes
 *   4 Oversikten og ankermenyen (utforming 2)
 *   5 Om prosjektet, lytt og se, kartet og bønn
 *   6 Prosjektkortet
 */

/* ── 1 Aksenten og eksempelmerkingen ───────────────── */
/* Feltet aksent. I basis er standard, UFU og Troens menn alle profilens oransje (byggeplanen § 4.4). */
.prosjekt { --prosjekt-aksent: var(--color-accent); }
.prosjekt .strek { background: var(--prosjekt-aksent); }

.prosjekt-eksempel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding-top: var(--space-sm);
}

.prosjekt-eksempel__valg { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); }
.prosjekt-eksempel__bryter li { max-width: none; }

.prosjekt-eksempel__bryter a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--text-label);
  font-weight: 500;
}

.prosjekt-eksempel__bryter a[aria-current] { font-weight: 600; text-decoration-thickness: 3px; }

/* ── 2 Toppen ──────────────────────────────────────── */
.prosjekt-topp { padding-bottom: var(--space-xl); }

.prosjekt-topp__rutenett {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.prosjekt-topp__rutenett > * { min-width: 0; }

.prosjekt-topp__tekst {
  /* Tittelen skaleres etter spalten den står i, så et langt ord får plass uten deling */
  container-type: inline-size;
  display: grid;
  gap: var(--space-md);
  align-content: start;
  padding-top: var(--space-sm);
}

.prosjekt-topp__tekst > * { min-width: 0; }

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

.prosjekt__tittel {
  /* Etter spaltebredden: «Lyttergruppene» (14 tegn) får plass fra 320 px og i den smale spalten i
     utforming 2. Ord som fortsatt ikke får plass, deles som nødløsning. Reserve uten container-enheter. */
  font-size: clamp(1.625rem, 0.5rem + 5.6vw, 4.5rem);
  font-size: clamp(1.625rem, 9cqi, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  /* Ingen automatisk orddeling: et ord deles bare når det faktisk ikke får plass (nødløsning). */
  hyphens: manual;
  overflow-wrap: break-word;
}

.prosjekt-topp__knapper { margin-top: var(--space-xs); }

.prosjekt-topp__bilde { margin: 0; }

.prosjekt-topp__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--color-surface-deep);
}

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

/* Utforming 1: bildet stort og bredt under teksten, opp til skjermkanten på smale skjermer */
.prosjekt-topp--stor .prosjekt-topp__tekst { max-width: 56rem; }
.prosjekt-topp--stor .prosjekt-topp__img { aspect-ratio: 16 / 9; max-height: 80vh; }

@media (max-width: 47.99em) {
  .prosjekt-topp--stor .prosjekt-topp__bilde { margin-inline: calc(-1 * var(--sidemarg)); }
  .prosjekt-topp--stor .prosjekt-topp__kreditt { padding-inline: var(--sidemarg); }
}

@media (min-width: 64em) {
  .prosjekt-topp--stor .prosjekt-topp__img { aspect-ratio: 21 / 9; }
}

/* Utforming 2: teksten til venstre, bildet til høyre */
.prosjekt-topp--kompakt .prosjekt-topp__img { aspect-ratio: 4 / 3; }

@media (min-width: 56.25em) {
  .prosjekt-topp--kompakt.har-bilde .prosjekt-topp__rutenett {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-2xl);
    align-items: end;
  }
}

/* ── 3 Framdriften ─────────────────────────────────── */
.prosjekt-framdrift > .container > h2 { margin-bottom: var(--space-xs); }
.prosjekt-framdrift__merknad { margin-top: var(--space-md); }

/*
 * Firkantet markør og status i tekst. Ferdig = fylt blå med hake, Nå = tykk blå ramme, Neste = tynn
 * sort ramme. Statusordet bærer betydningen, markøren gjentar den. Loddrett under 64em, vannrett
 * med én kolonne per steg (--steg, 2–5) fra 64em.
 */
.framdrift { margin-top: var(--space-md); }

.framdrift__steg {
  position: relative;
  max-width: none;
  padding: 0 0 var(--space-md) 2.5rem;
}

.framdrift__steg::before {
  content: "";
  position: absolute;
  top: 0.15em;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--color-ink);
  background: var(--color-surface);
  color: var(--color-surface);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

.framdrift__steg--ferdig::before {
  content: "\2713";
  content: "\2713" / "";
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.framdrift__steg--naa::before { border: 6px solid var(--color-primary); }

/* Linja til neste steg: blå der arbeidet er gjort, hårfin ellers */
.framdrift__steg::after {
  content: "";
  position: absolute;
  top: 1.75em;
  bottom: 0;
  left: calc(0.75rem - 2px);
  width: 4px;
  background: var(--line);
}

.framdrift__steg--ferdig::after { background: var(--color-primary); }
.framdrift__steg:last-child::after { content: none; }

.framdrift__status {
  display: block;
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.framdrift__tekst { display: block; }

/* Et steg med mer tekst er en <details>: hele steget er knappen, + og − viser om den er åpen */
.framdrift__mer > summary {
  display: block;
  min-height: 2.75rem;
  cursor: pointer;
  list-style: none;
}

.framdrift__mer > summary::-webkit-details-marker { display: none; }

.framdrift__mer > summary .framdrift__tekst {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.framdrift__mer > summary:hover .framdrift__tekst { text-decoration-thickness: 2px; }

.framdrift__mer > summary .framdrift__tekst::after {
  content: " +";
  content: " +" / "";
  font-weight: 600;
}

.framdrift__mer[open] > summary .framdrift__tekst::after {
  content: " \2212";
  content: " \2212" / "";
}

.framdrift__detalj {
  margin-top: var(--space-xs);
  padding-left: var(--space-sm);
  border-left: 4px solid var(--prosjekt-aksent, var(--color-accent));
}

@media (min-width: 64em) {
  .framdrift {
    display: grid;
    grid-template-columns: repeat(var(--steg, 3), minmax(0, 1fr));
  }

  .framdrift__steg { padding: 2.5rem var(--space-md) 0 0; }
  .framdrift__steg::before { top: 0; }

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

/* ── 4 Oversikten og ankermenyen (utforming 2) ─────── */
.prosjekt-oversikt { border-block: 1px solid var(--line); }

.prosjekt-oversikt__rutenett {
  display: grid;
  gap: var(--space-xl);
}

.prosjekt-oversikt__rutenett > * { min-width: 0; }

.prosjekt-oversikt__tittel { font-size: var(--text-h3); }
.prosjekt-oversikt .fakta__liste { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }

@media (min-width: 64em) {
  .prosjekt-oversikt__rutenett { grid-template-columns: 5fr 7fr; gap: var(--space-2xl); }
  /* Pila står i en smalere spalte her, så stegene står loddrett også på brede skjermer */
  .prosjekt-oversikt .framdrift { display: block; }
  .prosjekt-oversikt .framdrift__steg { padding: 0 0 var(--space-md) 2.5rem; }
  .prosjekt-oversikt .framdrift__steg::before { top: 0.15em; }
  .prosjekt-oversikt .framdrift__steg::after {
    top: 1.75em;
    right: auto;
    bottom: 0;
    left: calc(0.75rem - 2px);
    width: 4px;
    height: auto;
  }
}

.prosjekt-ankermeny {
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--line);
  background: var(--color-surface-deep);
}

.prosjekt-ankermeny__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-md);
}

.prosjekt-ankermeny__liste li { max-width: none; }

.prosjekt-ankermeny__liste a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-weight: 600;
}

/* Ankrene havner ikke rett under toppen av vinduet */
.prosjekt [id] { scroll-margin-top: var(--space-md); }

/* ── 5 Om prosjektet, lytt og se, kartet og bønn ───── */
.prosjekt-om__rutenett {
  display: grid;
  gap: var(--space-xl);
}

.prosjekt-om__rutenett > * { min-width: 0; }
.prosjekt-om__tekst > * + * { margin-top: var(--space-md); }

.prosjekt-om__fakta {
  align-self: start;
  padding: var(--space-lg);
  background: var(--color-field);
}

.prosjekt-fram {
  padding-top: var(--space-lg);
}

.prosjekt-fram__tittel { font-size: var(--text-h3); }

.prosjekt-fram__liste {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.prosjekt-fram__rad {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-ink);
}

.prosjekt-fram__rad dd { margin-top: 0.25rem; font-weight: 500; }

@media (min-width: 48em) {
  .prosjekt-fram__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-lg); }
}

@media (min-width: 64em) {
  .prosjekt-om.har-fakta .prosjekt-om__rutenett { grid-template-columns: minmax(0, 46rem) minmax(16rem, 1fr); column-gap: var(--space-2xl); }
}

.prosjekt-lytt__rutenett {
  display: grid;
  gap: var(--space-xl);
}

.prosjekt-lytt__rutenett > * { min-width: 0; }

.prosjekt-lytt__liste { margin-top: var(--space-md); }

.prosjekt-lytt__rad {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
  max-width: none;
  padding-block: var(--space-md);
  border-top: 1px solid var(--line);
}

.prosjekt-lytt__navn { font-weight: 500; }

@media (min-width: 56.25em) {
  .prosjekt-lytt.har-begge .prosjekt-lytt__rutenett { grid-template-columns: 5fr 7fr; gap: var(--space-2xl); }
}

.prosjekt-bonn__indre > * + * { margin-top: var(--space-md); }
.prosjekt-bonn h2 { color: var(--color-surface); }

.prosjekt-bonn__tekst {
  font-size: var(--text-h3);
  line-height: 1.5;
  max-width: var(--measure-lead);
}

/* ── 6 Prosjektkortet ──────────────────────────────── */
.kort--prosjekt .kort__merker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.kort--prosjekt .kort__tittel { hyphens: manual; overflow-wrap: break-word; }
.kort--prosjekt .kort__ingress { max-width: none; }