/* ==========================================================================
   AEROS KIT — SEKSJONSMØNSTRE (presets)
   ==========================================================================

   Avlest fra aerosphone.com live 08.09.2026. Nettstedet har 10 seksjoner på
   desktop, men bare SJU distinkte mønstre — «bildebånd med tekst» brukes to
   ganger. Derfor er dette et BIBLIOTEK av mønstre, ikke ti engangsseksjoner:
   en side oppgir rekkefølgen sin, og samme mønster kan brukes flere ganger
   med ulikt innhold og ulik flate.

   ⚠️ TO UAVHENGIGE AKSER. Det er hele poenget:

       MØNSTER  = oppsettet   (hero · band · delt · smal · bred …)
       FLATE    = fargelaget  (dyp · mellom · krem)

   Et hvilket som helst mønster kan stå på en hvilken som helst flate. Blander
   du dem, får du 21 klasser i stedet for 7 + 3.

   🪤 NAVNEKOLLISJON — LES DENNE. aerosphone.com bruker i dag `A`, `B` og `C`
      som FLATE-klasser (A = dypest, B = ett hakk, C = krem). Tor bruker
      A/B/C/D… om REKKEFØLGEN (seksjon A er heroen, så B, så C). To ulike
      betydninger av samme bokstav på samme nettsted er en garantert feil.
      Kit-et bruker derfor ord om flatene (`--dyp`, `--mellom`, `--krem`) og
      lar bokstavene bety utelukkende posisjon. ⛔ Ikke innfør `.A`/`.B`/`.C`
      her.

   Alt arver skallet i kit.css: `.kit-seksjon` eier padding og flate,
   `.kit-seksjon__inner` eier lesebredden. Mønstrene under legger bare til
   oppsett.
   ========================================================================== */


/* ==========================================================================
   MØNSTER 1 — HERO
   Kilde: `A hero` (1781 px, altså to skjermer). Fullflate motiv, utsagnet
   nede til venstre, faktalinja under.

   ⛔ Teksten ligger IKKE midt oppå motivet. Den står i nedre venstre hjørne
      der bakgrunnen er mørkest, og har sin egen toning under seg — ellers
      avhenger lesbarheten av motivet, og da må hvert nye bilde måles.
   ========================================================================== */

.kit-hero {
  position: relative;
  min-height: 82svh;
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
  background: var(--kit-flate);
}

.kit-hero__motiv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--kit-hero-fokus, 50% 40%);
  z-index: 0;
}

/* Toningen bærer lesbarheten, ikke motivet. */
.kit-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(10, 16, 24, .92) 0%,
    rgba(10, 16, 24, .72) 22%,
    rgba(10, 16, 24, .28) 48%,
    rgba(10, 16, 24, .10) 72%
  );
}

.kit-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--kit-max-w);
  margin: 0 auto;
  padding: 0 var(--kit-edge) clamp(40px, 6vw, 72px);
}

.kit-hero__say { max-width: min(52ch, 560px); }

.kit-hero__tittel {
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.08;
  color: var(--p-cream, #FFFBEF);
  margin: 0 0 16px;
  text-wrap: balance;
}

.kit-hero__ingress {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65;
  color: rgba(255, 251, 239, .82);
  margin: 0 0 22px;
  max-width: 48ch;
}


/* ==========================================================================
   MØNSTER 2 — FAKTASTRIPE
   Kilde: `.hero-facts` («100 mm · Replaceable · NFC»). Tre korte fakta.

   🪤 «·»-LISTER BREKKER FEIL når de skrives som én streng: linja kan brytes
      rett etter en prikk, så neste linje STARTER med et skilletegn. Hvert
      ledd får derfor sitt eget element med `white-space: nowrap`, og prikken
      tegnes av CSS på `:not(:last-child)::after`.
      ⛔ Ikke `::before` — pseudoelementet ligger da inne i leddet og flytter
      med til neste linje, altså nøyaktig samme feil.
   ========================================================================== */

.kit-fakta__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--kit-fakta-gap, 22px);
}

