/* blocks_flexible_charging — sticky right panel + scroll-driven active stage.
   Class-prefixed `.bfc__*` (and `.blocks-flexible-charging` on the section
   root) so it can't leak. */

.blocks-flexible-charging {
    position: relative;
    display: grid;
    /* `minmax(0, 1fr)` (not bare `1fr`) is critical on mobile: bare 1fr
       resolves to minmax(auto, 1fr), where `auto` grows the track to
       fit its items' min/max-content. With `width: 100vw` on the right
       col and `text-wrap: balance` on the h3, the track inflates past
       viewport and both columns then inherit that bloated width.
       minmax(0, …) caps the track at the available space. */
    grid-template-columns: minmax(0, 1fr);
    gap: 60px;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 24px;
    box-sizing: border-box;
}

/* Decorative cropper bleeding off the LEFT viewport edge. The image's top
   sits inside the section but ~half the image hangs below into the next
   section (controlled-overselling) — that's how it's designed in Figma. */
.bfc__cropper {
    position: absolute;
    bottom: -240px;
    left: calc(50% - 50vw);
    width: 474px;
    height: auto;
    transform: translateX(-40%);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
@media (max-width: 1279px) {
    .bfc__cropper { transform: translateX(-60%); }
}
@media (max-width: 1023px) {
    .bfc__cropper { width: 330px; bottom: -140px; transform: translateX(-65%); }
}
@media (max-width: 767px) {
    .bfc__cropper { display: none; }
}
@media (max-width: 1023px) {
    /* Mobile: break the right col out of the section's max-width + side
       padding so it spans the full viewport width. 50% - 50vw collapses
       to whatever negative offset is needed to reach the viewport edge,
       regardless of the section's actual width. min-width:0 lets the
       grid item actually honour the 100vw cap (otherwise its intrinsic
       min-content can win and push the box wider). */
    .bfc__col-right {
        width: 100vw;
        max-width: 100vw;
        min-width: 0;
        box-sizing: border-box;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
    .bfc__col-left {
        min-width: 0;
    }
    .bfc__panel {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .bfc__card {
        min-width: 0;
    }
}

@media (min-width: 1024px) {
    .blocks-flexible-charging {
        /* 5-col grid — left text col spans 2, right panel spans 3. */
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 80px;
        padding: 120px 32px;
        --bfc-top-offset: 160px;
    }
    .bfc__col-left {
        grid-column: span 2;
    }
    .bfc__col-right {
        grid-column: span 3;
    }

    /* Only the LEFT col is sticky. The right col flows naturally; as each
       card scrolls past the active line, JS sets data-stage on the section
       root and CSS lifts that card / badge to full opacity. */
    .bfc__col-left {
        position: sticky;
        top: var(--bfc-top-offset);
        align-self: start;
    }
    .bfc__col-right {
        padding-top: var(--bfc-top-offset);
    }
}

/* ===== Right-hand panel ===== */
.bfc__panel {
    position: relative;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(205, 195, 212, 0.2);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}
@media (min-width: 768px) {
    .bfc__panel {
        padding: 28px;
    }
}

/* ===== Badge tags row ===== */
.bfc__badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
@media (min-width: 1024px) {
    /* Sticky to the top of the right col while the panel scrolls past it.
       Negative inline margin + matching inline padding lets the bg bleed
       to the panel edges, and a solid-ish bg keeps cards from showing
       through once the badges detach from their natural slot. */
    .bfc__badges {
        position: sticky;
        top: var(--bfc-top-offset);
        z-index: 2;
        margin: -20px -20px 0;
        padding: 14px 20px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 8px 8px 0 0;
    }
    /* Extension strip above the sticky badges — fills the area between the
       floating nav and the badges with the same frosted bg. Sits in the
       right col's padding-top zone at natural position (so it doesn't
       overlap content above the section), then rides up with the badges
       and covers viewport 0..--bfc-top-offset once the badges are stuck. */
    .bfc__badges::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: var(--bfc-top-offset);
        background: rgba(255, 255, 255, 0.9);
        pointer-events: none;
    }
}
.bfc__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    transition: opacity 250ms ease;
    opacity: 0.3;
}
.bfc__badge--later {
    background: #ffe36f;
    color: #373806;
}
.bfc__badge--capture {
    background: #a1f2eb;
    color: #0a3733;
}
.bfc__badge--deposit {
    background: #dcbbf5;
    color: #3e093e;
}
.bfc__badge--upfront {
    background: #afebff;
    color: #0b2d38;
}

/* ===== Cards ===== */
.bfc__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    counter-reset: bfc-card;
}
.bfc__card {
    position: relative;
    background: #f7f8fb;
    border: 2px solid;
    border-radius: 5px;
    overflow: hidden;
    transition: opacity 300ms ease;
    opacity: 0.3;
}
.bfc__card::before {
    /* Inner white panel — leaves a 2px coloured border-frame look. */
    content: "";
    position: absolute;
    inset: 2px;
    background: #fff;
    border-radius: 3px;
    pointer-events: none;
}
/* Per-stage colours from Figma tokens:
 * --{stage}: badge bg + chart line (lightest tone)
 * border:    mid-tone (saturated rim)
 * color:     contrast text (darkest tone) */
