/* =====================================================================
   program-polish.css

   Ambient color + interaction layer for the single-mm_program template.
   Scoped to `body.single-mm_program` and to the `.mm-program` main
   wrapper. Applies the same design vocabulary as /about/'s polish layer
   to the program page:

     1. Section heading underline — teal→grape gradient bar under
        centered h2/h3s. Pure ::after.
     2. Hero overlay punch — brighter teal-500/grape-500 saturation on
        the program hero so the photo + gradient reads vibrant from
        the first viewport (mirrors body.page-about override).
     3. Hover-lift on cards — translateY(-4px) + shadow bump on the
        experience cards (Section 4), class-description accordions
        (Section 8), instructor cards (Section 10).
     4. Vivid gradient cards on the "3 reasons families stick" trio
        (Section 7) — teal / grape / teal-grape-blend backgrounds,
        white type, larger footprint, hover lift. The page's signature
        color moment, parallel to the values trio on /about/.
     5. Full-bleed gradient band reinforcement on the bottom trial-CTA
        — drape stronger gradient + butter underline on the heading.
     6. Scroll-reveal — fade-up as each major section enters viewport,
        driven by mm-reveal.js (already enqueued site-wide on mm_program
        singles via inc/enqueue.php) + the [data-mm-reveal] attribute
        baked into each pattern's root <section>.

   ARCHITECTURE NOTE: about-polish.css uses STRUCTURAL selectors against
   strict-native block markup (e.g., `#about > .wp-block-group.has-...`).
   Our program patterns are PHP-rendered with custom BEM classes
   (.mm-prog-exp__col, .mm-program-why__pillar, etc.) — those classes
   are pattern-internal and never set by the editor user, so they
   satisfy the same "no editor-user-set className" constraint. Selectors
   below target our BEM hooks rather than wp-block-* structural ones.

   All overrides use `!important` against pattern-set inline styles
   where needed. Editor preview reads the un-polished pattern output;
   live + saved preview reflect this stylesheet.

   Reduced-motion users get the final state with no animation or
   transition. See the @media block at the bottom.
===================================================================== */


/* --------------------------------------------------------------------
   1. Section heading underline.
   -------------------------------------------------------------------- */

body.single-mm_program .mm-program-overview h2,
body.single-mm_program .mm-program-why__heading,
body.single-mm_program .mm-program-class-desc h2,
body.single-mm_program .mm-prog-video__heading,
body.single-mm_program .mm-prog-exp__heading,
body.single-mm_program .mm-prog-exp__section-heading {
    position: relative;
    padding-bottom: 22px;
}

body.single-mm_program .mm-program-overview h2::after,
body.single-mm_program .mm-program-why__heading::after,
body.single-mm_program .mm-program-class-desc h2::after,
body.single-mm_program .mm-prog-video__heading::after,
body.single-mm_program .mm-prog-exp__heading::after,
body.single-mm_program .mm-prog-exp__section-heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        var(--wp--preset--color--teal) 0%,
        var(--wp--preset--color--grape) 100%
    );
}

body.single-mm_program .mm-prog-exp__heading::after {
    left: 0;
    transform: none;
    width: 48px;
}

body.single-mm_program .mm-program-why__heading::after,
body.single-mm_program .mm-program-class-desc h2::after,
body.single-mm_program .mm-prog-exp[data-mm-has-bg] .mm-prog-exp__section-heading::after {
    background: var(--wp--preset--color--butter) !important;
    width: 56px;
    height: 4px;
}


/* --------------------------------------------------------------------
   3. Hover-lift on cards + tinted card color.
   -------------------------------------------------------------------- */

body.single-mm_program .mm-prog-exp__col,
body.single-mm_program .mm-program-class-desc__item,
body.single-mm_program .mm-program-instructor-card {
    transition:
        transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 240ms ease-out,
        border-color 240ms ease-out;
}

body.single-mm_program .mm-prog-exp__col:hover,
body.single-mm_program .mm-program-class-desc__item:hover,
body.single-mm_program .mm-program-instructor-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--wp--preset--shadow--lg, 0 22px 40px -16px rgba(14, 63, 58, 0.22)) !important;
}

