/* =====================================================================
   homepage-polish.css — small, push-ceiling-safe overrides for
   homepage.css. The base file is ~65KB and exceeds the inline-push
   ceiling (~30KB); this file holds the deltas so they ship via the
   normal Edit + github_repo_put_file flow without truncation.

   Loaded after homepage.css on is_front_page() — see inc/enqueue.php.

   Append-only by convention. Document each rule block with the
   Katherine-feedback origin so future maintainers can trace the why.
   =================================================================== */

/* Why Families section's teal-50 background + card shadow (Katherine 5/21)
   moved into homepage.css so they also apply on page 378 and in the block
   editor, not just the front page where this polish file loads. */


/* ---------------------------------------------------------------------
   Try-a-Class band — front-page override REMOVED (Ben 6/4).

   This block formerly turned the home CTA into a full-bleed photo band
   (edge-to-edge intermediate-piano-players.png under a light teal→grape
   wash, transparent card). Ben: too big/"massive" and the cropped, blurred
   photo read as creepy. Removed so the front page falls back to the shared
   site-wide contained dark band (.mm-band.is-style-mm-band-dark, styled by
   try-class-band.css) — identical to the band on /try-a-class/ and
   /important-dates/. Page 378's block carries is-style-mm-band-dark.

   try-class-band.css loads after this file on the front page and its
   .mm-band / .mm-band .mm-band__card rules out-specify homepage.css's
   contained-gradient-card fallback, so no extra reset is needed here.
   --------------------------------------------------------------------- */

/* Teacher block (Katherine intro video) frame + spacing polish briefly lived
   here (Ben 6/1) but moved into homepage.css so it also applies on page 378
   and the editor canvas, not just the front page where this overlay loads. */


/* ---------------------------------------------------------------------
   Hero content left-edge alignment with the program section below (Ben 6/1).

   Goal: the hero copy's left edge should line up with .mm-offer__inner (the
   "Music Classes for Everyone" section), i.e. a centered 1280 box with
   var(--mm-s-8) side padding.

   The trap is TWO nested flex contexts:
     1. .mm-hero itself is display:flex; align-items:center (homepage.css) —
        the SECTION is a flex row.
     2. Inside it, page 378 wraps the carousel + .mm-hero__inner in a second
        flex (nowrap) group.
   That inner group is a flex ITEM of the section with no flex-grow, so it
   shrink-wraps to its content (~984px = 920 content + 2×32 padding). Because
   the wrapper is collapsed, nothing on .mm-hero__inner (max-width, flex-basis,
   or the margin-inline:auto that WP's `.is-layout-flex > :is(*,div){margin:0}`
   zeroes anyway) can widen it — it never gets the room.

   Fix in two parts:
     • Make the wrapper FILL the section (flex:1 1 100%) so there's a full-width
       track to work in, and center its children.
     • Give .mm-hero__inner a real 1280 flex-basis + the matching s8 padding.
   The wrapper's justify-content:center then centers the 1280 inner, so both
   sections share the content left edge (100vw − 1280)/2 + var(--mm-s-8).
   flex-shrink keeps it collapsing with the viewport on narrow screens, and the
   section's align-items:center still vertically centers the copy. Keep the
   1280 + padding in sync with .mm-offer__inner in homepage.css. */
.mm-hero > .wp-block-group.is-layout-flex {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: center;
}
/* Ben 6/1: hero widened to 1440 on its own — intentionally NO LONGER synced
   to .mm-offer__inner (1280), so the hero copy's left edge sits a touch left of
   the programs cards below. Bump both back to 1280 if you want them realigned. */
.mm-hero__inner {
    flex: 0 1 1440px;
    max-width: 1440px;
    padding-inline: var(--mm-s-8);
}