/* blocks_controlled_overselling — Figma node 1424:12122. Mirrors the
   2/5 + 3/5 grid pattern used by blocks_flexible_charging, but with
   cards on the LEFT (spanning 3 cols) and the content column on the
   RIGHT (spanning 2 cols).

   At ≥1280 viewports the cards share the 3-col track via `flex: 1 1 0`
   so all three sit cleanly inside the 3/5 zone (matching the way
   blocks_flexible_charging's right panel fills its 3/5 track).

   Below 1280 the section flips to stacked (content first, cards row
   below). The cards row breaks out of the section side-padding so it
   spans the full viewport, with cards at fixed natural widths — the
   rightmost card bleeds past the viewport right edge, clipped by
   `overflow-x: clip` on the section. */

.blocks-controlled-overselling {
    position: relative;
    display: grid;
    /* `minmax(0, 1fr)` not bare 1fr — see flexible-charging for why
       (bare 1fr lets the track grow past viewport on mobile). */
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    max-width: 1700px;
    margin: 0 auto;
    padding: 80px 24px;
    box-sizing: border-box;
    /* No overflow clip on the section — cards' leftward overflow needs
       to bleed past the section into the page background. The parent
       `.site_container` has `overflow: visible` so the cards aren't
       clipped at it; the body/html ultimately clip horizontal scroll
       via their own rules. */
}

@media (max-width: 1023px) {
    /* Mobile: stacked, content above. Cards row breaks out to viewport
       width and aligns cards to the right; the leftmost card bleeds
       past the viewport left edge (clipped by .site's overflow-x: hidden).
       Section padding stays symmetric (80px 24px) so the
       `calc(50% - 50vw)` resolves to the full -24px needed for the
       element to span exactly 0 → 100vw. Asymmetric padding here would
       break the math (wrapper would end 12px short of viewport-right). */
    .blocks-controlled-overselling {
        grid-template-areas:
            "right"
            "cards";
    }
    .bco__col-right {
        grid-area: right;
        padding: 0;
        box-sizing: border-box;
        min-width: 0;
    }
    .bco__cards {
        grid-area: cards;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        padding: 0 24px 0 0;
        box-sizing: border-box;
        min-width: 0;
    }
}

@media (min-width: 1024px) {
    .blocks-controlled-overselling {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 60px;
        padding: 120px 32px;
    }
    /* Cards row spans the full grid AND its left edge breaks out to
       the viewport edge — but its right edge stops just before the
       content column so scrolling never pushes cards under the prose.
       Width is computed so right edge = end of col 3:
         available = 100vw − (right-side margin + section padding-right
                              + content-col width + separating gap)
       At 1024–1700, all those scale linearly → ≈ 60vw − 30px.
       Above 1700 the track maxes at 1636 so the math switches; see
       the next media query. Content column sits in the same grid row,
       lifted above the cards via z-index in case of any overlap. */
    .bco__cards {
        grid-column: 1 / -1;
        grid-row: 1;
        width: calc(60vw - 30px);
        margin-left: calc(50% - 50vw);
        padding-top: 130px;
        min-width: 0;
    }
    .bco__col-right {
        grid-column: 4 / span 2;     /* 2/5 right */
        grid-row: 1;
        position: relative;
        z-index: 2;
    }
}

/* Above the 1700px max-width, the section stops growing — content-col
   width becomes fixed (~678px incl. gap) so the cards' available width
   grows as 50vw + 140px instead of 60vw − 30px. */
@media (min-width: 1700px) {
    .bco__cards {
        width: calc(50vw + 140px);
    }
}

/* Eyebrow override — green --yes accent, not the partial's mid-purple. */
.blocks-controlled-overselling .blocks-content-col__eyebrow {
    color: #3c9a89;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13.75px;
    line-height: 1.24;
}

/* ---- Card row ---- */