.kit-fakta__ledd {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kit-blekk-dim);
  white-space: nowrap;
  padding: 6px 0;
}

.kit-fakta__ledd:not(:last-child)::after {
  content: '·';
  margin-left: var(--kit-fakta-gap, 22px);
  color: var(--kit-aksent);
  opacity: .75;
}

/* På heroens egen flate står stripa rett under utsagnet. */
.kit-hero .kit-fakta__liste { margin-top: 26px; }
.kit-hero .kit-fakta__ledd  { color: rgba(255, 251, 239, .72); }


/* ==========================================================================
   MØNSTER 3 — BILDEBÅND MED TEKST
   Kilde: `A band is-low` og `B band` (611 px hver). Fullflate motiv med en
   tekstblokk oppå, bredde `min(44%, 560px)`.

   Brukes TO ganger på aerosphone — det er derfor dette er et mønster og ikke
   en engangsseksjon.

   Modifikatorer avlest fra live:
     --lavt   (`is-low`)   tekstblokka står lavere i båndet
     --hoyre               motivet leses fra høyre; teksten flyttes dit
   ========================================================================== */

.kit-band {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(380px, 48vw, 620px);
  padding: 0;
  overflow: hidden;
}

.kit-band__motiv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--kit-band-fokus, 50% 50%);
  z-index: 0;
}

.kit-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(10, 16, 24, .82) 0%,
    rgba(10, 16, 24, .55) 38%,
    rgba(10, 16, 24, 0) 72%
  );
}

.kit-band--hoyre::after {
  background: linear-gradient(
    to left,
    rgba(10, 16, 24, .82) 0%,
    rgba(10, 16, 24, .55) 38%,
    rgba(10, 16, 24, 0) 72%
  );
}

.kit-band__say {
  position: relative;
  z-index: 2;
  max-width: min(44%, 560px);
  margin: 0 auto 0 0;
  padding: clamp(28px, 4vw, 56px) var(--kit-edge);
}

.kit-band--hoyre .kit-band__say { margin: 0 0 0 auto; }
.kit-band--lavt  .kit-band__say { align-self: end; padding-bottom: clamp(34px, 5vw, 68px); }

