/* ═══ BASE ═══ */
/* ============================================================
   DEN SØNDERJYSKE GARDE — FUNDAMENT (agent 'base')
   :root token-kontrakt · self-hostede fonte · reset · knapper ·
   .eq equalizer · global reduced-motion. Match til design'ets
   styles.css: -7° skrå kasse, tunge condensed versaler, crimson+blå.
   ============================================================ */

/* ── Self-hostede brand-fonte (woff2, ingen CDN/Google) ─────────────── */
@font-face{ font-family:'Saira Condensed'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/saira-condensed-600.woff2') format('woff2'); }
@font-face{ font-family:'Saira Condensed'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/saira-condensed-700.woff2') format('woff2'); }
@font-face{ font-family:'Saira Condensed'; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/fonts/saira-condensed-800.woff2') format('woff2'); }
@font-face{ font-family:'Saira Condensed'; font-style:normal; font-weight:900; font-display:swap; src:url('/assets/fonts/saira-condensed-900.woff2') format('woff2'); }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/hanken-grotesk-400.woff2') format('woff2'); }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/hanken-grotesk-500.woff2') format('woff2'); }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/hanken-grotesk-600.woff2') format('woff2'); }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/hanken-grotesk-700.woff2') format('woff2'); }

/* ── §D token-kontrakt (DEFINERES HER; alle andre agenter bruger var(--*)) ── */
:root{
  /* FluxCMS-påkrævede (spejler theme.json, ContrastGate-gated) */
  --accent:#C20032; --accent-strong:#99002A; --accent-soft:#FBE6EC; --on-accent:#fff;
  --ink:#0B2A63;    /* OVERSKRIFTER (design blue-dark) */
  --body:#15181F;   /* BRØDTEKST (design ink) */
  --muted:#5A6275; --line:#DCE3EF; --paper:#EFF3FA; --surface:#FFFFFF;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-head:'Saira Condensed','Arial Narrow',sans-serif;
  /* Design-ekstra (blå-brand + skrå-motiv) */
  --blue:#12408D; --blue-dark:#0B2A63; --blue-mid:#1B52B0; --red:#C20032; --red-bright:#E10E45;
  --paper-2:#EFF3FA; --paper-3:#E2EAF6; --wrap:1280px; --pad:clamp(20px,5vw,72px); --skew:-7deg;
  --shadow:0 26px 60px -28px rgba(11,42,99,.55); --shadow-sm:0 12px 30px -18px rgba(11,42,99,.5);
}

/* ── Reset + typografiske grundregler ──────────────────────────────── */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font-body); color:var(--body);
  background:var(--paper); line-height:1.6; font-size:clamp(16px,1.05vw,18px);
  /* clip (ikke hidden): klipper de skæve/fuld-bleed elementer vandret UDEN at gøre
     body til en scroll-container. `overflow-x:hidden` ville (pr. spec) tvinge
     overflow-y:auto → body scroller, window.scrollY fryser på 0, og scroll-headeren
     (nav-scroll.js) ville aldrig udløses. clip bevarer window-scroll. */
  overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
p{ text-wrap:pretty; }
h1,h2,h3,h4{
  font-family:var(--font-head); font-weight:800; line-height:.92;
  margin:0; text-transform:uppercase; letter-spacing:.005em; color:var(--ink);
}
h1{ font-weight:900; }

/* ── Fokus (a11y-gate): crimson ring; hvid på mørke sektioner ───────── */
:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }
.block-hero :focus-visible,
.block-cta :focus-visible,
.quote-rotator :focus-visible,
.site-footer :focus-visible,
.mobile-menu :focus-visible{ outline-color:var(--surface); }

/* ── Bredde-container ──────────────────────────────────────────────── */
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* ── Spring-til-indhold (crimson skrå-boks, skjult → synlig ved fokus) ─ */
.skip-link{
  position:absolute; left:12px; top:-64px; z-index:200;
  background:var(--red); color:var(--surface); font-family:var(--font-head);
  text-transform:uppercase; font-weight:700; letter-spacing:.04em;
  padding:12px 20px; font-size:1.05rem;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

/* ── KNAPPER — crimson skrå-plade (design .btn/.cta-button/.hero-cta) ── */
.btn,
.cta-button,
.hero-cta{
  --bg:var(--red); --fg:var(--surface);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-head); text-transform:uppercase; font-weight:700;
  font-size:1.12rem; letter-spacing:.04em; line-height:1;
  background:var(--bg); color:var(--fg);
  padding:.92em 1.5em; border:0; cursor:pointer; text-align:center;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  transition:transform .15s ease, filter .2s ease;
}
.btn:hover,
.cta-button:hover,
.hero-cta:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn:active,
.cta-button:active,
.hero-cta:active{ transform:translateY(0); }

/* farve-varianter */
.btn--blue{ --bg:var(--blue); }
.btn--blue-dark{ --bg:var(--blue-dark); }
.btn--white{ --bg:var(--surface); --fg:var(--red); }
.btn--ghost{ --bg:transparent; --fg:var(--surface); box-shadow:inset 0 0 0 2.5px currentColor; clip-path:none; }
.btn--ghost:hover{ background:rgba(255,255,255,.12); filter:none; }
.btn--lg{ font-size:1.32rem; padding:1.02em 1.8em; }

/* hero sekundær-CTA = hvid outline på mørk (skrå kant bevaret) */
.hero-cta-secondary{
  --bg:transparent; --fg:var(--surface);
  box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.85);
}
.hero-cta-secondary:hover{ background:rgba(255,255,255,.12); filter:none; }

/* pil-affordance i knapper (fx <span class="ar">) */
.btn .ar,
.cta-button .ar,
.hero-cta .ar{ transition:transform .2s ease; }
.btn:hover .ar,
.cta-button:hover .ar,
.hero-cta:hover .ar{ transform:translateX(4px); }

/* ── .eq — animeret equalizer-kicker (5 bars) før sektions-overskrifter ─ */
.eq{ display:inline-flex; align-items:flex-end; gap:5px; height:30px; margin-bottom:16px; }
.eq i{
  width:6px; height:35%; background:var(--red); border-radius:1px;
  animation:eq 1.7s ease-in-out infinite;
}
.eq i:nth-child(1){ animation-delay:-.90s; }
.eq i:nth-child(2){ animation-delay:-.45s; }
.eq i:nth-child(3){ animation-delay:-.15s; }
.eq i:nth-child(4){ animation-delay:-.70s; }
.eq i:nth-child(5){ animation-delay:-.30s; }
.eq--light i{ background:var(--surface); }
@keyframes eq{ 0%,100%{ height:22%; } 50%{ height:100%; } }

/* ── .eyebrow — tema-erklærede animerede sektions-markører (samme slot som .eq) ──
   Motoren inliner temaets SVG i .eyebrow--<key>; CSP-sikker (animation her, ingen inline-style/JS).
   Farve arves (currentColor): rød på lyse sektioner, hvid på brand/navy-bånd. Reduced-motion dækkes
   af det globale net ovenfor. Hver animation matcher originalens keyframes (kun de rette dele bevæger sig). */
