/* Image button cards (sport grid) — YMCA 2026 Option B (node 215:1145)
   Centered header (eyebrow + two-tone "There's a Sport for Everyone" + cyan CTA)
   with pale-lavender double-chevron clusters flanking it left & right, above a
   3-col grid: photo top (r16) → lavender (accent-1 #f2e5f2) panel with a purple-dk
   title + black body → purple-md (#92278f) "EXPLORE X" footer strip.
   (.bmg-eyebrow + .bmg-accent-purple are shared, defined in defaults.css.) */

/* ---- section + centered header with flanking chevrons ---- */
.bmg-sport-cards {
    position: relative;
    z-index: 0; /* own stacking context: decorations above the page bg,
                            below this section's content */
    overflow-x: clip; /* clip the clusters' off-canvas bleed; sticky-safe */
}

.bmg-sport-cards__head {
    position: relative;
    z-index: 1; /* header text/button above the chevron clusters */
    max-width: 960px; /* fits the ~924px one-line heading; leaves ~140px gutters
                            each side for the flanking chevron clusters (comp) */
    margin-left: auto;
    margin-right: auto;
}

.bmg-sport-cards__head > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* small gap below the eyebrow before the heading */
.bmg-sport-cards__head .bmg-eyebrow {
    margin-bottom: 8px;
}

/* Double-chevron clusters flanking the heading — the comp's own vectors
   (nodes 362:1160/362:1164, 142x141, fills #e6e0ee + #f1ddee). They point
   INWARD: left cluster points right, right cluster points left.

   They hang off the 1240px content column (not the 960px heading group): the
   comp's 40px gap needs 182px of gutter but the column only leaves 140px, so
   each cluster bleeds 42px outside it. Anchoring to the column instead of the
   heading is what keeps that bleed a fixed 42px at any viewport width — off
   the heading, the gutter grows with the viewport and the clusters drift out
   of the layout entirely. */
.bmg-sport-cards .ymca-image-button-card-section__inner-container {
    position: relative;
}

