@charset "UTF-8";
/*
 * Norea — seksjonene som brukes både på prosjektsiden og på vanlige sider: gave (gi_blokk), galleri,
 * sitat, video, nøkkeltall, topp med foto (hero_foto), tekst og bilde, lydprøve og prosjektliste.
 *
 * Lastes i <head> på prosjektsiden (single-nrea_prosjekt.php) og av hver seksjon selv der den står.
 * Bare farger fra tokens.css. Ingen skygge, gradient eller radius på flater (2 px på knapper og felt).
 * Tekst ligger aldri over bilder.
 *
 * Innhold
 *   1 Gave (gi_blokk)
 *   2 Galleri og lysboks
 *   3 Sitat
 *   4 Video (fasade)
 *   5 Nøkkeltall
 *   6 Topp med foto og tekst og bilde
 *   7 Lydprøve og prosjektliste
 */

/* ── 1 Gave ────────────────────────────────────────── */
.gi-blokk__rutenett {
  display: grid;
  gap: var(--space-xl);
}

.gi-blokk__tekst > * + * { margin-top: var(--space-md); }

.gi-blokk__boks { padding: var(--space-lg); }
.gi-blokk__boks > * + * { margin-top: var(--space-md); }

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

.gi-blokk__knapp svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

.gi-blokk__boks > .gi-blokk__knapp + .gi-blokk__ut { margin-top: var(--space-xs); }
.gi-blokk__ut { font-size: 1rem; }

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

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

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

/* ── 2 Galleri og lysboks ──────────────────────────── */
.galleri > .container > h2 { margin-bottom: var(--space-lg); }

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

.galleri__punkt { max-width: none; }

.galleri__lenke {
  display: block;
  background: var(--color-surface-deep);
}

.galleri__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.galleri__lenke:hover .galleri__img { opacity: 0.9; }

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

@media (min-width: 36em) {
  .galleri__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 56.25em) {
  .galleri__liste--3,
  .galleri__liste--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Lysboksen: <dialog>, sort bakgrunn bak, bildet så stort det får plass */
.galleri__lysboks {
  width: min(100% - 2 * var(--sidemarg), 72rem);
  max-height: calc(100dvh - 2 * var(--space-sm));
  padding: var(--space-md);
  border: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  overflow: auto;
}

.galleri__lysboks::backdrop { background: color-mix(in srgb, var(--color-ink) 85%, transparent); }

.galleri__stort { margin: 0; }

.galleri__stort-img {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 14rem);
  height: auto;
  object-fit: contain;
  background: var(--color-surface-deep);
}

.galleri__stort-tekst { margin-top: var(--space-xs); font-size: 1rem; }

.galleri__teller {
  margin-top: var(--space-sm);
  font-size: var(--text-label);
  font-weight: 500;
}

.galleri__knapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.galleri__knapper [data-galleri-lukk] { margin-left: auto; }

/* ── 3 Sitat ───────────────────────────────────────── */
.sitatblokk__rutenett {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.sitatblokk__figur { margin: 0; }
.sitatblokk__figur > * + * { margin-top: var(--space-md); }

.sitatblokk__sitat { margin: 0; }

.sitatblokk__sitat p {
  max-width: 28ch;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  hyphens: manual;
  overflow-wrap: break-word;
}

.sitatblokk__kilde {
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
}

.sitatblokk__hvem { font-weight: 500; }

.sitatblokk__lenke {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--lenke);
  font-weight: 600;
}

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

.sitatblokk__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (min-width: 56.25em) {
  .sitatblokk.har-bilde .sitatblokk__rutenett { grid-template-columns: 7fr 5fr; gap: var(--space-2xl); }
}

/* ── 4 Video ───────────────────────────────────────── */
.video { max-width: 60rem; }

.video__fasade,
.video__ramme {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.video__fasade {
  --element: var(--color-primary-light);
  --fokus: var(--color-ink);
  align-content: end;
  gap: var(--space-sm);
  padding: var(--space-md);
  overflow: hidden;
  color: var(--color-surface);
  text-decoration: none;
}

.video__element {
  --el: 70%;
  top: 0;
  right: 0;
  translate: 35% -20%;
}

.video__spill {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--color-accent);
  color: var(--color-ink);
}

.video__spill svg { width: 1.75rem; height: 1.75rem; }

.video__tekst { position: relative; display: grid; gap: var(--space-xs); }

.video__tittel {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.video__meta { font-size: var(--text-label); font-weight: 500; }

.video__fasade:hover .video__tittel { text-decoration: underline; text-decoration-thickness: 2px; }

.video__beskrivelse { margin-top: var(--space-sm); }

.videoseksjon__rutenett { display: grid; gap: var(--space-lg); }
.videoseksjon__tekst > * + * { margin-top: var(--space-sm); }

@media (min-width: 48em) {
  .video__fasade { padding: var(--space-lg); }
}

/* ── 5 Nøkkeltall ──────────────────────────────────── */
.fakta__tittel { font-size: var(--text-h3); }

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

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

.fakta__verdi {
  max-width: none;
  margin-top: 0.25rem;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

/* ── 6 Topp med foto, og tekst og bilde ────────────── */
.hero-foto__rutenett,
.tekst-bilde__rutenett {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.hero-foto__tekst > * + *,
.tekst-bilde__tekst > * + * { margin-top: var(--space-md); }

.hero-foto__tittel {
  color: var(--color-primary);
  font-size: var(--text-hero);
  line-height: 1.02;
  letter-spacing: -0.03em;
  hyphens: manual;
  overflow-wrap: break-word;
}

.hero-foto__bilde,
.tekst-bilde__bilde { margin: 0; }

.hero-foto__img,
.tekst-bilde__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--color-surface-deep);
}

.hero-foto__kreditt,
.tekst-bilde__kreditt {
  margin-top: var(--space-xs);
  font-size: var(--text-small);
  font-weight: 500;
}

@media (min-width: 56.25em) {
  .hero-foto--ved.har-bilde .hero-foto__rutenett { grid-template-columns: 5fr 7fr; gap: var(--space-2xl); }
  .tekst-bilde.har-bilde .tekst-bilde__rutenett { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .tekst-bilde--hoyre .tekst-bilde__bilde { order: 2; }
}

/* ── 7 Lydprøve og prosjektliste ───────────────────── */
.lydklipp__indre > * + * { margin-top: var(--space-md); }

.lydklipp__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.lydklipp__liste > li { max-width: none; }

.prosjektliste > .container > h2 { margin-bottom: var(--space-lg); }

.prosjektliste__lenker > li { max-width: none; border-bottom: 1px solid var(--line); }

.prosjektliste__lenker a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: var(--space-xs);
  font-weight: 600;
}