/* =========================================================
   Customer Proof Section — layout only
   (typography comes from base.css / .story-card / .icon-button)
   ========================================================= */

.stories-section {
    background-color: var(--color-white);
    /* border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border); */
}

.stories-section .stories-section-wrapper {
    gap: 40px;
    padding-block: var(--section-padding);
}

/* ---------- Intro column ---------- */

.stories-section .stories-section-wrapper .stories-section-intro {
    flex-shrink: 0;
    width: 300px;
    gap: var(--space-sm);
}

.stories-section .stories-section-wrapper .stories-section-intro p {
    color: var(--color-slate-500);
    font-size: var(--font-size-body-lg);
}

.stories-section .stories-section-wrapper .stories-section-intro .stories-section-nav {
    gap: 12px;
    padding-top: 6px;
}

/* ---------- Carousel ---------- */

.mobile-stories-pagination,
.mobile-stories-link {
    display: none;
}

.stories-section .stories-section-wrapper .stories-section-viewport {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    padding-left: 5px;
    margin-left: -5px;
}

.stories-section .stories-section-wrapper .stories-section-viewport:active {
    cursor: grabbing;
}

.stories-section .stories-section-wrapper .stories-section-viewport .stories-section-track {
    list-style: none;
    user-select: none;
    align-items: stretch;
}

.stories-section .stories-section-wrapper .stories-section-viewport .stories-section-track li {
    /* flex-shrink: 0; */
    /* width: 372px; */
    height: auto;
    /* Used by Swiper for slidesPerView: 'auto' */
    display: flex;
}

.stories-section .stories-section-wrapper .stories-section-viewport .stories-section-track li .story-card {
    width: 100%;
}

/* ---------- Large Desktop / Laptop ---------- */
@media (max-width: 1199px) {

    .stories-section .stories-section-wrapper {
        gap: var(--space-lg);
    }

    .stories-section .stories-section-wrapper .stories-section-intro {
        width: 280px;
    }

}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {

    .stories-section .stories-section-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .stories-section .stories-section-wrapper .stories-section-intro {
        width: 100%;
    }

    .stories-section .stories-section-wrapper .stories-section-intro .stories-section-nav {
        display: none !important;
    }

    .stories-section .stories-section-wrapper .stories-section-viewport {
        flex: 0 0 auto;
        margin-inline: calc(var(--container-padding) * -1);
        padding-inline: var(--container-padding);
    }

    .mobile-stories-pagination {
        display: block !important;
        position: relative;
        text-align: center;
    }

    /* .mobile-stories-link {
        display: inline-flex !important;
        align-self: flex-start;
    } */

}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {

    .stories-section .stories-section-wrapper .stories-section-viewport .stories-section-track li {
        /* width handled by Swiper JS slidesPerView: 1.15 */
    }

}

/* ---------- Small Mobile ---------- */
@media (max-width: 575px) {

    .stories-section .stories-section-wrapper .stories-section-viewport .stories-section-track li {
        /* width handled by Swiper JS slidesPerView: 1.15 */
    }

}