/* Blog cards band — YMCA Midsize 2026
   Blue-dk full-bleed band: left rail (title, pill, arrows) + fixed-width
   card slider peeking off the right edge. */

.bmg-blog-band {
    overflow: hidden;
}

/* Chevron decor — a cohesive three-tone chevron sweep that emerges near the
   heading's right edge and leads into the cards, sitting in the open navy zone
   between the rail and the slider (mirrors how the home hero's chevron bridges its
   panel and photo). Built from three ADJACENT filled chevron stripes (not Maci's
   filled pennant, whose solid body washed the band with an off-blue block, and not
   gapped strokes, which read as three loud arrows) — they tile edge-to-edge into one
   smooth sweep, lightest leading on the right, and the band's blue-dk shows through
   everywhere outside the sweep. z-index:1 lifts it ABOVE the cover's opaque
   background fill span (z-index:auto, painted after — so a z-index:0 ::before hides
   under it); the inner-container (z-index:1, later in the DOM) paints over the text. */
.bmg-blog-band .bmg-blog-band__rail {
    position: relative;
}
.bmg-blog-band .bmg-blog-band__rail::before {
    content: "";
    position: absolute;
    right: 24px;
    top: -50px;
    bottom: -50px;
    width: 398px;
    z-index: -1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 398 524' preserveAspectRatio='none'%3E%3Cpath fill='%2300aeef' d='M388.73,319.75l1.86-3.81c5.1-10.32,7.42-22.28,7.42-34.78s-2.78-25.55-8.11-36.15v-.27l-1.16-2.17L269.53.17l-.08-.17H80v524h208.1l.21-.44,100.41-203.81h0Z'/%3E%3Cpath fill='%230089d0' d='M348.73,319.75l1.86-3.81c5.1-10.32,7.42-22.28,7.42-34.78s-2.78-25.55-8.11-36.15v-.27l-1.16-2.17L229.53.17l-.08-.17H40v524h208.1l.21-.44,100.41-203.81h0Z'/%3E%3Cpath fill='%230060af' d='M308.73,319.75l1.86-3.81c5.1-10.32,7.42-22.28,7.42-34.78s-2.78-25.55-8.11-36.15v-.27l-1.16-2.17L189.53.17l-.08-.17H0v524h208.1l.21-.44,100.41-203.81h0Z'/%3E%3C/svg%3E");
    background-size: 398px 100%;
    background-repeat: no-repeat;
    background-position: left center;
}

.bmg-blog-band .wp-block-cover__inner-container {
    position: relative;
    z-index: 1;
}

.bmg-blog-band__row {
    --bmg-blog-band-pad-left: max(40px, calc((100vw - var(--bmg-content-width)) / 2));
    position: relative;
    align-items: stretch;
    padding-left: var(--bmg-blog-band-pad-left) !important;
}

.bmg-blog-band__rail {
    justify-content: center;
}

/* slider: takes the rest, slides run off the right edge */
.bmg-blog-band__slider {
    flex: 1;
    min-width: 0;
}

.bmg-blog-band__slider .wp-block-ymca-slider {
    margin: 0 !important;
    max-width: unset !important;
}

.bmg-blog-band .ymca-content-slide__grid {
    display: flex;
    flex-direction: column;
    /* fill the (stretch-equalized) slide so the body below can grow and pin
       its Read-more button to the bottom edge; block CSS fixes 670px,
       out-specified here */
    height: 100%;
}

.bmg-blog-band .ymca-content-slide__media {
    order: -1;
    margin-bottom: 16px;
}

/* a post with no featured image shouldn't reserve an empty photo slot/gap */
.bmg-blog-band .ymca-content-slide__media:not(:has(img)) {
    display: none;
}

.bmg-blog-band .ymca-content-slide__media img {
    width: 100%;
    height: 226px;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

.bmg-blog-band .ymca-content-slide__body h3 {
    font-size: 22.5px;
    margin: 0;
    /* min-height: 56px; */
}

.bmg-blog-band .ymca-content-slide__body p {
    margin: 0;
}

/* white circle arrows under the rail button — aligned with rail left edge */
.bmg-blog-band .splide__arrows {
    position: absolute;
    left: var(--bmg-blog-band-pad-left);
    bottom: 10%;
    display: flex;
    gap: 16px;
    z-index: 2;
}

@media (min-width: 1101px) {
    .bmg-blog-band__slider,
    .bmg-blog-band .wp-block-ymca-slider,
    .bmg-blog-band .splide {
        position: static !important;
    }
}

.bmg-blog-band .splide__arrow {
    position: static;
    width: 47px;
    height: 47px;
    background: var(--white);
    opacity: 1;
    transform: none;
}

.bmg-blog-band .splide__arrow svg {
    fill: var(--purple-dk);
    width: 14px;
    height: 14px;
}

/* override content-slide block defaults (gray card, fixed grid) */
.bmg-blog-band .wp-block-ymca-content-slide {
    background: transparent;
    color: var(--white);
    height: auto;
}

.bmg-blog-band .ymca-content-slide__body {
    padding: 0; /* block CSS pads 0 100px; out-specified here */
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1 1 auto;
}

/* bottom-align every slide's Read-more button, whatever its excerpt length */
.bmg-blog-band .ymca-content-slide__body .wp-block-buttons {
    margin-top: auto;
}

.bmg-blog-band .splide__arrow {
    background: var(--white) !important;
}

.bmg-blog-band .splide__arrow svg {
    fill: var(--purple-dk) !important;
}

/* caret is an ::after mask colored by currentColor */
.bmg-blog-band .splide__arrow {
    color: var(--purple-dk);
    opacity: 1;
}

.bmg-blog-band .splide__arrow::after {
    width: 12px !important;
    height: 21px !important;
}

/* thin chevron glyph + enforced color (block default is a dark triangle) */
.bmg-blog-band .splide__arrow {
    color: var(--purple-dk) !important;
}

.bmg-blog-band .splide__arrow::after {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="black" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>') !important;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="black" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>') !important;
}