body.single-mm_program .mm-prog-exp__col--left {
    background-color: var(--mm-teal-50) !important;
    border-color: var(--mm-teal-200) !important;
    border-top: 4px solid var(--mm-teal) !important;
}

body.single-mm_program .mm-prog-exp__col--left:hover {
    border-color: var(--mm-teal) !important;
    border-top-color: var(--mm-teal) !important;
}

body.single-mm_program .mm-prog-exp__col--right {
    background-color: var(--mm-grape-100) !important;
    border-color: var(--mm-grape-300) !important;
    border-top: 4px solid var(--mm-grape) !important;
}

body.single-mm_program .mm-prog-exp__col--right:hover {
    border-color: var(--mm-grape) !important;
    border-top-color: var(--mm-grape) !important;
}

body.single-mm_program .mm-program-class-desc__item {
    border-left-width: 4px !important;
}

body.single-mm_program .mm-program-class-desc__item:nth-child(3n + 1) {
    border-left-color: var(--mm-teal) !important;
}

body.single-mm_program .mm-program-class-desc__item:nth-child(3n + 2) {
    border-left-color: var(--mm-grape) !important;
}

body.single-mm_program .mm-program-class-desc__item:nth-child(3n + 3) {
    border-left-color: var(--mm-teal-700) !important;
}

/* Open card interior — white, matching the closed cards, so it lifts
   cleanly off the lavender section (Ben 6/4). */
body.single-mm_program .mm-program-class-desc__item[open] {
    background-color: #fff !important;
}


/* --------------------------------------------------------------------
   4. Vivid gradient cards — Section 7
   -------------------------------------------------------------------- */

body.single-mm_program .mm-program-why {
    background-color: #fff !important;
}

body.single-mm_program .mm-program-why__pillars {
    gap: clamp(16px, 2vw, 28px) !important;
}

/* "3 reasons families stick" cards restyled to match the homepage
   .mm-why-card: a white card with a 2px brand-color border, a tinted icon
   box with an accent-colored glyph, an accent-colored title, and muted
   body copy. Rotation teal → light purple → butter (Ben 6/2). Replaces the
   old full-gradient dark cards with white text. The teal defaults below are
   overridden per-variant in the nth-child blocks. */
body.single-mm_program .mm-program-why__pillar {
    background-color: #fff !important;
    background-image: none !important;
    border: 2px solid var(--mm-teal) !important;
    border-radius: 20px !important;
    color: var(--mm-ink) !important;
    padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 34px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    box-shadow: 0 10px 28px -16px rgba(14, 63, 58, 0.22) !important;
    overflow: visible;
    transition:
        transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 240ms ease-out;
}

/* Icon box — tinted rounded square; the inline SVG uses
   stroke="currentColor", so `color` paints the glyph. Sits at the top. */
body.single-mm_program .mm-program-why__pillar-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    background-color: var(--mm-teal-50) !important;
    color: var(--mm-teal) !important;
    border: 0 !important;
    align-self: flex-start !important;
    margin-bottom: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.single-mm_program .mm-program-why__pillar-title {
    color: var(--mm-teal) !important;
    font-size: clamp(20px, 1.4vw + 13px, 26px) !important;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-shadow: none;
    margin: 0;
}

body.single-mm_program .mm-program-why__pillar-body {
    color: var(--mm-ink-2) !important;
    font-size: clamp(14px, 0.6vw + 11px, 16px) !important;
    line-height: 1.55;
    margin: 0;
}

/* ---- Variant 1: teal (uses the defaults above) ---- */
body.single-mm_program .mm-program-why__pillar:nth-child(1) {
    border-color: var(--mm-teal) !important;
}

/* ---- Variant 2: light purple ---- */
body.single-mm_program .mm-program-why__pillar:nth-child(2) {
    border-color: var(--mm-grape-300) !important;
}
body.single-mm_program .mm-program-why__pillar:nth-child(2) .mm-program-why__pillar-icon {
    background-color: var(--mm-grape-100) !important;
    color: var(--mm-grape) !important;
}
body.single-mm_program .mm-program-why__pillar:nth-child(2) .mm-program-why__pillar-title {
    color: var(--mm-grape) !important;
}

