@charset "UTF-8";
/*
 * Norea — andakt og artikkel, og kortene, reservemalen og seksjonene andaktsblokk, cta og
 * dette_er_norea.
 *
 * Andaktsdelen av Oppdraget-skissen (assets/proto/oppdraget.css § 7), med ingressen under tittelen
 * (byggeplanen § 4.2–4.3). Lastes etter components.css på andakt og artikkel (nrea_sidestil() i
 * inc/assets.php), og i tillegg i reservevisningen og på sider med seksjonene over
 * (nrea_innhold_stil() i inc/innhold.php). Bare egne klasser her, og bare farger fra tokens.css.
 *
 * Innhold
 *   1 Andakt og artikkel: brødsmule, topp, bilde, lesearket, neste steg
 *   2 Kortene i lister
 *   3 Dette er Norea: faktalista, og sand-varianten (.norea-om)
 *   4 Andaktsblokka
 *   5 Reservemalen: søkefelt, innganger, sidetall
 *   6 Bryteren for Be · Gi-variantene (bare utenfor produksjon)
 *   7 Be · Gi: tre varianter (standard 1)
 */

/* ── 1 Andakt og artikkel ──────────────────────────── */
.artikkel { padding-block: var(--space-sm) var(--space-2xl); }

.artikkel__indre {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.artikkel__indre > * { min-width: 0; }

/* Brødsmuler: lenkene er 44 px høye, skilletegnet er dekor */
.brodsmule__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-xs);
  font-size: 1rem;
}

.brodsmule__liste li {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* Korte ord som «Lytt» får også 44 × 44 px: luft på sidene, så teksten står midt i flaten */
.brodsmule__liste a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: 0.25rem;
}

/* Første lenke flukter med tittelen under: teksten til venstre i flaten */
.brodsmule__liste li:first-child a { justify-content: flex-start; margin-left: -0.25rem; }

.brodsmule__liste li + li::before {
  content: "/";
  content: "/" / "";
  margin-right: var(--space-xs);
}

/* Toppen: etikett, tittel, ingressen under tittelen, meta */
.artikkel__topp {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-md) var(--space-xl);
}

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

.artikkel__tittel {
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  hyphens: auto;
}

.artikkel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-md);
  font-size: var(--text-label);
  font-weight: 500;
}

.artikkel__meta:empty { display: none; }

/* Bildet: alene, ingen tekst oppå. I artikkelen står det høyt, i andakten etter teksten. */
.artikkel__bilde { margin: 0 0 var(--space-xl); }

.artikkel__bilde-img {
  width: 100%;
  height: auto;
  background: var(--color-surface-deep);
}

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

/*
 * Lesearket: lyd, strek, tekst og bilde på hvit flate, som et ark på sanden (Oppdraget). Under 64em
 * går arket ut til skjermkanten med hårfin sand-deep-kant over og under. Fra 64em står det som et
 * ark i venstre spalte, uten kant, og høyre spalte er ledig til faktaboksen.
 */
.artikkel__ark {
  --fokus: var(--color-ink);
  margin-inline: calc(-1 * var(--sidemarg));
  padding: var(--space-lg) var(--sidemarg) var(--space-xl);
  background: var(--color-field);
  border-block: 1px solid var(--color-surface-deep);
}

.artikkel__ark > * + * { margin-top: var(--space-lg); }
.artikkel__ark > .artikkel__bilde { margin: var(--space-xl) 0 0; }
.artikkel__ark > .artikkel__tekst { margin-top: var(--space-md); }

/* Lydblokka øverst på arket: arkets egen kant er nok, så spillerens strek over faller bort */
.artikkel__ark > .artikkel__lyd:first-child .np-lyd { border-top: 0; padding-top: 0; }

.artikkel__lyd-tittel { font-size: var(--text-h3); margin-bottom: var(--space-sm); }

.artikkel__tekst .wp-block-image,
.artikkel__tekst figure { max-width: var(--measure); }

.artikkel__tekst img { height: auto; }

.artikkel__tekst blockquote {
  max-width: var(--measure);
  padding-left: var(--space-md);
  border-left: 4px solid var(--color-accent);
}

/* [AUD n] og [VID n] i teksten, og videoen under teksten */
.innhold-medie { max-width: var(--measure); }

.innhold-video {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
}

