/**
 * tillitsvalgt.css – Sidespesifikke stiler for tillitsvalgt-landingsside
 * Bibliotekarforbundet 2026
 *
 * Bygger på bli-medlem.css (gjenbruker .bm-cluster, .bm-faq, .bf-kontaktboks)
 * og legger til .tv-* for tillitsvalgt-eksklusive seksjoner.
 *
 * Merkevarefarge: Aerlig rosa (profilhåndbok – tillitsvalgt-materiell).
 */

/* ── Hero ───────────────────────────────────────── */

/* Overrider .bf-hero (gul) med Likevekt lys rosa – dempet variant av
 * tillitsvalgt-merkevarefargen. Primær/dempet-forholdet: hero bruker
 * den dempede varianten, mens fokuserte elementer lenger ned (nummer-
 * sirkler, hovedtillitsvalgt-boks, kontakt) bruker Aerlig for full
 * merkevarekraft. Matcher seksjonsvariant-regelen i designsystemet. */
.tv-hero {
  background: var(--bf-aerlig);
}

/* Mindre illustrasjon enn standard hero – den BF-illustrerte personen
 * på tillitsvalgt-siden er proporsjonelt høyere enn forsidens motiv og
 * dytter hero-seksjonen unødvendig høyt. Skaleres ned ~20 % på begge
 * viewports. */
.tv-hero .bf-hero__illustration {
  width: 280px;
}

@media (max-width: 768px) {
  .tv-hero .bf-hero__illustration {
    width: 200px;
  }
}

/* Sosialt bevis – samme stil som .bm-hero__social */
.tv-hero .bf-hero__subtitle {
  margin-bottom: var(--bf-space-4);
}

.tv-hero__social {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  line-height: 1.5;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-8);
  padding-left: var(--bf-space-5);
  position: relative;
  max-width: none;
}

.tv-hero__social::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 9px;
  height: 9px;
  background: var(--bf-sort);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
}

.tv-hero__social strong {
  font-weight: var(--bf-weight-bold);
}

/* ── Akutt-hjelp-boks (plassert høyt) ─────────────
 * Rød pulserende aksent som visuell alarm – tillitsvalgte i krise
 * skal ikke lete. Kontrastert mot rolig rosa hero, fungerer som
 * «nødlinje» med klikkbar telefon/e-post.
 */

.tv-akutt {
  background: var(--bf-hvit);
  padding: var(--bf-space-16) 0 var(--bf-space-8);
}

.tv-akutt__boks {
  --cut: var(--bf-corner-cut-lg);
  background: var(--bf-balanse);
  color: var(--bf-sort);
  /* 32 px all-sides matcher .bf-lenkekort + .bf-kontaktboks (konsistent
   * boks-luft på Tillitsvalgt-siden). Tidligere 40 px var et hakk
   * mer prominent enn nabokortene – nå likt gjennomgående. */
  padding: var(--bf-space-8);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--bf-space-10);
  align-items: center;
  border-radius: 1px;
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

@media (max-width: 768px) {
  .tv-akutt__boks {
    grid-template-columns: 1fr;
    padding: var(--bf-space-8);
    gap: var(--bf-space-6);
  }
}

.tv-akutt__kicker {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-3);
}

.tv-akutt__heading {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-32);
  font-weight: var(--bf-weight-medium);
  line-height: 1.1;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-4);
  max-width: 18ch;
}

.tv-akutt__lead {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.75);
  margin: 0;
  max-width: 52ch;
}

.tv-akutt__lenker {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-3);
}

/* Kontakt-lenker på akutt-boksen: hvit bakgrunn i hvile, Energi gul
 * ved hover/fokus. Begge boksene (Ring + Skriv) deler utseende –
 * hierarkiet ligger i label-teksten, ikke i fargen.
 *
 * MD cut (20 px) – mellomstore kort fortjener tydeligere signatur
 * enn standard 10 px uten å bli så stor som paneler. Flat rektangel
 * i hvile, cut corner ved hover (§ 4c). */
.tv-akutt__lenke {
  --cut: var(--bf-corner-cut-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--bf-space-4) var(--bf-space-5);
  background: var(--bf-hvit);
  color: var(--bf-sort);
  text-decoration: none;
  border-radius: 1px;
  transition: background var(--bf-transition-fast),
              clip-path var(--bf-transition-fast);
}