.eyebrow{ display:inline-flex; align-items:center; height:30px; margin-bottom:16px; color:var(--red); }
.eyebrow svg{ height:30px; width:auto; display:block; overflow:visible; }
.block-media-text--brand .eyebrow, .block-media-text--navy .eyebrow{ color:var(--surface); }
.block-media-text .mt-copy .eyebrow{ margin-bottom:14px; }
/* drum: kun de to stik slår (kroppen står stille) */
.eyebrow--drum .stkl{ transform-box:fill-box; transform-origin:28% 100%; animation:stickHitL 1.4s ease-in-out infinite; }
.eyebrow--drum .stkr{ transform-box:fill-box; transform-origin:19% 71%; animation:stickHitR 1.4s ease-in-out .7s infinite; }
/* noder: de to node-grupper bobber uafhængigt */
.eyebrow--notes .n1{ transform-box:fill-box; transform-origin:center; animation:noderBob 2.1s ease-in-out infinite; }
.eyebrow--notes .n2{ transform-box:fill-box; transform-origin:center; animation:noderBob 1.65s ease-in-out .55s infinite; }
/* node / g-nøgle: hele figuren bobber blidt */
.eyebrow--note svg{ transform-box:fill-box; transform-origin:center; animation:notebob 2.4s ease-in-out infinite; }
.eyebrow--gclef svg{ transform-box:fill-box; transform-origin:center; animation:notebob 2.8s ease-in-out infinite; }
/* equalizer: 5 bjælker skalerer op/ned (nu tema-leveret SVG, ikke motor-indbygget) */
.eyebrow--eq rect{ transform-box:fill-box; transform-origin:bottom; animation:eqbar 1.7s ease-in-out infinite; }
.eyebrow--eq rect:nth-child(2){ animation-delay:-.45s; }
.eyebrow--eq rect:nth-child(3){ animation-delay:-.15s; }
.eyebrow--eq rect:nth-child(4){ animation-delay:-.70s; }
.eyebrow--eq rect:nth-child(5){ animation-delay:-.30s; }
/* dannebrog: flaget bølger */
.eyebrow--flag svg{ transform-box:fill-box; transform-origin:10% 50%; animation:wave 3s ease-in-out infinite; }
/* kornet: KUN de 3 ventilknapper trykkes (i rækkefølge, som at spille) */
.eyebrow--cornet .v1{ animation:valvePress 1.5s ease-in-out infinite; }
.eyebrow--cornet .v2{ animation:valvePress 1.5s ease-in-out .2s infinite; }
.eyebrow--cornet .v3{ animation:valvePress 1.5s ease-in-out .4s infinite; }
@keyframes stickHitL{ 0%,65%,100%{ transform:rotate(-14deg); } 30%,48%{ transform:rotate(5deg); } }
@keyframes stickHitR{ 0%,65%,100%{ transform:rotate(14deg); } 30%,48%{ transform:rotate(-5deg); } }
@keyframes noderBob{ 0%,100%{ transform:translateY(2px); } 50%{ transform:translateY(-2px); } }
@keyframes notebob{ 0%,100%{ transform:translateY(3px) scale(.98); } 50%{ transform:translateY(-4px) scale(1.03); } }
@keyframes wave{ 0%,100%{ transform:rotate(-6deg) translateY(1px); } 50%{ transform:rotate(6deg) translateY(-1px); } }
@keyframes valvePress{ 0%,55%,100%{ transform:translate(0,0); } 22%,35%{ transform:translate(1.5px,2.1px); } }
@keyframes eqbar{ 0%,100%{ transform:scaleY(.28); } 50%{ transform:scaleY(1); } }

/* ── Global reduced-motion-net (respekteres på ALLE animationer) ──────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .eq i{ height:60%; }
}

/* ═══ CHROME ═══ */
/* ============================================================
   DEN SØNDERJYSKE GARDE — CHROME
   Layout-skelet + announcement-infobar + header + footer.
   Styler MOTORENS output-klasser (.site-nav/.menu/.infobar/.footer-cols …)
   så de ser ud som Claude Design-handoffen: kongeblå brand-bjælke,
   crimson skrå-kasse-knapper, Saira Condensed versaler.
   KUN var(--*) + rgba()-scrims/skygger. :root + @font-face ejes af agent 'base'.
   ============================================================ */

/* ── Layout-primitiver ─────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); width: 100%; }

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-head); text-transform: uppercase; font-weight: 700;
  letter-spacing: .04em; padding: 12px 20px; font-size: 1.05rem; text-decoration: none;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* Synligt fokus (WCAG 2.4.7) — hvid på mørke brand-flader, ellers crimson. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.site-header :focus-visible, .site-footer :focus-visible,
.infobar :focus-visible, .site-topbar :focus-visible { outline-color: var(--on-accent); }

/* ── Delt skrå-kasse-knap (brand-signatur, genbrugt af chrome) ── */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-head); text-transform: uppercase; font-weight: 700;
  font-size: 1.02rem; letter-spacing: .04em; line-height: 1;
  background: var(--accent); color: var(--on-accent);
  padding: .82em 1.4em; border: 0; cursor: pointer; text-decoration: none;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: transform .15s ease, filter .2s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.btn:active { transform: translateY(0); }

/* ── <main> scaffold: fuld-bredde sektioner vs. begrænset flow-indhold ──
   $content = direkte block-børn. Farve-banderne (hero/cta/quote-rotator) er
   fuld-bleed og styrer selv deres indre bredde; alt andet begrænses til --wrap. */
main#main { display: block; }
main#main > * { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
main#main > .block-hero,
main#main > .block-cta,
main#main > .block-media-text,
main#main > .quote-rotator { max-width: none; padding-inline: 0; }

/* ============================================================
   STICKY-GRUPPE + ANNOUNCEMENT-INFOBAR
   ============================================================ */
.sticky-top { position: sticky; top: 0; z-index: 70; }

.infobar { background: var(--accent); color: var(--on-accent); font-family: var(--font-body); font-size: .92rem; }
.infobar__inner {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 9px var(--pad); min-height: 40px; text-align: center;
}
.infobar__text { font-weight: 600; }
.infobar__link { color: var(--on-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.infobar__link:hover { opacity: .85; }

/* Topmenu (valgfri slot) — smal mørk stribe over headeren. */
.site-topbar { background: var(--blue-dark); color: var(--on-accent); font-size: .85rem; }
.site-topbar .wrap { display: flex; justify-content: flex-end; padding-block: .3rem; }
.site-topbar .site-nav .menu { gap: 18px; }
.site-topbar .site-nav .menu a { color: var(--on-accent); font-size: .85rem; opacity: .85; }
.site-topbar .site-nav .menu a:hover { opacity: 1; }

/* ============================================================
   HEADER — kongeblå brand-bjælke
   ============================================================ */
.site-header {
  background: linear-gradient(to top, var(--blue-dark) 0%, var(--blue) 100%);
  color: var(--on-accent);
  box-shadow: 0 14px 40px -18px rgba(11, 42, 99, .55);
}
.site-header .wrap { display: flex; align-items: center; gap: 22px; padding-block: 14px; }

.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; color: var(--on-accent); text-decoration: none; }
.brand img { height: 54px; width: auto; display: block; }
.brand .brand-name { font-family: var(--font-head); font-weight: 900; font-size: 1.6rem; text-transform: uppercase; letter-spacing: .01em; line-height: 1; }

/* Hovedmenu (motorens <nav class="site-nav"><ul class="menu">) */
.header-nav { margin-left: auto; }
.site-header .site-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-header .site-nav .menu a,
.site-header .site-nav .sub-toggle {
  font-family: var(--font-head); text-transform: uppercase; font-weight: 600;
  letter-spacing: .04em; font-size: 1.06rem; color: var(--on-accent);
  text-decoration: none; background: none; border: 0; cursor: pointer;
  padding: 8px 14px; position: relative; display: inline-block;
}
.site-header .site-nav .menu > li { position: relative; }
.site-header .site-nav .menu > li > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.site-header .site-nav .menu > li > a:hover::after,
.site-header .site-nav .menu > li > a[aria-current="page"]::after { transform: scaleX(1); }

/* Dropdown (ét niveau) — afsløres på hover/focus-within (CSS) + .open (nav-toggle.js touch). */
.site-header .site-nav .submenu {
  list-style: none; margin: 0; padding: 6px 0; position: absolute; left: 0; top: 100%;
  min-width: 210px; background: var(--blue-dark); box-shadow: var(--shadow-sm);
  display: none; z-index: 20;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 0 100%);
}
.site-header .site-nav .has-sub:hover > .submenu,
.site-header .site-nav .has-sub:focus-within > .submenu,
.site-header .site-nav .has-sub.open > .submenu { display: block; }
.site-header .site-nav .submenu li { display: block; }
.site-header .site-nav .submenu a { display: block; padding: 9px 18px; font-size: .98rem; white-space: nowrap; }
.site-header .site-nav .submenu a::after { content: none; }
.site-header .site-nav .submenu a:hover { background: rgba(255, 255, 255, .12); }
.site-header .site-nav .sub-toggle { padding: 0 8px; font-size: .8rem; }
.site-header .site-nav .sub-toggle[aria-expanded="true"] { color: var(--accent); }

/* Header-extra: sociale ikoner + RING TIL OS-CTA */
.header-extra { display: flex; align-items: center; gap: 14px; }
.nav-social { display: flex; gap: 8px; }
.nav-social a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .16); transition: background .2s ease, transform .2s ease;
}
.nav-social a:hover { background: var(--accent); transform: translateY(-2px); }
.nav-social svg { width: 18px; height: 18px; fill: var(--on-accent); }
.header-cta { flex: none; }

/* ============================================================
   TRANSPARENT SCROLL-HEADER (kun sider med hero som første blok)
   ------------------------------------------------------------
   Uden hero: headeren beholder sin solide kongeblå brand-bjælke (reglerne
   ovenfor). Med hero (body.has-hero, sat af Builder): headeren overlejrer
   heroen GENNEMSIGTIGT i toppen og bliver solid + får skygge når siden rulles
   (.scrolled sættes af nav-scroll.js). Design: .site-header(.scrolled) + .hero.
   ============================================================ */
body.has-hero .site-header {
  background: transparent;
  box-shadow: none;
  transition: background .3s ease, box-shadow .3s ease;
}
body.has-hero .site-header.scrolled {
  background: linear-gradient(to top, var(--blue-dark) 0%, var(--blue) 100%);
  box-shadow: 0 18px 44px -12px rgba(8, 26, 48, .62);
}
/* Logoet er stort og forskudt ned i heroen i toppen → skrumper til normal
   størrelse i den solide bjælke ved scroll (design .brand img → .scrolled). */
