/* ============================================================
   components/hero.css  —  ds-hero and all hero elements
   ============================================================ */

/* ── Hero wrapper ─────────────────────────────────────────── */
.ds-hero {
  padding-block: var(--ds-hero-py, 6rem);
  text-align: var(--ds-hero-align, center);
  display: flex;
  flex-direction: column;
  align-items: var(--ds-hero-align-items, center);
}

.ds-hero--left {
  --ds-hero-align: left;
  --ds-hero-align-items: flex-start;
}

.ds-hero--sm {
  padding-block: var(--ds-hero-sm-py, 4rem);
}

/* ── Inner content limiter ────────────────────────────────── */
.ds-hero__inner {
  max-width: 800px;
  width: 100%;
}

.ds-hero--wide .ds-hero__inner { max-width: 1000px; }
.ds-hero--narrow .ds-hero__inner { max-width: 600px; }

/* ── Kicker ───────────────────────────────────────────────── */
.ds-hero__kicker {
  display: inline-block;
  font-size: var(--ds-kicker-size, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-kicker-color, var(--ds-accent));
  margin-bottom: var(--ds-space-4, 1rem);
}

/* ── Heading ──────────────────────────────────────────────── */
.ds-hero__heading {
  font-family: var(--ds-font-heading, inherit);
  font-size: var(--ds-hero-heading-size, clamp(2rem, 5vw, 3.5rem));
  font-weight: var(--ds-hero-heading-weight, 700);
  letter-spacing: var(--ds-hero-heading-tracking, -0.02em);
  line-height: 1.1;
  color: var(--ds-text, var(--public-text-strong, #0f172a));
  margin: 0 0 var(--ds-space-5, 1.25rem);
}

/* ── Subtext ──────────────────────────────────────────────── */
.ds-hero__sub {
  font-size: var(--ds-hero-sub-size, 1.125rem);
  line-height: 1.65;
  color: var(--ds-text-muted, var(--public-text-muted, #475569));
  margin: 0 0 var(--ds-space-8, 2rem);
  max-width: 52ch;
}

.ds-hero--center .ds-hero__sub { margin-inline: auto; }

/* ── CTA group ────────────────────────────────────────────── */
.ds-hero__cta {
  display: flex;
  align-items: center;
  gap: var(--ds-hero-cta-gap, 1rem);
  flex-wrap: wrap;
}

.ds-hero--center .ds-hero__cta,
.ds-hero:not(.ds-hero--left) .ds-hero__cta {
  justify-content: center;
}

/* ── Media (image / video) ────────────────────────────────── */
.ds-hero__media {
  margin-top: var(--ds-space-12, 3rem);
  border-radius: var(--ds-hero-media-radius, 1.5rem);
  overflow: hidden;
  box-shadow: var(--ds-shadow-xl, 0 24px 56px rgba(15, 23, 42, 0.14));
  width: 100%;
}

.ds-hero__media img,
.ds-hero__media video {
  width: 100%;
  display: block;
  border-radius: inherit;
}

/* ── Two-column hero (text left, media right) ─────────────── */
.ds-hero--split {
  flex-direction: row;
  align-items: center;
  gap: var(--ds-space-12, 3rem);
  text-align: left;
}

.ds-hero--split .ds-hero__inner { max-width: none; flex: 1; }
.ds-hero--split .ds-hero__media { margin-top: 0; flex: 1; }
.ds-hero--split .ds-hero__sub   { margin-inline: 0; }
.ds-hero--split .ds-hero__cta   { justify-content: flex-start; }

@media (max-width: 768px) {
  .ds-hero--split {
    flex-direction: column;
    text-align: center;
  }
  .ds-hero--split .ds-hero__cta { justify-content: center; }
}