/* _rit.css — stil for Rydd i Tide-modulene.
 *
 * Bare det Tailwind-bygget i klonen ikke har ferdigkompilerte klasser for:
 * den grønne gradienten i seksjon 5, regionkartet, stolpene i år-for-år-grafen,
 * og markøren for data som mangler. Ingenting her overstyrer Norma-layouten.
 *
 * Farger er DES-003 Rydd i Tide:
 *   skogsgrønn  #00371A   sjøblå      #97D2E1
 *   frisk skog  #9FD4B6   laks        #FACDCB
 */

/* Slør bak teksten i «Hentet fra kysten i dag»-boksen. Normas bakgrunnsbilde
   var mørkt der teksten står; kystbildet er lyst, og den grønne teksten trengte
   en renere flate. Samme virkemiddel som boksens mobilvariant alt bruker. */
.rit-scrim-boks {
  background-image: linear-gradient(
    100deg,
    rgb(255 255 255 / 0.94) 0%,
    rgb(255 255 255 / 0.82) 30%,
    rgb(255 255 255 / 0.35) 52%,
    rgb(255 255 255 / 0) 68%
  );
}

/* ── Seksjon 5: grønt slør i stedet for Normas svarte ───────────────────── */
.rit-scrim-green {
  /* Mørkt, nøytralt slør med bare et hint av skogsgrønn — teksten leses uansett. */
  background-image: linear-gradient(
    to right,
    rgb(8 24 16 / 0.62) 0%,
    rgb(8 24 16 / 0.42) 50%,
    rgb(8 24 16 / 0.3) 100%
  );
}

/* ── Regionkartet ───────────────────────────────────────────────────────── */
/* Klikk på en region zoomer kartet inn (viewBox animeres i _rit.js) og legger
   tallene som overlay rundt regionen, med tynne ledelinjer. Kartet i seg selv
   — farger, flater, bypunkter — er uendret. */
.rit-map {
  display: block;
  width: 100%;
  height: auto;
  /* Zoomet innhold skal klippes av rammen, ikke renne ut i båndet. */
  overflow: hidden;
}

