/* Blog cards band — full-bleed teal band: left rail (title, button) + fixed-width
   card slider peeking off the right edge. */

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

.ymca-blog-band .ymca-blog-band__rail {
    position: relative;
}

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

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

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

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

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

.ymca-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%;
}

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

/* The slides come from ymca/recent-post-slides, which reuses content-slide's
   markup — including its "Swipe to move" pill. This band uses real arrows and
   dots instead, so the pill is never wanted at any width. The content-slide
   stylesheet also hides it, but only loads because that block declares it as a
   dependency; hiding it here keeps the pattern correct on its own. */
.ymca-blog-band .wp-block-ymca-content-slide .swipe-indicator {
    display: none;
}

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

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

/* split-content-slider.css resets border-radius to "unset" on the bare
   .wp-block-ymca-content-slide .ymca-content-slide__media(/ img) selector
   below 886px — unscoped to that pattern, so it leaks into every slider built
   from ymca/content-slide, this one included, and wins the specificity tie
   since it's enqueued after this file. !important reasserts our radius
   regardless of enqueue order; scoping the source rule is the real fix but
   touches an already-shipped pattern, so out of scope here. */
@media (max-width: 886px) {
    .ymca-blog-band .ymca-content-slide__media,
    .ymca-blog-band .ymca-content-slide__media img {
        border-radius: 16px !important;
    }
}

.ymca-blog-band .ymca-content-slide__body h3 {
    font-size: 22.5px;
    margin: 0;
}

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

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

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

.ymca-blog-band .splide__arrow {
    position: static;
    width: 47px;
    height: 47px;
    background: var(--white) !important;
    opacity: 1;
    transform: none;
    color: var(--primary-dk) !important;
}

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

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

.ymca-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 */
.ymca-blog-band .ymca-content-slide__body .wp-block-buttons {
    margin-top: auto;
}

/* caret is an ::after mask colored by currentColor */
.ymca-blog-band .splide__arrow::after {
    width: 12px !important;
    height: 21px !important;
    -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". Below 1400px the column is wide enough to wrap
   correctly on its own. */
@media (min-width: 1401px) {
    .ymca-blog-band .ymca-blog-band__rail h2 {
        white-space: nowrap;
    }
}

@media (max-width: 1400px) {
    .ymca-blog-band .ymca-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 */
.ymca-blog-band .wp-block-ymca-slider.is-style-content-slider .splide__pagination {
    display: none;
}

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

    .ymca-blog-band .ymca-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 */
    .ymca-blog-band .ymca-blog-band__rail::before {
        display: none;
    }

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

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

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

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

    /*slides*/

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

    /*arrows*/

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

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

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

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

    .ymca-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 */
    .ymca-blog-band .wp-block-ymca-content-slide {
        padding-bottom: 0;
    }

    /* reserve a compact control band under the card for the arrows + dots */
    .ymca-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. */
    .ymca-blog-band .splide__arrows {
        display: block;
        position: static;
        margin: 0;
    }
    .ymca-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;
    }
    .ymca-blog-band .wp-block-ymca-slider.is-style-content-slider .splide__arrow--prev {
        left: 22px;
        right: auto;
    }
    .ymca-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) */
    .ymca-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;
    }
    .ymca-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;
    }
    .ymca-blog-band .wp-block-ymca-slider.is-style-content-slider .splide__pagination .splide__pagination__page.is-active {
        opacity: 1;
        transform: none;
    }
}

/* Published date, sits directly under the card title.

   ADA: 18px minimum and full-strength colour - no opacity dimming, and no
   shrinking on small screens. Heading font + --letter-spacing-cachet-sm so it
   stays Cachet and keeps its spacing whichever body font is selected. The body
   is a flex column with a 10px gap, so the date needs no margins of its own. */
.ymca-blog-band .ymca-content-slide__date {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: var(--letter-spacing-cachet-sm);
    text-transform: uppercase;
}