/* =====================================================================
   class-times.css

   Two consumers of the same class_times meta (inc/class-times.php):

     .mm-sched  — the /schedule/ page grid (patterns/schedule-grid.php).
                  Replaces the hand-written block cards that used to sit
                  in page 858's post_content; the visual result is
                  deliberately identical to those cards so the page
                  Katherine signed off on doesn't change appearance.

     .mm-ct     — the per-program Class Times section
                  (patterns/program-class-times.php), new in this pass.

   Card palettes arrive as inline --mm-sched-* / --mm-ct-* custom
   properties set per program by mm_class_times_accent(), so one rule
   set covers teal / grape / butter / slate without a class per palette.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. /schedule/ page grid
   --------------------------------------------------------------- */

/* The page template renders post-content in a constrained 780px layout.
   Page 858 wraps this pattern in an alignfull group to break out; the
   voyager-block-theme rule `.alignfull:not(.is-layout-constrained) > *`
   then re-caps the child at wideSize with auto margins, which would leave
   paper gutters on wide screens. Release just this section from that cap.

   Deliberately NOT the theme's usual `width:100vw; margin-left:calc(50% - 50vw)`
   full-bleed idiom: 100vw includes the scrollbar, so that technique overshoots
   the viewport by ~half a scrollbar on each side and is what puts a horizontal
   scrollbar on pages using it. Percentage-based breakout can't overshoot. */
.mm-sched-host {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}

/* voyager-block-theme/public/css/main.css ships
     .alignfull:not(.is-layout-constrained) > * { margin-inline:auto; max-width:var(--wp--custom--layout--wide) }
   and loads AFTER this file, so equal specificity loses. !important is the
   cleanest override — same call faq.css already makes for the same rule. */
.mm-sched-host > .mm-sched,
.mm-sched {
    max-width: none !important;
    margin-inline: 0 !important;
    width: 100%;
}

.mm-sched {
    box-sizing: border-box;
    padding-block: var(--wp--preset--spacing--section-y, clamp(48px, 6vw, 88px));
    padding-inline: var(--wp--preset--spacing--5, 20px);
    background: var(--wp--preset--color--paper, #fbf6ea);
}

/* ---- view toolbar ---- */

.mm-sched__toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    max-width: 1360px;
    margin: 0 auto clamp(16px, 2vw, 24px);
}

.mm-sched__toolbar[hidden] {
    display: none;
}

.mm-sched__toolbar-label {
    font-family: var(--wp--preset--font-family--outfit, inherit);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--ink-3, #5a6470);
}

.mm-sched__views {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--wp--preset--color--teal-200, #cdece6);
    border-radius: 999px;
    background: #fff;
}

