/* ============================================================
   Group Benefits page (/group-benefits/)
   ============================================================
   2026-06-04 redesign — the page now renders from native CORE BLOCKS in
   page 250 post_content (the old .mm-gb inline markup + group-benefits-
   content.php pattern are retired). Layout, top to bottom:

     1. core/cover  .mm-gb-hero      — group-class photo + teal overlay, white copy
     2. core/group  .mm-gb-intro     — paper band, eyebrow + section title + lede
     3. core/group  .mm-gb-features  — LIGHT TEAL band, two core/media-text photo rows
     4. core/group  .mm-gb-cards     — paper band, 4 benefit cards (core/columns)
     5. core/group  .mm-band         — shared dark CTA band (see try-class-band.css)

   This file styles only sections 1–4; the closing CTA reuses the site-wide
   .mm-band (is-style-mm-band-dark) from assets/css/try-class-band.css, which
   is enqueued alongside this file on /group-benefits/ (see inc/enqueue.php).
   Palette: teal + light-teal washes + grape accent. No butter here (the CTA
   band brings the butter).
============================================================ */

/* ---------- shared bits ---------- */

.mm-gb-eyebrow {
    margin: 0 0 0.85rem;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wp--preset--color--teal-700);
}

.mm-gb-section__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--ink);
}

.mm-gb-section__lede {
    margin: 1.1rem auto 0;
    max-width: 660px;
    font-size: clamp(17px, 0.5vw + 15px, 20px);
    line-height: 1.65;
    color: var(--wp--preset--color--ink-2);
}

/* ---------- 1. HERO (core/cover) ---------- */

/* The hero is now the SITE-STANDARD interior core/cover (full-bleed photo +
   teal→ink→grape gradient overlay, ~600px tall, white eyebrow/H1/lede using
   core typography presets) — same build as /try-a-class/ and /meet-our-team/.
   It carries no .mm-gb-* classes, so it needs no rules here. */

/* ---------- 2. INTRO (paper band + soft brand wash) ---------- */

.mm-gb-intro {
    padding-block: clamp(56px, 7vw, 92px);
    padding-inline: var(--wp--preset--spacing--5, 24px);
    text-align: center;
    background-color: var(--wp--preset--color--paper);
    background-image:
        radial-gradient(80% 70% at 0% 0%, rgba(64, 176, 160, 0.10) 0%, rgba(64, 176, 160, 0) 60%),
        radial-gradient(80% 70% at 100% 0%, rgba(122, 58, 150, 0.09) 0%, rgba(122, 58, 150, 0) 60%);
}

/* ---------- 3. FEATURES (light teal band, photo rows) ---------- */

.mm-gb-features {
    padding-block: clamp(48px, 6vw, 88px);
    padding-inline: var(--wp--preset--spacing--5, 24px);
    /* faint teal dot-grid texture over the teal-50 band fill */
    background-image: radial-gradient(circle, rgba(31, 122, 112, 0.07) 1px, transparent 1.6px);
    background-size: 22px 22px;
}

/* space between the two feature cards */
.mm-gb-features > .mm-gb-feature + .mm-gb-feature {
    margin-top: clamp(28px, 4vw, 48px);
}

/* Each feature row is now a contained CARD: white panel, rounded, soft
   shadow, colored top accent, with the photo inset inside it (image left /
   image right alternates via core's has-media-on-the-right). */
.mm-gb-feature {
    max-width: 1040px;
    margin-inline: auto;
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
    padding: clamp(16px, 1.8vw, 26px);
    background-color: #fff;
    border: 1px solid var(--wp--preset--color--line, rgba(15, 23, 27, 0.08));
    border-top: 4px solid var(--wp--preset--color--teal);
    border-radius: 22px;
    box-shadow: 0 22px 52px -34px rgba(14, 63, 58, 0.45);
}

/* second card (image on the right) gets the grape accent */
.mm-gb-feature.has-media-on-the-right {
    border-top-color: var(--wp--preset--color--grape);
}

/* Lock both photos to one aspect ratio + object-fit cover so the two cards
   render the SAME height (the source images are 4:3 vs 16:9, which otherwise
   makes each card size to its own image). */
.mm-gb-feature .wp-block-media-text__media {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: none;
    aspect-ratio: 3 / 2;
}

.mm-gb-feature .wp-block-media-text__media img {
    border-radius: 14px;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mm-gb-feature__eyebrow {
    margin: 0 0 0.6rem;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--teal-700);
}

.mm-gb-feature.has-media-on-the-right .mm-gb-feature__eyebrow {
    color: var(--wp--preset--color--grape-700);
}

.mm-gb-feature__title {
    margin: 0 0 0.6rem;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: clamp(22px, 1.6vw + 14px, 30px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--ink);
}

.mm-gb-feature .mm-gb-feature__body {
    margin: 0;
    font-size: clamp(16px, 0.4vw + 14px, 18px);
    line-height: 1.65;
    color: var(--wp--preset--color--ink-2);
}

/* ---------- 4. CARDS (paper band, 4 benefit cards) ---------- */

