/* Split content slider (The Y Difference) — YMCA Midsize 2026, Option B (purple).
   Light section: centered header (eyebrow + two-tone heading + copy + two buttons),
   then a ymca/side-tabs (image variant) styled per comp node 203:862: a 397px
   category list on the LEFT (active item = purple-dk card with icon + title + body;
   inactive items = icon + title rows on the lavender tint container) and the active
   category's rounded photo (819x476) on the RIGHT. */

.bmg-y-difference {
    overflow: hidden;
}

/* ---- centered header ---- */
.bmg-y-difference__head {
    text-align: center;
}

.bmg-y-difference__copy {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* eyebrow runs bigger in this section (comp: 22.5px / lh 28) */
.bmg-y-difference .bmg-eyebrow {
    font-size: 22.5px;
    line-height: 1.24;
}

/* second CTA: purple-md fill + white text (comp Button 83:2683 fill #92278f),
   repurposing the is-style-bmg-secondary slot */
.bmg-y-difference .wp-block-button.is-style-bmg-secondary .wp-block-button__link {
    background: var(--purple-md);
    color: var(--white);
}

.bmg-y-difference .wp-block-button.is-style-bmg-secondary .wp-block-button__link:hover {
    background: var(--primary-dk);
    color: var(--white);
}

/* ---- side-tabs: category list left (397px) + photo right (819px) ----
   The block ships is-image defaults with !important (gray-lt buttons, 12px radii,
   currentColor icon paths), so these overrides carry the section class for
   specificity and !important where the block uses it. */
.bmg-y-difference .ymca-side-tabs {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: transparent;
}

.bmg-y-difference .ymca-side-tabs__nav {
    flex: 0 0 397px;
    width: 397px;
}

/* lavender tint container, 16px radius (comp Rectangle 66 #f2e5f2) */
.bmg-y-difference .ymca-side-tabs.is-image .ymca-side-tabs__nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--purple-tint);
    border-radius: 16px;
    overflow: hidden;
}

.bmg-y-difference .ymca-side-tabs__nav-item {
    margin: 0;
    border: none;
}

/* kill the block's .is-image 1px hairline between rows (it drew a stray line
   above and below the active card); the 2px comp divider below is the only
   separator we want */
.bmg-y-difference .ymca-side-tabs.is-image .ymca-side-tabs__nav .ymca-side-tabs__nav-item:not(:last-child) {
    border-bottom: none;
}

/* divider between the collapsed category rows (comp Line 19, 2px purple-dk) */
.bmg-y-difference .ymca-side-tabs__nav-item:not(.is-active) + .ymca-side-tabs__nav-item:not(.is-active) {
    border-top: 2px solid var(--primary-dk);
}

.bmg-y-difference .ymca-side-tabs.is-image .ymca-side-tabs__nav .ymca-side-tabs__nav-button {
    display: block;
    width: 100%;
    padding: 24px 28px;
    background: transparent !important; /* block default: gray-lt !important */
    border: none;
    border-radius: 0 !important; /* block default: 12px corner radii */
    text-align: left;
    cursor: pointer;
}

/* no chevron indicator in this design */
.bmg-y-difference .ymca-side-tabs__active-chevron {
    display: none !important;
}

/* icon + title inline; body text below spanning the card */
.bmg-y-difference .ymca-side-tabs__nav-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px;
    row-gap: 10px;
}

/* block sets svg path fill/stroke to currentColor — drive icons via color */
.bmg-y-difference .ymca-side-tabs.is-image .ymca-side-tabs__nav-icon {
    display: inline-flex;
    width: 31px;
    height: auto;
    justify-content: center;
    flex: none;
    color: var(--purple-lt); /* #c6168d — collapsed category icons (comp) */
    fill: var(--purple-lt);
    stroke: none;
}

.bmg-y-difference .ymca-side-tabs__nav-icon .ymca-icon svg {
    display: block;
    height: 30px;
    width: auto;
}

.bmg-y-difference .ymca-side-tabs__nav-icon .ymca-icon svg path {
    stroke: none;
}

/* flatten the wrapper so the icon + label share a row and the body text wraps
   below at the card's full width (comp: text starts at the card padding) */
.bmg-y-difference .ymca-side-tabs__nav-label-wrapper {
    display: contents;
}