.mm-sched__view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--wp--preset--color--ink-3, #5a6470);
    font-family: var(--wp--preset--font-family--outfit, inherit);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.mm-sched__view:hover {
    color: var(--wp--preset--color--teal-700, #1f6f66);
}

.mm-sched__view.is-active {
    background: var(--wp--preset--color--teal, #16a394);
    color: #fff;
}

.mm-sched__view-icon {
    display: inline-flex;
}

/* ---- grid view (default) ---- */

.mm-sched__grid {
    max-width: 1360px;
    margin-inline: auto;
    display: grid;
    /* Four across on wide screens, collapsing by whole columns as space
       runs out. auto-fit (not auto-fill) so a short final row still
       stretches to fill rather than leaving phantom empty tracks. */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--wp--preset--spacing--6, 24px);
}

@media (min-width: 1180px) {
    .mm-sched__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* NOTE: no `grid-auto-rows: 1fr` here. That made every row as tall as the
   tallest card in the whole grid, so a 1-slot card sat in a mostly empty
   box next to the 7-slot piano cards. Rows now size to their own content;
   cards within a row still stretch to match each other. */

.mm-sched__card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--mm-sched-bg, #fff);
    border: 1px solid var(--mm-sched-border, rgba(0, 0, 0, 0.08));
    border-top: 4px solid var(--mm-sched-accent, #2f9c8f);
    border-radius: 16px;
    padding: var(--wp--preset--spacing--6, 24px);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mm-sched__card:hover,
.mm-sched__card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.35);
}

.mm-sched__head {
    margin-bottom: var(--wp--preset--spacing--4, 12px);
}

.mm-sched__eyebrow {
    margin: 0 0 6px;
    font-family: var(--wp--preset--font-family--outfit, inherit);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-sched-text, #1f6f66);
}

.mm-sched__title {
    margin: 0;
    font-size: clamp(19px, 1vw + 15px, 22px);
    line-height: 1.15;
    color: var(--mm-sched-text, #1f6f66);
}

.mm-sched__title-link {
    color: inherit;
    text-decoration: none;
}

.mm-sched__title-link:hover,
.mm-sched__title-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mm-sched__times {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--wp--preset--color--ink, #2b2b2b);
}

.mm-sched__time {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding-block: 6px;
    box-shadow: inset 0 -1px 0 var(--mm-sched-rule, rgba(0, 0, 0, 0.08));
}

.mm-sched__time:last-child {
    box-shadow: none;
}

.mm-sched__time strong {
    font-weight: 700;
}

.mm-sched__note {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--wp--preset--color--ink-3, #5a6470);
}

.mm-sched__actions {
    margin: auto 0 0;
    padding-top: var(--wp--preset--spacing--4, 14px);
}

.mm-sched__enroll {
    font-family: var(--wp--preset--font-family--outfit, inherit);
    font-size: 15px;
    font-weight: 700;
    color: var(--mm-sched-text, #1f6f66);
    text-decoration: none;
    white-space: nowrap;
}

.mm-sched__enroll:hover,
.mm-sched__enroll:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mm-sched__enroll-arrow {
    display: inline-block;
    transition: transform 0.18s ease;
}

.mm-sched__enroll:hover .mm-sched__enroll-arrow {
    transform: translateX(3px);
}

/* ---- list view ---- */

.mm-sched--list .mm-sched__grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 1100px;
}

.mm-sched--list .mm-sched__card {
    display: grid;
    grid-template-columns: minmax(190px, 1.1fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: 8px 28px;
    border-top-width: 1px;
    /* The accent moves to a left rule in list mode — a 4px top border on a
       wide short row reads as a divider rather than a category cue. */
    border-left: 4px solid var(--mm-sched-accent, #2f9c8f);
    border-radius: 12px;
    padding: 16px 22px;
}

.mm-sched--list .mm-sched__card:hover,
.mm-sched--list .mm-sched__card:focus-within {
    transform: none;
    box-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.35);
}

.mm-sched--list .mm-sched__head {
    margin-bottom: 0;
}

.mm-sched--list .mm-sched__times {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

/* Times become inline chips instead of stacked rows — a 7-slot piano level
   would otherwise make one list row seven lines tall. */
/* The :first-child / :last-child selectors are load-bearing, not redundant.
   voyager-block-theme ships:

       .entry-content :not(.wp-block-group) > li:first-child { padding-top: 0 }
       .entry-content :not(.wp-block-group) li:last-child { padding-bottom: 0 }

   Our time chips are <li>s inside .entry-content, so those rules stripped the
   top padding from the first chip and the bottom padding from the last — the
   first chip sat a few px high against its neighbours. Those selectors score
   (0,3,1); a plain `.mm-sched--list .mm-sched__time` scores (0,2,0) and loses.
   Naming both pseudo-classes here lifts this to (0,4,0) so every chip keeps
   identical padding. (Grid view deliberately keeps the theme behaviour: there
   the rule just tightens the first/last row against the card edges.) */
.mm-sched--list .mm-sched__times > .mm-sched__time,
.mm-sched--list .mm-sched__times > .mm-sched__time:first-child,
.mm-sched--list .mm-sched__times > .mm-sched__time:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 5px 11px;
    margin: 0;
    border: 1px solid var(--mm-sched-rule, rgba(0, 0, 0, 0.10));
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: none;
    font-size: 14px;
    line-height: 1.35;
    white-space: nowrap;
}

.mm-sched--list .mm-sched__actions {
    margin: 0;
    padding-top: 0;
    justify-self: end;
}

@media (max-width: 900px) {
    .mm-sched--list .mm-sched__card {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .mm-sched--list .mm-sched__actions {
        justify-self: start;
    }
}

/* ---------------------------------------------------------------
   2. Program-page Class Times section
   --------------------------------------------------------------- */

.mm-ct {
    padding-block: clamp(36px, 4.5vw, 64px);
    padding-inline: var(--mm-s-8, 32px);
    background: #fff;
}

.mm-ct__inner {
    max-width: 1100px;
    margin-inline: auto;
}

.mm-ct__head {
    text-align: center;
    margin-bottom: clamp(20px, 2.5vw, 32px);
}

.mm-ct__heading {
    margin: 0 0 10px;
    font-size: var(--wp--preset--font-size--h-3, clamp(24px, 1.8vw + 18px, 34px));
    line-height: 1.15;
    color: var(--mm-ct-text, #1f6f66);
}

.mm-ct__sub {
    margin: 0 auto;
    max-width: 60ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--wp--preset--color--ink-3, #5a6470);
}

.mm-ct__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* A single-level program shouldn't stretch one card the full width. */
.mm-ct__grid--single {
    grid-template-columns: minmax(260px, 420px);
    justify-content: center;
}

/* ---- five-level programs (Kindermusik, and the Fall-in-Love promo) ----

   auto-fit lands 4 across at the default 1100px container, orphaning the
   5th level on its own row. Five equal columns need more room than 1100px
   allows, so the section widens and the cards tighten:

     container 1360 − 4 gaps × 16 = 1296 / 5  ≈ 259px per card
     259 − 32 padding − 2 border            ≈ 225px of content
     "Wednesdays" + "10:00–10:45 am" @14px  ≈ 193px  → fits with room spare

   Below 1320px there isn't width for five, so it drops to three (5 cards
   become 3 + 2, which reads better than 4 + 1). */
@media (min-width: 1320px) {
    .mm-ct--cols-5 .mm-ct__inner {
        max-width: 1360px;
    }
    .mm-ct__grid--cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .mm-ct__grid--cols-5 .mm-ct__card {
        padding: 18px 16px;
    }
    .mm-ct__grid--cols-5 .mm-ct__times {
        font-size: 14px;
    }
    .mm-ct__grid--cols-5 .mm-ct__time {
        gap: 10px;
    }
    .mm-ct__grid--cols-5 .mm-ct__level {
        font-size: 17px;
    }
}

@media (min-width: 700px) and (max-width: 1319px) {
    .mm-ct__grid--cols-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.mm-ct__card {
    display: flex;
    flex-direction: column;
    background: var(--mm-ct-bg, #f7f9f9);
    border: 1px solid var(--mm-ct-border, rgba(0, 0, 0, 0.08));
    border-top: 4px solid var(--mm-ct-accent, #2f9c8f);
    border-radius: 14px;
    padding: 20px 22px;
}

.mm-ct__level {
    margin: 0 0 4px;
    font-size: 18px;
    line-height: 1.2;
    color: var(--mm-ct-text, #1f6f66);
}

.mm-ct__ages {
    margin: 0 0 12px;
    font-family: var(--wp--preset--font-family--outfit, inherit);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mm-ct-text, #1f6f66);
    opacity: 0.85;
}

.mm-ct__times {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--wp--preset--color--ink, #2b2b2b);
}

.mm-ct__time {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-block: 7px;
    box-shadow: inset 0 -1px 0 var(--mm-ct-rule, rgba(0, 0, 0, 0.08));
}

.mm-ct__time:last-child {
    box-shadow: none;
}

.mm-ct__day {
    font-weight: 700;
}

.mm-ct__clock {
    /* Tabular figures keep the right-hand time column visually aligned
       even though the day names are different widths. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mm-ct__note {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--wp--preset--color--ink-3, #5a6470);
}

.mm-ct__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 22px;
    margin: clamp(20px, 2.5vw, 30px) 0 0;
}

.mm-ct__cta {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 999px;
    background: var(--mm-ct-accent, #2f9c8f);
    color: #fff;
    font-family: var(--wp--preset--font-family--outfit, inherit);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.mm-ct__cta:hover,
.mm-ct__cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.5);
    color: #fff;
}

.mm-ct__all {
    font-family: var(--wp--preset--font-family--outfit, inherit);
    font-size: 15px;
    font-weight: 700;
    color: var(--mm-ct-text, #1f6f66);
    text-decoration: none;
}

.mm-ct__all:hover,
.mm-ct__all:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .mm-sched__card,
    .mm-sched__enroll-arrow,
    .mm-ct__cta {
        transition: none;
    }
    .mm-sched__card:hover,
    .mm-sched__card:focus-within,
    .mm-ct__cta:hover,
    .mm-ct__cta:focus-visible {
        transform: none;
    }
}

@media (max-width: 600px) {
    .mm-ct__actions {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* ---------------------------------------------------------------
   3. Hero jump link → Class Times

   Sits in .mm-prog-hero__actions beside Try a Class (solid pill) and
   Learn more (outlined pill). Deliberately styled as plain text so the
   hero still has exactly one visual call to action; this is wayfinding,
   not a third competing button.
   --------------------------------------------------------------- */

.mm-prog-hero__cta-times {
    display: inline-flex;
    align-items: center;
    padding: 13px 6px;
    font-family: var(--mm-font-display, 'Outfit', sans-serif);
    font-weight: 700;
    font-size: 15px;
    color: var(--mm-teal-900, #064047);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.mm-prog-hero__cta-times:hover,
.mm-prog-hero__cta-times:focus-visible {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--mm-teal-900, #064047);
}

.mm-prog-hero__cta-times-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.mm-prog-hero__cta-times:hover .mm-prog-hero__cta-times-arrow {
    transform: translateY(2px);
}

/* Anchor targets sit under the sticky header — without this the heading
   lands behind the nav when the hero link jumps down. */
#mm-class-times {
    scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
    .mm-prog-hero__cta-times,
    .mm-prog-hero__cta-times-arrow {
        transition: none;
    }
    .mm-prog-hero__cta-times:hover .mm-prog-hero__cta-times-arrow {
        transform: none;
    }
}