/* ── bsb-services ────────────────────────────────────────────────────────── */

.bsb-services-section {
    padding:          8rem 0;
    background-color: var(--bsb-color-bg);
    overflow:         hidden;
    position:         relative;
    z-index:          10;
}

.services-container {
    margin-bottom: 4rem;
    display:       flex;
    justify-content: center;
}

.bsb-services-heading {
    text-align:  center;
    font-family: var(--bsb-font-primary);
    font-size:   clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 400;
    line-height: 1.4;
    max-width:   1000px;
    margin:      0;
}

/* ── Carousels ────────────────────────────────────────────────────────────── */

.bsb-services-carousels {
    display:        flex;
    flex-direction: column;
    width:          100vw;
    position:       relative;
    left:           50%;
    transform:      translateX(-50%);
}

.bsb-services-track {
    width:    100%;
    overflow: hidden;
    position: relative;
    display:  flex;
}

.bsb-services-row {
    display:    flex;
    gap:        1.25rem;
    padding:    0 0.625rem;
    flex-wrap:  nowrap;
}

/* ── Pill ─────────────────────────────────────────────────────────────────── */

.bsb-service-pill {
    padding:          1rem 2.5rem;
    border:           1px solid rgba(0, 0, 0, 0.4);
    border-radius:    50px;
    font-family:      var(--bsb-font-primary);
    font-size:        1rem;
    font-weight:      700;
    margin:           0.625rem 0;
    text-transform:   uppercase;
    color:            var(--bsb-color-text);
    white-space:      nowrap;
    background-color: transparent;
    transition:       all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor:           default;
}

.bsb-service-pill:hover {
    background-color: var(--bsb-color-text);
    color:            var(--bsb-color-bg);
    border-color:     var(--bsb-color-text);
    transform:        scale(1.05);
}

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

.bsb-services-row-placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1rem 2rem;
    color:           rgba(0, 0, 0, 0.3);
    font-size:       0.8rem;
    font-style:      italic;
    white-space:     nowrap;
}

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

@media (max-width: 768px) {
    .bsb-services-section {
        padding: 5rem 0;
    }

    .services-container {
        margin-bottom: 3rem;
    }

    .bsb-services-heading {
        font-size: 1.2rem;
    }

    .bsb-service-pill {
        padding:   0.8rem 1.8rem;
        font-size: 0.85rem;
    }

    .bsb-services-carousels {
        gap: 1rem;
    }
}