.bmg-y-difference .ymca-side-tabs.is-image .ymca-side-tabs__nav-label {
    display: block;
    flex: 1;
    min-width: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--primary-dk);
    text-transform: none;
}

/* body copy hidden on collapsed rows */
.bmg-y-difference .ymca-side-tabs__nav-text {
    display: none;
    font-size: 16px;
    line-height: 1.31;
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* ---- active category = purple-dk card (comp Rectangle 79) ---- */
.bmg-y-difference .ymca-side-tabs.is-image .ymca-side-tabs__nav .ymca-side-tabs__nav-item.is-active .ymca-side-tabs__nav-button {
    background: var(--primary-dk) !important;
    padding: 32px 28px;
    color: var(--white) !important; /* block default: primary-dk !important */
}

.bmg-y-difference .ymca-side-tabs.is-image .ymca-side-tabs__nav-item.is-active .ymca-side-tabs__nav-label {
    color: var(--white);
}

.bmg-y-difference .ymca-side-tabs.is-image .ymca-side-tabs__nav-item.is-active .ymca-side-tabs__nav-icon {
    color: var(--primary-lt); /* cyan icon on the active card (comp) */
    fill: var(--primary-lt);
}

.bmg-y-difference .ymca-side-tabs__nav-item.is-active .ymca-side-tabs__nav-text {
    display: block;
    flex-basis: 100%;
    color: var(--white);
}

/* ---- photo panel right (819x476, radius 16) ----
   The block absolutely-positions the active panel (inset:0), so the photo adds
   NO height of its own — without a reserved box the image hangs past the
   container and the section's overflow:hidden slices off its bottom radius
   whenever the category list is shorter/taller than the photo (PP #11).
   aspect-ratio reserves the comp's 819x476 box at any width. */
.bmg-y-difference .ymca-side-tabs.is-image .ymca-side-tabs__panels {
    flex: 1;
    min-width: 0;
    padding: 0;
    background: transparent;
    border-radius: 16px;
    aspect-ratio: 819 / 476;
}

.bmg-y-difference .ymca-side-tabs__panel-image {
    position: relative;
    margin: 0;
}

/* fill the reserved panel box (a fixed 476px here is what caused the clipped
   bottom corners — the box, not the img, owns the size now) */
.bmg-y-difference .ymca-side-tabs__panel-image-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

/* the block's .is-image variation forces 12px on the image's right corners,
   which mismatched our 16px left corners — pin all four to 16px */
.bmg-y-difference .ymca-side-tabs.is-image .ymca-side-tabs__panel-image img {
    border-radius: 16px;
}

/* comp shows a plain photo — no overlay arrows */
.bmg-y-difference .ymca-side-tabs__panel-image .arrow-1,
.bmg-y-difference .ymca-side-tabs__panel-image .arrow-2 {
    display: none !important;
}

/* ---- editor parity (same canvas classes; keep the layout intact) ---- */
.editor-styles-wrapper .bmg-y-difference .ymca-side-tabs__nav ul {
    background: var(--purple-tint);
}

.editor-styles-wrapper .bmg-y-difference .ymca-side-tabs__nav-item.is-active .ymca-side-tabs__nav-button {
    background: var(--primary-dk);
}

/* ---- mobile (out of 2026 desktop scope — the block's own responsive dropdown
   takes over; just keep the photo fluid) ---- */
@media (max-width: 1100px) {
    .bmg-y-difference .ymca-side-tabs {
        flex-wrap: wrap;
    }

    .bmg-y-difference .ymca-side-tabs__nav {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Below the section's wrap point the constrained children run flush to the
   viewport (the markup inlines padding-left/right:0, so the shared :where()
   gutter can't reach it) — media-query !important exception. */
@media (max-width: 1100px) {
    .bmg-y-difference {
        padding-left: var(--bmg-section-gutter, 1rem) !important;
        padding-right: var(--bmg-section-gutter, 1rem) !important;
    }
}

/* Phone: hide the image panel on mobile, while retaining active tab highlight and
   body text display for the selected tab to reduce vertical page scroll. */
@media (max-width: 768px) {
    .bmg-y-difference .ymca-side-tabs.is-image .ymca-side-tabs__panels {
        display: none !important;
    }

    .bmg-y-difference__tabs {
        margin-top: 30px !important;
    }
}