/*
 * Horizontal systems-stack row for the lower Experience categories.
 * The upper .bos-experience-grid credibility table intentionally remains alone.
 */

.boston .bos-stack-grid {
    position: relative;
    display: flex !important;
    flex-wrap: nowrap;
    gap: 12px !important;
    width: 100%;
    max-width: 100%;
    margin-top: clamp(16px, 2vw, 24px);
    padding: 4px 34px 18px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: none;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.boston .bos-stack-grid::-webkit-scrollbar {
    display: none;
}

.boston .bos-stack-grid:active,
.boston .bos-stack-grid.is-dragging {
    cursor: grabbing;
}

.boston .bos-stack-grid.is-dragging {
    scroll-behavior: auto;
}

.boston .bos-stack-grid .bos-mini {
    flex: 0 0 clamp(260px, 26vw, 360px);
    min-width: 0;
    user-select: none;
    border-color: rgba(198, 208, 218, 0.10) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
        rgba(8, 16, 24, 0.34) !important;
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.12),
        inset 1px 0 0 rgba(255, 255, 255, 0.035);
}

.boston .bos-stack-grid .bos-mini p,
.boston .bos-stack-grid .bos-mini strong {
    user-select: none;
}

.boston .bos-stack-grid:focus-visible {
    outline: 3px solid rgba(255, 138, 61, 0.55);
    outline-offset: 6px;
}

.boston .bos-stack-grid::before,
.boston .bos-stack-grid::after {
    content: "";
    position: sticky;
    z-index: 2;
    flex: 0 0 24px;
    pointer-events: none;
}

.boston .bos-stack-grid::before {
    left: 0;
    margin-left: -4px;
    background: linear-gradient(90deg, rgba(8, 16, 24, 0.76), transparent);
}

.boston .bos-stack-grid::after {
    right: 0;
    margin-right: -34px;
    background: linear-gradient(270deg, rgba(8, 16, 24, 0.76), transparent);
}

@media (max-width: 850px) {
    .boston .bos-stack-grid {
        gap: 10px !important;
        padding-right: 28px;
    }

    .boston .bos-stack-grid .bos-mini {
        flex-basis: min(76vw, 320px);
    }
}

@media (max-width: 520px) {
    .boston .bos-stack-grid {
        padding-right: 22px;
    }

    .boston .bos-stack-grid .bos-mini {
        flex-basis: min(82vw, 295px);
    }
}