.kit-band__tittel {
  font-family: var(--font-serif, Georgia, serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.16;
  color: var(--p-cream, #FFFBEF);
  margin: 0 0 12px;
  text-wrap: balance;
}

.kit-band__tekst {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 251, 239, .8);
  margin: 0;
  max-width: 42ch;
}

/* ==========================================================================
   MØNSTER 3b — FOTOBÅND MED FRISONE
   Tekst INNE i bildet, ved siden av motivet, som aldri kan overlappe det.

   🪤 HVORFOR IKKE `background-size: cover`: et cover-bilde beskjæres ULIKT
      per vindusforhold. Motivet flytter seg da i forhold til tekstspalta, og
      en tekst som står klar av telefonene på 1440 px kan ligge oppå dem på
      1920. Vi har gått i den to ganger før (03.08.2026, heroen).

   ✅ LØSNINGEN: containeren får bildets EGET forhold (`aspect-ratio`), og
      bildet fyller den uten beskjæring. Da er hver piksel i motivet låst til
      en fast PROSENT av containeren — og en tekstspalte oppgitt i prosent
      lander på nøyaktig samme sted uansett bredde. Ingen beskjæring, ingen
      drift, ingen måling per bruddpunkt.

   Fire tall per bilde, og bare de fire, styrer alt:
     --foto-forhold     bildets bredde/høyde
     --foto-fri-start   der frisonen begynner (% fra venstre)
     --foto-fri-slutt   der motivet begynner (% fra venstre)
     --foto-topp        tekstblokkas loddrette anker
     --foto-loft        forskyvning (-50% = sentrert om --foto-topp)
     --foto-maks-h      høydetak for ekstreme bredder

   ⛔ Endrer du bildet, MÅL dem på nytt. Frisonen er en egenskap ved motivet.

   📏 DEN LODDRETTE PLASSERINGEN AVGJØR KONTRASTEN, ikke bare den vannrette.
      Målt på rombildet med mørkt blekk: samme tekstspalte gir **8,76:1 i
      øvre halvdel** og **3,50:1 sentrert** — under AA — fordi skjenken ligger
      i nedre venstre del av frisonen. ⛔ Ikke sentrer teksten «fordi det ser
      ryddigere ut» uten å måle på nytt.
   ========================================================================== */

.kit-band--foto {
  --foto-forhold:   1.85;
  --foto-fri-start: 5%;
  --foto-fri-slutt: 52%;
  /* 🪤 HØYDETAK, IKKE BREDDETAK. Et breddetak ga kanter på skjermer over
     1600 px — og fotobåndet skal gå kant i kant (Tor 08.09: «det må bli
     fullbredde på juno-siden, viktig»).

     ✅ Hvorfor taket er trygt: når høyden kappes, blir containeren RELATIVT
     BREDERE enn bildet, og `object-fit: cover` beskjærer da bare LODDRETT.
     De vannrette prosentene — altså frisonen og telefonenes kant — er helt
     uberørt. Garantien står. Det er kun ved et SMALERE forhold at cover
     ville beskåret vannrett, og dit kommer vi aldri.

     📏 Kontrollmåling for den loddrette forskyvningen taket gir: ved 2560 px
     og 100svh ser vi midtre 63 % av bildet, og tekstblokka lander på
     y ≈ 34–52 % — innenfor det målte trygge båndet (7,87:1 for 25–58 %).
     ⛔ Setter du taket lavere enn ~70svh, MÅL kontrasten på nytt: under
     y = 58 % faller den til 3,5:1. */
  --foto-maks-h:    100svh;

  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: var(--foto-forhold);
  max-height: var(--foto-maks-h);
  min-height: 0;
  overflow: hidden;
}

/* Bildet fyller containeren nøyaktig. Fordi forholdet er det samme, er
   `cover` her identisk med «ingen beskjæring» — motivet står urørt. */
.kit-band--foto .kit-band__motiv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ⛔ Ingen toning. Frisonen er ren bakgrunn i motivet; legger vi en gradient
   over, mørkner vi et lyst bilde uten grunn. Trenger et motiv likevel hjelp,
   er det feil motiv til dette mønsteret. */
.kit-band--foto::after { display: none; }

.kit-band--foto .kit-band__say {
  position: absolute;
  top: var(--foto-topp, 50%);
  translate: 0 var(--foto-loft, -50%);
  left: var(--foto-fri-start);
  /* Spalta slutter der motivet begynner, minus en luftmargin. Regnet, ikke
     gjettet — så den kan aldri vokse inn i telefonene. */
  width: calc(var(--foto-fri-slutt) - var(--foto-fri-start) - 3%);
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
}

/* Teksten må krympe med containeren, ellers renner den ut av frisonen når
   vinduet smalner. Knyttet til vw i samme takt som boksen. */
.kit-band--foto .kit-band__tittel {
  font-size: clamp(19px, 2.5vw, 36px);
  line-height: 1.14;
  margin: 0 0 clamp(6px, .8vw, 12px);
}

.kit-band--foto .kit-band__tekst {
  font-size: clamp(12px, 1.15vw, 16px);
  line-height: 1.6;
  max-width: none;
}

.kit-band--foto .kit-eyebrow {
  font-size: clamp(9px, .78vw, 11px);
  margin-bottom: clamp(5px, .7vw, 12px);
}

/* Mørkt motiv: teksten er krem. Lyst motiv: legg `--lyst-motiv` på seksjonen. */
.kit-band--foto .kit-band__tittel { color: var(--p-cream, #FFFBEF); }
.kit-band--foto .kit-band__tekst  { color: rgba(255, 251, 239, .84); }

.kit-band--foto.kit-band--lyst-motiv .kit-band__tittel { color: #14100A; }
.kit-band--foto.kit-band--lyst-motiv .kit-band__tekst  { color: rgba(20, 16, 10, .78); }
.kit-band--foto.kit-band--lyst-motiv .kit-eyebrow      { color: #7E6F45; }

/* --- LESBARHET PÅ LYST MOTIV: RETNINGSBESTEMT FADE --------------------
   📏 MÅLT per tekstdel, og det var TO ekte feil før dette:
     · `<em>` arvet krem (`--text`) og sto på 1,26:1 — nesten usynlig
     · eyebrow #7E6F45 måler 4,78:1 på den JEVNE kremflaten, men bare
       2,11:1 mot fotoets verste flate rgb(184,166,153).
       ⛔ En farge som holder på én flate holder ikke på en annen.

   🪤 FØRSTE FORSØK VAR EN KREM RADIAL FLEKK BAK TEKSTBLOKKA — forkastet av
      Tor: «det passet dårlig med krem». Årsaken er målbar: bildets egen lyse
      tone er rgb(241,242,246), altså KJØLIG (B > R), mens brand-kremen
      #FFFBEF er VARM (R +14, B −7). En varm film over et kaldt bilde gulner.
      Og en radial flekk bak teksten leser som en lapp, ikke som bildet.

   ✅ NÅ: en LINEÆR fade fra venstre kant, i BILDETS EGEN tone, over hele
      seksjonshøyden. Da fader bildet selv ut mot kanten og teksten ligger
      INNI motivet i stedet for oppå en flekk.
      Målt: fargen endrer den lyseste flaten med 3–6 av 255 (usynlig), mens
      verste flate løftes nok til at alt klarer AA:
        eyebrow 4,92:1 · overskrift 9,39:1 · brødtekst 6,09:1 · etiketter 5,21:1

   ⛔ `--foto-fade` ER EN EGENSKAP VED BILDET, som frisonen. Nytt motiv ⇒
      sample de lyseste 20 % av pikslene i frisonen og sett tonen på nytt.
      Bruk ALDRI brand-kremen her uten å sjekke om motivet er varmt eller kaldt.
   ⛔ Ikke gjør faden mørk — da må teksten bli krem, og et lyst motiv mister
      hele poenget sitt. */

.kit-band--foto.kit-band--lyst-motiv::after {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--foto-fade, rgb(241, 242, 246)) 0%,
    color-mix(in srgb, var(--foto-fade, rgb(241, 242, 246)) 82%, transparent) 18%,
    color-mix(in srgb, var(--foto-fade, rgb(241, 242, 246)) 52%, transparent) 40%,
    color-mix(in srgb, var(--foto-fade, rgb(241, 242, 246)) 18%, transparent) 58%,
    transparent 70%
  );
}

/* ⛔ em SKAL arve overskriftens farge — det var feil nummer én. */
.kit-band--foto.kit-band--lyst-motiv .kit-band__tittel em,
.kit-band--foto.kit-band--lyst-motiv .kit-band__tittel strong { color: inherit; }

/* Gullet mørknet til det klarer AA mot fotoets verste flate. */
.kit-band--foto.kit-band--lyst-motiv .kit-eyebrow { color: #4A4230; }

/* --- Rent bildebånd: kun motivet, ingen tekst (kilde: `is-still is-low`).
       Da skal det heller ikke ligge en toning over — den finnes bare for å
       bære tekst. --- */
.kit-band--rent::after { display: none; }
.kit-band--rent { min-height: clamp(300px, 38vw, 520px); }

/* 🪤 To bånd rett etter hverandre skal møtes kant i kant. Et fullbredde-motiv
   ER flaten og trenger ikke luft for å puste. */
.kit-band + .kit-band { margin-top: 0; }


/* ==========================================================================
   MØNSTER 4 — DELT (to spalter)
   Kilde: `B #fund` — `.wrap.backed-grid`, grid `494px 494px` i 1180 px.
   Tall/framdrift til venstre, motiv til høyre.
   ========================================================================== */

.kit-delt__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  max-width: var(--kit-max-w);
}

.kit-delt--flip .kit-delt__media { order: -1; }

.kit-delt__media {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2, #0d1a26);
}

.kit-delt__media img {
  display: block;
  width: 100%;
  height: auto;
}

.kit-delt__tekst > :first-child { margin-top: 0; }
.kit-delt__tekst > :last-child  { margin-bottom: 0; }


/* ==========================================================================
   MØNSTER 5 — SMAL LESESPALTE
   Kilde: `C #story` (`.narrow`, 760 px, seks avsnitt) og `A #who`.
   Den ene redaksjonelle flaten der ordene bærer alene.
   ========================================================================== */

.kit-smal__inner { max-width: 760px; }

.kit-smal__inner p {
  font-size: 16.5px;
  line-height: 1.8;
  max-width: none; /* spalta ER lesebredden — ikke begrens den to ganger */
}

/* Midtstilt variant: kilde `A #fund` («Reserve yours.») — overskrift, kort
   tekst, én knapp. Den eneste seksjonen uten motiv i det hele tatt. */
.kit-smal--midt .kit-smal__inner { text-align: center; }
.kit-smal--midt .kit-smal__inner p { margin-left: auto; margin-right: auto; }


/* ==========================================================================
   MØNSTER 6 — BRED BLOKK
   Kilde: `A #who` og `B #join` (`.wrap`, 1180 px). Bærer kort, rutenett og
   flere avsnitt side om side.
   ========================================================================== */

.kit-bred__inner { max-width: var(--kit-max-w); }

.kit-bred__rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: 30px;
}

/* 🪤 KORT I ET RUTENETT SKAL DELE VANNRETTE LINJER. En etikett som brøt til
   to linjer dyttet verdien ~14 px ned i den ene flisen. Reserver plass til
   den lengste etiketten i stedet for å bunnjustere: en strek øyet følger på
   tvers er mer synlig enn luft i bunnen. */
.kit-kort {
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--kit-strek);
  border-radius: 12px;
  background: color-mix(in srgb, var(--kit-blekk) 4%, transparent);
}

.kit-kort__etikett {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kit-aksent);
  margin: 0 0 10px;
  line-height: 1.35;
}

