/* ============================================================
   HISTORIER-SEKSJON (felleskomponent, HistorierSection.astro)
   Fasit-design fra Flekkefjord Miks: mørkt hovedsak-kort, al-grid,
   arkiv-karusell. Brukes på kommunesidene, forsiden og fremtidige
   sider — config per side, samme komponent i bunn.

   Farger arver fra .kv-page-variablene der de finnes; fallbacks
   gjør seksjonen selvforsynt på sider uten dem (f.eks. forsiden).
   ============================================================ */

.hs-section {
  --hs-mork: var(--kv-mork, var(--surface-utility));
  /* Seksjonen staar paa moerk flate. Gullet gir 4,18 som smaa versaler
   * der — like under kravet. --color-gold-lys er samme gull, 10% lysere,
   * og gir 4,69. */
  --hs-aksent: var(--color-gold-lys);
  --hs-eyebrow-farge: var(--kv-eyebrow, var(--color-gold-mork));
  --hs-ink: var(--kv-ink, var(--color-midnight));
  --hs-body: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  padding: clamp(56px, 8vh, 104px) clamp(20px, 4vw, 56px);
  color: var(--hs-ink);
}
.hs-section--warm { background: var(--color-warm-white); }
.hs-section--cream { background: var(--color-cream); }
.hs-inner { max-width: 1360px; margin: 0 auto; }

/* Caps-etikettene i seksjonen hadde tre stiler (0.9375/0.22, 0.9375/0.2,
 * 0.8125/0.16) — Marions «mylder av font og størrelse». Nå én: 0.8125rem,
 * vekt 600, spacing 0.18em — samme som faktapanelets etiketter. */
.hs-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--hs-eyebrow-farge);
}
.hs-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.6254rem + 3.3052vw, 4.6rem);
  line-height: var(--linje-tett);
  letter-spacing: var(--sperring-tett);
  text-wrap: balance;
}
.hs-intro {
  margin: clamp(14px, 2vw, 22px) 0 0;
  max-width: 62ch;
  font-size: var(--brod);
  line-height: var(--linje-brod);
  color: rgba(10, 22, 40, 0.72);
}

/* ---------- Hovedsak ---------- */
.hs-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  min-height: clamp(380px, 44vh, 500px);
  text-decoration: none;
  color: var(--hs-ink);
  background: var(--hs-mork);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: clamp(20px, 2.6vw, 32px);
}
.hs-feature__image { position: relative; overflow: hidden; min-height: 280px; }
.hs-feature__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 3vw, 42px);
  background: var(--hs-mork);
  color: var(--color-cream);
}
.hs-feature__chip {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--hs-aksent);
}
.hs-feature__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5127rem + 1.6526vw, 3rem);
  line-height: var(--linje-tett);
  /* Titlene kommer fra Publisering, og et langt sammensatt ord
     («undervannseventyret», Kvinesdal 1024) rant 26 px ut av den mørke
     boksen. Bare et ord som er bredere enn boksen brytes. Automatisk
     orddeling (hyphens: auto) delte også korte egennavn som fikk plass på
     neste linje («Kvi- / nesdal»), og er derfor ikke brukt. */
  overflow-wrap: break-word;
}
.hs-feature__ingress { font-size: var(--hs-body); line-height: var(--linje-brod); color: rgba(241, 235, 227, 0.8); }
.hs-feature__cta {
  margin-top: auto;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--etikett);
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: var(--hs-aksent);
}

/* ---------- Al-grid: kortet tar ALLTID den andre flaten ----------
 * «Hvite kort uansett seksjonsbakgrunn» sto her foer, og det holdt bare paa
 * den kremfargede flaten. Paa den varme (#FBF9F6) gir et hvitt kort 1,05 mot
 * bakgrunnen — kortet finnes ikke som flate, bare som skygge, og paa en skjerm
 * med lav kontrast eller i sollys forsvinner det helt.
 *
 * Regelen er at kortet tar den flaten seksjonen ikke har. Ingen ny farge:
 * begge er verdier vi alt bruker, og forholdet blir det samme (1,13) uansett
 * hvilken vei det gaar. */
