/**
 * Event template + archive styles (MM-009).
 *
 * Scope: single-mm_event template + archive-mm_event template.
 *   - .mm-event.mm-page-frame      : single page wrapper
 *   - .mm-event-hero               : two-col event hero pattern
 *   - .mm-event-glance             : 5-pill quick-facts strip
 *   - .mm-event__body              : post-content wrapper
 *   - .mm-events-page              : archive page wrapper
 *   - .mm-events-intro             : single-col archive intro
 *   - .mm-events-grid              : event card grid (server-rendered)
 *
 * Tokens: --mm-* defined in block-styles.css. Mirrors
 * program.css + programs-page.css conventions.
 *
 * The .mm-not-sure gradient band re-uses styles from programs-page.css
 * (loaded conditionally alongside this stylesheet on event templates),
 * so this file does not redefine the band — only the .mm-events-not-sure
 * extension hook is reserved.
 */

/* =====================================================================
   Single page frame
===================================================================== */
.mm-event.mm-page-frame {
    background: var(--mm-white);
    color: var(--mm-fg);
}

/* =====================================================================
   Event hero
===================================================================== */
.mm-event-hero {
    position: relative;
    padding-block: clamp(48px, 6vw, 96px);
    padding-inline: clamp(20px, 4vw, 64px);
    background: linear-gradient(135deg, var(--mm-teal-200) 0%, var(--mm-teal-100) 32%, var(--mm-grape-100) 70%, var(--mm-grape-200) 100%);
    overflow: hidden;
}

.mm-event-hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(32px, 4vw, 72px);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 960px) {
    .mm-event-hero__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.mm-event-hero__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Eyebrow strip — "Event date · <bound display>" */
.mm-event-hero__eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: var(--mm-white);
    border: 1px solid var(--mm-line);
    border-radius: 999px;
    align-self: flex-start;
    font-size: var(--mm-fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--mm-ls-caps);
    color: var(--mm-fg-2);
    font-family: var(--mm-font-display);
    font-weight: var(--mm-w-bold);
}

.mm-event-hero__eyebrow > * {
    margin: 0;
}

.mm-event-hero__eyebrow .mm-event-hero__eyebrow-label,
.mm-event-hero__eyebrow .mm-event-hero__eyebrow-value {
    margin: 0;
    font-size: inherit;
    line-height: 1;
}

.mm-event-hero__eyebrow-label {
    color: var(--mm-fg-3);
}

.mm-event-hero__eyebrow-value {
    color: var(--mm-grape-700);
    font-weight: var(--mm-w-black);
}

.mm-event-hero__eyebrow-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 2px;
    border-radius: 50%;
    background: var(--mm-grape);
    vertical-align: middle;
}

/* Headline */
.mm-event-hero__headline {
    margin: 0;
    font-family: var(--mm-font-display);
    font-size: var(--mm-fs-h1);
    line-height: var(--mm-lh-tight);
    letter-spacing: var(--mm-ls-display);
    color: var(--mm-fg);
    font-weight: var(--mm-w-black);
}

/* Lede — now a core/post-content wrapper holding Katherine's paragraph(s).
   Neutralise the block's global padding/constrained width so the text
   fills the hero column, and style the inner paragraphs as the lede. */
.mm-event-hero__content .mm-event-hero__lede {
    margin: 0;
    max-width: 60ch;
    padding-left: 0;
    padding-right: 0;
}

.mm-event-hero__lede p {
    margin: 0 0 0.85em;
    font-size: var(--mm-fs-lede);
    line-height: var(--mm-lh-normal);
    color: var(--mm-fg-2);
}

.mm-event-hero__lede p:last-child {
    margin-bottom: 0;
}

/* Facts row (location, ages) */
.mm-event-hero__facts {
    gap: 12px !important;
    margin-top: 4px;
}

.mm-event-hero__facts > * {
    margin: 0;
}

.mm-event-hero__fact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--mm-white);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-r-sm, 10px);
    font-family: var(--mm-font-display);
    font-size: 14px;
    font-weight: var(--mm-w-semi);
    color: var(--mm-fg-2);
    line-height: 1.2;
}

/* Accent-tint the fact pills by type so the hero carries more colour. */
.mm-event-hero__fact--location {
    background: var(--mm-teal-50);
    border-color: var(--mm-teal-200);
}