.bco__cards {
    /* RTL on the scroll container so its initial scroll position lands
       at the visual right (purple card in view) and overflow falls off
       the LEFT — exactly the behavior we want. `flex-direction:
       row-reverse` then keeps visual order LTR (Customer → Variant →
       Purple) despite the RTL parent. Cards reset to `direction: ltr`
       so their inner text/icons render normally. */
    direction: rtl;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    gap: 20px;
    min-width: 0;
    /* Don't stretch cards to match the tallest — cyan and purple have
       different fixed heights per Figma (purple is taller). */
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
}
.bco__cards > * { direction: ltr; }

.bco__card { scroll-snap-align: end; }

.bco__card {
    position: relative;
    flex: 0 0 auto;
    width: 240px;
    /* fixed height — used by cyan cards. purple overrides below. */
    height: 360px;
    padding: 24px 22px;
    border-radius: 18px;
    box-sizing: border-box;
    overflow: hidden;
}
@media (min-width: 768px) {
    .bco__card {
        width: 300px;
        height: 420px;
        padding: 32px 28px;
        border-radius: 22px;
    }
}
@media (min-width: 1280px) {
    .bco__card {
        width: 320px;
        height: 440px;
        padding: 36px 30px;
        border-radius: 24px;
    }
}

.bco__card--cyan {
    background: rgba(175, 235, 255, 0.05);
    border: 2px solid #afebff;
}

.bco__card--purple {
    background: #130041;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* In Figma purple is ~9% taller than the cyan cards (497 vs 457). */
    height: 400px;
}
@media (min-width: 768px) {
    .bco__card--purple { height: 460px; }
}
@media (min-width: 1280px) {
    .bco__card--purple { height: 480px; }
}
.bco__card--purple .bco__card-title { font-size: 22px; }
@media (min-width: 1500px) {
    .bco__card--purple .bco__card-title { font-size: 24px; }
}

.bco__card-title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.3;
    color: #0b2d38;
}
@media (min-width: 1500px) { .bco__card-title { font-size: 24px; } }
.bco__card-title--inverse { color: #ffffff; }

.bco__card-body {
    margin: 8px 0 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.43;
    color: #0b2d38;
}
@media (min-width: 768px) { .bco__card-body { font-size: 14px; } }
.bco__card-body--inverse {
    color: #e7e3ff;
    opacity: 1;
}

/* ---- Mock screenshot insets (cyan cards) ---- */
/* In Figma the mocks are anchored bottom-right of the card; their right
   edge bleeds ~12px past the card edge and their bottom ~40px past the
   bottom — `overflow:hidden` on the card clips both. */

.bco__card-mock {
    position: absolute;
    right: -8px;
    bottom: -28px;
    left: auto;
    top: auto;
    width: 190px;
    height: 170px;
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    padding: 12px 14px 0;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(11, 45, 56, 0.08);
}
@media (min-width: 768px) {
    .bco__card-mock {
        right: -10px;
        bottom: -32px;
        width: 230px;
        height: 200px;
        padding: 14px 16px 0;
    }
}
@media (min-width: 1500px) {
    .bco__card-mock {
        width: 250px;
        height: 215px;
        padding: 14px 16px 0;
    }
}

.bco__card-mock img {
    display: block;
    width: 100%;
    height: auto;
}
.bco__card-mock--customer img {
    width: 100%;
    margin-top: -6px;
}
.bco__card-mock--variant img {
    width: 110%;
    max-width: none;
    margin-top: -4px;
}

/* ---- Purple card cart icon ---- */

.bco__card-cart {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 92px;
    height: 86px;
    display: block;
    color: #5e4c92;
}
@media (min-width: 768px) {
    .bco__card-cart {
        top: 28px;
        right: 28px;
        width: 130px;
        height: 120px;
    }
}
@media (min-width: 1500px) {
    .bco__card-cart {
        top: 32px;
        right: 32px;
        width: 155px;
        height: 144px;
    }
}
.bco__card-cart svg {
    width: 100%;
    height: 100%;
    display: block;
}