.innhold-video::after { content: " \2192"; content: " \2192" / ""; white-space: pre; }

.artikkel__prosjekter > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.35em; }
.artikkel__prosjekter a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }

.artikkel__etter { margin-top: var(--space-2xl); }
.artikkel__etter > * + * { margin-top: var(--space-lg); }
.artikkel__fakta > * + * { margin-top: var(--space-sm); }

@media (min-width: 64em) {
  .artikkel__indre { grid-template-columns: minmax(0, 46rem) minmax(16rem, 1fr); column-gap: var(--space-xl); }
  .artikkel__indre > * { grid-column: 1 / -1; }

  .artikkel__ark {
    grid-column: 1;
    margin-inline: 0;
    padding-inline: var(--space-lg);
    border: 0;
  }

  /*
   * Andakten og artikkelen (runde 2, Eirik 21.10): toppen og det hvite lesearket som før, og en høyre
   * kolonne på sanden som begynner på høyde med brødteksten. I andakten står bildet der, og under det
   * faktaboksen og Be · Gi. Artikkelen har bildet høyt som før, så der står bare faktaboksen og Be · Gi
   * («Bare boksene»). Samme rutenett for begge.
   *
   * Kildeordenen er den samme som på mobil, og bare CSS flytter. Arket løser seg opp (display:
   * contents), og den hvite flaten tegnes av ::before over arkets rader, så delene kan stå i hver sin
   * kolonne. Brødteksten får 48rem, som rommer 62 ch. Radene som en mal ikke bruker, blir 0 høye.
   */
  :is(.artikkel--andakt, .artikkel--artikkel) .artikkel__indre {
    column-gap: 0;
    grid-template-columns:
      [ark-start] var(--space-lg) [tekst-start] minmax(0, 48rem) [tekst-end] var(--space-lg) [ark-end]
      var(--space-xl) [side-start] minmax(16rem, 1fr) [side-end];
    grid-template-rows:
      [bryter] auto [smule] auto [topp] auto [hoyt] auto [ark-topp] var(--space-lg) [lyd] auto [strek] auto
      [tekst-start] auto [side-etter] 1fr [tekst-end] auto [video] auto [prosjekter] auto
      [ark-luft] var(--space-xl) [ark-bunn];
  }

  :is(.artikkel--andakt, .artikkel--artikkel) .artikkel__indre::before {
    content: "";
    grid-row: ark-topp / ark-bunn;
    grid-column: ark-start / ark-end;
    background: var(--color-field);
  }

  :is(.artikkel--andakt, .artikkel--artikkel) .artikkel__ark { display: contents; }
  :is(.artikkel--andakt, .artikkel--artikkel) .artikkel__ark > * { margin: 0; }
  :is(.artikkel--andakt, .artikkel--artikkel) .utformingsbryter { grid-row: bryter; grid-column: ark-start / side-end; }
  :is(.artikkel--andakt, .artikkel--artikkel) .brodsmule { grid-row: smule; grid-column: ark-start / side-end; }
  :is(.artikkel--andakt, .artikkel--artikkel) .artikkel__topp { grid-row: topp; grid-column: ark-start / side-end; }
  :is(.artikkel--andakt, .artikkel--artikkel) .artikkel__lyd { grid-row: lyd; grid-column: tekst-start / tekst-end; }

  :is(.artikkel--andakt, .artikkel--artikkel) .artikkel__strek {
    grid-row: strek;
    grid-column: tekst-start / tekst-end;
    margin-top: var(--space-lg);
  }

  :is(.artikkel--andakt, .artikkel--artikkel) .artikkel__tekst {
    grid-row: tekst-start / tekst-end;
    grid-column: tekst-start / tekst-end;
    margin-top: var(--space-md);
  }

  /* Artikkelen: videolenka og «Fra prosjektet» under teksten, i arket */
  .artikkel--artikkel .artikkel__ark > .innhold-medie { grid-row: video; grid-column: tekst-start / tekst-end; margin-top: var(--space-lg); }
  .artikkel--artikkel .artikkel__prosjekter { grid-row: prosjekter; grid-column: tekst-start / tekst-end; margin-top: var(--space-lg); }

  /* Bildet: i andakten øverst i høyre kolonne, i artikkelen høyt over arket som før */
  .artikkel--andakt .artikkel__bilde {
    grid-row: tekst-start / side-etter;
    grid-column: side-start / side-end;
    margin: var(--space-md) 0 var(--space-lg);
  }

  .artikkel--artikkel .artikkel__indre > .artikkel__bilde {
    grid-row: hoyt;
    grid-column: ark-start / side-end;
    max-width: 60rem;
  }

  /*
   * Faktaboksen og Be · Gi i høyre kolonne, fra høyde med brødteksten. .artikkel__etter fyller
   * kolonnen ned til tekstens slutt, og bare Be · Gi følger med ved scroll innenfor den. Den står i
   * egen kolonne og dekker aldri teksten, og spilleren nederst ligger over innholdet (z-index), så
   * den dekker aldri spilleren heller.
   */
  :is(.artikkel--andakt, .artikkel--artikkel) .artikkel__etter {
    grid-row: side-etter / tekst-end;
    grid-column: side-start / side-end;
    align-self: stretch;
    margin: var(--space-md) 0 0;
  }

  :is(.artikkel--andakt, .artikkel--artikkel) .artikkel__etter > :is(.neste-steg, .cta) {
    position: sticky;
    top: var(--space-lg);
  }

  :is(.artikkel--andakt, .artikkel--artikkel) .artikkel__etter :is(.neste-steg, .cta__del) { padding: var(--space-lg); }

  /* Plassen under Sirkelen må stå igjen når sidekolonnen gir boksen mindre luft */
  :is(.artikkel--andakt, .artikkel--artikkel) .artikkel__etter .cta--1 { padding-top: calc(var(--el-synlig) + var(--space-sm)); }
}