.mm-event-hero__fact--ages {
    background: var(--mm-grape-100);
    border-color: var(--mm-grape-200);
}

/* Hide the fact pill when the bound paragraph renders empty (no value). */
.mm-event-hero__fact:empty {
    display: none;
}

/* Buttons row */
.mm-event-hero__buttons {
    margin-top: 6px;
}

.mm-event-hero__cta-primary .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    background: var(--mm-brand);
    color: var(--mm-fg-on-teal);
    border-radius: 999px;
    font-family: var(--mm-font-display);
    font-weight: var(--mm-w-bold);
    font-size: 17px;
    transition: background-color 150ms ease, transform 150ms ease;
}

.mm-event-hero__cta-primary .wp-block-button__link:hover,
.mm-event-hero__cta-primary .wp-block-button__link:focus-visible {
    background: var(--mm-brand-hover);
    transform: translateY(-1px);
}

/* Visual / featured image */
.mm-event-hero__visual {
    position: relative;
}

.mm-event-hero__photo,
.mm-event-hero__photo img {
    border-radius: var(--mm-r-lg, 20px);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    width: 100%;
    height: 100%;
    box-shadow: 0 30px 60px -30px rgba(15, 63, 58, 0.35);
}

.mm-event-hero__photo {
    background: var(--mm-teal-100);
}

/* When no featured image is set, collapse the visual column on desktop
   so the hero doesn't have a blank gap. On <960 we keep a soft tinted
   placeholder block so the stacked layout still feels balanced. */
.mm-event-hero__visual:empty,
.mm-event-hero__visual:not(:has(img)) {
    display: none;
}

@media (max-width: 960px) {
    .mm-event-hero__visual:not(:has(img)) {
        display: block;
    }
    .mm-event-hero__visual:not(:has(img))::before {
        content: "";
        display: block;
        aspect-ratio: 4 / 5;
        background: var(--mm-teal-100);
        border-radius: var(--mm-r-lg, 20px);
    }
}

/* =====================================================================
   At-a-glance pill strip
===================================================================== */
.mm-event-glance {
    padding-block: clamp(20px, 3vw, 36px);
    padding-inline: clamp(20px, 4vw, 64px);
    background: var(--mm-white);
    border-bottom: 1px solid var(--mm-line);
}

/* Flex + centered so the row stays balanced when empty pills (no date,
   free events) collapse out — was a 5-col grid that left a left-aligned
   gap. Pills hold a fixed basis and centre as a group. */
.mm-event-glance__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    max-width: 1200px;
    margin: 0 auto;
}

.mm-event-glance__pill {
    flex: 0 1 220px;
    padding: 16px 20px;
    background: var(--mm-white);
    border: 1px solid var(--mm-line);
    border-top: 3px solid var(--mm-teal);
    border-radius: var(--mm-r-md, 14px);
    text-align: center;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

/* Accent palette is teal / purple / butter only (Ben 6/4 — screenshot).
   Base top-border is teal (date, price, capacity); age = purple,
   location = butter. No two of the visible trio repeat. */
.mm-event-glance__pill--age      { border-top-color: var(--mm-grape); }
.mm-event-glance__pill--location { border-top-color: var(--mm-butter); }

.mm-event-glance__pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -18px rgba(15, 63, 58, 0.35);
}

.mm-event-glance__pill > * {
    margin: 0;
}

.mm-event-glance__pill-label {
    font-family: var(--mm-font-display);
    font-size: var(--mm-fs-eyebrow);
    font-weight: var(--mm-w-bold);
    text-transform: uppercase;
    letter-spacing: var(--mm-ls-caps);
    color: var(--mm-fg-3);
}

.mm-event-glance__pill-value {
    margin-top: 4px;
    font-family: var(--mm-font-display);
    font-size: clamp(16px, 1vw + 12px, 20px);
    font-weight: var(--mm-w-black);
    color: var(--mm-fg);
    letter-spacing: var(--mm-ls-tight);
    line-height: 1.2;
}

/* Hide pills whose bound value renders empty (e.g. capacity=0,
   location_note unset). Uses :has() — falls back to keeping the pill
   visible in old browsers, which is acceptable. */
.mm-event-glance__pill:has(.mm-event-glance__pill-value:empty) {
    display: none;
}

/* The location pill copy can be longer ("Velocity Church · 3300 Church
   Road"). Tighten its value font so it fits the pill cleanly. */
