/*
 * Éclore Aesthetics — Hero (VISUAL-DESIGN §5.3)
 * ─────────────────────────────────────────────────────────────────────────────
 * The LCP landmark. On the homepage (.hero--home) it is an editorial 7/5 split:
 * type column + a reserved 4:5 portrait slot (Stone placeholder until real
 * photography lands — dimensions reserved to protect CLS). Shared by inner-page
 * heroes too, so homepage-only treatment is scoped to .hero--home.
 *
 * Entrance is not gated here — the hero paints immediately (reveals decorate).
 * Breakpoint: lg = 1024px (the split engages).
 */

.hero {
  background: var(--color-bg);
  padding-block: clamp(var(--space-3xl), 14vh, var(--space-4xl));
}

.hero__content {
  max-width: 100%;
}

/* ─── Homepage editorial split ───────────────────────────────────────────────── */

.hero--home .hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero--home .hero__inner {
    grid-template-columns: 7fr 5fr;
  }
}

/* ─── Eyebrow ────────────────────────────────────────────────────────────────── */

.hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text); /* Ink — always safe for an eyebrow (§4) */
  margin-bottom: var(--space-md);
}

/* ─── Heading ────────────────────────────────────────────────────────────────── */

/* Homepage Display — Familjen 700, oversized and tight (hero statements only, §3). */
.hero--home .hero__heading {
  font-weight: 700;
  font-size: clamp(2.75rem, 8vw, 6.5rem); /* 44–104px */
  line-height: var(--lh-tight); /* 0.94 */
  letter-spacing: var(--tracking-display);
}

/* Emphasis word = the accent serif (editorial layer): Fraunces italic, colour
   inherited from the heading. Over the video scrim the heading is Bone, so the
   serif word is Bone too — the reference's serif-over-dark signature. Sizing/
   family come from the global `h1 em` accent rule; nothing to override here but
   the old Terracotta treatment, which is intentionally dropped. */
.hero--home .hero__heading em {
  color: inherit;
  font-style: italic;
}

.hero__heading + .hero__subheading {
  margin-top: var(--space-md);
}

/* ─── Lede ───────────────────────────────────────────────────────────────────── */

.hero__subheading {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem); /* Body-large 18–21px */
  line-height: 1.55;
  max-width: 56ch;
  color: var(--color-text);
}

/* ─── Editorial page & archive heroes — centred (serif line over sans line) ───
 * Applies to context 'page' and 'archive'. Single-treatment heroes (context
 * 'service') keep their image-led layout and are deliberately excluded. */
.hero--page,
.hero--archive {
  background: var(--color-ground);
  /* Tightened (owner, 2026-07-22): the old 16vh/66vh combo read as a vast
     empty band — the composition now holds the type close. */
  padding-block: clamp(var(--space-xl), 8vh, var(--space-2xl));
}
.hero--page .hero__inner,
.hero--archive .hero__inner {
  position: relative;
  min-height: min(46vh, 420px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hero--page .hero__eyebrow,
.hero--archive .hero__eyebrow {
  text-align: center;
  margin-bottom: clamp(var(--space-md), 4vh, var(--space-xl));
}
.hero--page .hero__heading,
.hero--archive .hero__heading {
  text-align: center;
  margin: 0;
  color: var(--color-ink);
  font-size: clamp(2.5rem, 9vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
}
/* Two-line heading: serif-italic word over a sans line (mirrors the reference). */
.hero__serif {
  display: block;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
}
.hero__sans {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.hero--page .hero__subheading,
.hero--archive .hero__subheading {
  text-align: center;
  margin-inline: auto;
  margin-top: var(--space-lg);
}
/* Short bold tagline, tucked into the lower-left near the heading. */
.hero--page .hero__tagline,
.hero--archive .hero__tagline {
  position: absolute;
  left: 0;
  bottom: clamp(6%, 10vh, 16%);
  margin: 0;
  max-width: 20ch;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-ink);
}
@media (max-width: 899px) {
  .hero--page .hero__inner,
  .hero--archive .hero__inner { min-height: auto; }
  .hero--page .hero__tagline,
  .hero--archive .hero__tagline {
    position: static;
    margin-top: var(--space-xl);
    text-align: center;
    max-width: none;
  }
}

/* ─── CTA row ────────────────────────────────────────────────────────────────── */

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
}

/* ─── Reserved portrait slot (4:5) ───────────────────────────────────────────── */

.hero__media {
  width: 100%;
}

.hero__media-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--color-ink) 8%, var(--color-stone)),
      var(--color-stone));
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
}

