/**
 * Hero — compositional primitive.
 *
 * Full-bleed section opener. Used as deck-slide title surface, EDM banner,
 * landing-page top, in-cinema holding-page master.
 *
 * Different from `card --hero` (contained card on gradient): the hero
 * primitive is the WHOLE SURFACE. It owns its own backdrop and consumes
 * a full row.
 *
 * Markup:
 *   <section class="ds-hero ds-hero--gradient">
 *     <div class="ds-hero__inner">
 *       <span class="ds-hero__eyebrow">Now showing</span>
 *       <h1 class="ds-hero__title">AKIRA at IMAX</h1>
 *       <hr class="ds-divider ds-divider--gradient ds-divider--short" />
 *       <p class="ds-hero__lede">35th anniversary 4K restoration.</p>
 *       <div class="ds-hero__actions">...</div>
 *     </div>
 *   </section>
 */

.ds-hero {
  position: relative;
  padding: var(--ds-space-2xl) var(--ds-space-lg);
  overflow: hidden;
  isolation: isolate;
}

.ds-hero__inner {
  max-width: var(--ds-content-default);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.ds-hero__eyebrow {
  display: inline-block;
  font-size: var(--ds-text-caption);
  font-weight: var(--ds-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-color-text-action);
  margin-bottom: var(--ds-space-sm);
}

.ds-hero__title {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-display-xl);
  font-weight: var(--ds-weight-display);
  line-height: var(--ds-leading-display);
  letter-spacing: -0.02em;
  color: var(--ds-color-text-heading);
  margin: 0 0 var(--ds-space-md) 0;
}

.ds-hero__lede {
  font-size: var(--ds-text-body-lg);
  line-height: var(--ds-leading-body);
  color: var(--ds-color-text-secondary);
  max-width: 60ch;
  margin: 0 0 var(--ds-space-lg) 0;
}

.ds-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-sm);
  margin-top: var(--ds-space-md);
}

.ds-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-md);
  margin-top: var(--ds-space-md);
  font-size: var(--ds-text-body-sm);
  color: var(--ds-color-text-muted);
}

/* Background-image slot — sits behind the inner content */
.ds-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ds-hero__media img,
.ds-hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Backdrop variants ──────────────────────────────────────── */

/* Default: clean light surface */
.ds-hero { background: var(--ds-color-surface-base); }

.ds-hero--gradient {
  background: var(--ds-gradient-hero);
}
.ds-hero--gradient .ds-hero__title,
.ds-hero--gradient .ds-hero__meta { color: var(--ds-color-text-inverse); }
.ds-hero--gradient .ds-hero__lede { color: var(--ds-color-text-inverse-secondary); }
.ds-hero--gradient .ds-hero__eyebrow { color: var(--ds-color-brand-highlight); }

.ds-hero--inverse {
  background: var(--ds-color-surface-inverse);
}
.ds-hero--inverse .ds-hero__title,
.ds-hero--inverse .ds-hero__meta { color: var(--ds-color-text-inverse); }
.ds-hero--inverse .ds-hero__lede { color: var(--ds-color-text-inverse-secondary); }
.ds-hero--inverse .ds-hero__eyebrow { color: var(--ds-color-brand-highlight); }

.ds-hero--media {
  background: var(--ds-color-surface-inverse);
}
.ds-hero--media .ds-hero__title,
.ds-hero--media .ds-hero__lede,
.ds-hero--media .ds-hero__meta { color: var(--ds-color-text-inverse); }
.ds-hero--media .ds-hero__eyebrow { color: var(--ds-color-brand-highlight); }
/* Darken overlay so foreground text holds contrast over any image */
.ds-hero--media .ds-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 26, 26, 0.7) 0%,
    rgba(26, 26, 26, 0.4) 60%,
    rgba(26, 26, 26, 0.7) 100%
  );
}

/* ─── Density modifiers ─────────────────────────────────────── */
.ds-hero--compact { padding: var(--ds-space-xl) var(--ds-space-lg); }
.ds-hero--compact .ds-hero__title { font-size: var(--ds-text-display-md); }

.ds-hero--immersive {
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.ds-hero--immersive .ds-hero__title { font-size: var(--ds-text-display-xl); }

/* ─── Centred alignment ─────────────────────────────────────── */
.ds-hero--centred .ds-hero__inner { text-align: center; }
.ds-hero--centred .ds-hero__lede { margin-left: auto; margin-right: auto; }
.ds-hero--centred .ds-hero__actions,
.ds-hero--centred .ds-hero__meta { justify-content: center; }