/* =========================================================
   FYAH MAWI — SHARED CMS PAGE HERO
   ========================================================= */

.fm-page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  min-height: clamp(28rem, 58vw, 44rem);
  align-items: end;
  overflow: hidden;
  background: #0b0c0b;
  color: #fff;
}

.fm-page-hero__media,
.fm-page-hero__shade {
  position: absolute;
  inset: 0;
}

.fm-page-hero__media {
  z-index: -3;
}

.fm-page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.fm-page-hero__shade {
  z-index: -2;
  background:
    linear-gradient(
      90deg,
      rgba(5, 7, 5, 0.92) 0%,
      rgba(5, 7, 5, 0.67) 47%,
      rgba(5, 7, 5, 0.28) 75%,
      rgba(5, 7, 5, 0.38) 100%
    ),
    linear-gradient(
      to top,
      rgba(5, 7, 5, 0.76),
      transparent 58%
    );
}

.fm-page-hero__inner {
  box-sizing: border-box;
  width: min(
    var(--fm-shell-wide, 90rem),
    calc(100% - (clamp(1rem, 4vw, 3rem) * 2))
  );
  margin-inline: auto;
  padding-block:
    clamp(4rem, 8vw, 7rem)
    clamp(3rem, 6vw, 5rem);
}

.fm-page-hero__eyebrow {
  margin: 0 0 1rem;
  color: #d8af36;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fm-page-hero h1 {
  max-width: 12ch;
  margin: 0;
  color: #f7f3e8;
  font-size: clamp(4.25rem, 9vw, 8.75rem);
  line-height: 0.83;
  letter-spacing: -0.052em;
  text-transform: uppercase;
  text-wrap: balance;
}

.fm-page-hero__intro {
  max-width: 42rem;
  margin: 1.5rem 0 0;
  color: rgba(247, 243, 232, 0.78);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.72;
}

/* Route-specific image positioning. */

.fm-page-hero--music .fm-page-hero__media img {
  object-position: center 45%;
}

.fm-page-hero--videos .fm-page-hero__media img {
  object-position: center 35%;
}

.fm-page-hero--gallery .fm-page-hero__media img {
  object-position: center 38%;
}

.fm-page-hero--shop .fm-page-hero__media img {
  object-position: center 46%;
}