.mm-event-glance__pill--location .mm-event-glance__pill-value {
    font-size: 14px;
    font-weight: var(--mm-w-bold);
    line-height: 1.3;
}

/* =====================================================================
   Single body wrapper for post-content
===================================================================== */
.mm-event__body {
    padding-block: clamp(48px, 6vw, 96px);
    padding-inline: clamp(20px, 4vw, 64px);
}

/* =====================================================================
   Archive — page wrapper + intro
===================================================================== */
.mm-events-page {
    background: var(--mm-paper);
    color: var(--mm-fg);
}

/* The intro is now a native teal-soft gradient hero (patterns/events-intro.html)
   mirroring /our-values/ — styled entirely by theme.json presets, so the old
   .mm-events-intro__* rules were removed. */

/* =====================================================================
   Archive — events grid
===================================================================== */
.mm-events-grid {
    padding-block: clamp(40px, 4vw, 72px);
}

.mm-events-grid__inner {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--mm-s-8);
}

@media (max-width: 640px) {
    .mm-events-grid__inner {
        padding-inline: var(--mm-s-5);
    }
}

.mm-events-grid__header {
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-3);
    margin-bottom: var(--mm-s-8);
    max-width: 720px;
}

.mm-events-grid__title {
    font-family: var(--mm-font-display);
    font-weight: var(--mm-w-black);
    font-size: clamp(28px, 2.6vw, 38px);
    letter-spacing: var(--mm-ls-tight);
    color: var(--mm-ink);
    line-height: 1.1;
    margin: 0;
}

.mm-events-grid__sub {
    font-family: var(--wp--preset--font-family--source-sans-3, inherit);
    font-size: 15.5px;
    color: var(--mm-ink-3);
    line-height: 1.5;
    max-width: 620px;
    margin: 0;
}

.mm-events-grid__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mm-s-6);
}

@media (max-width: 1024px) {
    .mm-events-grid__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .mm-events-grid__list {
        grid-template-columns: 1fr;
        gap: var(--mm-s-5);
    }
}

/* ---- Card ---- */

/* Each card carries a per-card accent that cycles teal → purple → butter
   across the grid (set via :nth-child below). --card-accent is the vivid
   hue (top strip, borders); --card-accent-ink is the readable text/icon
   shade; --card-accent-soft is the wash for tints/hovers. */
.mm-events-grid__card {
    --card-accent: var(--mm-teal);
    --card-accent-ink: var(--mm-teal-700);
    --card-accent-soft: var(--mm-teal-100);
    background: var(--mm-white);
    border: 1px solid var(--mm-line);
    border-top: 4px solid var(--card-accent);
    border-radius: var(--wp--custom--radius--lg, 20px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.mm-events-grid__list > .mm-events-grid__card:nth-child(3n + 2) {
    --card-accent: var(--mm-grape);
    --card-accent-ink: var(--mm-grape-700);
    --card-accent-soft: var(--mm-grape-100);
}

.mm-events-grid__list > .mm-events-grid__card:nth-child(3n + 3) {
    --card-accent: var(--mm-butter);
    --card-accent-ink: var(--mm-butter-700);
    --card-accent-soft: var(--mm-butter-100);
}

.mm-events-grid__card:hover {
    border-color: var(--card-accent);
    box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--card-accent) 45%, transparent);
    transform: translateY(-3px);
}

.mm-events-grid__card.is-past {
    opacity: 0.65;
}

.mm-events-grid__card-photo {
    position: relative;
    display: block;
    height: 180px;
    overflow: hidden;
    background: var(--mm-paper-2);
    text-decoration: none;
}

.mm-events-grid__card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease;
}

.mm-events-grid__card:hover .mm-events-grid__card-photo img {
    transform: scale(1.04);
}

.mm-events-grid__card-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--card-accent-soft) 0%, var(--mm-white) 100%);
    color: var(--card-accent-ink);
}

.mm-events-grid__card-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--card-accent-ink);
    opacity: 0.8;
}

.mm-events-grid__card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.18) 100%);
    pointer-events: none;
}

.mm-events-grid__card-body {
    padding: var(--mm-s-6);
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-3);
    flex: 1;
}