/* ---- Variant 3: butter ---- */
body.single-mm_program .mm-program-why__pillar:nth-child(3) {
    border-color: var(--mm-butter) !important;
}
body.single-mm_program .mm-program-why__pillar:nth-child(3) .mm-program-why__pillar-icon {
    background-color: var(--mm-butter-100) !important;
    color: var(--mm-butter) !important;
}
body.single-mm_program .mm-program-why__pillar:nth-child(3) .mm-program-why__pillar-title {
    color: var(--mm-butter) !important;
}

body.single-mm_program .mm-program-why__pillar:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -18px rgba(14, 63, 58, 0.3) !important;
}


/* --------------------------------------------------------------------
   5. Trial CTA — light card on paper, NOT a full-bleed dark band.

   The dark teal→grape band was retired in the 5/21 review ("Try before
   you commit … make it really light"). The card-based pattern now
   centers a teal-50 card on the section's paper background. Earlier
   broad `.mm-prog-trial-cta h2/p { color: #fff }` rules were forcing
   the card's text white — unreadable on the light bg. Those overrides
   are removed below; the `__card`/`__heading`/`__sub` rules in the
   "Katherine 5/21 lightening pass" section own the actual styling.

   Section here gets paper bg + section padding only; the card layout
   (max-width, padding, button) lives lower in the file with the
   other __card / __body / __actions rules.
   -------------------------------------------------------------------- */

body.single-mm_program .mm-prog-trial-cta {
    background: var(--mm-paper) !important;
    padding-block: clamp(48px, 5vw, 80px) !important;
    padding-inline: clamp(20px, 4vw, 64px) !important;
}


/* --------------------------------------------------------------------
   6. Scroll-reveal — fade-up.
   -------------------------------------------------------------------- */

body.single-mm_program [data-mm-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}

body.single-mm_program [data-mm-reveal].is-mm-revealed {
    opacity: 1;
    transform: none;
}

body.single-mm_program .mm-program-why__pillar[data-mm-reveal]:nth-child(2) {
    transition-delay: 120ms;
}

body.single-mm_program .mm-program-why__pillar[data-mm-reveal]:nth-child(3) {
    transition-delay: 240ms;
}


/* --------------------------------------------------------------------
   7. Reduced-motion fallback.
   -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    body.single-mm_program .mm-prog-exp__col,
    body.single-mm_program .mm-program-class-desc__item,
    body.single-mm_program .mm-program-instructor-card,
    body.single-mm_program .mm-program-why__pillar,
    body.single-mm_program .mm-prog-trial-cta a.wp-block-button__link {
        transition: none;
    }

    body.single-mm_program .mm-prog-exp__col:hover,
    body.single-mm_program .mm-program-class-desc__item:hover,
    body.single-mm_program .mm-program-instructor-card:hover,
    body.single-mm_program .mm-program-why__pillar:hover {
        transform: none;
    }

    body.single-mm_program [data-mm-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =====================================================================
   Program-page hero gradient — teal → light purple → deep-teal. Alpha
   blends slightly with the cream page bg behind the full-bleed hero for
   a softer read. This is the SOLE hero background — the stacked ::before
   overlay punches and duplicate base gradients were removed 2026-06-01.
   Applies to every single-mm_program hero.
===================================================================== */

body.single-mm_program .mm-prog-hero {
    background: linear-gradient(135deg, rgba(64, 176, 160, 0.55) 0%, rgba(176, 134, 214, 0.48) 60%, rgba(31, 122, 112, 0.60) 100%) !important;
}


/* (The "5/21 lightening pass" gradient overrides for the why-pillars were
   removed 2026-06-02 — the pillars are now white .mm-why-card-style cards,
   styled in the block above.) */

body.single-mm_program .mm-prog-trial-cta__card {
    max-width: 880px !important;
    margin-inline: auto !important;
    background: var(--mm-teal-50) !important;
    border: 1px solid var(--mm-teal-200) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 36px -22px rgba(21, 92, 85, 0.22) !important;
    color: var(--mm-ink) !important;
    padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 56px) !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: clamp(24px, 3vw, 40px) !important;
    text-align: left !important;
}

