/* ============================================================================
   OLB HERO v1.0.2 — Phase 1 coupling layer (repair RC1)
   Onlinebutikken.com · kanonisk hero for forsiden og større kampagneindgange
   v1.0.2: BUG-05 H1 bruger H1-tokens (LH 1.10 / −0.015em); G-09 eyebrow/intro
   bruger egne LH-tokens; G-07 --gap-inline; BUG-06 målekommentar rettet.

   Dette lag OPFINDER INGEN designtokens og INGEN farver. Alle farve-, typo-,
   afstands-, radius- og skyggeværdier er referencer til tokens som et låst lag
   allerede erklærer.

   Geometrien er derimod hero-coupling decisions: de kan ikke udtrykkes som et
   token, fordi intet låst lag ejer dem. Det gælder kolonnefordelingen
   (60/40, 46 %, 44 %), maskens fade-stop (20 %, 26 %), mediets højdegrænser
   (aspect-ratio 3/1, max-height 120px), H1'ens tegnbudget (30ch) og
   ordbrydningsreglen under 360 px. De er begrundet i målinger i
   MASTER-FAKTA.md og skal behandles som beslutninger, ikke som tokens.

   Ejerskab:
     .olb-hero (radius, overflow, border:0, shadow:none)     FORM_OG_DYBDE v1.0
     --hero-padding, --hero-gap-*, --hero-to-content-space    LAYOUT v0.9.3
     --season-hero-bg/fg                                      FARVE v1.0.4
     --radius-hero, --shadow-none                             FORM_OG_DYBDE v1.0
     fokus, motion, knapper                                   de respektive låste lag

   Denne fil gentager IKKE .olb-hero-shellen fra FORM_OG_DYBDE v1.0. Den
   gentager ikke shell-reglen; den tilføjer kun den indre struktur, som intet
   låst lag ejer, plus display/background/color/min-height på samme selektor.

   Målte bindinger (se MASTER-FAKTA.md for tallene bag hver):
     · Eyebrow bruger --season-hero-fg. Det er den eneste token der klarer
       4,5:1 på alle seks sæsoner. Hverken --season-accent eller
       --season-accent-fg kan bære tekst på hero-fladen.
     · Mørke sæsoner bærer .olb-on-dark på heroen, så den låste 2 px
       hvide kant på primary-knappen giver 3:1 mod fladen.
     · Teksten ligger på sin egen flade, aldrig over billedet. En scrim
       kan ikke garantere kontrast over ukendt billedindhold.
     · 220 px er et gulv, ikke en fast højde. Ingen 100vh.
   ========================================================================= */

/* --------------------------------------------------------------------------
   1. Hero — indre struktur
   Shell-reglen er låst i FORM_OG_DYBDE v1.0 og gentages ikke:
     border-radius: var(--radius-hero); overflow: hidden;
     border: 0; box-shadow: var(--shadow-none);
   Her tilføjes kun layoutet inde i den.
   -------------------------------------------------------------------------- */

.olb-hero {
  display: grid;
  background: var(--season-hero-bg);
  color: var(--season-hero-fg);
  min-height: 220px;
}

.olb-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--hero-padding);
  min-width: 0;
}

.olb-hero__heading {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-h1);
  /* BUG-05: Typografi §4.1/§14 – H1 = 1.10 / −0.015em. Tokennavnet "display"
     dækker Display OG H1 i Typografi v0.9.8 (G-18, dokumenteret, ikke omdøbt). */
  line-height: var(--line-height-display);
  letter-spacing: var(--tracking-display);
  color: var(--season-hero-fg);
  margin: 0;
  max-width: 30ch;
}

/* Eyebrow.
   Skriften er --font-family-ui, ikke --font-family-heading. Typografimasteren
   binder Bricolage til Display/H1/H2 (og større kampagneoverskrifter) og
   lister udtrykkeligt labels under Inter: Bricolage må aldrig bruges til
   labels. --font-family-ui peger allerede på body-familien, så bindingen
   tilføjer ingen token.

   Ingen text-transform. Masteren forbyder uppercase i labels, og
   text-transform optræder ikke én eneste gang i hele den låste stack — den
   var hero-lagets egen tilføjelse. Eyebrowen skrives i den case redaktionen
   leverer.

   Farven er --season-hero-fg, ikke en accent. Målingen viser at ingen
   accent-token klarer 4,5:1 på hero-fladen: --season-accent fejler på fem
   af seks sæsoner og --season-accent-fg på fire. Hierarkiet kommer derfor
   fra størrelse, vægt og tracking, ikke fra farve. */
.olb-hero__eyebrow {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-overline);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-overline);   /* G-09 (var: --line-height-price) */
  letter-spacing: var(--tracking-badge);
  color: var(--season-hero-fg);
  margin: 0 0 var(--hero-gap-eyebrow);
}

/* Intro.
   --measure-hero er 36ch og kommer fra typografisystemet. Målet gælder
   tekstblokken, ikke overskriften. */
.olb-hero__intro {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);    /* G-09: 1.50, Typografi §4.2 (var 1.55) */
  color: var(--season-hero-fg);
  max-width: var(--measure-hero);
  margin: var(--hero-gap-intro) 0 0;
}

/* CTA-række.
   Knapperne er de låste. Heroen opfinder ingen varianter og ingen størrelser.
   flex-wrap gør arbejdet uden et brækpunkt.
   BUG-06 (v1.0.2, målt i repair RC1 med Inter fra Fontsource): «Se ugens
   tilbud» 161 px + «Se alle tilbud» 139 px + 12 px = 312 px. Heroen ligger i
   .olb-container, så content-bredden er viewport − 2 × gutter − 2 × 20 px:
   293 px ved 360, 307 ved 375, 321 ved 390. Knapperne ombryder derfor op til
   ca. 380 px (ikke 355 px som tidligere angivet). Adfærden er korrekt; kun
   målingen var forkert (den udelod page-gutteren). */