.mm-events-grid__card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mm-font-display);
    font-size: 12px;
    font-weight: var(--mm-w-bold);
    text-transform: uppercase;
    letter-spacing: var(--mm-ls-caps);
    color: var(--mm-grape-700);
    margin: 0;
}

.mm-events-grid__card-eyebrow-icon {
    display: inline-flex;
    color: var(--card-accent-ink);
}

.mm-events-grid__card-title {
    font-family: var(--mm-font-display);
    font-weight: var(--mm-w-black);
    font-size: 22px;
    line-height: 1.2;
    color: var(--mm-ink);
    margin: 0;
}

.mm-events-grid__card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease;
}

.mm-events-grid__card-title a:hover {
    color: var(--card-accent-ink);
}

.mm-events-grid__card-desc {
    font-family: var(--wp--preset--font-family--source-sans-3, inherit);
    font-size: 14.5px;
    color: var(--mm-ink-2);
    line-height: 1.5;
    margin: 0;
}

.mm-events-grid__card-facts {
    list-style: none;
    margin: var(--mm-s-2) 0 0;
    padding: var(--mm-s-4) 0 0;
    border-top: 1px solid var(--mm-line);
    display: flex;
    flex-direction: column;
    gap: var(--mm-s-2);
}

.mm-events-grid__card-fact {
    display: grid;
    grid-template-columns: 18px 52px 1fr;
    align-items: center;
    gap: var(--mm-s-3);
    font-family: var(--wp--preset--font-family--source-sans-3, inherit);
    font-size: 13.5px;
    line-height: 1.4;
}

.mm-events-grid__card-fact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--card-accent-ink);
}

.mm-events-grid__card-fact-label {
    font-family: var(--mm-font-display);
    font-size: 11px;
    font-weight: var(--mm-w-bold);
    text-transform: uppercase;
    letter-spacing: var(--mm-ls-caps);
    color: var(--mm-ink-3);
    align-self: center;
}

.mm-events-grid__card-fact-value {
    color: var(--mm-ink);
    font-weight: var(--mm-w-semi);
}

.mm-events-grid__card-actions {
    margin-top: auto;
    padding-top: var(--mm-s-4);
    display: flex;
    gap: var(--mm-s-3);
    flex-wrap: wrap;
}

.mm-events-grid__card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-family: var(--mm-font-display);
    font-weight: var(--mm-w-bold);
    font-size: 14px;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
    border: 1.5px solid transparent;
}

.mm-events-grid__card-btn--ghost {
    color: var(--card-accent-ink);
    border-color: var(--card-accent);
    background: transparent;
}

.mm-events-grid__card-btn--ghost:hover {
    border-color: var(--card-accent);
    background: var(--card-accent-soft);
    color: var(--card-accent-ink);
}

.mm-events-grid__card-btn--primary {
    background: var(--mm-brand);
    color: var(--mm-fg-on-teal);
    border-color: var(--mm-brand);
}

.mm-events-grid__card-btn--primary:hover {
    background: var(--mm-brand-hover);
    border-color: var(--mm-brand-hover);
    transform: translateY(-1px);
}

.mm-events-grid__card-btn-icon {
    display: inline-flex;
}

/* =====================================================================
   Bottom-of-archive / single — events "not sure?" band.
   Inherits layout from .mm-not-sure in programs-page.css; here we override
   ONLY the events copy (Katherine 6/4 "improved green box"). The shared
   band's old fill was teal-800→teal-900→grape — i.e. dark teal/green, which
   is off-brand. Re-skin to the on-brand bold treatment: a grape-carried
   panel (keeps white text + the translucent Katherine card legible) lit by
   teal + butter radial blooms. Scoped to .mm-events-not-sure so the Programs
   band is untouched.
===================================================================== */
.mm-events-not-sure .mm-not-sure__panel {
    background:
        radial-gradient(540px circle at 8% 92%, rgba(66, 174, 154, 0.55) 0%, rgba(66, 174, 154, 0) 60%),
        radial-gradient(460px circle at 92% 8%, rgba(244, 209, 106, 0.20) 0%, rgba(244, 209, 106, 0) 62%),
        linear-gradient(135deg, #7A3A96 0%, #6A3187 48%, #5F2C75 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Our background already carries the butter bloom — drop the duplicate
   glow element so it doesn't stack into a hotspot. */
.mm-events-not-sure .mm-not-sure__panel-glow {
    display: none;
}