body.has-hero .brand img {
  transform-origin: left center;
  transform: translateY(30px) scale(1.92);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  position: relative; z-index: 1;
}
body.has-hero .site-header.scrolled .brand img { transform: translateY(0) scale(1); }
/* Heroen trækkes op UNDER den transparente header (design .hero margin-top:-82px:
   82px = logo 54px + header-padding 2×14px). */
body.has-hero main#main > .block-hero:first-child { margin-top: -82px; }
/* Fallback uden JavaScript: nav-scroll.js kan ikke skifte header til solid ved
   scroll → hold den solid fra start, så teksten aldrig bliver hvid-på-hvid nede
   på siden. (@media scripting: none matcher når JS er slået fra.) */
@media (scripting: none) {
  body.has-hero .site-header {
    background: linear-gradient(to top, var(--blue-dark) 0%, var(--blue) 100%);
    box-shadow: 0 14px 40px -18px rgba(11, 42, 99, .55);
  }
  body.has-hero .brand img { transform: none; }
  body.has-hero main#main > .block-hero:first-child { margin-top: 0; }
}

/* Header responsivt — nav + extra falder under brandet og centreres (no-JS, WCAG-reflow). */
@media (max-width: 980px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 12px; justify-content: center; text-align: center; }
  .brand { margin-right: 0; width: 100%; justify-content: center; }
  .header-nav { margin-left: 0; width: 100%; }
  .site-header .site-nav .menu { justify-content: center; }
  .site-header .site-nav .submenu { position: static; min-width: 0; box-shadow: none; clip-path: none; background: rgba(255, 255, 255, .08); }
  .header-extra { width: 100%; justify-content: center; }
  /* Headeren ombrydes til flere rækker på mobil (nav falder under brandet, ingen
     burger) → den transparente over-hero-header + skalerede logo + pull-up passer
     ikke. Hold headeren solid + logoet normalt + heroen under headeren her. */
  body.has-hero .site-header {
    background: linear-gradient(to top, var(--blue-dark) 0%, var(--blue) 100%);
    box-shadow: 0 14px 40px -18px rgba(11, 42, 99, .55);
  }
  body.has-hero .brand img { transform: none; }
  body.has-hero main#main > .block-hero:first-child { margin-top: 0; }
}

/* ============================================================
   FOOTER — kongeblå brand-bar med kolonner
   ============================================================ */
.site-footer { background: var(--blue-dark); color: var(--on-accent); margin-top: clamp(56px, 8vw, 104px); }
.footer-top { background: var(--blue); padding-block: clamp(48px, 7vw, 84px); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 42px; }
.footer-col-title, .footer-col .footer-col-title,
.footer-col h2 {
  font-family: var(--font-head); text-transform: uppercase; font-size: 1.15rem;
  letter-spacing: .06em; margin: 0 0 18px; color: var(--on-accent); font-weight: 800;
}
.footer-col .site-nav { margin: 0; }
.footer-col .site-nav .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col .site-nav .submenu { display: block; position: static; padding: 6px 0 0 12px; background: none; box-shadow: none; clip-path: none; }
.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; font-size: .99rem; }
.site-footer a:hover { color: var(--on-accent); text-decoration: underline; }
.footer-col--brand .footer-logo { margin-bottom: 16px; }
.footer-col--brand .footer-logo-img, .footer-col--brand .footer-logo img { height: 92px; width: auto; }
.footer-text { margin: 0 0 12px; color: rgba(255, 255, 255, .82); font-size: .99rem; max-width: 34ch; }
.footer-address { margin: 0 0 14px; color: rgba(255, 255, 255, .7); font-size: .95rem; }
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); transition: background .2s ease, transform .2s ease;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.footer-social a:hover { background: var(--accent); transform: translateY(-2px); }
.footer-social svg { width: 21px; height: 21px; fill: var(--on-accent); }

/* Tagline-bånd (kunde-redigerbar via flux_t 'footer_tagline'; skjult hvis tom) */
.footer-tagline { background: var(--red); }
.footer-tagline .wrap { padding-block: clamp(18px, 3vw, 30px); }
.footer-tagline span {
  display: inline-block; font-family: var(--font-head); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1;
  font-size: clamp(1.5rem, 4vw, 2.9rem); color: var(--on-accent);
}

/* Bundlinje — copyright + policy-menu */
.footer-bar { background: var(--blue-dark); }
.footer-bar .wrap {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center;
  padding-block: 20px; font-size: .86rem; color: rgba(255, 255, 255, .62);
}
.footer-copyright { margin: 0; }
.footer-policy .site-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-policy .site-nav .menu a { color: rgba(255, 255, 255, .62); font-size: .86rem; }
.footer-policy .site-nav .menu a:hover { color: var(--on-accent); }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-bar .wrap { justify-content: center; text-align: center; } }

/* ── Reduceret bevægelse — nul transitions/animationer på chrome ── */
@media (prefers-reduced-motion: reduce) {
  .skip-link, .btn, .nav-social a, .footer-social a,
  .site-header .site-nav .menu > li > a::after { transition: none; }
  .btn:hover, .nav-social a:hover, .footer-social a:hover { transform: none; }
}

/* ═══ HERO ═══ */
/* ============================================================
   HERO  (motor: .block-hero / .block-hero--forside / --underside)
   Reproducerer design'ets .hero: fuld-bleed, blue-dark, foto til
   højre med vandret gradient-scrim, kæmpe hvid Saira-overskrift,
   crimson skrå-boks paa .hero-em, skrå-kasse CTA'er.
   ============================================================ */

/* ---- Fuld-bleed forside-hero ---- */
.block-hero{
  position:relative;
  background:var(--blue-dark);
  color:var(--on-accent);
  overflow:hidden;
  isolation:isolate;
}
.block-hero--forside{
  min-height:min(100vh,920px);
  display:flex;
  align-items:center;
}

/* ---- Foto (motorens <figure class="block-image">) = design .hero__photo ----
   Absolut, forskudt til hoejre saa teksten staar over den moerke venstre del. */
.block-hero--forside > .block-image{
  position:absolute;
  left:26%; right:0; top:0; bottom:0;
  z-index:0;
  margin:0;
}
.block-hero--forside > .block-image img,
.block-hero--forside > .block-image picture{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
  object-position:30% 28%;
}
/* Vandret gradient-scrim: blue-dark (venstre) -> transparent (hoejre) */
.block-hero--forside > .block-image::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    var(--blue-dark) 0%,
    rgba(11,42,99,.82) 18%,
    rgba(11,42,99,.36) 46%,
    rgba(11,42,99,.08) 72%,
    rgba(11,42,99,0) 92%);
}
/* En evt. billed-figcaption hoerer ikke til i hero-scenen */
.block-hero--forside > .block-image figcaption{ display:none; }

/* ---- Tekst-kolonne (motorens .hero-inner) = design .hero__inner + .wrap + .hero__box ---- */
.block-hero--forside .hero-inner{
  position:relative;
  z-index:5;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:188px var(--pad) 80px;
}
/* Hold det redaktionelle indhold i en smal, venstrestillet spalte (design .hero__box) */
.block-hero--forside .hero-inner > *{
  max-width:680px;
  margin-left:0;
}

/* ---- Eyebrow (light kicker) ---- */
.block-hero .hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  margin:0 0 16px;
  font-family:var(--font-head);
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.22em;
  font-size:.85rem;
  color:var(--on-accent);
}
.block-hero .hero-eyebrow::before{
  content:"";
  width:34px; height:4px;
  background:var(--red);
}

/* ---- Overskrift = design .hero h1 ---- */
.block-hero h1,
.block-hero h2{
  margin:0;
  font-family:var(--font-head);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.005em;
  color:var(--on-accent);
  line-height:.9;
  text-shadow:0 6px 40px rgba(0,0,0,.35);
}
.block-hero--forside h1,
.block-hero--forside h2{
  font-size:clamp(3rem,8vw,7.2rem);
}

/* ---- Crimson skrå-boks (brand-signaturen) = design .hero h1 em ----
   Ydre em skewer, indre span modskewer saa teksten staar lige. */
.block-hero .hero-em{
  font-style:normal;
  color:var(--on-accent);
  background:var(--red);
  display:inline-block;
  padding:.04em .26em .1em;
  margin-top:.12em;
  transform:skewX(-9deg);
  white-space:nowrap;
}
.block-hero .hero-em > span{
  display:inline-block;
  transform:skewX(9deg);
}

/* ---- Undertekst (motor .hero-sub) = design .hero .lede ---- */
.block-hero .hero-sub{
  margin:26px 0 34px;
  font-size:clamp(1.18rem,1.7vw,1.5rem);
  line-height:1.45;
  max-width:44ch;
  color:rgba(255,255,255,.94);
}