.tv-akutt__lenke:hover,
.tv-akutt__lenke:focus-visible {
  background: var(--bf-energi);
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.tv-akutt__lenke-label {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

.tv-akutt__lenke-verdi {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xl);
  font-weight: var(--bf-weight-bold);
}

.tv-akutt__lenke-tid {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  opacity: 0.8;
}

/* ── Segmentering: 3 kort ─────────────────────────
 * Flat i hvile, cut corner på hover/fokus – matcher qbox/portal
 * interaksjonsmønster. Anker-lenker internt på siden.
 */

.tv-segment {
  background: var(--bf-balanse);
  padding: var(--bf-space-20) 0;
}

.tv-segment__header {
  max-width: 640px;
  margin-bottom: var(--bf-space-10);
}

.tv-segment__kicker {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-3);
}

.tv-segment__heading {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-40);
  font-weight: var(--bf-weight-medium);
  line-height: 1.1;
  margin-bottom: var(--bf-space-4);
}

.tv-segment__lead {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-lg);
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
  max-width: 56ch;
}

.tv-segment__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bf-space-5);
}

@media (max-width: 900px) {
  .tv-segment__grid {
    grid-template-columns: 1fr;
  }
}

/* 2-lags kortmønster: ytre lag = kant-farge, ::before = innfyll.
 * Grunnen er at `border` ikke følger `clip-path` – kanten forsvinner
 * på cut-diagonalen ved hover. Dette mønsteret løser begge tilstander
 * med én mekanisme: flat i hvile, cut corner på hover.
 *
 * Se docs/design-system.md § 5 for kanonisk regel og mal-utdrag. */
.bf-lenkekort {
  --cut: var(--bf-corner-cut-lg);
  --outer: rgba(0, 0, 0, 0.1);
  --inner: var(--bf-hvit);
  background: var(--outer);
  padding: var(--bf-space-8);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--bf-sort);
  border-radius: 1px;
  position: relative;
  isolation: isolate;
  transition: clip-path var(--bf-transition-fast);
}

.bf-lenkekort::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--inner);
  z-index: -1;
  transition: background var(--bf-transition-fast),
              clip-path var(--bf-transition-fast);
}

.bf-lenkekort:hover,
.bf-lenkekort:focus-visible {
  --inner: var(--bf-balanse);
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

/* Indre lag: cut redusert med 0.6 px gir uniform 1 px kanttykkelse
 * også langs diagonalen (samme formel som .bf-nyheter__card). */
.bf-lenkekort:hover::before,
.bf-lenkekort:focus-visible::before {
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - (var(--cut) - 0.6px) - 1px),
    calc(100% - 0.71px) calc(100% - (var(--cut) - 0.6px) + 0.71px),
    calc(100% - (var(--cut) - 0.6px) + 0.71px) calc(100% - 0.71px),
    calc(100% - (var(--cut) - 0.6px) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bf-lenkekort__kicker {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: var(--bf-space-2);
}

.bf-lenkekort__heading {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-28);
  font-weight: var(--bf-weight-medium);
  line-height: 1.1;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-3);
}

.bf-lenkekort__desc {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
  margin: 0 0 var(--bf-space-6);
}

.bf-lenkekort__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-sort);
}

.bf-lenkekort__cta svg {
  width: 20px;
  height: 7px;
  transition: transform var(--bf-transition-fast);
}

.bf-lenkekort:hover .bf-lenkekort__cta svg,
.bf-lenkekort:focus-visible .bf-lenkekort__cta svg {
  transform: translateX(6px);
}

/* ── Ny som tillitsvalgt: 4-stegs guide ──────────── */

.tv-ny {
  background: var(--bf-hvit);
  padding: var(--bf-space-20) 0;
  scroll-margin-top: var(--bf-header-height);
}

.tv-ny__header {
  max-width: 640px;
  margin-bottom: var(--bf-space-10);
}

.tv-ny__kicker {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-3);
}

.tv-ny__heading {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-40);
  font-weight: var(--bf-weight-medium);
  line-height: 1.1;
  margin-bottom: var(--bf-space-4);
  max-width: 22ch;
}

