/* =====================================================================
   Page hero — universal full-width hero invoked via wp:pattern from
   inside post_content (MM-013). patterns/page-hero.php emits the
   .mm-page-hero markup and reads its eyebrow / h1 / lede from a curated
   per-slug map.

   Because the hero is rendered inside post-content (constrained to
   ~780px by templates/page.html), we use the calc(50%-50vw) viewport
   escape technique to break out — same trick the about-polish gradient
   bands use.

   Visual: featured image (or studio fallback) as a cover background,
   teal-700 → grape-700 semi-transparent gradient overlay via ::before,
   centered eyebrow / H1 / lede stack.

   Pages with hand-tuned heroes (faq-intro, recitals-hero) bail out of
   page-hero.php at the PHP layer so this stylesheet has no double-hero
   to worry about.
===================================================================== */

.mm-page-hero {
    position: relative;
    /* Viewport escape: the hero is invoked via wp:pattern from inside
       post-content, which is layout-constrained to ~780px. Same trick
       as the about-polish gradient bands — recenter to the viewport
       regardless of how deeply nested in constrained parents. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Kill the block-gap top margin that .is-layout-flow gives the
       first child of post-content — otherwise there's a white strip
       between the header and the hero. */
    margin-top: 0 !important;
    padding: 0;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mm-teal-800);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.mm-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(21, 92, 85, 0.82) 0%, rgba(95, 44, 117, 0.78) 100%);
    pointer-events: none;
    z-index: 1;
}

.mm-page-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
    padding-block: clamp(56px, 5.5vw, 88px);
    padding-inline: var(--mm-s-8);
    text-align: center;
}

.mm-page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px 0;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    font-family: var(--mm-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-teal-800);
}

.mm-page-hero__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--mm-teal);
}

.mm-page-hero__headline {
    margin: 0 0 18px 0;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 2px 24px rgba(14, 63, 58, 0.35);
    text-wrap: balance;
}

.mm-page-hero__body {
    max-width: 56ch;
    margin: 0 auto;
    font-family: var(--mm-font-body);
    font-size: clamp(16px, 0.6vw + 14px, 19px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 12px rgba(14, 63, 58, 0.35);
}

@media (max-width: 640px) {
    .mm-page-hero {
        min-height: 380px;
    }
    .mm-page-hero__inner {
        padding-inline: var(--mm-s-5);
    }
}