/* ---- Tagline (motor .hero-tagline) = design .hero__tagline ----
   Fast nederst-hoejre over fotoet. */
.block-hero--forside .hero-tagline{
  position:absolute;
  right:0; bottom:44px;
  z-index:3;
  max-width:none;
  margin:0;
  font-family:var(--font-head);
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.04em;
  font-size:clamp(1rem,1.7vw,1.55rem);
  line-height:1;
  text-align:right;
  color:var(--on-accent);
  text-shadow:0 4px 24px rgba(0,0,0,.5);
}

/* ---- CTA-raekke = design .cta-row ---- */
.block-hero .hero-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  max-width:none;
}

/* Hero-CTA = design .btn-edge > .btn: hvid skrå kant-plade (så knapperne — særligt
   den blå — er tydelige på fotoet) med en farvet skrå knap indeni. Ét element:
   <a> = den hvide plade (ydre 11px-slant), ::before = den farvede knap (indre 8px-
   slant, inset 5px → 5px hvid ramme rundt om). Teksten ligger over via isolation. */
.block-hero .hero-cta{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family:var(--font-head);
  text-transform:uppercase;
  font-weight:700;
  font-size:1.32rem;
  letter-spacing:.04em;
  line-height:1;
  padding:calc(1.02em + 5px) calc(1.8em + 5px);
  color:var(--on-accent);
  background:var(--surface);
  border:0;
  cursor:pointer;
  clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%);
  transition:transform .15s ease;
}
.block-hero .hero-cta::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:-1;
  background:var(--red);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  transition:filter .2s ease;
}
.block-hero .hero-cta:hover{ transform:translateY(-2px); }
.block-hero .hero-cta:hover::before{ filter:brightness(1.06); }
.block-hero .hero-cta:active{ transform:translateY(0); }

/* Sekundaer CTA = design .btn--blue-dark: mørkeblå knap (samme hvide ramme). */
.block-hero .hero-cta-secondary::before{ background:var(--blue-dark); }

/* ---- Underside-hero (kompakt) = design .hero--sub ---- */
.block-hero--underside{
  min-height:min(55vh,580px);
  display:flex;
  align-items:center;
}
.block-hero--underside > .block-image{
  position:absolute; inset:0; z-index:0; margin:0;
}
.block-hero--underside > .block-image img,
.block-hero--underside > .block-image picture{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
  object-position:center 34%;
}
.block-hero--underside > .block-image::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    var(--blue-dark) 0%,
    rgba(11,42,99,.78) 34%,
    rgba(11,42,99,.28) 68%,
    rgba(11,42,99,.06) 100%);
}
.block-hero--underside > .block-image figcaption{ display:none; }
.block-hero--underside .hero-inner{
  position:relative;
  z-index:5;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:188px var(--pad) 64px;
}
.block-hero--underside .hero-inner > *{ max-width:720px; margin-left:0; }
.block-hero--underside h1,
.block-hero--underside h2{ font-size:clamp(3rem,7vw,5.6rem); }
.block-hero--underside .hero-sub{ margin-bottom:28px; font-size:1.18rem; max-width:48ch; }
/* Tagline giver ikke mening paa den korte underside */
.block-hero--underside .hero-tagline{ display:none; }

/* ---- A11y: hvidt fokus over den moerke hero ---- */
.block-hero :focus-visible{ outline:3px solid var(--on-accent); outline-offset:3px; }

/* ---- Responsivt ---- */
@media (max-width:980px){
  /* Fotoet dækker nu hele feltet; scrim bliver mere lodret saa teksten holder AA-kontrast */
  .block-hero--forside > .block-image{ left:0; }
  .block-hero--forside > .block-image::after{
    background:linear-gradient(180deg,
      rgba(11,42,99,.62) 0%,
      rgba(11,42,99,.48) 38%,
      rgba(11,42,99,.80) 100%);
  }
  .block-hero--forside .hero-inner{ padding-top:150px; padding-bottom:64px; }
  .block-hero--forside .hero-tagline{ bottom:36px; }
}
@media (max-width:600px){
  .block-hero--forside .hero-inner{ padding-top:128px; padding-bottom:52px; }
  .block-hero--underside .hero-inner{ padding-top:132px; }
  .block-hero .hero-cta{ font-size:1.14rem; padding:.92em 1.5em; }
  .block-hero .hero-cta-row{ width:100%; }
  .block-hero .hero-cta{ flex:1 1 auto; justify-content:center; }
  /* Taglinen forstyrrer den smalle mobil-layout (som design) */
  .block-hero--forside .hero-tagline{ display:none; }
}

/* ---- Reduceret bevægelse: ingen hover-forskydninger ---- */
@media (prefers-reduced-motion:reduce){
  .block-hero .hero-cta,
  .block-hero .hero-cta-secondary{ transition:none; }
  .block-hero .hero-cta:hover,
  .block-hero .hero-cta-secondary:hover,
  .block-hero .hero-cta:active{ transform:none; }
}

/* ═══ CARDS ═══ */
/* =========================================================================
   SEKTION: KORT + MEDIE — Den Sønderjyske Garde
   Reproducerer design'ets .corps / .post / .num-motiver på MOTORENS klasser.
   Signaturer: -7° skrå kant (clip-path), crimson badge, Saira-versal-tags,
   hvidt kort m. shadow-sm → hover-lift. KUN var(--*) (rgba-scrims tilladt).
   Blokke lever inde i <main><div class="wrap"> → ingen egen max-width nødvendig.
   ========================================================================= */

/* ---- Fælles medie-wrapper (figure.block-image = motorens universelle img-hylster) ---- */
.block-image { margin: clamp(28px, 4vw, 44px) 0; }
.block-image picture { display: block; }
.block-image img { width: 100%; height: auto; display: block; }
.block-image figcaption {
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--muted);
  margin-top: 10px;
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}

/* =========================================================================
   KORT — grundskelet (alle varianter)
   ========================================================================= */
.block-card { margin: clamp(30px, 5vw, 56px) 0; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.4vw, 26px);
}

.card-item {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: clamp(1.5rem, 2.4vw, 1.9rem);
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.card-item:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow);
}

/* Grundfelter — fælles på tværs af varianter */
.card-item h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.02;
  color: var(--ink);
  margin: 0;
}
.card-item p {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.55;
}
.card-item a {
  align-self: flex-start;
  margin-top: auto;
  padding-top: .3rem;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .84rem;
  color: var(--accent);
  text-decoration: none;
}
.card-item a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.card-item a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---- Variant: icon (rundt accent-medaljon, design'ets ikon-sprog) ---- */
.block-card--icon .card-icon {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: var(--on-accent);
  background: var(--accent);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); /* skrå boks */
  margin-bottom: .3rem;
}
.block-card--icon .card-icon svg { width: 28px; height: 28px; display: block; }

/* ---- Variant: number (stort crimson tal, Saira) ---- */
.block-card--number .card-number {
  display: block;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2.8rem, 5vw, 4rem);
  line-height: .85;
  color: var(--accent);
}

/* ---- Variant: quote (citat + kilde) ---- */
.block-card--quote .card-quote {
  margin: 0 0 .4rem;
  padding-left: 1.1rem;
  border-left: 4px solid var(--accent);
}
.block-card--quote .card-quote p {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 .5rem;
  text-transform: none;
}
.block-card--quote .card-quote cite {
  font-style: normal;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
  color: var(--accent);
}

/* =========================================================================
   Variant: photo (korps-kort) — design'ets .corps 1:1
   Foto full-bleed m. skrå nederste kant + crimson hjørne-badge; body padded.
   ========================================================================= */
.block-card--photo .card-item {
  padding: 0;              /* fotoet er full-bleed; body bærer sin egen padding */
  overflow: hidden;
}

.card-ph {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), 0 100%); /* design'ets slant */
}
/* Nested motor-figure (figure.block-image) skal fylde .card-ph */
.card-ph .block-image,
.card-ph picture { display: block; width: 100%; height: 100%; margin: 0; }
.card-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.card-item:hover .card-ph img { transform: scale(1.05); }

/* Crimson hjørne-badge = design'ets .num */
.card-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  padding: 11px 16px 18px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}
.card-badge svg { width: 30px; height: 30px; display: block; }

/* Body under fotoet */
.block-card--photo .card-body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
  padding: 10px clamp(1.4rem, 2.4vw, 1.65rem) clamp(1.6rem, 3vw, 1.9rem);
}
.card-tag {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .82rem;
  color: var(--accent);
}

/* =========================================================================
   GALLERI — grid af medie-figures (design'ets .feed/.post-udtryk)
   ========================================================================= */