.olb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline);             /* G-07: 12, var --space-3 */
  margin-top: var(--hero-gap-cta);
}

.olb-hero__actions .olb-button {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   2. Medie
   Kompositionen er den ønskede: tekstblok til venstre, billedfelt til højre,
   og billedet fader ind mod tekstfladen. Heroen har ingen kant og ingen skygge
   (låst), så overgangen kan ikke komme fra en kant. Den kommer fra en maske,
   som er ren alpha og ikke indfører nogen farve.

   Betingelsen for at masken virker er at mediefeltet er transparent.
   Et mediefelt med egen baggrund ville skinne igennem præcis der hvor
   masken fader ud. Den tidligere `background: var(--season-surface)` var
   netop en sådan fejl: --season-surface er LYS i alle sæsoner (#F7ECE4 i jul,
   #FDE7EA i dansk), så der opstod et lyst bånd gennem den mørke hero.
   Med feltet transparent afslører masken i stedet heroens egen flade,
   --season-hero-bg, og overgangen er dermed en ægte tonenedbrydning i
   sæsonens egen farve. Ingen ny farve, ingen ny token.

   På mobil er mediet et lavt bånd. Layoutmasteren kræver at kampagnebilledet
   holdes til ca. 3:1 og maks. 120 px, og at produktindholdet kan begynde på
   første skærm. 3:1 ved 255,5 px er 85 px, så loftet på 120 px rammer først
   ved ca. 405 px. Ingen af de to regler kan derfor brydes.
   -------------------------------------------------------------------------- */

.olb-hero__media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 3 / 1;
  max-height: 120px;
  /* Ingen baggrund. Masken nedenfor fader billedet ud mod hero-fladen, og
     enhver baggrund her ville blive synlig i fadezonen. */
  background: none;
}

.olb-hero__media img,
.olb-hero__media picture,
.olb-hero__media video {
  display: block;
  width: 100%;
  height: 100%;
}

.olb-hero__media img {
  object-fit: cover;
  object-position: center;
}

/* --------------------------------------------------------------------------
   3. Tablet 768–1023 — 60/40 tekst/billede (låst i layoutmasteren §13).
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  /* Layoutmasteren §13: mobilheroen er som standard kompakt uden billede, og
     «billedvariant er en eksplicit kampagnevariant». Uden denne vagt ville
     enhver billedløs hero holde en tom kolonne på 40 % — målt 307 px ved
     768 px og 717 px ved 1280 px. Vagten gør den billedløse variant til en
     ægte fuldbredde hero. :has() bruges allerede i den låste FORMS-stack. */
  .olb-hero:has(.olb-hero__media) {
    grid-template-columns: minmax(0, 60%) minmax(0, 40%);
    align-items: stretch;
  }

  .olb-hero__media {
    aspect-ratio: auto;
    max-height: none;
  }

  /* Overgangen mellem billede og tekstflade. Ren alpha: masken tilføjer
     ingen farve, den afslører blot hero-fladen bag billedet. Det er den
     eneste måde at lave overgangen på uden en kant, som heroen ikke må have. */
  .olb-hero__media img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%);
    mask-image: linear-gradient(to right, transparent 0, #000 20%);
  }
}

/* --------------------------------------------------------------------------
   4. Desktop ≥1024 — fleksibel fordeling 40/60–55/45 (låst).
   Tekstkolonnen får plads efter sit indholdsmål frem for et mekanisk
   procenttal; billedet tager resten.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .olb-hero:has(.olb-hero__media) {
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  }

  /* Bredere fadezone her, hvor mediefeltet er størst. */
  .olb-hero__media img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%);
    mask-image: linear-gradient(to right, transparent 0, #000 26%);
  }
}

@media (min-width: 1280px) {
  .olb-hero:has(.olb-hero__media) {
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   5. Under 360 px accepteres tre linjer i H1 (låst i typografimasteren §6.1).
   Teksten må ikke presse layoutet i stykker, så ordbrydning slås til.
   -------------------------------------------------------------------------- */

@media (max-width: 359.98px) {
  .olb-hero__heading,
  .olb-hero__intro {
    overflow-wrap: anywhere;
  }
}

/* --------------------------------------------------------------------------
   6. Dark-surface kontekst
   jul, sommer og dansk har mørke hero-flader. Der falder den terracotta
   primary-knap under 3:1 mod fladen (1,91 / 1,21 / 1,13). Den låste regel
   .olb-on-dark giver knappen en 2 px --color-text-inverse kant, som klarer
   3:1 på alle tre (9,96 / 6,32 / 5,88). Heroen skal derfor bære
   .olb-on-dark i den mørke kontekst — det er en markup-regel, ikke en
   ny CSS-regel. Denne fil tilføjer intet selv.

   Governance: .olb-on-dark sættes på .olb-hero når --season-hero-fg er
   lys. Farvemasteren afgør hvilke sæsoner det er.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   7. Reduceret bevægelse

   Heroen indfører ingen transition, så den har ingen regel her.

   Der skal heller ikke tilføjes én: .olb-hero * med transition-duration: 0s
   ville ramme de knapper heroen indeholder, og BUTTONS v1.0.1 sænker netop
   spinnerens varighed til 2,4 s under prefers-reduced-motion af hensyn til
   vestibulære gener. En hero-regel ville overskrive den låste beslutning.
   -------------------------------------------------------------------------- */