/* Section 3 — Related case studies
   Card markup dùng class cs-success-stories__* (xem section-stories/assets/styles.css).
   File này chỉ override section wrapper + mobile horizontal-scroll cho list.
   Tokens: assets/css/global.css (Round11 design system) */
.cs-related {
    background: var(--color-2nd-bg);
    padding: 0 var(--section-horizontal-padding) var(--space-section-lg);
    font-family: var(--font-body);
}

.cs-related__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--var-48);
}

.cs-related__head {
    width: 100%;
}

.cs-related__title {
    margin: 0;
    max-width: 800px;
    font-weight: 600;
    font-size: var(--fs-h3); /* 40px */
    line-height: 1.15;
    color: var(--color-1st-fg);
}

/* === Responsive === */
@media (max-width: 1024px) {
    .cs-related {
        padding: 0 var(--var-24) var(--space-section-sm);
    }
    /* Tablet: 2-col grid (override section-stories desktop 3-col). */
    .cs-related .cs-success-stories__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--var-32);
    }
}

@media (max-width: 640px) {
    .cs-related {
        padding: 0 var(--var-20) 72px;
    }
    .cs-related__inner {
        gap: var(--var-48);
    }
    /* Mobile detail: horizontal scroll thay vì stack 1-col (override section-stories mobile grid). */
    .cs-related .cs-success-stories__list {
        display: flex;
        flex-direction: row;
        grid-template-columns: none;
        gap: var(--var-24);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--var-20);
        margin: 0 calc(var(--var-20) * -1);
        padding: 0 var(--var-20) var(--var-16);
        -webkit-overflow-scrolling: touch;
    }
    .cs-related .cs-success-stories__item {
        flex: 0 0 300px;
        scroll-snap-align: start;
    }
}