.block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(12px, 1.6vw, 16px);
  margin: clamp(28px, 4vw, 44px) 0;
}
.block-gallery .block-image {
  margin: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: var(--shadow-sm);
}
.block-gallery .block-image picture { width: 100%; height: 100%; }
.block-gallery .block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.block-gallery .block-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,42,99,0) 55%, rgba(11,42,99,.42));
  opacity: 0;
  transition: opacity .3s;
}
.block-gallery .block-image:hover img { transform: scale(1.06); }
.block-gallery .block-image:hover::after { opacity: 1; }
.block-gallery .block-image figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  color: var(--on-accent);
  font-size: .82rem;
  transform: translateY(4px);
  opacity: 0;
  transition: opacity .3s, transform .3s;
}
.block-gallery .block-image:hover figcaption { opacity: 1; transform: translateY(0); }

/* =========================================================================
   KARRUSEL — progressiv (no-JS scroll-snap-række → JS-forbedret)
   Knapper/status = crimson skrå-boks-motiv.
   ========================================================================= */
.block-carousel {
  position: relative;
  margin: clamp(28px, 4vw, 44px) 0;
}
.carousel-track {
  display: flex;
  gap: clamp(12px, 1.6vw, 16px);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}
.carousel-slide .block-image {
  margin: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.carousel-slide .block-image img { width: 100%; height: auto; display: block; }
.carousel-track:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* JS-forbedret tilstand */
.block-carousel.is-enhanced .carousel-track { overflow: hidden; }

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); /* skrå boks */
  box-shadow: var(--shadow-sm);
  transition: background .18s, transform .18s;
}
.carousel-btn:hover:not(:disabled) { background: var(--accent-strong); }
.carousel-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.carousel-btn:disabled { opacity: .32; cursor: default; }
.carousel-btn--prev { left: clamp(6px, 1.5vw, 14px); }
.carousel-btn--next { right: clamp(6px, 1.5vw, 14px); }

.carousel-status {
  position: absolute;
  bottom: clamp(10px, 1.6vw, 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  margin: 0;
  padding: .28rem 1rem .34rem;
  background: var(--ink);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .06em;
  font-size: .82rem;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

/* =========================================================================
   Responsivt — enkelt-kolonne foto-kort på små skærme
   ========================================================================= */
@media (max-width: 620px) {
  .card-grid { grid-template-columns: 1fr; }
  .block-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   Reduced motion — slå alle transitions/transforms fra (WCAG 2.3.3 / 2.2.2)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .card-item,
  .card-ph img,
  .block-gallery .block-image img,
  .block-gallery .block-image::after,
  .block-gallery .block-image figcaption,
  .carousel-btn { transition: none; }

  .card-item:hover,
  .card-item:hover .card-ph img,
  .block-gallery .block-image:hover img { transform: none; }

  .block-gallery .block-image:hover figcaption { transform: none; }
  .carousel-slide .block-image img { scroll-behavior: auto; }
}

/* ═══ CONTENT ═══ */
/* ============================================================
   DSJG — INDHOLDSBLOKKE + KOLLEKTIONER + FORMULAR
   Styler MOTORENS output-klasser så de ser ud som design'ets
   .sec / .faq / .cal / .form. Kun var(--*) + rgba()-scrims.
   Blokke ligger i <main><div class="wrap"> (base ejer .wrap:
   max-width:var(--wrap)+padding:var(--pad)) → ingen sidepadding her;
   .block-cta er en INDESLUTTET banner (ikke fuld-bleed) for at undgå
   skrøbelig break-out-matematik.
   ============================================================ */

/* ---- Sektions-rytme for top-niveau indholdsblokke ---- */
.block-text,.block-list,.block-quote,.block-video,
.block-cta,.faq,.quote-rotator{
  margin-block:clamp(30px,5vw,60px);
}

/* ============================================================
   EQ-KICKER (design'ets animerede equalizer før overskrifter)
   Motoren udsender <span class="eq" aria-hidden><i>×5</span>
   umiddelbart før <h2/h3 class="block-heading">.
   ============================================================ */
.eq{ display:inline-flex; align-items:flex-end; gap:5px; height:30px;
  margin:clamp(44px,6vw,76px) 0 14px; color:var(--red); }
.eq i{ width:6px; height:35%; background:currentColor; border-radius:1px;
  animation:flux-eq 1.7s ease-in-out infinite; }
.eq i:nth-child(1){ animation-delay:-.90s; }
.eq i:nth-child(2){ animation-delay:-.45s; }
.eq i:nth-child(3){ animation-delay:-.15s; }
.eq i:nth-child(4){ animation-delay:-.70s; }
.eq i:nth-child(5){ animation-delay:-.30s; }
.eq + .block-heading{ margin-top:0; }
@keyframes flux-eq{ 0%,100%{ height:22%; } 50%{ height:100%; } }
@media (prefers-reduced-motion:reduce){ .eq i{ animation:none; height:60%; } }

/* ---- Overskrift-blok ---- */
.block-heading{ font-family:var(--font-head); font-weight:800;
  text-transform:uppercase; line-height:.92; letter-spacing:.005em;
  color:var(--blue-dark);
  margin:clamp(44px,6vw,76px) 0 clamp(16px,2vw,26px); }
h1.block-heading,
h2.block-heading{ font-size:clamp(2.4rem,5.5vw,4.6rem); }
h3.block-heading{ font-size:clamp(1.7rem,3vw,2.6rem); }

/* ============================================================
   TEKST — .block-text bærer også klassen .prose (fælles typografi)
   ============================================================ */
.block-text{ max-width:70ch; }
.prose{ font-size:clamp(1.05rem,1.4vw,1.15rem); line-height:1.7;
  color:var(--body); max-width:70ch; }
.prose > :first-child{ margin-top:0; }
.prose p{ margin:0 0 1.1em; text-wrap:pretty; }
.prose :is(h2,h3,h4){ font-family:var(--font-head); text-transform:uppercase;
  color:var(--blue-dark); line-height:.96; letter-spacing:.005em;
  margin:1.5em 0 .5em; }
.prose h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); }
.prose h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); }
.prose h4{ font-size:1.2rem; }
.prose a{ color:var(--red); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover{ color:var(--blue-dark); }
.prose ul,.prose ol{ margin:0 0 1.1em; padding-left:1.3em; }
.prose li{ margin-bottom:.35em; }
.prose img{ margin:1.4em 0; }
.prose blockquote{ margin:1.4em 0; padding:4px 0 4px 24px; position:relative;
  font-family:var(--font-head); text-transform:uppercase; font-weight:700;
  color:var(--blue-dark); line-height:1.12; }
.prose blockquote::before{ content:""; position:absolute; left:0; top:2px; bottom:2px;
  width:6px; background:var(--red); transform:skewX(-8deg); }

/* ============================================================
   LISTE — checkliste med rød skrå-boks-markør (design'ets .join li .ck)
   ============================================================ */
.block-list{ list-style:none; padding:0; margin-inline:0; max-width:60ch;
  display:grid; gap:14px; font-size:1.07rem; color:var(--body); }
.block-list li{ position:relative; padding-left:44px; min-height:28px; }
.block-list li::before{ content:""; position:absolute; left:0; top:0;
  width:28px; height:28px; background:var(--red);
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%); }
.block-list li::after{ position:absolute; left:0; top:0; width:28px; height:28px;
  display:grid; place-items:center; color:var(--on-accent);
  font-family:var(--font-head); font-weight:900; font-size:.85rem; line-height:1; }
ul.block-list li::after{ content:"\2713"; }             /* ✓ */
ol.block-list{ counter-reset:flux-li; }
ol.block-list li{ counter-increment:flux-li; }
ol.block-list li::after{ content:counter(flux-li); }

/* ============================================================
   CITAT-BLOK — crimson skrå kant + Saira
   ============================================================ */
.block-quote{ position:relative; max-width:62ch; margin-inline:0;
  padding:6px 0 6px 32px; }
.block-quote::before{ content:""; position:absolute; left:0; top:4px; bottom:4px;
  width:7px; background:var(--red); transform:skewX(-8deg); }
.block-quote p{ margin:0; font-family:var(--font-head); text-transform:uppercase;
  font-weight:700; line-height:1.08; color:var(--blue-dark);
  font-size:clamp(1.4rem,2.6vw,2.1rem); }
.block-quote cite{ display:block; margin-top:12px; font-family:var(--font-body);
  font-style:normal; text-transform:none; font-size:.95rem; color:var(--muted); }

/* ============================================================
   VIDEO — privatlivs-venlig click-to-load som skrå knap-link
   ============================================================ */
.block-video{ margin-block:clamp(30px,5vw,60px); }
.block-video a{ display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-head); text-transform:uppercase; font-weight:700;
  letter-spacing:.04em; font-size:1.12rem; background:var(--red);
  color:var(--on-accent); padding:.9em 1.5em;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  transition:transform .15s ease, filter .2s ease; }