.kit-kort p { font-size: 14.5px; margin: 0; }


/* ==========================================================================
   MØNSTER 8 — GALLERI
   Kilde: `/juno` på aeros.no (`.juno-gallery`, seks bilder i 3×2).
   Finnes ikke på aerosphone.com — lagt til fordi produktsidene trenger det,
   og fordi et galleri ellers ville blitt skrevet på nytt per side.

   🪤 Bildene har FAST forhold (3/4) og `object-fit: cover`. Uten det setter
      seks ulike opptak seks ulike høyder, og rutenettet blir en trapp.
      Et bilde som ikke tåler beskjæring får `--contain` og vises helt.
   ========================================================================== */

.kit-galleri__rutenett {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.2vw, 16px);
  max-width: var(--kit-max-w);
  margin: 0 auto;
}

.kit-galleri__bilde {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: 14px;
  background: var(--surface-2, #0d1a26);
}

.kit-galleri__bilde--contain {
  object-fit: contain;
  object-position: center center;
  background: var(--surface-3, #0a0a0a);
}

@media (max-width: 767px) {
  .kit-galleri__rutenett { grid-template-columns: repeat(2, 1fr); }
}

/* --- FULLBREDDE-VARIANT: filmstripe ------------------------------------
   Kilde: Tors ønske 08.09 om at galleriet skal gå kant i kant som seksjonen
   under. Et 3×2-rutenett i full bredde blir for høyt — på 1920 px ville hver
   flis bli 640 px bred og 853 px høy, altså 1 706 px for to rader.

   ✅ Derfor ÉN rad på desktop: seks fliser à 1/6 bredde. På 1920 px blir det
   320×427 per flis og 427 px totalt — et bånd, ikke en vegg.
   Bruddene under er valgt der flisa blir for smal til å lese motivet:
     ≥1200 px  6 på rad
     768–1199  3 × 2
     <768      2 × 3

   🪤 Gapet viser seksjonens flate mellom flisene. Står galleriet på samme
      flate som naboen, forsvinner skillet — gi det en egen flate. */

.kit-galleri--bleed { padding-left: 0; padding-right: 0; }

.kit-galleri--bleed .kit-galleri__rutenett {
  max-width: none;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--kit-galleri-gap, 6px);
}

.kit-galleri--bleed .kit-galleri__bilde { border-radius: 0; }

@media (max-width: 1199px) {
  .kit-galleri--bleed .kit-galleri__rutenett { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .kit-galleri--bleed .kit-galleri__rutenett { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   MØNSTER 7 — AVSLUTNING
   Kilde: `B #join`. Bred blokk med flere veier ut (knapper, delingslenker).
   Egen klasse fordi den alltid er sidens SISTE seksjon og skal ha litt mer
   luft under seg enn en vanlig blokk.
   ========================================================================== */

.kit-slutt { padding-bottom: var(--kit-band-luft); }

.kit-slutt__valg {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}


/* ==========================================================================
   MOBIL — ett bruddpunkt for mønstrene

   Regelen på tvers: FLERSPALTEDE MØNSTRE BLIR ÉN SPALTE, og tekst som lå
   oppå et motiv får motivet OVER seg i stedet. Lesbarheten skal ikke avhenge
   av hvor mørkt et bilde tilfeldigvis er på 390 px.
   ========================================================================== */

@media (max-width: 767px) {

  .kit-hero { min-height: 76svh; }
  .kit-hero__say { max-width: none; }

  /* Båndet: motivet får sin egen høyde, teksten står under på flaten.
     ⛔ Ikke behold tekst-oppå-bilde her — 44 %-blokka blir 90 % på mobil,
     og da er toningen det eneste som skiller tekst fra motiv. */
  .kit-band {
    display: block;
    min-height: 0;
  }
  .kit-band__motiv {
    position: relative;
    height: clamp(220px, 58vw, 320px);
  }
  .kit-band::after { display: none; }
  .kit-band__say {
    max-width: none;
    margin: 0;
    padding: clamp(24px, 6vw, 34px) var(--kit-edge);
    background: var(--kit-flate);
  }
  .kit-band__tittel { color: var(--kit-blekk); }
  .kit-band__tekst  { color: var(--kit-blekk-dim); max-width: none; }

  .kit-band--rent .kit-band__motiv { height: clamp(200px, 52vw, 300px); }

  /* --- FOTOBÅND PÅ MOBIL: SLAGORDET BLIR MED INN I BILDET -------------
     Tor 08.09: «på telefon kan vi gjøre seksjonen enda bredere i høyden og få
     inn noe veldig kort ved siden av telefonene, så det ligner mer på desktop».

     🔑 GREPET: bildet er liggende (1.79), men containeren blir STÅENDE på
     mobil. Da fyller `cover` høyden og beskjærer VANNRETT — og vi velger selv
     hvilket utsnitt med `object-position`. Utsnittet legges så det inneholder
     BÅDE frisonen og telefonene, altså samme komposisjon som desktop.

     🚨 FORMATET ER BESTEMT AV AT BEGGE TELEFONENE MÅ VÆRE MED. Frisonen
     starter på 37 % og den lille telefonen slutter på 92 % — vinduet må altså
     romme minst 55 % av bildebredden. Målt per format på 375 px:

       3/4  → vindu 41,9 %  ✗ kutter den lille telefonen
       4/5  → vindu 44,6 %  ✗
       9/10 → vindu 50,2 %  ✗
       1/1  → vindu 55,8 %  ✅ viser 37–93 %, frisone 159 px
       5/4  → vindu 69,8 %  ✅ men da er seksjonen knapt høyere enn før

     ⇒ **1/1** valgt: 375×375 mot 209 px før (80 % høyere), begge telefonene
     med, og `object-position: 84%` = 37 / (100 − 55,8).

     ⛔ `--foto-mobil-forhold` og `--foto-mobil-fokus` HØRER SAMMEN. Endrer du
        det ene, regn om det andre — og sjekk at den lille telefonen fortsatt
        er med. Et format som kutter den, fjerner hele poenget med bildet.
     ⛔ BRØDTEKST OG MÅL BLIR VÆRENDE UNDER BILDET. Frisonen er ~200 px; det
        holder til et slagord, ikke til løpende tekst. */

  .kit-band--foto {
    position: relative;
    aspect-ratio: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
  }

  .kit-band--foto .kit-band__motiv {
    position: relative;
    height: auto;
    width: 100%;
    aspect-ratio: var(--foto-mobil-forhold, 1 / 1);
    object-fit: cover;
    object-position: var(--foto-mobil-fokus, 84%) center;
  }

  /* Slagordet — eyebrow + overskrift — løftes ut av flyten og inn i bildets
     frisone. Resten av `say` blir stående under. */
  .kit-band--foto .kit-band__slogan {
    position: absolute;
    top: var(--foto-mobil-topp, 7%);
    left: var(--kit-edge);
    /* 36 %: målt 8,60:1 kontrast og 24 px klaring til telefonene.
       Ved 40 % faller klaringen til 9 px. */
    width: var(--foto-mobil-tekst, 36%);
    z-index: 2;
  }

  .kit-band--foto .kit-band__slogan .kit-band__tittel {
    font-size: clamp(21px, 6.4vw, 30px);
    line-height: 1.1;
    margin: 0;
  }

  .kit-band--foto .kit-band__slogan .kit-eyebrow {
    font-size: 9px;
    letter-spacing: .16em;
    margin-bottom: 7px;
  }

  /* Lyst motiv ⇒ mørkt blekk, også på mobil. ⛔ Ikke la det arve seksjonens
     krem-på-navy — slagordet ligger nå på et LYST bilde. */
  .kit-band--foto.kit-band--lyst-motiv .kit-band__slogan .kit-band__tittel { color: #14100A; }
  .kit-band--foto.kit-band--lyst-motiv .kit-band__slogan .kit-eyebrow      { color: #4A4230; }
  .kit-band--foto.kit-band--lyst-motiv .kit-band__slogan .kit-band__tittel em { color: inherit; }

  /* 🪤 Faden er absolutt mot SEKSJONEN, og på mobil står teksten UNDER
     bildet — uten dette ville den lagt seg over brødteksten også. Her
     begrenses den til bildets egen boks. */
  .kit-band--foto.kit-band--lyst-motiv::after {
    bottom: auto;
    width: 100%;
    aspect-ratio: var(--foto-mobil-forhold, 1 / 1);
  }
  .kit-band--foto:not(.kit-band--lyst-motiv) .kit-band__slogan .kit-band__tittel { color: var(--p-cream, #FFFBEF); }
  .kit-band--foto:not(.kit-band--lyst-motiv) .kit-band__slogan .kit-eyebrow      { color: var(--gold, #C6B996); }

  /* Under bildet: brødtekst og mål på seksjonens egen flate. */
  .kit-band--foto .kit-band__say {
    position: static;
    translate: none;
    left: auto;
    width: auto;
    padding: clamp(22px, 5.5vw, 32px) var(--kit-edge);
    background: var(--kit-flate);
  }

  .kit-band--foto .kit-band__tekst,
  .kit-band--foto.kit-band--lyst-motiv .kit-band__tekst { color: var(--kit-blekk-dim); font-size: 15px; max-width: none; }

  .kit-delt__inner { grid-template-columns: 1fr; gap: 26px; }
  .kit-delt--flip .kit-delt__media { order: 0; }

  .kit-bred__rutenett { grid-template-columns: 1fr; }

  .kit-fakta__liste { gap: 0 14px; }
  .kit-fakta__ledd  { font-size: 11px; }
  .kit-fakta__ledd:not(:last-child)::after { margin-left: 14px; }
}

/* Under 375 px holder ikke to spalter i et rutenett — målt: 360 px gir
   148 px kort, og lange linjer brekker uansett skriftstørrelse. */
@media (max-width: 374px) {
  .kit-bred__rutenett { grid-template-columns: 1fr; }
}