/* =========================================================================
   Kindermusik program page — slug-specific overrides.

   Loaded conditionally on single-mm_program where post_name === 'kindermusik'
   via the is_singular('mm_program') block in inc/enqueue.php.

   Two doc-fidelity blocks, keyed to the Kindermusik page-direction doc
   (Drive: 1ukXEp6Iyzzj4VtjkdkqRp1rpe18EyfuijuifNd2sEWc):

     Section 1 — hero swaps the styled wordmark + squiggle for the licensed
                 Kindermusik logo image (Logo-Kindermusik-NEW-Color-
                 WithTagline-2700x900.png).
     Section 3 — repeated KINDERMUSIK title above the centered overview
                 paragraph.

   (Section 4 single-image-right variant was tried and reverted 2026-05-26
   per Katherine — she prefers the original two-card layout with one image
   per column, same as every other program.)

   Kept in its own file (not appended to program.css) because program.css
   is 79KB — over the github_repo_put_file inline-upload threshold (~30KB,
   silently truncates). This file is small and safe to push round-trip.
   ========================================================================= */

/* Section 1 — licensed brand mark in hero. Replaces the
   .mm-prog-hero__headline-text wordmark + .mm-prog-hero__squiggle accent
   used for every other program. The KM logo PNG already has its own
   wave/squiggle styling baked in. */
.mm-prog-hero__headline--brand {
    margin: 0 0 clamp(18px, 1.5vw, 26px);
    line-height: 1;
}
.mm-prog-hero__brand-img {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    object-fit: contain;
}
@media (max-width: 720px) {
    .mm-prog-hero__brand-img { max-width: 320px; }
}

/* Section 3 — "Repeat the title KINDERMUSIK" above the centered overview
   paragraph. Slug-gated in patterns/program-overview.php — the .--with-title
   modifier class only lands on Kindermusik. */
.mm-program-overview--with-title .mm-program-overview__inner {
    text-align: center;
}
.mm-program-overview__title {
    margin: 0 0 clamp(20px, 2vw, 32px);
    font-family: var(--mm-font-display, 'Outfit', sans-serif);
    font-weight: 800;
    font-size: clamp(28px, 3vw + 12px, 48px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--mm-teal, #42AE9A);
}

/* =========================================================================
   Sheet items (Katherine feedback log, KM tab):
     - Hero carousel: wants landscape, not portrait.
     - Life-Long Skills card: wants white background to match Class
       Experience (currently the right column inherits a grape tint from
       program.css).
   Body class for KM single — body.single-mm_program is on every program
   page; we want these rules KM-only, so scope under
   .mm-program--kindermusik (set in templates/single-mm_program-kindermusik.html).
   ========================================================================= */

/* Hero carousel aspect-ratio override removed 6/4 — all programs now share
   the base 1:1 square hero (program.css .mm-prog-hero__visual). */

/* Life-Long Skills card — neutralize the grape tint added by
   program-polish.css and let it match Class Experience. Targeting the
   right column inside the KM page only. !important needed to win over
   the polish overlay which also uses !important. */
.mm-program--kindermusik .mm-prog-exp__col--right {
    background-color: #fff !important;
    background-image: none !important;
    border-color: var(--mm-line, #e8e6df) !important;
}
.mm-program--kindermusik .mm-prog-exp__col--right .mm-prog-exp__eyebrow--grape {
    /* Keep the grape eyebrow + grape checkmarks so the column still has
       its visual differentiation from the left card. Only the background
       shifts to white. */
}

/* Try-a-Class section — drop the cream backdrop behind the card. The card
   itself keeps its subtle teal-50 tint so it still reads as a CTA. */
.mm-program--kindermusik .mm-prog-trial-cta {
    background: #fff !important;
}

/* Why Group Classes pillars — the KM-specific pastel-gradient + text/icon
   overrides were removed 2026-06-02. The pillars are now uniform white
   .mm-why-card-style cards (teal / light-purple / butter) for every
   program, styled in program-polish.css. KM no longer needs its own pass. */