.block-video a:hover{ transform:translateY(-2px); filter:brightness(1.06); }

/* ============================================================
   CTA-BANNER (indesluttet) — crimson-soft default, foto+scrim variant
   Motor: <aside class="block-cta [--photo]"> [figure.block-image] <h2><p><a.cta-button>
   ============================================================ */
.block-cta{ position:relative; overflow:hidden; text-align:center;
  background:var(--accent-soft); color:var(--blue-dark);
  padding:clamp(40px,6vw,72px) clamp(24px,4vw,56px);
  clip-path:polygon(0 3%,100% 0,100% 97%,0 100%); box-shadow:var(--shadow-sm); }
.block-cta h2{ font-family:var(--font-head); text-transform:uppercase; font-weight:800;
  color:var(--blue-dark); line-height:.95; margin:0 0 .35em;
  font-size:clamp(2rem,4.5vw,3.4rem); }
.block-cta p{ color:var(--body); font-size:1.15rem; max-width:52ch; margin:0 auto 26px; }
.cta-button{ display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-head); text-transform:uppercase; font-weight:700;
  letter-spacing:.04em; font-size:1.12rem; background:var(--red);
  color:var(--on-accent); padding:.92em 1.6em;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  transition:transform .15s ease, filter .2s ease; }
.cta-button:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.cta-button:active{ transform:translateY(0); }
/* Foto-variant: fuld-bleed billede + blå scrim, hvid tekst */
.block-cta--photo{ background:var(--blue-dark); color:var(--on-accent); }
.block-cta--photo h2{ color:var(--on-accent); text-shadow:0 4px 22px rgba(0,0,0,.4); }
.block-cta--photo p{ color:rgba(255,255,255,.92); }
.block-cta--photo :is(figure,.block-image){ position:absolute; inset:0; margin:0; z-index:0; }
.block-cta--photo :is(img,picture){ width:100%; height:100%; object-fit:cover; }
.block-cta--photo figcaption{ display:none; }
.block-cta--photo::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(11,42,99,.86), rgba(11,42,99,.6)); }
.block-cta--photo :is(h2,p,.cta-button){ position:relative; z-index:2; }

/* ============================================================
   FAQ — accordion (native <details>), hvide skrå-kort m. skygge
   ============================================================ */
.faq{ max-width:820px; margin-inline:auto; }
.faq > h2{ font-family:var(--font-head); text-transform:uppercase; font-weight:800;
  color:var(--blue-dark); line-height:.95; margin:0 0 28px;
  font-size:clamp(2rem,4vw,3.2rem); }
.faq-list{ display:grid; gap:14px; }
.faq-item{ background:var(--surface); box-shadow:var(--shadow-sm); }
.faq-item summary{ cursor:pointer; list-style:none; position:relative;
  padding:18px 54px 18px 22px; font-family:var(--font-head);
  text-transform:uppercase; font-weight:700; font-size:1.14rem;
  color:var(--blue-dark); transition:color .15s ease; }
.faq-item summary:hover{ color:var(--red); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:""; position:absolute; right:22px; top:50%;
  margin-top:-7px; width:14px; height:14px;
  background:
    linear-gradient(var(--red),var(--red)) center/14px 2.5px no-repeat,
    linear-gradient(var(--red),var(--red)) center/2.5px 14px no-repeat;
  transition:transform .25s ease; }
.faq-item[open] summary::after{ transform:rotate(135deg); }
.faq-a{ padding:0 22px 20px; }
.faq-a p{ margin:0; color:var(--muted); font-size:1.02rem; line-height:1.6; }
@media (prefers-reduced-motion:reduce){ .faq-item summary::after{ transition:none; } }

/* ============================================================
   CITAT-ROTATION — progressiv (uden JS: alle synlige; .is-enhanced: én ad gangen)
   ============================================================ */
/* Design .testimonial: kompakt mørkeblå bånd der butter direkte under heroen
   (margin:0), stor rød citat-mark, hvid versal citat-tekst. */
.quote-rotator{ margin:0; background:var(--blue-dark); color:var(--on-accent);
  padding:clamp(30px,4.6vw,56px) var(--pad); text-align:center; }
.quote-rotator > h2{ font-family:var(--font-head); text-transform:uppercase;
  font-weight:800; color:var(--on-accent); opacity:.82; line-height:1; margin:0 auto 22px;
  max-width:900px; letter-spacing:.14em; font-size:.98rem; }
.qr-track{ list-style:none; margin:0 auto; padding:0; max-width:900px; display:grid; gap:34px; }
.qr-slide{ margin:0; }
.qr-slide blockquote{ margin:0; }
.qr-slide blockquote::before{ content:"\201C"; display:block; font-family:var(--font-head);
  font-weight:900; font-size:4rem; line-height:.5; color:var(--red); margin-bottom:8px; }
.qr-slide blockquote p{ margin:0; font-family:var(--font-head); text-transform:uppercase;
  font-weight:800; line-height:1.08; color:var(--on-accent);
  font-size:clamp(1.5rem,3.2vw,2.6rem); text-wrap:balance; }
.qr-slide cite{ display:block; margin-top:16px; font-family:var(--font-body);
  font-style:normal; text-transform:none; font-size:.95rem; color:rgba(255,255,255,.72); }
.qr-slide cite b{ color:var(--on-accent); font-weight:600; }
/* JS-forbedret: stak slides i samme grid-celle, kun .is-active synlig */
.quote-rotator.is-enhanced .qr-track{ display:grid; }
.quote-rotator.is-enhanced .qr-slide{ grid-area:1/1; opacity:0;
  transition:opacity .8s ease; pointer-events:none; }
.quote-rotator.is-enhanced .qr-slide.is-active{ opacity:1; pointer-events:auto; }
.qr-ctrls{ display:flex; gap:12px; justify-content:center; align-items:center; margin-top:30px; }
.qr-btn{ width:46px; height:46px; display:grid; place-items:center; border:0; cursor:pointer;
  background:var(--red); color:var(--on-accent); font-family:var(--font-head);
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
  transition:transform .15s ease, filter .2s ease; }
.qr-btn:hover{ transform:translateY(-2px); filter:brightness(1.12); }
.qr-status{ font-family:var(--font-head); text-transform:uppercase;
  letter-spacing:.1em; font-size:.85rem; color:rgba(255,255,255,.72); }
@media (prefers-reduced-motion:reduce){
  .quote-rotator.is-enhanced .qr-slide{ transition:none; }
  .qr-btn{ transition:none; }
}

/* ============================================================
   KOLLEKTIONER — arkiv-header + tom-tilstand
   ============================================================ */
.page-title{ font-family:var(--font-head); text-transform:uppercase; font-weight:800;
  color:var(--blue-dark); line-height:.92; letter-spacing:.005em;
  margin:clamp(10px,2vw,26px) 0 .22em; font-size:clamp(2.6rem,6vw,5rem); }
.page-intro{ font-size:1.18rem; color:var(--muted); max-width:62ch;
  margin:0 0 clamp(34px,4vw,54px); }
.archive-empty{ font-size:1.1rem; color:var(--muted); background:var(--paper-2);
  padding:26px 24px; border-left:6px solid var(--red); max-width:60ch; margin:0; }

/* ---- Nyheds-arkiv (skrå foto-kort m. hover-lift, design'ets .corps) ---- */
.news-list{ list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; }
.news-item{ margin:0; }
.news-item > a{ display:flex; flex-direction:column; height:100%; color:inherit;
  background:var(--surface); box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease; }
.news-item > a:hover{ transform:translateY(-7px); box-shadow:var(--shadow); }
.news-item .thumb{ position:relative; aspect-ratio:16/10; overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),0 100%); }
.news-item .thumb :is(figure,picture){ margin:0; width:100%; height:100%; display:block; }
.news-item .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.news-item .thumb figcaption{ display:none; }
.news-item > a:hover .thumb img{ transform:scale(1.05); }
.news-item .body{ padding:16px 24px 28px; display:flex; flex-direction:column;
  gap:8px; flex:1; }
.news-item .meta{ margin:0; font-size:.85rem; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:.4em; align-items:center; }
.news-item h2{ margin:0; font-family:var(--font-head); text-transform:uppercase;
  font-weight:800; color:var(--blue-dark); font-size:1.7rem; line-height:.98; }
.news-item .lead{ margin:0; color:var(--muted); font-size:1rem; }
.cat{ font-family:var(--font-head); text-transform:uppercase; font-weight:700;
  letter-spacing:.08em; font-size:.78rem; color:var(--red); }