/* >1400px the rail is 25% (a ~175px text column), so "Read our Blog" breaks one
   word per line. The <br> in the heading forces the "Blog" break; nowrap keeps
   "READ OUR" together on line 1 (it overflows into the empty right padding), so
   it reads "READ OUR" / "BLOG" per the comp. Below 1400px the column is wide
   enough to wrap correctly on its own. */
@media (min-width: 1401px) {
    .bmg-blog-band .bmg-blog-band__rail h2 {
        white-space: nowrap;
    }
}

@media (max-width: 1400px) {
    .bmg-blog-band .bmg-blog-band__rail {
        flex-basis: 35%;
    }
}

/* pagination is enabled for the mobile dots (below); desktop/tablet keeps the
   white under-rail arrows only, so hide the dots here — the ≤768px block re-shows them */
.bmg-blog-band .wp-block-ymca-slider.is-style-content-slider .splide__pagination {
    display: none;
}

/*mobile (out of 2026 desktop scope — keep usable)*/

@media (max-width: 1100px) {
    /*title*/

    .bmg-blog-band .bmg-blog-band__rail {
        padding-right: 0 !important;
        align-items: center;
        text-align: center;
    }

    /* the band stacks here — drop the chevron so it can't sit behind the
       stacked title/cards (matches how the home hero hides its chevron) */
    .bmg-blog-band .bmg-blog-band__rail::before {
        display: none;
    }

    .bmg-blog-band__row {
        flex-wrap: wrap !important;
        margin-left: 30px;
        margin-right: 30px;
        padding-left: 0 !important;
    }

    .bmg-blog-band__rail {
        flex: 1 1 100%;
        margin-bottom: 30px !important;
        padding-top: 20px;
    }

    .bmg-blog-band__slider {
        min-width: 100%;
    }

    .bmg-blog-band .splide__arrows {
        position: static;
        margin-top: 16px;
    }

    /*slides*/

    .bmg-blog-band .wp-block-ymca-content-slide {
        width: calc(50% - (23px / 2)) !important;
    }

    .bmg-blog-band .wp-block-ymca-content-slide .swipe-indicator {
        display: none;
    }

    /*arrows*/

    .bmg-blog-band .splide__arrows {
        display: none;
    }
}

@media (max-width: 768px) {
    /*slides*/

    .bmg-blog-band .wp-block-ymca-content-slide {
        width: 100% !important;
    }

    /* the "swipe to move" pill is replaced by real arrows + dots below */
    .bmg-blog-band .wp-block-ymca-content-slide .swipe-indicator {
        display: none;
    }

    .bmg-blog-band .ymca-content-slide__body h3 {
        min-height: unset;
    }

    .bmg-blog-band .ymca-content-slide__body {
        align-items: center;
        text-align: center;
        margin-bottom: 20px;
    }

    /* the content-slide block reserves ~76px at the slide bottom for the (now
       hidden) swipe pill — drop it so the controls sit right under the card */
    .bmg-blog-band .wp-block-ymca-content-slide {
        padding-bottom: 0;
    }

    /* reserve a compact control band under the card for the arrows + dots */
    .bmg-blog-band .splide {
        position: relative;
        padding-bottom: 60px;
    }

    /* arrows pinned to the card edges (far apart), dots centered between them.
       Must override the is-style-content-slider block rules (top + left:100px/168px,
       specificity 0,3,0) — use 0,4,0 selectors AND reset top, or the block's top
       wins over bottom and the arrows land mid-card, too close together. The block
       also hides .splide__arrow <887px and the pattern hides .splide__arrows <1100px. */
    .bmg-blog-band .splide__arrows {
        display: block;
        position: static;
        margin: 0;
    }
    .bmg-blog-band .wp-block-ymca-slider.is-style-content-slider .splide__arrow {
        display: flex;
        position: absolute;
        top: auto;
        bottom: 0;
        width: 44px;
        height: 44px;
        z-index: 3;
    }
    .bmg-blog-band .wp-block-ymca-slider.is-style-content-slider .splide__arrow--prev {
        left: 22px;
        right: auto;
    }
    .bmg-blog-band .wp-block-ymca-slider.is-style-content-slider .splide__arrow--next {
        right: 22px;
        left: auto;
    }

    /* dots: centered in the same band, white on the blue band (also reset the
       block's top/left) */
    .bmg-blog-band .wp-block-ymca-slider.is-style-content-slider .splide__pagination {
        display: flex;
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        height: 44px;
        align-items: center;
        justify-content: center;
        gap: 9px;
        margin: 0;
    }
    .bmg-blog-band .wp-block-ymca-slider.is-style-content-slider .splide__pagination .splide__pagination__page {
        width: 9px;
        height: 9px;
        margin: 0;
        background: var(--white);
        opacity: 0.4;
        transform: none;
    }
    .bmg-blog-band .wp-block-ymca-slider.is-style-content-slider .splide__pagination .splide__pagination__page.is-active {
        opacity: 1;
        transform: none;
    }
}