/* ==========================================================
   Kai Mana — Hero Contract (M2C + M2F)
   --------------------------------------------------
   Shared hero styles. Three variants: default, compact, tall.
   All variants center-align content per M2F design review.
   See: kai-mana/_shared/NOTES-hero.md
   ========================================================== */

:root {
  --hero-min-h:         min(70vh, 720px);
  --hero-min-h-compact: 45vh;
  --hero-min-h-tall:    92vh;
  --hero-max-w:         700px;
  --hero-pad-x:         var(--sp-5, 24px);
  --hero-overlay:       linear-gradient(180deg, rgba(11,31,42,0.45) 0%, rgba(11,31,42,0.75) 100%);
  --hero-title-fs:      var(--fs-display, clamp(2.5rem, 6vw, 4.5rem));
  --hero-subtitle-fs:   var(--fs-h3, 1.25rem);
  --hero-gap:           var(--sp-4, 16px);

  /* Section accent tokens (M2F color token table) */
  --accent-home:       #4ec9c4;   /* turquoise */
  --accent-music:      #f4a261;   /* warm orange */
  --accent-about:      #c9a961;   /* gold */
  --accent-contact:    #2a9d8f;   /* teal */
  --accent-licensing:  #d4af37;   /* rich gold */
  --accent-epk:        var(--accent-home);
  --accent-history:    var(--accent-about);
  --accent-default:    var(--km-foam, #e8f4f8);
}

/* ==========================================================
   Base — always centered per M2F design review
   ========================================================== */

.km-hero {
  position: relative;
  min-height: var(--hero-min-h);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;  /* M2F: always centered */
  text-align: center;       /* M2F: always centered */
}

.km-hero--compact {
  min-height: var(--hero-min-h-compact);
}

.km-hero--tall {
  min-height: var(--hero-min-h-tall);
}

/* ==========================================================
   Background image
   ========================================================== */

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

/* ==========================================================
   Overlay
   ========================================================== */

.km-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: 1;
}

/* ==========================================================
   Content
   ========================================================== */

.km-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;   /* prevent children from stretching to full width */
  text-align: center;
  gap: var(--hero-gap);
  max-width: var(--hero-max-w);
  padding: 0 var(--hero-pad-x);
}

/* ==========================================================
   Eyebrow (section label above title)
   ========================================================== */

.km-eyebrow {
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--km-foam, #e8f4f8);
  margin: 0;
}

/* ==========================================================
   Title
   ========================================================== */

.km-hero__title {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: var(--hero-title-fs);
  font-weight: 600;
  line-height: 1.1;
  color: var(--km-text, #f0f8fa);
  margin: 0;
}

/* ==========================================================
   Subtitle
   ========================================================== */

.km-hero__subtitle {
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: var(--hero-subtitle-fs);
  font-weight: 400;
  line-height: 1.5;
  color: var(--km-text-muted, #b8d4e0);
  max-width: 60ch;
  margin: 0;
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 768px) {
  .km-hero {
    min-height: calc(var(--hero-min-h) * 0.75);
  }
  .km-hero--compact {
    min-height: calc(var(--hero-min-h-compact) * 0.8);
  }
  .km-hero--tall {
    min-height: calc(var(--hero-min-h-tall) * 0.85);
  }
}

/* ==========================================================
   Reduced motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .km-hero * {
    transition: none;
  }
}