/* ---- Begivenheds-arkiv (design'ets .cal — skrå rød kant-accent) ---- */
.event-list{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.event-item{ margin:0; }
.event-item > a{ display:grid; grid-template-columns:auto 1fr; gap:26px;
  align-items:center; color:inherit; background:var(--surface); padding:22px 28px;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform .15s ease; }
.event-item > a::before{ content:""; position:absolute; left:0; top:0; bottom:0;
  width:8px; background:var(--red); transform:skewX(-8deg); transform-origin:bottom; }
.event-item > a:hover{ transform:translateX(6px); }
.event-item .when{ padding-left:12px; min-width:82px; text-align:center;
  font-family:var(--font-head); font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; line-height:1; color:var(--red); font-size:1.15rem; }
.event-item .body{ min-width:0; }
.event-item h2{ margin:0 0 4px; font-family:var(--font-head); text-transform:uppercase;
  font-weight:700; color:var(--blue-dark); font-size:1.5rem; line-height:1; }
.event-item .where{ margin:0; font-family:var(--font-head); text-transform:uppercase;
  font-weight:700; letter-spacing:.05em; font-size:.92rem; color:var(--muted); }

/* ---- Enkelt artikel (nyhed/begivenhed/medlem-single) ---- */
.article{ max-width:760px; margin-inline:auto; margin-block:clamp(20px,3vw,40px); }
.article .meta{ margin:0 0 12px; font-size:.9rem; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:.4em; align-items:center; }
.article-title{ margin:0 0 .3em; font-family:var(--font-head); text-transform:uppercase;
  font-weight:800; color:var(--blue-dark); line-height:.94;
  font-size:clamp(2.2rem,5vw,4rem); }
.article-lead{ margin:0 0 1em; font-size:1.28rem; line-height:1.5; color:var(--body); }
.byline{ margin:0 0 24px; font-family:var(--font-head); text-transform:uppercase;
  letter-spacing:.06em; font-size:.9rem; font-weight:700; color:var(--red); }
.article-image{ margin:0 0 28px; position:relative; overflow:hidden;
  clip-path:polygon(0 2%,100% 0,100% 98%,0 100%); box-shadow:var(--shadow); }
.article-image :is(figure,picture){ margin:0; display:block; }
.article-image img{ width:100%; display:block; }
.article-image figcaption{ padding:10px 14px; font-size:.85rem; color:var(--muted);
  background:var(--paper-2); }
.back{ display:inline-block; margin-top:32px; font-family:var(--font-head);
  text-transform:uppercase; font-weight:700; letter-spacing:.04em; color:var(--red); }
.back:hover{ color:var(--blue-dark); }

/* ============================================================
   FORMULAR — design'ets .form + skrå send-knap
   ============================================================ */
.flux-form-wrap{ max-width:640px; margin-block:clamp(30px,5vw,56px); }
.flux-form{ display:grid; gap:18px; }
.flux-form-intro{ margin:0 0 18px; color:var(--muted); }
.flux-form-field{ display:grid; gap:6px; }
.flux-form-field > label{ font-family:var(--font-head); text-transform:uppercase;
  font-weight:700; font-size:.82rem; letter-spacing:.05em; color:var(--blue-dark); }
.flux-form input,.flux-form select,.flux-form textarea{ width:100%; padding:13px 15px;
  border:2px solid var(--line); border-radius:0; background:var(--surface);
  font-family:var(--font-body); font-size:1rem; color:var(--body);
  transition:border-color .15s ease; }
.flux-form input:focus,.flux-form select:focus,.flux-form textarea:focus{
  outline:none; border-color:var(--blue); }
.flux-form textarea{ min-height:130px; resize:vertical; }
.flux-form-consent{ display:grid; gap:6px; }
.flux-form-consent label{ display:flex; gap:10px; align-items:flex-start;
  font-family:var(--font-body); font-weight:400; font-size:.95rem; color:var(--body); }
.flux-form-consent input{ width:auto; flex:none; margin-top:3px; }
.flux-form-req{ color:var(--red); }
.flux-form-err{ display:block; margin-top:2px; font-size:.85rem; color:var(--red); }
.flux-form-field.has-error :is(input,textarea,select),
.flux-form-consent.has-error input{ border-color:var(--red); }
.flux-form-actions{ margin-top:6px; }
.flux-form-actions button{ display:inline-flex; align-items:center; gap:.55em;
  border:0; cursor:pointer; font-family:var(--font-head); text-transform:uppercase;
  font-weight:700; font-size:1.12rem; letter-spacing:.04em;
  background:var(--red); color:var(--on-accent); padding:.92em 1.7em;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  transition:transform .15s ease, filter .2s ease; }
.flux-form-actions button:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.flux-form-actions button:active{ transform:translateY(0); }

/* ---- Synligt fokus på røde flader (base's røde outline forsvinder på rødt) ---- */
.cta-button:focus-visible,.block-video a:focus-visible,
.flux-form-actions button:focus-visible,.qr-btn:focus-visible{
  outline:3px solid var(--blue-dark); outline-offset:3px; }

/* ============================================================
   RESPONSIV
   ============================================================ */
@media (max-width:600px){
  .news-list{ grid-template-columns:1fr; }
  .event-item > a{ grid-template-columns:1fr; gap:10px; }
  .event-item .when{ text-align:left; min-width:0; padding-left:14px; }
}
@media (prefers-reduced-motion:reduce){
  .news-item > a,.event-item > a,.cta-button,.block-video a,
  .flux-form-actions button,.news-item .thumb img,.flux-form :is(input,select,textarea){
    transition:none; }
  .news-item > a:hover,.event-item > a:hover{ transform:none; }
  .news-item > a:hover .thumb img{ transform:none; }
}
/* ── Høst-beskyttet kontakt-reveal-knap (§9; latent uden member-collection) ── */
.flux-contact-btn{ font:inherit; color:var(--accent); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.flux-contact-btn:hover{ color:var(--accent-strong); }

/* ── §B Galleri-mosaik (7 fotos i 4×3-mosaik + lokations-tags + lightbox) ─────── */
.gallery{ position:relative; background:var(--paper-2); color:var(--body); padding-block:clamp(54px,8vw,104px); }
.gallery__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px,4vw,56px); margin-bottom:clamp(28px,4vw,48px); }
.gallery__head .sec-head{ max-width:54ch; margin-bottom:0; }
.gallery .sec-head h2{ color:var(--blue-dark); }
.gallery .sec-head p{ color:var(--muted); }
.gallery__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr); aspect-ratio:4/3; gap:clamp(10px,1.2vw,16px); }
.gtile{ position:relative; display:block; width:100%; height:100%; padding:0; border:0; background:var(--surface); cursor:pointer; overflow:hidden; box-shadow:var(--shadow-sm); clip-path:polygon(0 2.5%,100% 0,100% 97.5%,0 100%); transition:transform 240ms ease, box-shadow 240ms ease; }
.gtile:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.gtile:nth-child(2), .gtile:nth-child(3){ grid-column:span 2; }
.gtile .block-image{ width:100%; height:100%; margin:0; }
.gtile .block-image :is(picture,img){ width:100%; height:100%; object-fit:cover; object-position:center 32%; display:block; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.gtile:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.gtile:hover .block-image img{ transform:scale(1.06); }
.gtile:focus-visible{ outline:3px solid var(--red); outline-offset:3px; }
.gtile__tag{ position:absolute; left:10px; bottom:12px; display:inline-flex; align-items:center; gap:5px; max-width:calc(100% - 20px); background:var(--red); color:var(--surface); font-family:var(--font-head); text-transform:uppercase; font-weight:700; font-size:.72rem; letter-spacing:.04em; padding:4px 11px; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); z-index:1; }
.gtile__tag svg{ width:11px; height:11px; fill:var(--surface); flex:none; }
.gtile:nth-child(1) .gtile__tag{ font-size:.82rem; padding:5px 14px; left:14px; bottom:16px; }
@media (max-width:900px){ .gallery__head{ flex-direction:column; align-items:flex-start; } .gallery__grid{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(6,1fr); aspect-ratio:2/6; } }
/* Lightbox (indsat i DOM af gallery-mosaic.js) */
.lightbox{ position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:6vw; background:rgba(11,42,99,.88); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.lightbox.open{ display:grid; }
.lightbox figure{ margin:0; position:relative; max-width:min(760px,90vw); text-align:center; }
.lightbox img{ width:100%; height:auto; max-height:76vh; object-fit:contain; border:4px solid var(--surface); box-shadow:0 30px 70px -20px rgba(0,0,0,.6); }
.lightbox figcaption{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; background:var(--red); color:var(--surface); font-family:var(--font-head); text-transform:uppercase; font-weight:700; letter-spacing:.05em; padding:7px 16px; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); }
.lightbox figcaption svg{ width:14px; height:14px; fill:var(--surface); }
.lightbox .x, .lightbox .nav{ position:absolute; border:0; cursor:pointer; background:rgba(255,255,255,.14); color:var(--surface); display:grid; place-items:center; width:52px; height:52px; transition:background 140ms ease; }
.lightbox .x:hover, .lightbox .nav:hover{ background:var(--red); }
.lightbox .x{ top:20px; right:24px; }
.lightbox .nav{ top:50%; margin-top:-26px; }
.lightbox .prev{ left:16px; } .lightbox .next{ right:16px; }
.lightbox .x svg, .lightbox .nav svg{ width:26px; height:26px; fill:none; stroke:var(--surface); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.lightbox .x:focus-visible, .lightbox .nav:focus-visible{ outline:3px solid var(--surface); outline-offset:2px; }
@media (max-width:600px){ .lightbox{ padding:16px; } .lightbox .nav{ width:44px; height:44px; margin-top:-22px; } .lightbox .prev{ left:6px; } .lightbox .next{ right:6px; } }
@media (prefers-reduced-motion:reduce){ .gtile, .gtile .block-image img{ transition:none; } .gtile:hover .block-image img{ transform:none; } }

/* ══ Medie + tekst = generisk 2-kolonne feature-sektion ═══════════════════════════════
   ENGINE leverer struktur/felter; ALT visuelt (skrå kanter, badge-boks, foto-hældning,
   brand/navy-baggrunde) bor HER i custom-templatet, pr. variant. Dækker designets
   om (foto+badge), join (checkliste | fremhæv-kort, navy) og book (chips+cta, rød). */
.block-media-text{ position:relative; margin-block:clamp(44px,7vw,96px); isolation:isolate; }
.block-media-text > .wrap{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,72px); align-items:center;
}
.block-media-text .mt-copy{ order:1; min-width:0; }
.block-media-text .mt-aside{ order:2; min-width:0; }
.block-media-text--image-left .mt-copy{ order:2; }
.block-media-text--image-left .mt-aside{ order:1; }