.hs-section { --al-kortflate: var(--surface-card-light); }
.hs-section--warm { --al-kortflate: var(--kv-krem, var(--color-cream)); }

.hs-section .al-card,
.hs-section .al-card__footer,
.hs-section .al-card__title-bar { background: var(--al-kortflate); }

/* Hover-gradienten i articles-listing.css er laast til rgba(251,249,246) —
 * altsaa den varme flaten. Ligger kortet paa krem, ville tittelfeltet skiftet
 * farge ved hover. Én klasse mer enn basisregelen, siden den bor i en annen
 * fil (se regelen om spesifisitet i CLAUDE.md). */
.hs-section--warm .al-card:hover .al-card__title-bar {
  background: linear-gradient(
    to top,
    rgba(241, 235, 227, 0.95) 0%,
    rgba(241, 235, 227, 0.8) 55%,
    rgba(241, 235, 227, 0.18) 100%
  );
}
.hs-section .al-card { box-shadow: 0 10px 28px rgba(10, 22, 40, 0.08); border-radius: 18px; /* harmonisert kort-radius */ }
.hs-section .al-grid { max-width: none; padding: 0; }
.hs-section .al-grid-section { padding: 0; margin-top: clamp(20px, 2.6vw, 32px); }

/* ---------- Arkivet (Sveiperad) ---------- */
/* Raden bruker hele seksjonsbredden, som boområdekarusellen (Tom 19. okt
   2026): innrammet i hs-inner (1360) stoppet den midt på brede skjermer og
   kuttet et kort med tom plass på begge sider. Nå begynner første kort ved
   seksjonens sidemarg og kuttet skjer i skjermkanten. Overskriften blir i
   rammen. Seksjonen er container, så bredden måles uten rullefeltet og
   siden får ikke sidescroll. Sporet gaar ut i sidemargen med
   --sveiperad-luft, saa neste kort stikker inn fra kanten. */
.hs-section { container-type: inline-size; }
.hs-arkiv { margin-top: clamp(44px, 6vw, 80px); }
.hs-arkiv .sveiperad {
  --sveiperad-luft: clamp(20px, 4vw, 56px);
  /* 100cqw er seksjonens innholdsbredde (uten sidepolstringen). Luften er
     lik sidepolstringen, så vinduet, som stikker luften ut på hver side,
     lander nøyaktig i skjermkanten. */
  width: 100cqw;
  margin-left: calc((100% - 100cqw) / 2);
}
.hs-arkiv__header { margin: 0 0 clamp(18px, 2.6vw, 30px); }
.hs-arkiv__eyebrow { display: block; margin-bottom: 8px; }
.hs-arkiv__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.3831rem + 1.3521vw, 2.6rem);
  line-height: var(--linje-display);
  color: var(--hs-ink);
}
/* Samme flate som al-kortene. Uten dette ville arkivkortene staatt hvite ved
 * siden av kremfargede kort i samme seksjon. */
.hs-section .larch-card { background: var(--al-kortflate); border: 1px solid rgba(10, 22, 40, 0.08); }

@media (max-width: 860px) {
  .hs-feature { grid-template-columns: minmax(0, 1fr); }
  /* width: 100% er noedvendig, ikke pynt. Med bare min-height + aspect-ratio
   * regner nettleseren bredden ut fra hoeyden — 220 x 16/9 = 391px — og
   * bildet sprengte kolonnen paa 316px. Naa styrer bredden, og min-height
   * loefter hoeyden om forholdet gir mindre. */
  .hs-feature__image { width: 100%; min-height: 220px; aspect-ratio: 16 / 9; }
}

/* Mobil: seksjonsluften (styles.css, --mobil-seksjon). */
@media (max-width: 767px) {
  .hs-section { padding-block: var(--mobil-seksjon); }
  /* Står hovedsaken alene, er den det siste i seksjonen. */
  .hs-feature:last-child { margin-bottom: 0; }
}