@media (max-width: 640px) {
  .fm-page-hero {
    min-height: 31rem;
  }

  .fm-page-hero__shade {
    background:
      linear-gradient(
        to top,
        rgba(5, 7, 5, 0.91) 0%,
        rgba(5, 7, 5, 0.58) 62%,
        rgba(5, 7, 5, 0.38) 100%
      );
  }

  .fm-page-hero__inner {
    width: calc(100% - 2rem);
    padding-block: 4rem 3rem;
  }

  .fm-page-hero h1 {
    max-width: 100%;
    font-size: clamp(3.1rem, 15vw, 4.75rem);
    line-height: 0.86;
  }

  .fm-page-hero__intro {
    margin-top: 1.1rem;
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fm-page-hero__media img {
    transition: none;
  }
}

/* ===== BEGIN PREMIUM HERO TYPOGRAPHY ===== */

/*
 * Artiste is the typography reference.
 *
 * Keep the established display face while improving character separation,
 * word recognition and multi-line rhythm across all major landing heroes.
 */

:root {
  --fm-hero-title-weight: 900;
  --fm-hero-title-leading: 0.91;
  --fm-hero-title-tracking: 0.025em;
  --fm-hero-title-mobile-leading: 0.94;
  --fm-hero-title-mobile-tracking: 0.018em;
}

/*
 * Shared CMS landing hero and established page-specific hero titles.
 * Selectors are intentionally scoped to hero title components only.
 */
:is(
  .fm-artist-hero__title,
  .fm-page-hero__title,
  .page-hero__title,
  .fm-events-hero__title,
  .events-hero__title,
  .fm-gallery-hero__title,
  .gallery-hero__title,
  .fm-video-hero__title,
  .video-hero__title,
  .fm-music-hero__title,
  .music-hero__title,
  .fm-shop-hero__title,
  .shop-hero__title,
  .storefront-hero__title,
  .fm-contact-hero__title,
  .contact-hero__title,
  .fm-epk-hero__title,
  .epk-hero__title,
  .fm-join-hero__title,
  .join-hero__title
) {
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
  font-weight: var(--fm-hero-title-weight);
  line-height: var(--fm-hero-title-leading);
  letter-spacing: var(--fm-hero-title-tracking);
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

/*
 * Preserve intentional word boundaries when headings wrap.
 * The small word spacing prevents heavy condensed capitals from appearing
 * joined while remaining visually tighter than ordinary body typography.
 */
:is(
  .fm-artist-hero__title,
  .fm-page-hero__title,
  .page-hero__title,
  .fm-events-hero__title,
  .events-hero__title,
  .fm-gallery-hero__title,
  .gallery-hero__title,
  .fm-video-hero__title,
  .video-hero__title,
  .fm-music-hero__title,
  .music-hero__title,
  .fm-shop-hero__title,
  .shop-hero__title,
  .storefront-hero__title,
  .fm-contact-hero__title,
  .contact-hero__title,
  .fm-epk-hero__title,
  .epk-hero__title,
  .fm-join-hero__title,
  .join-hero__title
) {
  word-spacing: 0.055em;
}

/*
 * Artiste retains its existing scale and becomes the precise visual anchor.
 */
.fm-artist-hero__title {
  line-height: 0.91;
  letter-spacing: 0.027em;
  word-spacing: 0.06em;
}

/*
 * Long titles need slightly more leading so separate words and lines remain
 * immediately readable without becoming loose.
 */
:is(
  .fm-events-hero__title,
  .events-hero__title,
  .fm-epk-hero__title,
  .epk-hero__title,
  .fm-join-hero__title,
  .join-hero__title
) {
  line-height: 0.94;
  letter-spacing: 0.023em;
}

/*
 * Supporting section headings use the same premium rhythm at a smaller scale.
 */
:is(
  .fm-bio2__header h2,
  .fm-discography h2,
  .fm-watch h2,
  .fm-booking h2,
  .fm-gallery-listing h2,
  .fm-events-listing h2,
  .storefront-section__title
) {
  font-kerning: normal;
  font-optical-sizing: auto;
  line-height: 0.96;
  letter-spacing: 0.02em;
  word-spacing: 0.045em;
  text-wrap: balance;
}

@media (max-width: 640px) {
  :is(
    .fm-artist-hero__title,
    .fm-page-hero__title,
    .page-hero__title,
    .fm-events-hero__title,
    .events-hero__title,
    .fm-gallery-hero__title,
    .gallery-hero__title,
    .fm-video-hero__title,
    .video-hero__title,
    .fm-music-hero__title,
    .music-hero__title,
    .fm-shop-hero__title,
    .shop-hero__title,
    .storefront-hero__title,
    .fm-contact-hero__title,
    .contact-hero__title,
    .fm-epk-hero__title,
    .epk-hero__title,
    .fm-join-hero__title,
    .join-hero__title
  ) {
    line-height: var(--fm-hero-title-mobile-leading);
    letter-spacing: var(--fm-hero-title-mobile-tracking);
    word-spacing: 0.04em;
  }

  .fm-artist-hero__title {
    line-height: 0.93;
    letter-spacing: 0.02em;
  }

  :is(
    .fm-bio2__header h2,
    .fm-discography h2,
    .fm-watch h2,
    .fm-booking h2,
    .fm-gallery-listing h2,
    .fm-events-listing h2,
    .storefront-section__title
  ) {
    line-height: 0.98;
    letter-spacing: 0.016em;
  }
}

/* ===== END PREMIUM HERO TYPOGRAPHY ===== */