.tv-ny__lead {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-lg);
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
  max-width: 60ch;
}

.tv-steg {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-5);
  max-width: 780px;
}

.tv-steg__punkt {
  display: flex;
  gap: var(--bf-space-5);
  align-items: flex-start;
}

/* Nummersirkel – matcher .bm-step__num fra bli-medlem-siden (36 × 36,
 * Akzidenz bold 16 px, 2-lags outline). Bruker Aerlig inner for
 * tillitsvalgt-tematikk istedenfor Energi. */
.tv-steg__num {
  --cut: var(--bf-corner-cut);
  --outer: var(--bf-sort);
  --inner: var(--bf-aerlig);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--outer);
  color: var(--bf-sort);
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-bold);
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.tv-steg__num::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  background: var(--inner);
  z-index: -1;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - (var(--cut) - 0.88px) - 1px),
    calc(100% - 0.71px) calc(100% - (var(--cut) - 0.88px) + 0.71px),
    calc(100% - (var(--cut) - 0.88px) + 0.71px) calc(100% - 0.71px),
    calc(100% - (var(--cut) - 0.88px) - 1px) 100%,
    0 100%
  );
}

.tv-steg__tekst {
  flex: 1;
  padding-top: 4px;
}

.tv-steg__tittel {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-2);
}

.tv-steg__tekst p {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.8);
  margin: 0;
  max-width: 62ch;
}

.tv-steg__tekst a {
  color: var(--bf-sort);
  font-weight: var(--bf-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tv-steg__tekst a:hover {
  color: var(--bf-levende);
}

/* ── Ressurser-seksjon (gjenbruker .bm-cluster) ─── */

.tv-ressurser {
  background: var(--bf-hvit);
  padding: var(--bf-space-20) 0;
  scroll-margin-top: var(--bf-header-height);
}

.tv-ressurser__header {
  max-width: 640px;
  margin-bottom: var(--bf-space-10);
}

.tv-ressurser__kicker {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-3);
}

.tv-ressurser__heading {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-40);
  font-weight: var(--bf-weight-medium);
  line-height: 1.1;
  margin-bottom: var(--bf-space-4);
  max-width: 22ch;
}

.tv-ressurser__lead {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-lg);
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
  max-width: 56ch;
}

.tv-ressurser__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bf-space-6);
  margin-bottom: var(--bf-space-8);
}

@media (max-width: 768px) {
  .tv-ressurser__grid {
    grid-template-columns: 1fr;
  }
}

.tv-ressurser__les-mer {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
}

.tv-ressurser__les-mer a {
  color: var(--bf-sort);
  font-weight: var(--bf-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tv-ressurser__les-mer a:hover {
  color: var(--bf-levende);
}

/* Lenker inne i cluster-bullets skal synes som lenker */
.bm-cluster__list a {
  color: var(--bf-sort);
  font-weight: var(--bf-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bm-cluster__list a:hover {
  color: var(--bf-levende);
}

/* ── Hovedtillitsvalgt-seksjon ─────────────────────
 * Samme visuelle vekt som tv-segment: Flyt-bakgrunn, header
 * utenfor kortet, og ett subtilt kort under med benefits + CTA.
 * Bruker bf-lenkekort-mønsteret (rgba-outline + hvit inner) i stedet
 * for en heldekkende Aerlig-boks, slik at siden ikke får for
 * mange tunge bokser på rad.
 */

.tv-hovedtv {
  background: var(--bf-balanse);
  padding: var(--bf-space-16) 0;
  scroll-margin-top: var(--bf-header-height);
}

.tv-hovedtv__header {
  max-width: 640px;
  margin-bottom: var(--bf-space-10);
}

.tv-hovedtv__kicker {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-3);
}

.tv-hovedtv__heading {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-40);
  font-weight: var(--bf-weight-medium);
  line-height: 1.1;
  margin-bottom: var(--bf-space-4);
}

.tv-hovedtv__lead {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-lg);
  line-height: 1.55;
  color: var(--bf-sort);
  max-width: 62ch;
  margin: 0;
}

/* Subtil kort-wrapper: 1 px rgba-outline rundt hvit flate,
 * samme signatur som bf-lenkekort i hvile. Ingen cut corner her
 * siden dette ikke er en klikkbar lenke. */
.tv-hovedtv__kort {
  --outer: rgba(0, 0, 0, 0.1);
  --inner: var(--bf-hvit);
  background: var(--outer);
  /* 32 px all-sides matcher bf-lenkekort + tv-akutt + bf-kontaktboks. */
  padding: var(--bf-space-8);
  border-radius: 1px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--bf-space-10);
  align-items: center;
}

