/* Blog cards — YMCA Midsize 2026 (Option B / purple)
   Light section: header row (eyebrow + two-tone heading left, cyan "All blog
   posts" button right) over a 3-up grid of post cards. Each card = photo on top
   (radius 16/16/0/0) + lavender panel (radius 0/0/16/16) with a purple title,
   body copy and a purple-dk "Read more" button. */

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

/* --- header row --- */
.bmg-blog-cards__head {
    margin-bottom: 32px;
}

:where(.bmg-blog-cards__heading) {
    gap: 2px;
}

.bmg-blog-cards__heading .wp-block-heading {
    margin: 0;
    position: relative;
}

/* Pale lavender "»" cluster in the left margin, level with the title (comp) —
   the canonical chevron mask pair, same idiom + tokens as accordion.css. */
.bmg-blog-cards__heading .wp-block-heading::before,
.bmg-blog-cards__heading .wp-block-heading::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 24px;
    height: 46px;
    transform: translateY(-50%);
    pointer-events: none;
    -webkit-mask: var(--bmg-chevron-mask) no-repeat center / contain;
    mask: var(--bmg-chevron-mask) no-repeat center / contain;
}

/* back (right) chevron — slightly pinker pale lavender */
.bmg-blog-cards__heading .wp-block-heading::before {
    left: -50px;
    background-color: var(--accent-1);
}

/* front (left) chevron — soft lavender-grey, overlapping the back one */
.bmg-blog-cards__heading .wp-block-heading::after {
    left: -68px;
    background-color: color-mix(in srgb, var(--accent-1) 88%, var(--primary-dk) 12%);
}

/* no left margin to hang in below tablet */
@media (max-width: 768px) {
    .bmg-blog-cards__heading .wp-block-heading::before,
    .bmg-blog-cards__heading .wp-block-heading::after {
        display: none;
    }
}

/* cyan CTA sits baseline-aligned with the heading block, pinned right */
.bmg-blog-cards__cta {
    flex-shrink: 0;
}

/* --- card grid --- */
.bmg-blog-cards__body {
    align-items: center;
}

.bmg-blog-cards__grid {
    align-items: stretch;
    row-gap: 40px;
    width: 100%;
}

.bmg-blog-card {
    position: relative;
    width: calc((100% - 48px) / 3);
    border-radius: 16px;
    overflow: hidden;
    background: var(--purple-tint);
    display: flex;
    flex-direction: column;
}

.bmg-blog-card__photo {
    margin: 0;
    width: 100%;
}

.bmg-blog-card__photo img {
    display: block;
    width: 100%;
    height: 226px;
    aspect-ratio: 397 / 226;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
}

.bmg-blog-card__panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--purple-tint);
    border-radius: 0 0 16px 16px;
}

.bmg-blog-card__panel h3,
.bmg-blog-card__panel h3.has-text-color {
    color: var(--primary-dk) !important;
    font-size: 22.5px !important;
    line-height: 1.07;
    text-transform: none !important;
    margin: 0 0 12px !important;
}

.bmg-blog-card__body,
.bmg-blog-card__body.has-text-color {
    color: var(--black) !important;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.31;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
}

/* "Read more" button inside card panel */
.bmg-blog-card__panel .wp-block-buttons {
    margin-top: auto;
    padding-top: 14px;
}

.bmg-blog-card__panel .wp-block-button .wp-block-button__link {
    background: var(--purple-md);
    color: var(--white);
    border: 2px solid transparent;
}

.bmg-blog-card__panel .wp-block-button .wp-block-button__link:hover {
    background: var(--purple-dk);
    color: var(--white);
    border: 2px solid transparent;
}

/* "Read more" / "Load more" text link below grid */
.bmg-blog-cards .bmg-load-more-link {
    margin: 36px 0 0;
}

.bmg-blog-cards .bmg-load-more-link a {
    color: var(--primary-dk);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    text-decoration: none;
}

.bmg-blog-cards .bmg-load-more-link a::after {
    content: "";
    display: inline-block;
    margin-left: 10px;
    width: 14px;
    height: 9px;
    background-image: url("../../icons/sub_menu_icon.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    vertical-align: middle;
    filter: brightness(0) saturate(100%) invert(20%) sepia(61%) saturate(1989%) hue-rotate(248deg) brightness(89%) contrast(92%);
}

.bmg-blog-card.fade-in {
    animation: bmg-card-fade-in 0.35s ease;
}

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

/* --- editor-only parity (.editor-styles-wrapper) --- */
.editor-styles-wrapper .bmg-blog-cards .bmg-blog-card__panel {
    border-radius: 0 0 16px 16px;
}

/* --- responsive layout --- */
@media (max-width: 1100px) {
    .bmg-blog-cards__head {
        flex-wrap: wrap !important;
    }

    .bmg-blog-card {
        width: calc((100% - 24px) / 2);
    }
}

@media (max-width: 700px) {
    .bmg-blog-cards__head {
        justify-content: center;
    }

    .bmg-blog-cards__heading {
        align-items: center;
        text-align: center;
    }

    .bmg-blog-cards__cta {
        margin-inline: auto;
    }

    .bmg-blog-card {
        width: 100%;
    }

    .bmg-blog-cards .bmg-load-more-link {
        width: 100%;
        text-align: center;
    }

    .bmg-blog-cards__grid {
        align-items: stretch;
        row-gap: 20px;
    }
}