/* ── bsb-model ────────────────────────────────────────────────────────────── */

.bsb-model-section {
    --model-img-w:   428px;
    --model-img-h:   220px;
    --model-img-gap: 20px;

    position:         relative;
    width:            100%;
    overflow:         hidden;
    background-color: #000000;
    min-height:       680px;
    display:          flex;
    align-items:      center;
    padding:          7rem 0;
}

/* ── Layer 1: image rows ──────────────────────────────────────────────────── */

.bsb-model-bg-rows {
    position:       absolute;
    inset:          0;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            var(--model-img-gap);
    padding:        25px 0;
    pointer-events: none;
}

/* Each track right-aligns itself; overflow clips the left edge */
.bsb-model-row-track {
    overflow:   hidden;
    display:    flex;
    align-self: flex-end;
}

/* Staircase widths: narrowest at top, widest at bottom */
.bsb-model-track-1 { width: 50vw; }
.bsb-model-track-2 { width: 55vw; }
.bsb-model-track-3 { width: 60vw; }

/* The scrolling strip — will-change toggled by JS */
.bsb-model-row {
    display:   flex;
    gap:       var(--model-img-gap);
    flex-shrink: 0;
}

/* ── Individual image card ────────────────────────────────────────────────── */

.bsb-model-image-wrapper {
    position:      relative;
    width:         var(--model-img-w);
    height:        var(--model-img-h);
    border-radius: 14px;
    overflow:      hidden;
    flex-shrink:   0;
    background:    #111111;
}

.bsb-model-image-wrapper img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center center;
    z-index:         1;
    display:         block;
    transition:      transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Per-card dark tint */
.bsb-model-image-wrapper::after {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     rgba(0, 0, 0, 0.25);
    z-index:        2;
    pointer-events: none;
    transition:     background 0.3s ease;
}

/* ── Layer 2: gradient overlay ────────────────────────────────────────────── */

.bsb-model-overlay {
    position:       absolute;
    inset:          0;
    z-index:        2;
    pointer-events: none;
    background:     linear-gradient(90deg, #000000 0%, transparent 100%);
    opacity:        0.4;
}

/* ── Layer 3: text foreground ─────────────────────────────────────────────── */

.bsb-model-foreground {
    position:       relative;
    z-index:        3;
    width:          100%;
    pointer-events: auto;
}

.bsb-model-text-col {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    max-width:      460px;
}

.bsb-model-heading {
    font-family:    var(--bsb-font-display);
    font-size:      clamp(3rem, 5.5vw, 5rem);
    font-weight:    700;
    color:          #ffffff;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height:    1;
    margin:         0 0 2rem;
}

.bsb-model-description {
    font-family: var(--bsb-font-primary);
    font-size:   clamp(0.88rem, 1.15vw, 1rem);
    color:       rgba(255, 255, 255, 0.82);
    line-height: 1.78;
    margin:      0 0 3rem;
    max-width:   400px;
    font-weight: 400;
}

.bsb-model-description p {
    margin: 0 0 1em;
}

.bsb-model-description p:last-child {
    margin-bottom: 0;
}

.bsb-model-ctas {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.bsb-model-btn {
    justify-content: space-between;
    gap:             1rem;
    padding:         0.85rem 1.5rem;
    font-size:       0.7rem;
    font-weight:     700;
    letter-spacing:  0.15em;
    width:           fit-content;
    min-width:       230px;
}

.bsb-model-btn svg {
    width:  16px;
    height: 16px;
}

/* ── Placeholder (no images added yet) ───────────────────────────────────── */

.bsb-model-row-placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          var(--model-img-h);
    color:           rgba(255, 255, 255, 0.25);
    font-size:       0.8rem;
    font-style:      italic;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .bsb-model-section {
        --model-img-w: 240px;
        --model-img-h: 300px;
    }

    .bsb-model-track-1 { width: 55vw; }
    .bsb-model-track-2 { width: 60vw; }
    .bsb-model-track-3 { width: 80vw; }
}

@media (max-width: 900px) {
    .bsb-model-section {
        --model-img-w:   200px;
        --model-img-h:   250px;
        --model-img-gap: 14px;
        padding:         5rem 0 8rem;
    }

    .bsb-model-text-col {
        padding-left:  20px;
        padding-right: 20px;
        max-width:     100%;
    }

    .bsb-model-track-1,
    .bsb-model-track-2,
    .bsb-model-track-3 { width: 90vw; }

    .bsb-model-overlay {
        background: linear-gradient(
            to bottom,
            #000000 0%,
            #000000 45%,
            rgba(0, 0, 0, 0.7) 65%,
            rgba(0, 0, 0, 0.1) 100%
        );
    }

    .bsb-model-bg-rows {
        justify-content: flex-end;
        padding-bottom:  1rem;
    }
}

@media (max-width: 600px) {
    .bsb-model-section {
        --model-img-w:   165px;
        --model-img-h:   210px;
        --model-img-gap: 12px;
    }

    .bsb-model-image-wrapper {
        border-radius: 10px;
    }
}