/* Tekst-kolonne */
.block-media-text .mt-copy .eq{ margin-bottom:14px; }
.block-media-text h2{
  font-family:var(--font-head); text-transform:uppercase; font-weight:800;
  color:var(--blue-dark); line-height:.96; letter-spacing:.005em; margin:0 0 .5em;
  font-size:clamp(2rem,4.4vw,4rem);
}
.block-media-text .mt-em{ font-style:normal; color:var(--red); }
.block-media-text .mt-text{ color:var(--body); font-size:1.1rem; }
.block-media-text .mt-text p{ margin:0 0 1.05em; }
.block-media-text .mt-text :last-child{ margin-bottom:0; }
/* Chips (pille-nøgleord) */
.block-media-text .mt-chips{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.block-media-text .mt-chips li{
  font-family:var(--font-head); text-transform:uppercase; font-weight:700; letter-spacing:.04em;
  font-size:.82rem; color:var(--blue-dark); background:var(--paper-3); padding:9px 18px; border-radius:999px;
}
/* Tjekliste (røde skrå flueben) */
.block-media-text .mt-list{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px; }
.block-media-text .mt-list li{ display:flex; gap:14px; align-items:flex-start; font-size:1.05rem; }
.block-media-text .mt-ck{ flex:none; width:28px; height:28px; background:var(--red); color:var(--surface);
  display:grid; place-items:center; clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%); }
.block-media-text .mt-ck svg{ width:15px; height:15px; }
/* Knap (rød skrå kasse) */
.block-media-text .mt-cta, .block-media-text .mt-card-cta{
  display:inline-flex; align-items:center; gap:.5em; margin-top:28px;
  font-family:var(--font-head); text-transform:uppercase; font-weight:700; font-size:1.05rem; letter-spacing:.04em;
  padding:.9em 1.6em; color:var(--surface); background:var(--red); cursor:pointer;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); transition:transform .15s ease, filter .2s ease;
}
.block-media-text .mt-cta:hover, .block-media-text .mt-card-cta:hover{ transform:translateY(-2px); filter:brightness(1.06); }

/* Aside — FOTO (4:5, let hældning) + forskudt rød BADGE */
.block-media-text .mt-photo{ position:relative; }
.block-media-text .mt-photo .block-image{ margin:0; aspect-ratio:4/5; overflow:hidden; box-shadow:var(--shadow); }
.block-media-text .mt-photo .block-image :is(picture,img){ width:100%; height:100%; object-fit:cover; display:block; }
.block-media-text--image-right .mt-photo{ transform:rotate(1.4deg); }
.block-media-text--image-left .mt-photo{ transform:rotate(-1.4deg); }
.block-media-text .mt-badge{
  position:absolute; bottom:-18px; left:-22px; max-width:76%; background:var(--red); color:var(--surface);
  padding:20px 26px 22px; box-shadow:var(--shadow);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.block-media-text .mt-badge b{ font-family:var(--font-head); font-size:1.4rem; display:block; line-height:1; }
.block-media-text .mt-badge span{ font-size:.92rem; display:block; margin-top:6px; opacity:.95; }

/* Aside — FREMHÆV-KORT (hvidt) */
.block-media-text .mt-card{ background:var(--surface); color:var(--ink); padding:clamp(28px,3vw,40px); box-shadow:var(--shadow); }
.block-media-text .mt-card h3{ font-family:var(--font-head); text-transform:uppercase; color:var(--blue-dark); font-size:1.9rem; margin:0 0 10px; }
.block-media-text .mt-card p{ color:var(--muted); margin:0 0 22px; }
.block-media-text .mt-card .mt-card-cta{ width:100%; justify-content:center; margin-top:0; }

/* Fuld-bleed nedtonet baggrundsfoto (brand/navy) */
.block-media-text .mt-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.block-media-text .mt-bg .block-image{ margin:0; width:100%; height:100%; }
.block-media-text .mt-bg :is(picture,img){ width:100%; height:100%; object-fit:cover; display:block; }

/* ── Variant BRAND (rød) / NAVY — fuld-bleed farvet sektion m. backdrop ── */
.block-media-text--brand, .block-media-text--navy{ color:var(--surface); padding-block:clamp(56px,8vw,104px); overflow:hidden; }
.block-media-text--brand{ background:var(--red); }
.block-media-text--navy{ background:var(--blue-dark); }
.block-media-text--brand h2, .block-media-text--navy h2{ color:var(--surface); }
.block-media-text--brand .mt-em, .block-media-text--navy .mt-em{
  color:var(--surface); background:var(--red); padding:.02em .22em .08em; display:inline-block; transform:skewX(-9deg);
}
.block-media-text--brand .mt-em > span, .block-media-text--navy .mt-em > span{ display:inline-block; transform:skewX(9deg); }
.block-media-text--brand .mt-text, .block-media-text--navy .mt-text{ color:rgba(255,255,255,.94); }
.block-media-text--brand .mt-chips li{ background:rgba(255,255,255,.16); color:var(--surface); border-radius:0; clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%); }
.block-media-text--navy .mt-chips li{ background:rgba(255,255,255,.14); color:var(--surface); }
.block-media-text--brand .mt-cta{ background:var(--surface); color:var(--red); }
.block-media-text--navy .mt-cta{ background:var(--surface); color:var(--blue-dark); }
/* Foto teksturerer farvebåndet: .mt-bg bærer selv farven, billedet blender
   soft-light med den (tonal tekstur, ikke hue-skift → læsbart selv rød-på-rød). */
.block-media-text--brand .mt-bg{ background:var(--red); }
.block-media-text--navy .mt-bg{ background:var(--blue-dark); }
.block-media-text--brand .mt-bg :is(picture,img), .block-media-text--navy .mt-bg :is(picture,img){ opacity:1; mix-blend-mode:soft-light; }
.block-media-text--brand .mt-bg::after, .block-media-text--navy .mt-bg::after{ content:""; position:absolute; inset:0; }
/* Solid farve i venstre kolonne (tekst-læsbarhed) → foto-tekstur klarest i højre. */
.block-media-text--brand .mt-bg::after{ background:linear-gradient(90deg,var(--red) 0%,var(--red) 26%,rgba(194,0,50,.55) 50%,rgba(194,0,50,0) 78%); }
.block-media-text--navy .mt-bg::after{ background:linear-gradient(90deg,var(--blue-dark) 0%,var(--blue-dark) 26%,rgba(11,42,99,.55) 50%,rgba(11,42,99,0) 78%); }
.block-media-text--brand .mt-photo, .block-media-text--navy .mt-photo{ transform:none; }

@media (max-width:860px){
  .block-media-text > .wrap{ grid-template-columns:1fr; gap:40px; }
  .block-media-text .mt-copy, .block-media-text--image-left .mt-copy{ order:1; }
  .block-media-text .mt-aside, .block-media-text--image-left .mt-aside{ order:2; }
  .block-media-text .mt-photo{ transform:none !important; }
  .block-media-text .mt-badge{ left:0; }
}