@media (min-width: 64em) and (prefers-reduced-motion: reduce) {
  :is(.artikkel--andakt, .artikkel--artikkel) .artikkel__etter > :is(.neste-steg, .cta) { position: static; }
}

/* ── 2 Kortene i lister ────────────────────────────── */
/* <li> rundt hvert kort: like høye kort i rada */
.kortliste > li { display: flex; max-width: none; }
.kortliste > li > .kort { flex: 1; }

/* Lange sammensatte ord i versaler (Syne) skal brytes i kortet, ikke presse lista ut av skjermen på
   320 px. anywhere (ikke break-word) senker også min-content, så et grid- eller flex-element rundt
   kortet ikke blir bredere enn kolonnen. */
.kort { min-width: 0; }
.kort__tittel { hyphens: auto; overflow-wrap: anywhere; }

.kort__ingress { max-width: none; }
.kort .kort__meta { margin-top: auto; padding-top: var(--space-xs); }

/* ── 3 Dette er Norea ──────────────────────────────── */
/* Blå (andakt og artikkel, Oppdraget) og sand (seksjonen, Bevegelse § 6) deler markupen */
.dette-er-norea__fakta > li {
  max-width: none;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-primary-light);
}

/* Sand: blå tittel i display-størrelse, sort tekst, hårfin sort linje over faktaene (Bevegelse) */
.norea-om { --kutt: 0.4; }
.norea-om__indre > * + * { margin-top: var(--space-md); }
.norea-om__indre > .knapp { margin-top: var(--space-xl); }

.norea-om .dette-er-norea__tittel {
  color: var(--color-primary);
  font-size: var(--text-display);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.norea-om .dette-er-norea__setning {
  max-width: 32ch;
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.35;
}

.norea-om .dette-er-norea__fakta {
  display: grid;
  gap: var(--space-md);
  max-width: none;
}

.norea-om .dette-er-norea__fakta > li { border-top-color: var(--color-ink); }

@media (min-width: 64em) {
  .norea-om .dette-er-norea__fakta { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-lg); }
}

/*
 * Sand med bilde: et bilde av Norea i Norge ved siden av teksten fra 56.25em, over teksten på mobil
 * (order, bildet kan ikke få fokus). Aldri tekst oppå. Sirkelen står ikke når bildet står. Faktaene i
 * én spalte, så teksten får plass ved siden av bildet.
 */
.norea-om__rad { display: grid; gap: var(--space-lg); }
.norea-om__figur { order: -1; margin: 0; }

.norea-om__bilde {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-surface-deep);
}

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

.norea-om--bilde .dette-er-norea__fakta { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 56.25em) {
  .norea-om__rad {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    column-gap: var(--space-2xl);
  }

  .norea-om__figur { order: 0; }
}