/* ─── Homepage full-bleed background video (HERO-VIDEO-SPEC.md) ───────────────── */
/*
 * Full-bleed 80vh media band. The POSTER <img> is the LCP element and always
 * paints; the <video> is decorative, desktop-only, and only shown when motion is
 * permitted. Fixed height reserves space so CLS stays flat. Text sits bottom-left
 * over an Ink legibility scrim (§4 carve-out: functional scrim, not decoration).
 */

.hero--video {
  position: relative;
  padding-block: 0;               /* fixed-height media hero, not the padded split */
  min-height: 80vh;
  display: flex;
  overflow: clip;
  background: var(--color-ink);   /* base ground before poster paints */
}

/* Media layer — poster + video both cover the full band. */
.hero--video .hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.hero--video .hero__poster-picture,
.hero--video .hero__poster,
.hero--video .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video is hidden by default (mobile + reduced-motion never show it). It is only
   revealed on desktop when motion is allowed; hero-video.js only loads it there. */
.hero--video .hero__video {
  display: none;
  z-index: 1;                     /* over the poster once playing */
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .hero--video .hero__video {
    display: block;
  }
}

/* Ink scrim — holds bone text at WCAG AA across the video's frame range. */
.hero--video .hero__image-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--color-ink) 68%, transparent) 0%,
      color-mix(in srgb, var(--color-ink) 34%, transparent) 46%,
      color-mix(in srgb, var(--color-ink) 20%, transparent) 100%);
}

/* Content sits above the media, anchored bottom-left. Overrides the 7/5 split. */
.hero--video .hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  width: 100%;
  padding-block: clamp(var(--space-xl), 7vh, var(--space-3xl));
}

.hero--video .hero__content {
  max-width: 62ch;
}

/* Text flips to Bone over the video. Headline keeps the homepage Display scale. */
.hero--video .hero__eyebrow,
.hero--video .hero__heading,
.hero--video .hero__subheading {
  color: var(--color-bone);
}

.hero--video .hero__subheading {
  max-width: 48ch;
}

/* Secondary "Explore Treatments" text CTA → Bone underline over the dark scrim. */
.hero--video .hero__cta-secondary {
  color: var(--color-bone);
}

.hero--video .hero__cta-secondary:hover {
  color: var(--color-bone);
  text-decoration-color: var(--color-bone);
}

/* ─── Inner-page heroes with a background image (kept functional) ─────────────── */

.hero--has-image {
  position: relative;
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center;
}

.hero--has-image .hero__image-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-ink) 45%, transparent);
}

/* Optional looping bg video (page/archive heroes) — sits between the poster
   background-image and the scrim; the graded still shows wherever the video
   doesn't play (reduced motion, save-data UAs, load failure). */
.hero--has-video {
  overflow: clip;
}

.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg-video {
    display: none;
  }
}

.hero--has-image .hero__inner {
  position: relative;
  z-index: 1;
}

.hero--has-image .hero__heading,
.hero--has-image .hero__subheading {
  color: var(--color-bone);
}

/* Editorial page/archive heroes over an image: the whole composition flips to
   Bone (eyebrow knocked back, tagline full) — e.g. the treatments statue. */
.hero--has-image .hero__eyebrow {
  color: color-mix(in srgb, var(--color-bone) 78%, transparent);
}

.hero--has-image .hero__tagline {
  color: var(--color-bone);
}