@media (max-width: 720px) {
    body.single-mm_program .mm-prog-trial-cta__card {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    body.single-mm_program .mm-prog-trial-cta__eyebrow,
    body.single-mm_program .mm-prog-trial-cta__actions {
        justify-content: center !important;
    }
}

body.single-mm_program .mm-prog-trial-cta__body {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-width: 0 !important;
}

body.single-mm_program .mm-prog-trial-cta__eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    font-family: var(--mm-font-display) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--mm-teal-700) !important;
}
body.single-mm_program .mm-prog-trial-cta__eyebrow-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: var(--mm-teal) !important;
    display: inline-block !important;
}
body.single-mm_program .mm-prog-trial-cta__heading {
    margin: 0 !important;
    font-family: var(--mm-font-display) !important;
    font-weight: 800 !important;
    font-size: clamp(24px, 2.6vw, 32px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.01em !important;
    color: var(--mm-ink) !important;
    text-wrap: balance !important;
}
body.single-mm_program .mm-prog-trial-cta__sub {
    margin: 0 !important;
    font-family: var(--mm-font-body) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--mm-ink-2) !important;
}

body.single-mm_program .mm-prog-trial-cta__actions {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}

body.single-mm_program .mm-prog-trial-cta__btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--mm-teal) !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 999px !important;
    padding: 14px 26px !important;
    font-family: var(--mm-font-display) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 8px 20px -10px rgba(20, 142, 134, 0.55) !important;
    transition:
        transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 200ms ease-out,
        background-color 200ms ease-out !important;
    white-space: nowrap !important;
}
body.single-mm_program .mm-prog-trial-cta__btn:hover,
body.single-mm_program .mm-prog-trial-cta__btn:focus-visible {
    background: var(--mm-teal-700) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 28px -10px rgba(20, 142, 134, 0.55) !important;
}
body.single-mm_program .mm-prog-trial-cta__btn-arrow {
    display: inline-block !important;
    transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
body.single-mm_program .mm-prog-trial-cta__btn:hover .mm-prog-trial-cta__btn-arrow {
    transform: translateX(3px) !important;
}

/* =====================================================================
   Section 4 — Class Experience / Life-Long Skills bullet + eyebrow polish
   ===================================================================== */

body.single-mm_program .mm-prog-exp__list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

body.single-mm_program .mm-prog-exp__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

body.single-mm_program .mm-prog-exp__check {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: 0.25em;
}

body.single-mm_program .mm-prog-exp__col--left .mm-prog-exp__check {
    color: var(--mm-teal-700);
}

body.single-mm_program .mm-prog-exp__col--right .mm-prog-exp__check {
    color: var(--mm-grape-700);
}

body.single-mm_program .mm-prog-exp__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    font-family: var(--mm-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.single-mm_program .mm-prog-exp__col--left .mm-prog-exp__eyebrow {
    color: var(--mm-teal-700);
}

body.single-mm_program .mm-prog-exp__col--right .mm-prog-exp__eyebrow {
    color: var(--mm-grape-700);
}

body.single-mm_program .mm-prog-exp__eyebrow-note svg {
    display: block;
}

/* Experience-section action buttons (Class Descriptions ↓ / Try a Class →).
   Base ghost style in program.css uses white text on transparent — built
   for a dark hero band. On the light experience section that renders as
   invisible white-on-white. Re-skin to teal on white surface. */
body.single-mm_program .mm-prog-exp:not([data-mm-has-bg]) .mm-prog-exp__btn--ghost {
    background-color: #fff !important;
    color: var(--mm-teal-800, #064047) !important;
    border-color: var(--mm-teal-300, #92d0c5) !important;
    box-shadow: 0 6px 18px -10px rgba(14, 63, 58, 0.25) !important;
}

body.single-mm_program .mm-prog-exp:not([data-mm-has-bg]) .mm-prog-exp__btn--ghost:hover,
body.single-mm_program .mm-prog-exp:not([data-mm-has-bg]) .mm-prog-exp__btn--ghost:focus-visible {
    background-color: var(--mm-teal-50) !important;
    color: var(--mm-teal-900, #082724) !important;
    border-color: var(--mm-teal, #16a394) !important;
    box-shadow: 0 14px 28px -10px rgba(14, 63, 58, 0.32) !important;
}

body.single-mm_program .mm-prog-exp:not([data-mm-has-bg]) .mm-prog-exp__btn--primary {
    color: var(--mm-teal-900, #082724) !important;
}


/* =====================================================================
   2026-05-26 Katherine review — hero + highlight fixes (Group Piano)
   ===================================================================== */

body.single-mm_program,
html:has(body.single-mm_program) {
    overflow-x: clip;
}

body.single-mm_program .mm-prog-hero {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    /* Padding-bottom buffer so the hero bg extends past its text content
       and the pills can overlap into it. Combined with pills' margin-top
       below, this lands the pill MIDLINE on the hero's bottom edge
       (50% of each pill behind the hero, 50% below it). */
    padding-bottom: 130px !important;
}

@media (max-width: 768px) {
    body.single-mm_program .mm-prog-hero {
        padding-bottom: 100px !important;
    }
}

body.single-mm_program .mm-prog-hero__eyebrow {
    color: var(--mm-grape-700, #4a2a73);
}

body.single-mm_program .mm-prog-hero__cta-primary {
    border: 2px solid transparent;
}

body.single-mm_program .mm-prog-hero__cta-primary:hover,
body.single-mm_program .mm-prog-hero__cta-primary:focus-visible {
    background: #fff;
    color: var(--mm-teal-800, #064047);
    border-color: var(--mm-teal, #16a394);
    box-shadow: 0 14px 32px -10px rgba(14, 63, 58, 0.55);
}

body.single-mm_program .mm-prog-hero__cta-primary:hover .mm-prog-hero__cta-arrow,
body.single-mm_program .mm-prog-hero__cta-primary:focus-visible .mm-prog-hero__cta-arrow {
    color: var(--mm-teal-800, #064047);
}

/* Section — remove the top/bottom rule (border-block) inherited from
   program.css:2327 and lighten the background. Section sits below the
   hero in flow; the pills float UP via negative margin so they overlap
   the hero by ~80px. The section's gradient bg stays anchored at its
   natural top so it doesn't extend INTO the hero region. */
body.single-mm_program .mm-prog-highlight {
    border-block: 0 !important;
    /* White section — cream/teal gradient removed; the cards now carry all
       the color via per-accent borders + tints (Ben 6/4). */
    background: #fff !important;
    /* Section padding: 40px top so pills pull up cleanly through it,
       and tight bottom (20-32px) so cards don't have a giant gap before
       the program-overview section that follows. */
    padding-block: 40px clamp(20px, 2.5vw, 32px) !important;
    position: relative;
    z-index: 2;
}

body.single-mm_program .mm-prog-highlight__inner {
    max-width: 1280px !important;
    margin-inline: auto !important;
    /* Pull pills UP by 110px so the pill midline (70px down from top
       on a 140px pill) lands on the hero's bottom edge. 50% of each
       pill behind the hero, 50% below it.
       Math: section_padding_top (40) + margin_top (-110) = -70px from
       section top = 70px above hero_end = pill midpoint at hero_end. */
    margin-top: -110px !important;
    /* Flex (not grid) so the pill count is self-balancing: 6 pills fill
       the row, 4 pills center naturally without empty grid cells pushing
       the strip off-center. Group Guitar has 4 pills, Kindermusik has 6,
       Group Piano has 6+. */
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 12px !important;
    position: relative;
    z-index: 5;
}

@media (max-width: 768px) {
    body.single-mm_program .mm-prog-highlight__inner {
        margin-top: -90px !important;
    }
}

/* Zero WP-injected top margins on every direct child so all six pills
   stretch equally inside their grid cells. */
body.single-mm_program .mm-prog-highlight__inner > * {
    margin: 0 !important;
}

/* Pills — taller (38px vertical padding), each card wearing a 2px accent
   border all the way around plus a soft gradient fill in its own hue,
   rotating teal → butter → grape so the strip reads as a balanced brand
   tri-color (2 teal, 2 butter, 2 grape across the 6 pills). Per-accent
   border-color + background are set in the nth-child(3n) rules below. */
body.single-mm_program .mm-prog-highlight__pill {
    /* Target ~1/6 of the container so 6 pills fill the row, with a min
       so the strip wraps cleanly on narrower widths instead of squishing.
       max-width caps so 4-pill programs (Group Guitar) don't stretch
       individual pills wide when the row centers. */
    flex: 0 1 calc((100% - 60px) / 6) !important;
    min-width: 170px !important;
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
    min-height: 140px !important;
    max-height: none !important;
    margin: 0 !important;
    /* Taller boxes (38px vertical) + more breathing room between the
       title (label) and description (value) via gap: 18px. */
    padding: 38px 20px !important;
    gap: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    /* Top-align so every label sits on the same horizontal line regardless
       of how many lines its value wraps to (e.g. "Kindermusik App access"). */
    justify-content: flex-start !important;
    align-items: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    /* Accent border all the way around (color set per-pill below). */
    border: 2px solid rgba(14, 63, 58, 0.08) !important;
    border-radius: 14px !important;
    /* Heavier shadow because pills now float over the hero — needs
       depth so they read as separate cards, not flat on the bg. */
    box-shadow:
        0 18px 38px -18px rgba(14, 63, 58, 0.32),
        0 4px 12px -6px rgba(14, 63, 58, 0.14) !important;
    transition: transform 220ms ease, box-shadow 220ms ease !important;
}

body.single-mm_program .mm-prog-highlight__pill:hover {
    transform: translateY(-3px) !important;
    box-shadow:
        0 24px 48px -20px rgba(14, 63, 58, 0.42),
        0 6px 16px -6px rgba(14, 63, 58, 0.18) !important;
}

/* Per-pill accent — full border + a soft gradient fill in the pill's own
   hue (white → light tint), rotating teal → butter → grape so the strip
   reads as a balanced brand tri-color (2 teal, 2 butter, 2 grape across
   the 6 pills). Each pill's label uses the readable -700 shade (below). */
body.single-mm_program .mm-prog-highlight__pill:nth-child(3n + 1) {
    border-color: var(--mm-teal, #42AE9A) !important;
    background: linear-gradient(160deg, #ffffff 0%, var(--mm-teal-50, #F4FAF8) 100%) !important;
}

body.single-mm_program .mm-prog-highlight__pill:nth-child(3n + 2) {
    border-color: var(--mm-butter, #F4D16A) !important;
    background: linear-gradient(160deg, #ffffff 0%, var(--mm-butter-100, #FCF3D2) 100%) !important;
}

body.single-mm_program .mm-prog-highlight__pill:nth-child(3n + 3) {
    border-color: var(--mm-grape) !important;
    background: linear-gradient(160deg, #ffffff 0%, var(--mm-grape-100, #EDE3F2) 100%) !important;
}

/* Label color shifts with the accent to reinforce the per-pill hue, using
   the darker -700 shade so the small uppercase text stays legible on the
   light card. teal → butter → grape, matching the bar rotation above. */
body.single-mm_program .mm-prog-highlight__pill:nth-child(3n + 1) .mm-prog-highlight__label {
    color: var(--mm-teal-700) !important;
}

body.single-mm_program .mm-prog-highlight__pill:nth-child(3n + 3) .mm-prog-highlight__label {
    color: var(--mm-grape-700) !important;
}

/* Butter cards — use the brighter butter hue (not the dark -700 mustard)
   so the label reads as gold like the teal/grape labels read as their hue
   (Ben 6/4). */
body.single-mm_program .mm-prog-highlight__pill:nth-child(3n + 2) .mm-prog-highlight__label {
    color: var(--mm-butter) !important;
}

body.single-mm_program .mm-prog-highlight__label {
    font-family: var(--mm-font-display, 'Outfit', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    /* Dark butter (gold) so the label stays legible on the light card —
       pure --mm-butter is too light for text. Replaces the old teal-700. */
    color: var(--mm-butter-700, #A87E16) !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: block !important;
}

/* Value — bumped from 14px to 19px display, body font for warmer
   character (not the tighter display face used on the label). Allow
   wrapping with balanced lines for multi-word values like
   "Online video support". */
body.single-mm_program .mm-prog-highlight__value {
    font-family: var(--mm-font-body, 'Inter', system-ui, sans-serif) !important;
    font-weight: 700 !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
    color: var(--mm-ink) !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: block !important;
    text-align: center !important;
    letter-spacing: -0.005em !important;
    text-wrap: balance !important;
    overflow-wrap: break-word !important;
}

@media (max-width: 1100px) {
    body.single-mm_program .mm-prog-highlight__inner {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    body.single-mm_program .mm-prog-highlight__inner {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =====================================================================
   2026-05-26 — Video section restore (post-nuker)

   `.mm-prog-video`/__inner/__media/__copy/__player/__eyebrow/__heading/
   __body/__highlights vanished from program.css; only __poster survived.
   Without them the section renders as a raw fullwidth <video> + unstyled
   text. 2-col layout, 16:9 player card, eyebrow/heading/body/list stack.
   ===================================================================== */

body.single-mm_program .mm-prog-video {
    padding-block: clamp(56px, 6vw, 96px);
    padding-inline: clamp(20px, 4vw, 64px);
    /* Soft teal→grape diagonal wash so the dark video card pops off
       a subtle branded background instead of flat paper. Uses the
       same -50/-100 tones as the experience card tints, just larger. */
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(64, 176, 160, 0.18) 0%, rgba(64, 176, 160, 0) 55%),
        radial-gradient(120% 80% at 100% 100%, rgba(122, 58, 150, 0.18) 0%, rgba(122, 58, 150, 0) 55%),
        linear-gradient(135deg, var(--mm-teal-50) 0%, #ffffff 50%, var(--mm-grape-100) 100%) !important;
}

body.single-mm_program .mm-prog-video__inner {
    max-width: 1280px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
}

@media (max-width: 880px) {
    body.single-mm_program .mm-prog-video__inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

body.single-mm_program .mm-prog-video__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 56px -20px rgba(14, 63, 58, 0.32);
    background-color: var(--mm-ink, #0f172a);
}

body.single-mm_program .mm-prog-video__player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
}

body.single-mm_program .mm-prog-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

body.single-mm_program .mm-prog-video__poster-badge {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.92);
    color: var(--mm-teal-800);
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 999px;
}

body.single-mm_program .mm-prog-video__copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.single-mm_program .mm-prog-video__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--mm-font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-teal-700);
}

body.single-mm_program .mm-prog-video__eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mm-grape, #7a4caa);
    display: inline-block;
}

body.single-mm_program .mm-prog-video__heading {
    margin: 0;
    font-family: var(--mm-font-display);
    font-weight: 800;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--mm-ink);
    text-wrap: balance;
}

body.single-mm_program .mm-prog-video__body {
    font-family: var(--mm-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--mm-ink-2);
}

body.single-mm_program .mm-prog-video__body p {
    margin: 0 0 12px;
}

body.single-mm_program .mm-prog-video__body p:last-child {
    margin-bottom: 0;
}

body.single-mm_program .mm-prog-video__highlights {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.single-mm_program .mm-prog-video__highlights li {
    position: relative;
    padding-left: 24px;
    font-family: var(--mm-font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--mm-ink-2);
}

body.single-mm_program .mm-prog-video__highlights li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mm-teal) 0%, var(--mm-grape) 100%);
}


/* =====================================================================
   Kill WP's 1rem margin-block-start between every program-page section
   (`:where(.is-layout-flow) > *`). Sections own their own internal
   padding; we don't want a cream-colored seam between them.
   ===================================================================== */
body.single-mm_program .mm-program > * {
    margin-block: 0 !important;
}


/* =====================================================================
   Kindermusik "What's Included" 3-card grid — taller cards + more
   internal spacing so the section reads as substantial, not cramped.
   ===================================================================== */
body.single-mm_program .mm-kinder-extras .wp-block-group .wp-block-group.has-white-background-color {
    min-height: 220px !important;
    padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 40px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    justify-content: flex-start !important;
    box-shadow: 0 10px 28px -16px rgba(14, 63, 58, 0.22) !important;
    transition: transform 220ms ease, box-shadow 220ms ease !important;
}

body.single-mm_program .mm-kinder-extras .wp-block-group .wp-block-group.has-white-background-color:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 36px -16px rgba(14, 63, 58, 0.32) !important;
}

/* Heading + body inside each card — bump heading size, give body
   tighter line-height with room to breathe between them. */
body.single-mm_program .mm-kinder-extras .wp-block-group.has-white-background-color h3 {
    font-size: clamp(20px, 1.8vw, 24px) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
}

body.single-mm_program .mm-kinder-extras .wp-block-group.has-white-background-color p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}