.rit-map .rit-region {
  fill: #9fd4b6;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linejoin: round;
  /* Hvite grenser holder 2,5 px uansett zoomnivå. */
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  outline: none;
  transition:
    fill 180ms cubic-bezier(0.2, 0, 0, 1),
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Zoomet tilstand: resten av landet tones ned, SVG-tekst går bort (HTML-
   overlayet tar over), bypunkter utenfor regionen dempes. */
.rit-map .rit-region-label,
.rit-map .rit-city text,
.rit-map .rit-city circle {
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rit-map.is-zoomed .rit-region:not(.is-active) { fill: #e3e9e5; pointer-events: none; }
/* Svalbard forstyrrer når en fastlandsregion er valgt: skjul øygruppa helt. */
.rit-map.is-zoomed .rit-region:not(.is-active)#region-svalbard { opacity: 0; }
/* Innlandet: tegnes som land, men er ikke en programregion og kan ikke klikkes. */
.rit-map .rit-innland { fill: #9fd4b6; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.rit-map.is-zoomed .rit-innland { fill: #e3e9e5; }
.rit-map.is-zoomed .rit-region-label,
.rit-map.is-zoomed .rit-city text { opacity: 0; }
.rit-map.is-zoomed .rit-city:not(.is-active) circle { opacity: 0; }

/* Overlay-teksten ligger over kartet og fader inn når zoomen er ferdig.
   Ingen bokser, ingen linjer — frie blokker rett på flaten, som i referansen. */
.rit-overlay,
.rit-lukk {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 220ms;
}
[data-rit-kart].is-zoomed .rit-overlay,
[data-rit-kart].is-zoomed .rit-lukk {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.rit-lukk { pointer-events: auto; }
.rit-o { max-width: 46%; }
.rit-fakta { max-width: 30%; pointer-events: auto; }
.rit-tall { max-width: 34%; }

/* Kartboksen er 30rem i fullvisning og vokser til hele rammen i zoom, med
   fast høyde — kartet «åpner seg» sideveis mens viewBox animeres. */
.rit-kartboks { transition: max-width 460ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-rit-kart].is-zoomed .rit-kartboks,
[data-rit-kart].is-zooming .rit-kartboks { max-width: 100%; }

/* Skalafaktor fra JS (viewBox-bredde / start), så bypunktene holder
   pikselstørrelse uansett zoom. */
.rit-map { --rit-skala: 1; }

/* Små skjermer: blokkene stables under kartet i stedet for å plasseres rundt. */
@media (max-width: 40rem) {
  /* Kartet krymper når en region er valgt, så tallene kommer høyere opp. */
  [data-rit-kart].is-zoomed .rit-map,
  [data-rit-kart].is-zooming .rit-map { height: 13rem; }

  /* Tallene som en liste: etikett til venstre, verdi til høyre, én rad per
     nøkkeltall med tynn strek mellom. Erstatter de frie blokkene fra desktop. */
  .rit-overlay { position: static; display: block; padding-top: 0.5rem; }
  .rit-o {
    position: static !important; inset: auto !important; max-width: none;
    display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: start;
    padding: 0.8rem 0; border-top: 1px solid var(--color-line);
  }
  .rit-o > :first-child { grid-column: 1; align-self: center; }
  .rit-o > :not(:first-child) { grid-column: 2; justify-self: end; text-align: right; margin-top: 0; }
  .rit-o > .flex { justify-content: flex-end; }
  .rit-o > :nth-child(n + 3) { margin-top: 0.15rem; }
  /* Region-raden: navnet mindre, fylkene under. */
  [data-rit-o="region"] [data-rit-f-navn] { font-size: 1.375rem; }
  [data-rit-o="region"] [data-rit-f-fylker] { max-width: 20ch; }
  [data-rit-o="tall"] [data-rit-f-tonn] { font-size: 1.75rem; letter-spacing: -0.02em; }
  /* Ryddeaktør som egen rad, likt «Region» og «Tonn ryddet»: strek over,
     liten etikett til venstre, navnet til høyre. */
  .rit-o.rit-tall > .rit-aktor-linje {
    grid-column: 1 / -1; justify-self: stretch; text-align: left;
    display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center;
    margin: 0.8rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--color-line);
  }
  .rit-o.rit-tall > .rit-aktor-linje > [data-rit-f-aktoretikett] {
    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em;
  }
  .rit-o.rit-tall > .rit-aktor-linje > [data-rit-f-aktor] {
    justify-self: end; text-align: right; font-size: 1rem;
  }
  .rit-o.rit-tall > .rit-aktor-linje > [data-rit-f-aktoretikett]::after { content: none; }
  
  [data-rit-o-by], [data-rit-testpille] { display: none; }
}

.rit-hint {
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-rit-kart].is-zoomed .rit-hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .rit-map .rit-region,
  .rit-map .rit-region-label,
  .rit-map .rit-city text,
  .rit-map .rit-city circle,
  .rit-overlay, .rit-lukk, .rit-hint, .rit-kartboks { transition: none; }
}

.rit-map .rit-region:hover,
.rit-map .rit-region.is-hover,
.rit-map .rit-region.is-active {
  fill: #97d2e1;
}

.rit-map .rit-region:focus-visible {
  stroke: #00371a;
  stroke-width: 3.5;
}

.rit-map .rit-region-label {
  font-size: 25px;
  font-weight: 700;
  fill: #00371a;
  text-anchor: middle;
  pointer-events: none;
}

/* Bypunkt og bynavn skal aldri fange klikk — de lå usynlige over regionene og ga tekstmarkør. */
.rit-map .rit-city { pointer-events: none; }
.rit-map { user-select: none; -webkit-user-select: none; }
.rit-map .rit-city circle {
  fill: #facdcb;
  stroke: #00371a;
  stroke-width: 1.6;
  r: 7;
}

.rit-map .rit-city text {
  font-size: 19px;
  fill: #00371a;
}

/* ── Markør for data som mangler ────────────────────────────────────────────
   Alt som venter på tall, sitater, lenker eller API-tilgang er merket
   data-rit-todo. Slett denne blokka for å skjule markeringen, eller søk etter
   data-rit-todo i index.html og _rit.js for å finne alt som gjenstår. */
/* Lenker og knapper beholder attributtet (så de er søkbare) men ikke
   markeringen — stiplet strek under overskrifter og fane-etiketter ble støy. */
[data-rit-todo]:not(a):not(button) {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: #97d2e1;
}

@media print {
  [data-rit-todo]:not(a):not(button) {
    text-decoration: none;
  }
}

/* ── Manglende Tailwind-verktøysklasser ─────────────────────────────────────
   Klonens CSS er et uttrekk: den inneholder bare klassene nor.ma faktisk
   brukte. Klassene under er tatt i bruk av Rydd i Tide-innholdet og finnes
   ikke i uttrekket, så de defineres her med samme utdata som Tailwind ville
   gitt. Bruddpunkter følger klonen: sm 40rem, lg 64rem. */

.tracking-\[0\.06em\] { --tw-tracking: .06em; letter-spacing: .06em; }
.max-w-\[30ch\] { max-width: 30ch; }
.h-\[200px\] { height: 200px; }
.h-\[240px\] { height: 240px; }
.w-\[144px\] { width: 144px; }
.w-\[195px\] { width: 195px; }
.p-2\.5 { padding: calc(var(--spacing) * 2.5); }
.rounded-\[12px\] { border-radius: 12px; }
.rounded-\[16px\] { border-radius: 16px; }
.max-w-\[30rem\] { max-width: 30rem; }
.max-w-\[52rem\] { max-width: 52rem; }

@media (min-width: 40rem) {
  .sm\:py-6 { padding-block: calc(var(--spacing) * 6); }
}

/* Fallback bak hero-bildet, i tonale trinn av skogsgrønn. */
.rit-hero-fallback {
  background-image: linear-gradient(180deg, #00371a 0%, #0d5c31 55%, #9fd4b6 100%);
}

/* Hero-slør. Normas hero var en mørk video og klarte seg med et svakt svart
   slør; kystbildet er lyst, så den hvite teksten trenger mer å stå på. Grønn
   tone i stedet for svart, som i seksjon 4. */
.rit-scrim-hero {
  background-image: linear-gradient(
    180deg,
    rgb(0 55 26 / 0.7) 0%,
    rgb(0 55 26 / 0.46) 42%,
    rgb(0 55 26 / 0.34) 72%,
    rgb(0 55 26 / 0.46) 100%
  );
}

/* Karusellen uten ramme: høyden er kortenes egen høyde. */
.h-\[216px\] { height: 216px; }
.h-\[180px\] { height: 180px; }

/* Lenker inne i FAQ-svarene. */
.rit-lenke { text-decoration: underline; text-decoration-color: #97d2e1; text-underline-offset: 3px; transition: text-decoration-color 160ms; }
.rit-lenke:hover { text-decoration-color: #00371a; }

/* Liten sentrert logo nederst i heroen (tar plassen til tonn-pillen). */
.rit-hero-logo { height: 3.25rem; width: auto; filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.25)); }
@media (min-width: 40rem) { .rit-hero-logo { height: 4rem; } }
.pb-0 { padding-bottom: calc(var(--spacing) * 0); }

/* Karusellsporet: snap-punktene tar hensyn til rammens polstring, så første
   kort ligger inntil venstre kant ved lasting og etter hvert klikk. */
.rit-spor { scroll-padding-inline: 0.75rem; }
[data-rit-karusell="mobil"].rit-spor { scroll-padding-inline: 0.625rem; }

/* Bypunktene vises bare når en region er valgt; på hele kartet ble de støy. */
.rit-map .rit-city { transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.rit-map .rit-city { opacity: 0 !important; } /* byene er ikke der det ryddes */

/* «Hentet fra kysten i dag» på mobil: tekst øverst, karusell nederst i samme boks. */
.rit-mobilboks { display: flex; flex-direction: column; }
.rit-mobilspor { position: static; flex: none; margin: 1.25rem 0.75rem 0.75rem; height: 14rem; }
@media (min-width: 40rem) { .rit-mobilspor { margin: 2rem 1rem 1rem; height: 16rem; } }

/* Mobil: overlay-lista tar ikke plass før en region er valgt. */
@media (max-width: 40rem) {
  [data-rit-kart]:not(.is-zoomed) .rit-overlay { display: none; }
}

/* Treffsone for smale regioner (Møre og Romsdal): usynlig, 22 px bred strek
   rundt formen. Skjules i zoom så den ikke fanger «tilbake»-klikk. */
.rit-map .rit-treff { fill: none; stroke: #000; stroke-opacity: 0; stroke-width: 22; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: pointer; }
/* Desktop: bare den smale Møre og Romsdal trenger treffsone. Mobil: alle, og bredere. */
.rit-map .rit-treff:not([data-treff="more-romsdal"]) { pointer-events: none; }
@media (max-width: 40rem) {
  .rit-map .rit-treff { stroke-width: 18; }
  .rit-map .rit-treff:not([data-treff="more-romsdal"]) { pointer-events: stroke; }
  .rit-map.is-zoomed .rit-treff { pointer-events: none; }
}
.rit-map.is-zoomed .rit-treff { pointer-events: none; }

/* ── FAQ: de fire første synlige, resten bak en fade ─────────────────── */
.rit-faq-rest { position: relative; max-height: 4.75rem; overflow: hidden; transition: max-height 480ms cubic-bezier(0.22, 1, 0.36, 1); }
.rit-faq-rest::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(255 255 255 / 0.2), #fff 90%); pointer-events: none; transition: opacity 320ms; }
.rit-faq-rest > :first-child { filter: blur(1.5px); transition: filter 320ms; }
.rit-faq-rest.is-open::after { opacity: 0; }
.rit-faq-rest.is-open > :first-child { filter: none; }
.group[aria-expanded="true"] .group-aria-expanded\:rotate-180 { transform: rotate(180deg); }

/* ── Graf: total mengde søppel plukket ──────────────────────────────── */
.rit-graf-svg { overflow: visible; font-family: inherit; }
.rit-graf-rute { stroke: rgb(0 55 26 / 0.12); stroke-width: 1; }
.rit-graf-akse { font-size: 15px; fill: #4a6b58; }
.rit-graf-akse--y { font-size: 14px; }
.rit-graf-linje { fill: none; stroke: #9fd4b6; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.rit-graf-flate-fyll { fill: rgb(159 212 182 / 0.28); }
.rit-graf-skille { stroke: #00371a; stroke-width: 1.5; stroke-dasharray: 6 6; opacity: 0.7; }
.rit-graf-logo { color: #00371a; cursor: default; outline: none; }
.rit-graf-logo--rn:focus-visible { outline: 2px solid #97d2e1; outline-offset: 6px; border-radius: 6px; }
.rit-graf-logotekst { font-size: 22px; font-weight: 700; fill: #00371a; letter-spacing: -0.01em; }
.rit-graf-mark-linje { stroke: #00371a; stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.6; }
.rit-graf-mark-prikk { fill: #fff; stroke: #00371a; stroke-width: 2.5; }
.rit-graf-mark { transition: opacity 120ms; pointer-events: none; }
.rit-graf-tips { position: absolute; z-index: 2; transform: translate(14px, -50%); pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px; background: #00371a; color: #fff; font-size: 0.8125rem; line-height: 1.3; white-space: nowrap; box-shadow: 0 8px 24px rgb(0 55 26 / 0.18); }
.rit-graf-tips.is-venstre { transform: translate(calc(-100% - 14px), -50%); }
.rit-graf-tips-dato { opacity: 0.75; font-size: 0.75rem; }
.rit-graf-tips-tall { font-weight: 600; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.rit-graf-tips--rn { left: 18%; top: 4%; transform: none; white-space: normal; max-width: 22rem; }
@media (max-width: 40rem) {
  .rit-graf-akse { font-size: 22px; }
  .rit-graf-akse--y { display: none; }
  .rit-graf-logotekst { font-size: 26px; }
  .rit-graf dl { gap: 1.25rem; }
  .rit-graf-tips--rn { left: 4%; right: 4%; max-width: none; }
}
.mb-16 { margin-bottom: calc(var(--spacing) * 16); }
@media (min-width: 40rem) { .sm\:mb-20 { margin-bottom: calc(var(--spacing) * 20); } }

/* ── Bakgrunnsfilmer ─────────────────────────────────────────────────── */
[data-rit-video] { object-position: 50% 50%; background: #00371a; }
/* Kysten-filmen har motivet til venstre: på mobil beskjæres fra venstre kant. */
@media (max-width: 40rem) { .rit-video-venstre { object-position: 0% 50%; } }

/* ── «Det vi finner mest av»: plukk-kortet ──────────────────────────── */
.rit-plukk-kort { position: relative; width: 100%; aspect-ratio: 4 / 5; }
@media (min-width: 64rem) { .rit-plukk-kort { max-width: 300px; } }
.rit-plukk-bilde, .rit-plukk-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.rit-plukk-bilde { transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms cubic-bezier(0.22, 1, 0.36, 1); z-index: 1; }
.rit-plukk-video { z-index: 0; opacity: 0; }
.rit-plukk-kort.is-frys .rit-plukk-bilde { transition: none !important; opacity: 1 !important; filter: none !important; }
.rit-plukk-kort.is-spiller .rit-plukk-video { opacity: 1; }
.rit-plukk-kort.is-spiller .rit-plukk-bilde { opacity: 0; transition-duration: 0ms; }
/* Tau: blur-overgang fra hansken til filmen */
.rit-plukk-kort.is-spiller.is-blur .rit-plukk-bilde { opacity: 0; filter: blur(14px); transition-duration: 420ms; }
.rit-plukk-knapp {
  white-space: nowrap;
  position: absolute; left: 50%; bottom: 1rem; z-index: 3; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1.05rem .55rem .55rem;
  border-radius: 999px; background: rgb(255 255 255 / .92); color: #00371a; font-size: .9375rem; font-weight: 600;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / .45); border: 1px solid rgb(0 55 26 / .12); cursor: pointer;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 160ms;
}
.rit-plukk-knapp:hover { transform: translateX(-50%) scale(1.04); background: #fff; }
.rit-plukk-knapp:active { transform: translateX(-50%) scale(.97); }
.rit-plukk-knapp:focus-visible { outline: 2px solid #97d2e1; outline-offset: 3px; }
.rit-plukk-ikon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #00371a; color: #fff; animation: rit-puls 2.2s ease-in-out infinite; }
@keyframes rit-puls { 0%, 100% { box-shadow: 0 0 0 0 rgb(0 55 26 / .35); } 50% { box-shadow: 0 0 0 9px rgb(0 55 26 / 0); } }
.rit-plukket {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 3; display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem .4rem .5rem; border-radius: 999px; border: 0; background: #00371a; color: #fff; font-size: .8125rem; font-weight: 600;
  box-shadow: 0 6px 20px -8px rgb(0 0 0 / .4); animation: rit-inn 420ms cubic-bezier(0.22, 1, 0.36, 1) both; cursor: pointer; white-space: nowrap;
  transition: background-color 160ms;
}
.rit-plukket:hover, .rit-plukket:focus-visible { background: #0d5c31; outline: none; }
.rit-plukket:focus-visible { box-shadow: 0 0 0 3px rgb(151 210 225 / .8); }
.rit-plukket-ikon { position: relative; display: inline-flex; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #9fd4b6; color: #00371a; align-items: center; justify-content: center; }
.rit-plukket-ikon svg { position: absolute; transition: opacity 180ms, transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.rit-plukket-pil { opacity: 0; transform: rotate(-90deg) scale(.7); }
.rit-plukket:hover .rit-plukket-hake, .rit-plukket:focus-visible .rit-plukket-hake { opacity: 0; transform: scale(.6); }
.rit-plukket:hover .rit-plukket-pil, .rit-plukket:focus-visible .rit-plukket-pil { opacity: 1; transform: none; }
@keyframes rit-inn { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.rit-fane-hake { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; margin-left: .15rem; border-radius: 50%; background: #9fd4b6; color: #00371a; }
[aria-selected="true"] .rit-fane-hake { background: #97d2e1; }

/* Mobil: bilde og faner må ses samtidig. Flat ut kolonnene og bruk order:
   overskrift → kort (liggende, lav) → faner → tekst. */
@media (max-width: 63.98rem) {
  .rit-funn-venstre, .rit-funn-topp { display: contents; }
  .rit-funn-grid { gap: 1.25rem; }
  .rit-plukk-kolonne { order: 1; }
  .rit-funn-faner { order: 2; margin-top: 0; }
  .rit-funn-panel { order: 3; margin-top: .5rem; }
  .rit-plukk-kort { aspect-ratio: 16 / 10; max-width: none; border-radius: 28px; }
  .rit-plukk-knapp { font-size: .875rem; }
}
@media (max-width: 40rem) { .rit-plukk-kort { aspect-ratio: 4 / 3; } }
.lg\:grid-cols-\[1fr_300px\] { }
@media (min-width: 64rem) { .lg\:grid-cols-\[1fr_300px\] { grid-template-columns: 1fr 300px; } }

/* Etikett + navn på én linje */
.rit-aktor-linje { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; }
[data-rit-f-aktoretikett]::after { content: ":"; }

/* ── Historien fra regionen (fakta-blokka i kartet) ──────────────────── */
.rit-fakta {
  padding: .85rem 1rem 1rem; border-radius: 1.1rem; background: rgb(255 255 255 / .78); border: 1px solid var(--color-line);
  box-shadow: 0 12px 30px -20px rgb(0 55 26 / .25); backdrop-filter: blur(6px);
}
.rit-tall .rit-aktor-linje { display: block; }
.rit-fakta-topp { display: inline-flex; align-items: center; gap: .4rem; }
.rit-fakta-prikk { width: .45rem; height: .45rem; border-radius: 50%; background: #facdcb; }
.rit-fakta-tekst { max-width: 24ch; }
.rit-fakta-ramme {
  position: relative; display: block; width: 6.5rem; aspect-ratio: 1 / 1; overflow: hidden; pointer-events: auto;
  border-radius: 1.35rem; border: 1px solid var(--color-line); background: #fff;
  box-shadow: 0 18px 40px -22px rgb(0 0 0 / .35); text-decoration: none;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms;
}
a.rit-fakta-ramme:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -22px rgb(0 0 0 / .4); }
a.rit-fakta-ramme:focus-visible { outline: 2px solid #97d2e1; outline-offset: 3px; }
.rit-fakta-bilde { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); }
a.rit-fakta-ramme:hover .rit-fakta-bilde { transform: scale(1.04); }
.rit-fakta-spill {
  position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .65rem .3rem .5rem; border-radius: 999px; background: rgb(255 255 255 / .92); color: #00371a;
  font-size: .6875rem; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 14px -6px rgb(0 0 0 / .4);
}
.rit-fakta-ramme--stille { aspect-ratio: 1 / 1; }
.rit-fakta.is-todo .rit-fakta-tekst { color: var(--color-ink-3, #6b7f73); font-style: italic; }
@media (max-width: 40rem) {
  .rit-o.rit-tall { display: block !important; }
  .rit-o.rit-tall > :not(:first-child) { grid-column: auto; justify-self: auto; text-align: left; }
  .rit-o.rit-fakta { max-width: none; display: block !important; }
  .rit-o.rit-fakta > :not(:first-child) { grid-column: auto; justify-self: auto; text-align: left; margin-top: .4rem; }
  .rit-fakta-tekst { max-width: none; }
  .rit-fakta-ramme { width: 6rem; margin-top: .75rem; }
  .rit-o.rit-fakta { margin-top: .75rem; }
}

/* Fanene i «Det vi finner mest av»: maks to kategorier per rad på desktop. */
.rit-brekk { display: none; }
@media (min-width: 64rem) {
  /* Tvunget linjeskift etter andre fane; boksene beholder sin egen bredde. */
  .rit-brekk { display: block; flex-basis: 100%; height: 0; }
}

/* ── «Siste fra kysten»: karusell med store kort ─────────────────────── */
.rit-saker { scroll-padding-inline: 0; }
.rit-sak { flex: 0 0 min(100%, 34rem); scroll-snap-align: start; }
@media (max-width: 40rem) { .rit-sak { flex-basis: 86%; } }
/* Falmede kanter: viser at det er mer å bla i. Overlegg (ikke mask), så de
   kan tones inn og ut når man begynner å bla. */
.rit-saker-ramme::before, .rit-saker-ramme::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--fade); z-index: 2; pointer-events: none;
  opacity: 1; transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rit-saker-ramme::before { left: 0; background: linear-gradient(to right, #fff, rgb(255 255 255 / 0)); }
.rit-saker-ramme::after  { right: 0; background: linear-gradient(to left, #fff, rgb(255 255 255 / 0)); }
.rit-saker-ramme.is-start::before { opacity: 0; }
.rit-saker-ramme.is-slutt::after  { opacity: 0; }
.rit-saker-ramme { --fade: 5rem; margin-inline: 0; padding-inline: 0; }

/* Inne i nettsiden: headeren er fast (96 px desktop, ~61 px mobilbar), så
   innholdet skyves ned like mye. Klassen settes av page.tsx, ikke lokalt. */
/* Headeren måler 114 px på desktop (topplinje 33 + hovedmeny 81) og 61 px på
   mobil. Seksjonens egen topp-padding (pt-3/pt-4) gir samme luft over
   hero-kortet som det har på sidene. */
.rit-side.rit-i-siden { padding-top: 114px; } /* før JS har målt headeren */
@media (max-width: 1100px) { .rit-side.rit-i-siden { padding-top: 61px; } }

/* Inne i nettsiden skal heroen fylle resten av skjermen under headeren,
   med samme luft i bunn som på sidene. */
.rit-side.rit-i-siden > section:first-child > div { min-height: calc(100svh - 114px - 32px); } /* JS setter eksakt verdi i px */
@media (max-width: 1100px) { .rit-side.rit-i-siden > section:first-child > div { min-height: calc(100svh - 61px - 24px); } }

/* «Presse?»-lenken i avslutningen */
.rit-presse { text-decoration: underline; text-decoration-color: rgb(255 255 255 / .3); text-underline-offset: 4px; transition: color 160ms, text-decoration-color 160ms; }
.rit-presse:hover { color: #fff; text-decoration-color: #fff; }

/* Grafoverskriften på én linje; på smale skjermer får den bryte. */
@media (max-width: 40rem) { .rit-graf h2 { white-space: normal; } }

/* Prosenttegnet bak «58» i stats-kortet: mindre og litt dempet. */
.text-\[0\.6em\] { font-size: .6em; }
.text-paper\/80 { color: rgb(255 255 255 / .8); }

/* ── «Hva er Rydd i Tide?»: bildet er en lenke; hover blurrer bildet og viser en knapp ── */
.rit-kort-bilde img { transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.rit-kort-cta {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateY(6px); z-index: 2;
  display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1rem .5rem .55rem; border-radius: 999px;
  background: rgb(255 255 255 / .94); color: #00371a; font-size: .9375rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / .4); border: 1px solid rgb(0 55 26 / .12);
  opacity: 0; transition: opacity 260ms cubic-bezier(0.22, 1, 0.36, 1), transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rit-kort-cta-ikon { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #00371a; color: #fff; }
.rit-kort-mobil { display: none; }
@media (hover: hover) {
  .group:hover .rit-kort-bilde img { filter: blur(6px) brightness(.85); transform: scale(1.06); }
  .group:hover .rit-kort-cta, .rit-kort-bilde:focus-visible .rit-kort-cta { opacity: 1; transform: translate(-50%, -50%); }
  .rit-kort-bilde:focus-visible { outline: 2px solid #97d2e1; outline-offset: -2px; }
}
/* Berøringsskjermer: ingen hover — en liten lenke under ingressen i stedet. */
@media (hover: none) {
  .rit-kort-mobil { display: inline-flex; }
  .rit-kort-cta { display: none; }
}

/* ── Skjelett: tom, pulserende boks til dataene er satt ─────────────── */
.rit-skjelett { position: relative; }
.rit-skjelett > * { opacity: 0 !important; transition: none; }
.rit-skjelett::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, rgb(255 255 255 / 0) 20%, rgb(255 255 255 / .16) 50%, rgb(255 255 255 / 0) 80%) no-repeat;
  background-size: 220% 100%; animation: rit-skjelett 1.6s ease-in-out infinite;
}
.rit-skjelett--pille { min-width: 12rem; min-height: 2.1rem; }
.rit-skjelett--graf { min-height: 22rem; border-radius: 1.25rem; }
.rit-skjelett--graf::after { background-image: linear-gradient(100deg, rgb(0 55 26 / 0) 20%, rgb(0 55 26 / .07) 50%, rgb(0 55 26 / 0) 80%); }
@keyframes rit-skjelett { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
/* Når skjelettet fjernes fader innholdet inn */
[data-rit-graf] > *, .rounded-2xl.border-white\/15 > *, .rit-skjelett--pille > *, .inline-flex.select-none.bg-white\/15 > * { transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) { .rit-skjelett::after { animation: none; } }
/* Inline-skjelett på kartet: en pulserende stolpe der tallet/navnet kommer */
.rit-skjelett-inline { display: inline-block; min-width: 4.5ch; min-height: .9em; border-radius: .4em; color: transparent !important; background: rgb(0 55 26 / .1); animation: rit-puls-inline 1.4s ease-in-out infinite; vertical-align: baseline; }
[data-rit-f-aktor].rit-skjelett-inline { min-width: 12ch; }
@keyframes rit-puls-inline { 0%, 100% { opacity: .9; } 50% { opacity: .45; } }

/* Skjulte seksjoner (f.eks. «Hentet fra kysten i dag» inntil bilde-API-et er klart) */
section[hidden] { display: none !important; }

.max-w-\[62ch\] { max-width: 62ch; }

/* Bynavnet ved punktet i zoom: skjult, byene er ikke der det ryddes. */
[data-rit-o-by] { display: none !important; }