/* Homepage hero composition: centered message above, actions aligned with player below. */
.hero {
  height: 100svh;
  min-height: 650px;
}

/* Match the Meditation introduction to the homepage's full-screen scale. */
.page-hero.meditation-hero {
  height: 100svh;
  min-height: 650px;
}

.hero-heading,
.hero-controls {
  position: absolute;
  z-index: 2;
  left: 50%;
  width: min(1180px, calc(100% - 80px));
  transform: translateX(-50%);
}

.hero-heading {
  top: 150px;
  text-align: center;
}

.hero .hero-heading h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(4rem, 6.2vw, 7rem);
  white-space: normal;
}

.hero .hero-heading .hero-intro {
  max-width: none;
  margin: 24px 0 0;
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  line-height: 1.4;
  text-align: center;
}

.hero-controls {
  bottom: 40px;
}

.hero-controls .kicker {
  margin-bottom: 14px;
}

.hero-controls .hero-actions {
  margin-top: 0;
}

.hero-event-action {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
}

@media (max-width: 900px) {
  .page-hero.meditation-hero {
    min-height: 650px;
  }

  .hero-heading,
  .hero-controls {
    width: min(100% - 40px, 720px);
  }

  .hero-heading {
    top: 125px;
  }

  .hero .hero-heading h1 {
    font-size: clamp(3.1rem, 12vw, 5.2rem);
  }

  .hero-controls {
    bottom: 150px;
  }
}

@media (max-width: 560px) {
  .page-hero.meditation-hero {
    min-height: 650px;
  }

  .hero-heading {
    top: 105px;
  }

  .hero .hero-heading h1 {
    font-size: clamp(2.65rem, 13vw, 4rem);
  }

  .hero .hero-heading .hero-intro {
    margin-top: 16px;
  }

  .hero-controls {
    bottom: 132px;
  }

  .hero-controls .hero-actions {
    gap: 16px;
  }
}