.tv-hovedtv__kort::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--inner);
  z-index: -1;
}

@media (max-width: 768px) {
  .tv-hovedtv__kort {
    grid-template-columns: 1fr;
    /* Behold 32 px all-sides på mobil – konsistent med bf-lenkekort. */
    padding: var(--bf-space-8);
    gap: var(--bf-space-6);
  }
}

.tv-hovedtv__liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-3);
}

.tv-hovedtv__liste li {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  line-height: 1.5;
  color: var(--bf-sort);
  padding-left: var(--bf-space-5);
  position: relative;
}

.tv-hovedtv__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 9px;
  height: 9px;
  background: var(--bf-sort);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
}

/* ── Aktuelt for tillitsvalgte ──────────────────── */

.tv-aktuelt {
  /* Harmoni (lys grønn) – Aktuelt-kategorifargen i dempet form. Skiller
   * seksjonen fra FAQ-blokken under (Balanse) og kobler semantisk til
   * Aktuelt-grid på forsiden, der nyhetskort også går Harmoni → Levende. */
  background: var(--bf-harmoni);
  padding: var(--bf-space-16) 0;
}

.tv-aktuelt__header {
  margin-bottom: var(--bf-space-8);
}

.tv-aktuelt__kicker {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-3);
}

.tv-aktuelt__heading {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-40);
  font-weight: var(--bf-weight-medium);
  line-height: 1.1;
  margin: 0;
}

.tv-aktuelt__liste {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--bf-space-8);
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 820px;
}

.tv-aktuelt__sak {
  padding: var(--bf-space-5) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tv-aktuelt__sak:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.tv-aktuelt__meta {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.7);
  margin: 0 0 var(--bf-space-2);
  display: flex;
  gap: var(--bf-space-3);
  align-items: center;
}

.tv-aktuelt__meta time {
  font-variant-numeric: tabular-nums;
}

.tv-aktuelt__tag {
  background: var(--bf-aerlig);
  color: var(--bf-sort);
  padding: 2px 10px;
  font-weight: var(--bf-weight-medium);
  letter-spacing: 0.04em;
  text-transform: none;
  --cut: 7px;
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.tv-aktuelt__tittel {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xl);
  font-weight: var(--bf-weight-bold);
  line-height: 1.25;
  margin: 0 0 var(--bf-space-2);
}

.tv-aktuelt__tittel a {
  color: var(--bf-sort);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--bf-transition-fast);
}

.tv-aktuelt__tittel a:hover {
  text-decoration-color: var(--bf-sort);
}

.tv-aktuelt__body {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.75);
  margin: 0;
  max-width: 60ch;
}

.tv-aktuelt__mer {
  margin: 0;
}

.tv-aktuelt__mer a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-sort);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--bf-transition-fast);
}

.tv-aktuelt__mer a:hover {
  text-decoration-color: var(--bf-sort);
}

.tv-aktuelt__mer svg {
  width: 20px;
  height: 7px;
  transition: transform var(--bf-transition-fast);
}

.tv-aktuelt__mer a:hover svg {
  transform: translateX(4px);
}

/* ── Responsivt ─────────────────────────────────── */

@media (max-width: 900px) {
  .tv-akutt,
  .tv-segment,
  .tv-ny,
  .tv-ressurser,
  .tv-hovedtv,
  .tv-aktuelt {
    padding: var(--bf-space-12) 0;
  }

  .tv-segment__heading,
  .tv-ny__heading,
  .tv-ressurser__heading,
  .tv-aktuelt__heading {
    font-size: var(--bf-text-3xl);
  }

  .tv-akutt__heading,
  .tv-hovedtv__heading {
    font-size: var(--bf-text-28);
  }
}