.mm-gb-cards {
    padding-block: clamp(52px, 7vw, 92px);
    padding-inline: var(--wp--preset--spacing--5, 24px);
    text-align: center;
    background-color: var(--wp--preset--color--paper);
    background-image:
        radial-gradient(70% 60% at 0% 0%, rgba(64, 176, 160, 0.10) 0%, rgba(64, 176, 160, 0) 58%),
        radial-gradient(70% 60% at 100% 100%, rgba(122, 58, 150, 0.09) 0%, rgba(122, 58, 150, 0) 60%);
}

.mm-gb-cards__grid {
    max-width: 1120px;
    margin-inline: auto;
    margin-top: clamp(32px, 4vw, 56px);
    gap: clamp(18px, 2vw, 28px);
}

.mm-gb-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: clamp(24px, 2vw, 32px);
    border-radius: 16px;
    background-color: #fff;
    border: 1px solid var(--wp--preset--color--line, rgba(15, 23, 27, 0.08));
    border-top: 4px solid var(--wp--preset--color--teal);
    box-shadow: 0 18px 40px -32px rgba(14, 63, 58, 0.4);
}

/* The card group renders with WP's is-layout-constrained, whose child rule
   sets `margin-left/right: auto !important` on every child. Title/body are
   full-width so the auto margins do nothing, but the flex eyebrow shrink-wraps
   and gets centered by them. Pin every card child flush-left (the !important
   is required to beat core's !important). */
.mm-gb-card > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none;
}

/* Eyebrow + round icon badge (typical brand card treatment — the badge is a
   CSS ::before with a unicode glyph, brand-tinted; no wp:html. Mirrors the
   family-hub action-card badges.) */
.mm-gb-card__eyebrow {
    margin: 0 0 0.55rem;
    /* badge (::before) + label stack at the LEFT edge of the card, lined up
       with the title/body (the cards section is text-align:center, so without
       this the badge + eyebrow center themselves). */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mm-gb-card__eyebrow::before {
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.mm-gb-card__title {
    margin: 0 0 0.5rem;
    font-family: var(--wp--preset--font-family--outfit);
    font-size: clamp(18px, 0.6vw + 15px, 21px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--ink);
}

.mm-gb-card .mm-gb-card__body {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--wp--preset--color--ink-2);
}

/* ---- per-card brand color rotation: teal / grape / apricot / gold ---- */
/* readable accent shades (no dark teal/green per brand rule) used for the
   eyebrow text + icon glyph + accented title; the bright token tints the
   badge fill + top border. */
.mm-gb-card--teal { border-top-color: var(--wp--preset--color--teal); }
.mm-gb-card--teal .mm-gb-card__eyebrow,
.mm-gb-card--teal .mm-gb-card__title { color: #1F7A70; }
.mm-gb-card--teal .mm-gb-card__eyebrow::before { content: "\266A"; color: #1F7A70; background: #C8E8E1; }

.mm-gb-card--grape { border-top-color: var(--wp--preset--color--grape); }
.mm-gb-card--grape .mm-gb-card__eyebrow,
.mm-gb-card--grape .mm-gb-card__title { color: #5F2C75; }
.mm-gb-card--grape .mm-gb-card__eyebrow::before { content: "\2665"; color: #5F2C75; background: #DDCBE8; }

.mm-gb-card--apricot { border-top-color: var(--wp--preset--color--apricot); }
.mm-gb-card--apricot .mm-gb-card__eyebrow,
.mm-gb-card--apricot .mm-gb-card__title { color: #B86A1F; }
.mm-gb-card--apricot .mm-gb-card__eyebrow::before { content: "\2605"; color: #B86A1F; background: #FBE8D2; }

.mm-gb-card--gold { border-top-color: var(--wp--preset--color--butter); }
/* title uses the original (bright) butter to match the border — the dark gold
   read too muddy (Ben 6/4). Eyebrow + icon stay in the deeper gold so the
   small text remains legible. */
.mm-gb-card--gold .mm-gb-card__title,
.mm-gb-card--gold .mm-gb-card__eyebrow { color: var(--wp--preset--color--butter); }
/* badge glyph stays in the deeper gold so it reads on the light butter tint */
.mm-gb-card--gold .mm-gb-card__eyebrow::before { content: "\263A"; color: #A87E16; background: #F6E4AE; }

/* ---------- 5. CLOSING copy (light teal band, before the CTA) ---------- */

.mm-gb-closing {
    padding-block: clamp(56px, 7vw, 92px);
    padding-inline: var(--wp--preset--spacing--5, 24px);
    text-align: center;
    /* same faint teal dot-grid texture as the features band */
    background-image: radial-gradient(circle, rgba(31, 122, 112, 0.07) 1px, transparent 1.6px);
    background-size: 22px 22px;
}

/* ---------- responsive ---------- */

@media (max-width: 781px) {
    /* core stacks media-text (is-stacked-on-mobile) + columns already;
       just let cards size to their content once they're full width. */
    .mm-gb-card {
        height: auto;
    }
}