/* regions.css — the 14 content regions: hero, breadcrumb, and the shared
   .ae-region rhythm every section below the fold uses. Alternating bands
   (odd regions plain --ae-bg, even regions --ae-bg-2) replace the donor's
   flat single background, giving the "ice sheet" layered look without a
   second class per section. */

.ae-breadcrumb {
  /* Sits directly under the full-bleed offer band now (see markup order
     in index.html) — asymmetric padding keeps the mobile first-screen
     budget tight (see .ae-hero__inner) without losing the tap-friendly
     bottom gap before the H1 eyebrow. */
  padding-block: var(--ae-sp-2) var(--ae-sp-1);
  font-size: var(--ae-fs-xs);
  color: var(--ae-ink-3);
}
@media (min-width: 640px) {
  .ae-breadcrumb { padding-block: var(--ae-sp-4); }
}
.ae-breadcrumb ol { list-style: none; display: flex; gap: var(--ae-sp-1); flex-wrap: wrap; }
.ae-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--ae-sp-1); color: var(--ae-line-strong); }
.ae-breadcrumb a { color: var(--ae-ink-2); }
.ae-breadcrumb [aria-current="page"] { color: var(--ae-ink-1); font-weight: var(--ae-fw-medium); }

/* ---------------- hero ---------------- */
.ae-hero {
  background: var(--ae-grad-hero);
  border-bottom: 1px solid var(--ae-line);
}
.ae-hero__inner {
  display: grid;
  gap: var(--ae-sp-8);
  /* Top padding is intentionally tight on mobile: the offer band above
     already provides the visual break from the header, and the
     breadcrumb (now a sibling right above this block, see markup) adds
     its own small gap — stacking the old sp-12 (48px) on top of both
     blew the mobile first-screen budget (header + band + H1 + first
     lede line must fit in 667px, see responsive-design skill
     Verification Gate). Desktop keeps the more generous rhythm. */
  padding-block: var(--ae-sp-6) var(--ae-sp-10);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .ae-hero__inner { padding-block: var(--ae-sp-12) var(--ae-sp-10); }
}
.ae-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ae-sp-2);
  font-size: var(--ae-fs-xs);
  letter-spacing: var(--ae-ls-caps);
  text-transform: uppercase;
  color: var(--ae-accent);
  font-weight: var(--ae-fw-bold);
  margin-bottom: var(--ae-sp-4);
}
.ae-hero__title { font-size: var(--ae-fs-display); line-height: var(--ae-lh-tight); }
.ae-hero__lede {
  margin-top: var(--ae-sp-4);
  font-size: var(--ae-fs-lg);
  color: var(--ae-ink-2);
  max-width: 58ch;
}
.ae-hero__actions, .ae-region__actions { display: flex; flex-wrap: wrap; gap: var(--ae-sp-3); margin-top: var(--ae-sp-6); }
.ae-hero__meta { display: flex; flex-wrap: wrap; gap: var(--ae-sp-4); margin-top: var(--ae-sp-6); }
.ae-hero__meta-item { display: flex; align-items: center; gap: var(--ae-sp-2); font-size: var(--ae-fs-sm); color: var(--ae-ink-2); }
/* ---------------- hero image band (full-bleed) ---------------- */
/* Direct child of <section class="ae-hero">, a sibling of .ae-hero__inner
   — NOT wrapped in .ae-wrap. The section itself carries no inline padding
   (only .ae-hero__inner and the fakta .ae-wrap below do), so the band
   reaches both viewport edges with zero horizontal padding to cancel and
   no 100vw/negative-margin hack (that trick reintroduces horizontal
   scrollbar overflow — see css-layout skill §3).
   Height is capped with clamp() rather than aspect-ratio: this is a
   deliberate edge-to-edge banner treatment, not the strict frame/asset
   ratio-matched pattern used elsewhere (.ae-asset-slot). The mobile
   source (arctic-hero-mobile.webp, portrait 900x1200) and the desktop
   source (arctic-hero-desktop.webp, landscape 1920x863) both get
   object-fit:cover'd into a short, wide strip, so some crop of each
   asset is expected and intentional — verified against the actual
   files that the surviving center band (icebergs + aurora tail on
   mobile, full horizon on desktop) is never empty sky/ground. The
   <picture><source media> swap sits at 640px (lower than the old
   two-column breakpoint) because the band is landscape at every width
   now — past ~640px the landscape asset crops far less than stretching
   the portrait one across a wide strip would. */
.ae-hero__band {
  position: relative; /* anchors .ae-hero__band-inner / the offer chip */
  width: 100%;
  /* Raised from the old 220px floor to give the overlaid offer chip
     (label + 2-line headline + CTA + fine print, ~170px including its
     own padding) room to sit centered without crowding the band edges.
     Still well inside the mobile first-screen budget: 65px header +
     ~300px band + breadcrumb + eyebrow + H1 (2 lines) + first lede line
     fits 667px — measured with Playwright, see frontend batch report. */
  height: clamp(280px, 62vw, 320px);
  margin-bottom: 0;
  overflow: hidden;
}
@media (min-width: 640px) {
  .ae-hero__band { height: clamp(340px, 30vw, 432px); }
}
.ae-hero__band picture,
.ae-hero__band img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------- offer chip, overlaid on the hero band ---------------- */
/* .ae-wrap gives this layer the same max-width/gutter as the text column
   below, so the chip's left edge lines up with the H1 without a second
   set of hand-tuned inset values. pointer-events:none on the flex layer
   (it is otherwise an empty full-band hit target) with pointer-events:
   auto restored on the chip itself keeps the picture from swallowing
   clicks/taps meant for the CTA. */
