/* Home hero — YMCA 2026 Option B (Hero Announcements B, node 56:608)
   Full-bleed photo slider with the kicker + H1 + CTA overlaid on the LEFT over a
   dark left-to-right scrim. (Option A's split blue panel + chevron sweep is gone.)
   The announcements bar is its own pattern (announcements.css). */

:where(.bmg-home-hero) {
    position: relative;
    min-height: 471px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* photo slider fills the whole hero box. Use z-index: auto so media does not
   create a new stacking context; this allows .splide__track (z-index: 0) to sit
   behind the scrim (z-index: 1) while .splide__pagination (z-index: 4) sits in front. */
.bmg-home-hero__media {
    position: absolute;
    inset: 0;
    z-index: auto;
}

/* dark scrim on the left so the white text stays legible over any photo */
.bmg-home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 65%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 52.88%);
}

/* Overlaid text block, left-aligned, vertically centered. The left offset
   tracks the shared 1240px content column exactly — (100vw-1240)/2 gives 100px
   at the 1440 comp width, 50px at 1340, 340px at 1920 — floored at the shared
   section gutter so it matches the other sections on narrow desktops. (A fixed
   100px floor over-indented every viewport under 1440.) */
:where(.bmg-home-hero__overlay) {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    max-width: 760px;
    margin-left: max(var(--bmg-section-gutter, 1rem), calc((100% - 1240px) / 2));
    text-align: left;
}

/* The margin above is the whole left offset — no padding on top of it, or the
   copy leaves the shared content column. Pages saved before the pattern dropped
   its inline `padding: 0 100px` still carry it in post_content, and an inline
   style beats the zero-specificity :where() rule; that stray 100px is what
   pushed the hero text right of every other section (and right of its own
   pagination dots, which read the column math straight from CSS). Re-assert it
   here so existing pages self-correct instead of needing the pattern re-inserted.
   Longhands, not the `padding` shorthand: the inline style only sets left/right,
   and an !important shorthand here would also stomp the editor rule's vertical
   padding further down. */
.bmg-home-hero .bmg-home-hero__overlay {
    padding-left: 0 !important;
    padding-right: 24px !important;
}

:where(.bmg-home-hero__overlay) > * {
    margin: 0;
}

.bmg-home-hero__kicker:not(.has-h-5-size-font-size) {
    font-family: var(--font-heading);
    font-size: 22.5px;
    font-weight: 700;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    line-height: 1.26;
}

.bmg-home-hero .bmg-hero-title {
    white-space: nowrap;
}

:where(.bmg-home-hero) :where(.bmg-hero-buttons) {
    justify-content: start;
    margin-top: 6px;
}

/* ----------------------------- */
/* slider chain must fill the positioned media container */
.bmg-home-hero__media .wp-block-ymca-slider {
    height: 100%;
}

.bmg-home-hero__media .ymca-slider.is-background-slider,
.bmg-home-hero__media .ymca-slider.is-background-slider .splide__track,
.bmg-home-hero__media .ymca-slider.is-background-slider .splide__list,
.bmg-home-hero__media .ymca-slider.is-background-slider .splide__slide {
    height: 100% !important;
    min-height: 0 !important;
}

/* paint the photo normally (block sets track z-index:-1 for overlaid covers) */
.bmg-home-hero__media .ymca-slider.is-background-slider .splide__track {
    z-index: 0 !important;
}

/* Head-safe focal points. This slider runs in Splide's "Cover" mode: it hides
   each <img> and paints the photo as an inline `background: … center/cover` on
   the slide itself — so the crop is controlled by background-position (NOT the
   img's object-position), and only !important can override that inline value.
   The hero is far wider than the photos (~3:1 vs ~3:2), so cover crops top and
   bottom; centered, that clips people's heads. Bias the focal point upward.
   No image edits — just where the existing photo is anchored. */
.bmg-home-hero__media .splide__slide {
    background-position: center 15% !important;
}
/* slide 3 (program-sports) — wider 2:1 photo, faces sit a touch lower */
.bmg-home-hero__media .splide__slide:nth-child(3) {
    background-position: center 20% !important;
}

/* pagination dots, bottom-left under the text (same column math as the overlay) */
.bmg-home-hero .splide__pagination {
    position: absolute;
    left: max(var(--bmg-section-gutter, 1rem), calc((100% - 1240px) / 2));
    bottom: 32px;
    top: auto;
    right: auto;
    z-index: 4;
    display: flex;
    flex-direction: row;
    gap: 11px;
    padding: 0;
}

.bmg-home-hero .splide__pagination__page {
    width: 10px;
    height: 10px;
    background: var(--white);
    opacity: 0.25;
    transform: none;
    margin: 0;
}

.bmg-home-hero .splide__pagination__page.is-active {
    opacity: 1;
    transform: none;
}

/*tablet/mobile (out of 2026 desktop scope — keep usable)*/
@media (max-width: 900px) {
    :where(.bmg-home-hero) {
        align-items: end;
        padding-bottom: 80px;
    }

    .bmg-home-hero::before {
        top: unset;
        bottom: 0;
        height: 80%;
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 52.88%);
    }

    /* Below the column math the offset is just the shared section gutter, so the
       hero still lines up with every other section (and with its own pagination
       dots). Was a hard 30px, which left the copy 14px right of both.
       !important beats the markup's inline padding — see the desktop note. */
    .bmg-home-hero .bmg-home-hero__overlay {
        padding-left: var(--bmg-section-gutter, 1rem) !important;
        padding-right: var(--bmg-section-gutter, 1rem) !important;
        margin-left: 0;
    }
    .bmg-home-hero .bmg-hero-title {
        white-space: normal;
    }
}

/* Phone: the desktop-size H1 dominated the photo and broke awkwardly.
   !important beats the markup's inline/preset size — media-query exception. */
@media (max-width: 600px) {
    .bmg-home-hero .bmg-hero-title {
        font-size: clamp(34px, 11vw, 44px) !important;
        line-height: 1.04;
    }

    .bmg-home-hero__kicker {
        font-size: 18px !important;
    }
}

/* ----------------------------- */
/* Block editor: the overlay/scrim sit over the slider for the front-end look,
   which makes the slider hard to select. Neutralize there so blocks stay editable.
   The editor canvas <body> carries .editor-styles-wrapper; the front end doesn't. */
.editor-styles-wrapper .bmg-home-hero {
    display: block;
    overflow: hidden; /* clip the slider's stacked editor slides so the canvas
                         doesn't get a horizontal scrollbar */
    /* the scrim is off and the slider sits above the text in the canvas, so the
       white overlay text would be white-on-white — back it with brand purple */
    background: var(--primary-dk);
}

.editor-styles-wrapper .bmg-home-hero__overlay {
    padding-top: 24px;
    padding-bottom: 24px;
}

.editor-styles-wrapper .bmg-home-hero::before {
    display: none !important;
}

.editor-styles-wrapper .bmg-home-hero__media {
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

.editor-styles-wrapper .bmg-home-hero__overlay {
    position: relative;
}