/* ── 4 Andaktsblokka ───────────────────────────────── */
.andaktsblokk__rutenett {
  display: grid;
  gap: var(--space-xl);
}

.andaktsblokk__andakt {
  display: grid;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 4px solid var(--color-accent);
}

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

.andaktsblokk__tittel { font-size: clamp(var(--text-h2), 1.1rem + 1.8vw, 2.75rem); line-height: 1.1; }
.andaktsblokk__tittel a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-primary);
  text-decoration: none;
}
.andaktsblokk__tittel a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.andaktsblokk__ingress {
  font-size: var(--text-h3);
  font-weight: 300; /* som ingressen */
  line-height: 1.5;
  max-width: var(--measure-lead);
}

.andaktsblokk .knapp-rad { margin-top: var(--space-xs); }

@media (min-width: 56.25em) {
  .andaktsblokk--direkte .andaktsblokk__rutenett { grid-template-columns: 7fr 5fr; align-items: start; }
}

/* ── 5 Reservemalen ────────────────────────────────── */
.reserve > * + * { margin-top: var(--space-xl); }

.sokefelt { max-width: 36rem; }

.sokefelt__etikett { display: block; margin-bottom: var(--space-xs); font-weight: 600; }

.sokefelt__rad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.sokefelt__felt {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-field);
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--space-xs);
}

.pagination .page-numbers.current { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; }

/* WordPress skriver overskriften over sidetallene som .screen-reader-text. Skallet har bare .skjult. */
.pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── 6 Bryteren for Be · Gi-variantene ─────────────── */
/* ?cta=1|2|3 (inc/innhold.php), bare utenfor produksjon og bare når parameteren står i adressen */
.utformingsbryter { margin-bottom: var(--space-xs); }

.utformingsbryter__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-sm);
  padding: 0 var(--space-xs);
  background: var(--color-surface-deep);
  border: 1px solid var(--line);
  font-size: var(--text-label);
  font-weight: 500;
}

.utformingsbryter__navn { font-weight: 600; }

.utformingsbryter a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-ink);
}

.utformingsbryter a[aria-current] { font-weight: 600; text-decoration-thickness: 2px; }

/* ── 7 Be · Gi: tre varianter ──────────────────────── */
/*
 * blokker/neste-steg.php. Standard er 1. Alle står på profilens oransje med sort tekst (6,94:1), ingen
 * skygge, gradient eller avrunding. Knappene er skallets (2 px).
 */
.cta__tittel {
  font-size: clamp(var(--text-h2), 1rem + 1.2vw, 2rem);
  line-height: 1.1;
}

.cta__tekst { font-size: var(--text-h3); line-height: 1.45; }

/* 1 Grunn: tittel, én setning og knappene, med Sirkelen i sort avkuttet i hjørnet øverst til høyre
   (en firedel synlig). reserver-topp gir plass under den, så den aldri står over tekst, heller ikke i
   en smal kolonne. */
.cta--1 { --kutt: 0.5; }
.cta--1 .cta__indre > * + * { margin-top: var(--space-sm); }
.cta--1 .cta__indre > .knapp-rad { margin-top: var(--space-md); }

/* 2 To valg: Be og Gi hver sin halvdel. Mellomrommet på 2 px viser den sorte flaten bak som strek,
   side om side eller over hverandre, så streken følger bredden uten egne regler. */
.cta__deler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 2px;
  background: var(--color-ink);
  border: 2px solid var(--color-ink);
}

.cta__del { display: flex; flex-direction: column; align-items: flex-start; }
.cta__del > * + * { margin-top: var(--space-sm); }
.cta__del > .knapp { margin-top: auto; }
.cta__del > p:last-of-type { margin-bottom: var(--space-md); }

.cta__overskrift {
  font-size: var(--text-display);
  line-height: 1;
  letter-spacing: -0.03em;
}

.cta__faktum { font-weight: 600; }

/* 3 Beløp: sort ramme, tittel, ett beløp i stor skrift og hva det gir, Gi som primær og Be som sekundær */
.cta--3 { border: 2px solid var(--color-ink); }
.cta--3 > * + * { margin-top: var(--space-sm); }
.cta--3 > .knapp-rad { margin-top: var(--space-md); }

.cta__belop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  padding-block: var(--space-sm);
  border-block: 1px solid var(--color-ink);
}

.cta__sum {
  font-family: var(--font-body);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

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