.ae-hero__band-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
}
.ae-hero__offer {
  pointer-events: auto;
  display: grid;
  gap: var(--ae-sp-2);
  width: 100%;
  max-width: 300px;
  background: var(--ae-surface);
  color: var(--ae-ink-1);
  border-radius: var(--ae-r-lg);
  padding: var(--ae-sp-4) var(--ae-sp-5);
  box-shadow: var(--ae-shadow-pop);
}
@media (max-width: 639px) {
  /* Full column width on mobile (matches the H1 column below) rather
     than the fixed 300px desktop cap — narrower than that would force
     the headline to 3 lines and blow the vertical budget. */
  .ae-hero__offer { max-width: 100%; }
}
.ae-hero__offer-label {
  font-size: var(--ae-fs-xs);
  font-weight: var(--ae-fw-bold);
  letter-spacing: var(--ae-ls-caps);
  text-transform: uppercase;
  color: var(--ae-accent);
}
.ae-hero__offer-headline {
  font-family: var(--ae-font-display);
  font-weight: var(--ae-fw-black);
  font-size: clamp(1.15rem, 0.95rem + 1.4vw, 1.6rem);
  line-height: var(--ae-lh-tight);
  color: var(--ae-ink-1);
}
.ae-hero__offer-cta { justify-self: start; }
.ae-hero__offer-fine {
  font-size: var(--ae-fs-xs);
  color: var(--ae-ink-3);
}

/* ---------------- generic region ---------------- */
.ae-region { padding-block: var(--ae-sp-12); scroll-margin-top: 84px; }
/* Explicit modifier, not :nth-of-type — a positional rule here only
   "alternates correctly" as long as no <section> is ever inserted or
   removed above it in the DOM. .ae-region--alt is assigned per-section in
   src/index.html instead, so the banding survives edits to section count
   or order (relevant given the content pass still has to land). */
.ae-region--alt { background: var(--ae-bg-2); }
.ae-region__head { max-width: 74ch; margin-bottom: var(--ae-sp-6); }
.ae-region__kicker {
  display: block;
  font-size: var(--ae-fs-xs);
  letter-spacing: var(--ae-ls-caps);
  text-transform: uppercase;
  color: var(--ae-accent-2);
  font-weight: var(--ae-fw-bold);
  margin-bottom: var(--ae-sp-2);
}
.ae-region__title { font-size: var(--ae-fs-h2); }
.ae-region__intro { margin-top: var(--ae-sp-3); color: var(--ae-ink-2); font-size: var(--ae-fs-lg); }
.ae-region__body { display: grid; gap: var(--ae-sp-5); }
.ae-region__grid { display: grid; gap: var(--ae-sp-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .ae-region__grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .ae-region__grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* asset placeholder — visibly marked until asset-manager fills data-asset
   src. The <img> stays in markup (real alt text, real dimensions) so the
   pipeline only ever has to set `src`; it is hidden while src="" so the
   frame shows the dashed label instead of a broken-image icon. Once
   asset-manager fills src, the reverse rule below hides the label instead. */
.ae-asset-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* NOT height:100% — several frames (live-studio, mobil-skjerm) are direct
     grid items under align-items:stretch, where the grid area already has
     a definite block size; height:100% would resolve there and override
     the frame's own aspect-ratio (e.g. .ae-card__media--portrait's 9/16),
     sizing the image off the neighbouring column's height instead. The
     parent (.ae-card__media[--portrait] / .ae-hero__band) already sets
     the box size; this element just fills that box on both axes via flex. */
  min-height: 120px;
  background: repeating-linear-gradient(135deg, var(--ae-surface-2), var(--ae-surface-2) 10px, var(--ae-surface) 10px, var(--ae-surface) 20px);
  color: var(--ae-ink-3);
  font-size: var(--ae-fs-xs);
  text-align: center;
  /* No padding here — img:not([src=""]) below is sized 100%/100% of the
     content box, so any padding on this element would permanently inset
     every real image once asset-manager fills the slot. Padding belongs
     on the label only. */
}
.ae-asset-slot img[src=""] { display: none; }
.ae-asset-slot img:not([src=""]) { width: 100%; height: 100%; object-fit: cover; }
.ae-asset-slot img:not([src=""]) + .ae-asset-slot__label { display: none; }
.ae-asset-slot__label { max-width: 32ch; padding: var(--ae-sp-3); }

/* data-copy-slot attributes are left in the markup as a content-map for the
   next editorial pass (which slot in this file corresponds to which chunk
   in _content/eu/) — but the debug "COPY" chip that used to render on top
   of every filled paragraph in production has been removed now that the
   content pass has landed. */

.ae-quotebox {
  border-left: 3px solid var(--ae-accent);
  padding: var(--ae-sp-4) var(--ae-sp-5);
  background: var(--ae-surface);
  border-radius: 0 var(--ae-r-md) var(--ae-r-md) 0;
  font-size: var(--ae-fs-sm);
  color: var(--ae-ink-2);
}