.bmg-sport-cards .ymca-image-button-card-section__inner-container::before,
.bmg-sport-cards .ymca-image-button-card-section__inner-container::after {
    content: "";
    position: absolute;
    top: -8px; /* cluster spans eyebrow + heading height (comp y offset) */
    width: 142px;
    height: 141px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* The full bleed only fits while the viewport has >=42px of gutter outside the
   column (>=1324px). Below that, clamp() trades the bleed away for whatever
   gutter is left, so the clusters sit flush to the viewport edge rather than
   running off-canvas and getting sliced by the section's overflow clip. The 0px
   ceiling stops them from ever crossing back INSIDE the column, where they'd
   run into the heading. */
.bmg-sport-cards .ymca-image-button-card-section__inner-container::before {
    left: clamp(-42px, calc((1240px - 100vw) / 2), 0px);
    background-image: url('data:image/svg+xml,<svg width="142" height="141" viewBox="0 0 142 141" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M78.8074 66.4659L78.4942 65.9537L46.2947 8.83651L45.7309 7.81199C42.9745 3.00954 37.7749 0 31.949 0H5.38747C2.44315 0 0 2.43324 0 5.50681C0 8.58038 0.187935 7.36376 0.62645 8.13215L33.0766 65.5695C34.58 68.1308 35.3944 71.1403 35.3944 74.342C35.3944 77.5436 34.58 80.361 33.2019 82.9223L5.0116 132.868C4.57309 133.636 4.38515 134.533 4.38515 135.493C4.38515 138.503 6.76566 141 9.77262 141H37.0232C42.8492 141 48.0487 137.99 50.8051 133.188L51.3689 132.163L78.4942 84.139L78.9954 83.2425C80.3736 80.8093 81 77.9918 81 75.0463C81 72.1008 80.2483 69.0273 78.8074 66.53V66.4659Z" fill="%23E6E0EE"/><path d="M139.807 66.4659L139.494 65.9537L107.295 8.83651L106.731 7.81199C103.974 3.00954 98.7749 0 92.949 0H66.3875C63.4432 0 61 2.43324 61 5.50681C61 8.58038 61.1879 7.36376 61.6265 8.13215L94.0766 65.5695C95.58 68.1308 96.3944 71.1403 96.3944 74.342C96.3944 77.5436 95.58 80.361 94.2019 82.9223L66.0116 132.868C65.5731 133.636 65.3852 134.533 65.3852 135.493C65.3852 138.503 67.7657 141 70.7726 141H98.0232C103.849 141 109.049 137.99 111.805 133.188L112.369 132.163L139.494 84.139L139.995 83.2425C141.374 80.8093 142 77.9918 142 75.0463C142 72.1008 141.248 69.0273 139.807 66.53V66.4659Z" fill="%23F1DDEE"/></svg>');
}

.bmg-sport-cards .ymca-image-button-card-section__inner-container::after {
    right: clamp(-42px, calc((1240px - 100vw) / 2), 0px);
    background-image: url('data:image/svg+xml,<svg width="142" height="141" viewBox="0 0 142 141" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M63.1926 66.4659L63.5058 65.9537L95.7053 8.83651L96.2691 7.81199C99.0255 3.00954 104.225 0 110.051 0H136.613C139.557 0 142 2.43324 142 5.50681C142 8.58038 141.812 7.36376 141.374 8.13215L108.923 65.5695C107.42 68.1308 106.606 71.1403 106.606 74.342C106.606 77.5436 107.42 80.361 108.798 82.9223L136.988 132.868C137.427 133.636 137.615 134.533 137.615 135.493C137.615 138.503 135.234 141 132.227 141H104.977C99.1508 141 93.9513 137.99 91.1949 133.188L90.6311 132.163L63.5058 84.139L63.0046 83.2425C61.6264 80.8093 61 77.9918 61 75.0463C61 72.1008 61.7517 69.0273 63.1926 66.53V66.4659Z" fill="%23E6E0EE"/><path d="M2.19257 66.4659L2.5058 65.9537L34.7053 8.83651L35.2691 7.81199C38.0255 3.00954 43.2251 0 49.051 0H75.6125C78.5568 0 81 2.43324 81 5.50681C81 8.58038 80.8121 7.36376 80.3735 8.13215L47.9234 65.5695C46.42 68.1308 45.6056 71.1403 45.6056 74.342C45.6056 77.5436 46.42 80.361 47.7981 82.9223L75.9884 132.868C76.4269 133.636 76.6148 134.533 76.6148 135.493C76.6148 138.503 74.2343 141 71.2274 141H43.9768C38.1508 141 32.9513 137.99 30.1949 133.188L29.6311 132.163L2.5058 84.139L2.00464 83.2425C0.626442 80.8093 0 77.9918 0 75.0463C0 72.1008 0.75174 69.0273 2.19257 66.53V66.4659Z" fill="%23F1DDEE"/></svg>');
}

/* the repeater reuses wp-block-cover classes; core paints dimmed covers black.
   The block's backgroundColor default (primary-dk) emits has-primary-dk-background-color,
   which WP ships with !important — so this override needs !important to win and let the
   outer white cover show through. */
.ymca-image-button-card-section.wp-block-cover.has-background-dim:not(.has-background-gradient),
.ymca-image-button-card-section.has-primary-dk-background-color {
    background-color: transparent !important;
}

/* The flanking chevron clusters are anchored inside this repeater, which is
   itself a wp-block-cover — and core ships covers with overflow:hidden. That
   box is only as wide as the 1240px column, so it slices off the clusters'
   42px bleed (the crop the comp doesn't want). Let it show: the outer
   .bmg-sport-cards still clips any true off-canvas bleed via overflow-x: clip. */
.ymca-image-button-card-section.wp-block-cover {
    overflow: visible;
}

.ymca-image-button-card-section__inner-container {
    max-width: 1240px !important;
}

/* cards: 3 per row, 24px column gap (block CSS assumes a 35px gap — override).
   Grid, not the block's flexbox: flex rows size independently, so a long copy
   block only evens out its OWN row. grid-auto-rows:1fr in an auto-height grid
   gives every row the tallest row's height, so all cards match regardless of
   how much copy each one carries. */
.wp-block-ymca-image-button-card-repeater .ymca-image-button-card-list-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 36px 24px !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

.wp-block-ymca-image-button-card-repeater .ymca-image-button-card {
    /* block CSS sizes these as flex items (flex-basis + 300px min) — inert in
       grid, but min-width would still floor the track and force overflow */
    width: auto !important;
    min-width: 0 !important;
    border-radius: 16px;
}

/* block CSS pads the inner container; the comp section provides its own spacing */
.ymca-image-button-card-section__inner-container {
    padding: 0 !important;
}

.ymca-image-button-card__media,
.ymca-image-button-card__media .wp-block-image,
.ymca-image-button-card__media img {
    width: 100%;
}

.ymca-image-button-card__media img {
    display: block;
}

/* lavender panel: fills remaining height so rows stay even */
.ymca-image-button-card__content {
    flex: 1;
    width: 100%;
    min-height: 112px;
}

/* card title — match the comp's 28.125px purple-dk heading */
.ymca-image-button-card__content h3 {
    line-height: 1.07;
    margin-bottom: 4px;
}

/* purple-md footer strip (#92278f) */
.ymca-image-button-card__footer {
    width: 100%;
    background: var(--purple-md);
    border-radius: 0 0 16px 16px;

    transition: all 0.3s ease-in-out;
}
.ymca-image-button-card__footer:hover {
    background: var(--purple-dk);
}

.ymca-image-button-card__footer p {
    margin: 0;
    letter-spacing: -0.04em;
}

/* comp footer strip is plain "EXPLORE X" text (no trailing arrow), ~17px tall */
.ymca-image-button-card__footer a {
    display: block;
    padding: 16px 28px;

    text-align: center;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 18px;
}

/* load more: blue text link with down caret */
.ymca-image-button-card-section .ymca-load-more-btn {
    background: none;
    border: none;
    color: var(--primary-dk);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    cursor: pointer;
    padding: 0;
}

.ymca-image-button-card-section .ymca-load-more-btn .icon.triangle {
    transform: rotate(90deg);
    width: 10px !important;
    height: 10px !important;
}

.ymca-image-button-card.fade-in {
    animation: ymca-card-fade-in 0.35s ease;
}

@keyframes ymca-card-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

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

/* Once the column narrows the side gutters collapse — measured, the clusters
   run out of clearance and touch the heading group at 1260px. Drop them below
   that rather than let them collide with the (now wrapping) heading. */
@media (max-width: 1259px) {
    .bmg-sport-cards .ymca-image-button-card-section__inner-container::before,
    .bmg-sport-cards .ymca-image-button-card-section__inner-container::after {
        display: none;
    }
}

@media (max-width: 992px) {
    .wp-block-ymca-image-button-card-repeater .ymca-image-button-card-list-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .wp-block-ymca-image-button-card-repeater .ymca-image-button-card-list-wrapper {
        grid-template-columns: 1fr;
    }
}