.bfc__card--later {
    border-color: #e6c333;
    color: #373806;
    --bfc-chart: #ffe36f;
}
.bfc__card--capture {
    border-color: #3cb0a6;
    color: #0a3733;
    --bfc-chart: #a1f2eb;
}
.bfc__card--deposit {
    border-color: #c7a1e4;
    color: #3e093e;
    --bfc-chart: #dcbbf5;
}
.bfc__card--upfront {
    border-color: #83c5da;
    color: #0b2d38;
    --bfc-chart: #afebff;
}

.bfc__card-inner {
    position: relative;
    z-index: 1;
    padding: 22px 24px;
    min-height: 180px;
}

.bfc__card-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
@media (min-width: 1024px) {
    /* Cap text width so the chart on the right has room to breathe.
       Mobile uses full card width — the chart is small/decorative there. */
    .bfc__card-text {
        max-width: 60%;
    }
}
.bfc__card-title {
    margin: 0;
    font-weight: 900;
    font-size: 21.5px;
    line-height: 1.1;
}
.bfc__card-body {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    flex: 1 1 auto;
}

/* Icon flow: pill > chevron > pill > chevron > … */
.bfc__card-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}
.bfc__card-flow-step {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.bfc__card-flow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    background: currentColor;
}
.bfc__card-flow-icon svg {
    width: 14px;
    height: 14px;
    color: #fff;
}
.bfc__card-flow-sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}
.bfc__card-flow-sep svg {
    width: 14px;
    height: 14px;
}

/* ===== Decorative chart on the right of each card =====
   Absolute-positioned so the text + icon-flow can use the full card width;
   the chart sits behind them in the bottom-right ~50% of the card. */
.bfc__card-chart {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    pointer-events: none;
    z-index: 0;
}
.bfc__card-chart svg {
    display: block;
    width: 100%;
    height: auto;
}
.bfc__card-chart .bfc__chart-line {
    stroke: var(--bfc-chart);
    fill: none;
}
.bfc__card-chart .bfc__chart-stop {
    stop-color: var(--bfc-chart);
}

/* ===== Breadcrumbs progress dots =====
   Vertical stack of 4 dots inside the panel; the dot whose data-stage
   matches the section root's data-stage is filled, the others are
   outlined. Mirrors Figma node 1442:9228.

   The anchor is absolute (no flex flow space) and spans the panel's full
   height; the dots themselves are `position: sticky` so they ride with
   the panel until they reach the viewport offset just below the sticky
   badges, then pin in place. */
.bfc__crumbs-anchor {
    position: absolute;
    left: 6px;
    top: 60px;
    bottom: 12px;
    width: 8px;
    pointer-events: none;
    z-index: 2;
}
.bfc__crumbs {
    display: flex;
    flex-direction: column;
    gap: 11px;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 1024px) {
    /* Stick just below the sticky badges row. ~70px clears the badges'
       padding + bg height. */
    .bfc__crumbs {
        position: sticky;
        top: calc(var(--bfc-top-offset) + 70px);
    }
}
.bfc__crumb {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #e0e0e5;
    transition:
        background 250ms ease,
        border-color 250ms ease;
}
.blocks-flexible-charging[data-stage="1"] .bfc__crumb[data-stage="1"],
.blocks-flexible-charging[data-stage="2"] .bfc__crumb[data-stage="2"],
.blocks-flexible-charging[data-stage="3"] .bfc__crumb[data-stage="3"],
.blocks-flexible-charging[data-stage="4"] .bfc__crumb[data-stage="4"] {
    background: #75797c;
    border-color: #75797c;
}
@media (max-width: 1023px) {
    .bfc__crumbs {
        display: none;
    }
}

/* ===== Active state =====
   The section root carries data-stage="N"; CSS uses adjacent-sibling-of-self
   logic via attribute selectors. */
.blocks-flexible-charging[data-stage="1"] .bfc__badge--later,
.blocks-flexible-charging[data-stage="2"] .bfc__badge--capture,
.blocks-flexible-charging[data-stage="3"] .bfc__badge--deposit,
.blocks-flexible-charging[data-stage="4"] .bfc__badge--upfront,
.blocks-flexible-charging[data-stage="1"] .bfc__card--later,
.blocks-flexible-charging[data-stage="2"] .bfc__card--capture,
.blocks-flexible-charging[data-stage="3"] .bfc__card--deposit,
.blocks-flexible-charging[data-stage="4"] .bfc__card--upfront {
    opacity: 1;
}

/* ===== Mobile fallback =====
   Below the lg breakpoint there's no sticky pane and no scroll-driven
   cycling — show all cards at full opacity, stack the right column under
   the left one. */
@media (max-width: 1023px) {
    .bfc__badge,
    .bfc__card {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bfc__badge,
    .bfc__card {
        transition: none;
    }
}