/* Section 1 — Hero
   Tokens: assets/css/global.css (Round11 design system) */
.cs-success-hero {
    background: var(--color-1st-bg);
    padding: var(--space-section-lg) var(--section-horizontal-padding);
    font-family: var(--font-body);
    color: var(--color-1st-fg);
}

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

/* ============================================================
   Heading block
   ============================================================ */
.cs-success-hero__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-28);
    width: 100%;
}

.cs-success-hero__head-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-16);
    width: 100%;
}

.cs-success-hero__title {
    margin: 0;
    max-width: 800px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: 1.15;
    text-align: center;
    color: var(--color-1st-fg);
}

.cs-success-hero__desc {
    margin: 0;
    max-width: 600px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    color: var(--color-2nd-fg);
}

.cs-success-hero__cta {
    display: flex;
    align-items: center;
    gap: var(--var-12);
}

.cs-success-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--var-6);
    padding: var(--var-14) var(--var-28);
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: var(--fs-label-md);
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.cs-success-hero__btn--primary {
    background: var(--color-1st-btn-bg);
    color: var(--color-1st-btn-fg);
    border: 1px solid var(--color-1st-btn-bg);
}

.cs-success-hero__btn--secondary {
    background: var(--color-2nd-btn-bg);
    color: var(--color-2nd-btn-fg);
    border: 1px solid var(--color-stroke);
}

.cs-success-hero__btn:hover {
    opacity: 0.85;
}

/* ============================================================
   Featured carousel
   ============================================================ */
.cs-success-hero__carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
}

.cs-success-hero__track {
    display: flex;
    align-items: stretch;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
    min-height: 560px;
}

.cs-success-hero__progress-chip {
    position: absolute;
    top: var(--var-40);
    left: var(--var-40);
    background: var(--color-1st-bg);
    border-radius: 12px;
    padding: 0 var(--var-12);
    z-index: 2;
    pointer-events: auto;
    display: flex;
    align-items: center;
}

.cs-success-hero__card {
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: var(--var-20);
    background: transparent;
}

/* Left card — text + stat */
.cs-success-hero__card-text {
    flex: 1 1 0;
    max-width: 600px;
    background: var(--color-2nd-bg);
    /* top padding leaves room for absolute progress chip (chip top:40 + h28 + 40 gap) */
    padding: 108px var(--var-40) var(--var-40);
    display: flex;
    flex-direction: column;
    gap: var(--var-40);
    min-width: 0;
}

.cs-success-hero__pagination {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--var-8);
    padding: var(--var-8) 0;
    width: auto;
}

.cs-success-hero__dot {
    width: 12px;
    height: 12px;
    background: var(--color-stroke);
    border: none;
    border-radius: 100px;
    padding: 0;
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

.cs-success-hero__dot.is-active {
    width: 40px;
    background: var(--color-1st-fg);
}

@media (prefers-reduced-motion: reduce) {
    .cs-success-hero__track {
        transition: none;
    }

    .cs-success-hero__dot {
        transition: none;
    }
}

.cs-success-hero__card-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-h3);
    line-height: 1.15;
    color: var(--color-1st-fg);
    flex: 1 0 auto;
}

.cs-success-hero__card-title a {
    color: inherit;
    text-decoration: none;
}

.cs-success-hero__card-title a:hover {
    color: var(--color-1st-fg);
    opacity: 0.85;
}

.cs-success-hero__stat {
    display: flex;
    flex-direction: column;
    gap: var(--var-6);
}

.cs-success-hero__stat-value {
    margin: 0;
    font-family: 'Konstant Grotesk', var(--font-heading);
    font-weight: 400;
    font-size: var(--fs-h1);
    line-height: 1.15;
    color: var(--color-2nd-fg);
}

.cs-success-hero__stat-label {
    margin: 0;
    font-weight: 500;
    font-size: var(--fs-label-lg);
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-2nd-fg);
}

/* Right block — photo + quote */
.cs-success-hero__card-media {
    flex: 1 1 0;
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.cs-success-hero__photo {
    flex: 1 1 0;
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.cs-success-hero__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-success-hero__photo-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-reverse-bg) 20%, transparent);
    pointer-events: none;
}

.cs-success-hero__quote {
    flex: 1 1 0;
    background: var(--color-2nd-bg);
    padding: var(--var-60) var(--var-40);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--var-40);
    min-width: 0;
}

.cs-success-hero__brand-logo {
    height: 28px;
    width: auto;
    display: block;
    /* Parent .cs-success-hero__quote là flex column → mặc định align-items: stretch ép img full width.
       Pin về flex-start để giữ intrinsic ratio (width auto theo height 28px). */
    align-self: flex-start;
    /* Logos in single-customer-story assets are white-on-transparent — invert to dark on white card */
    filter: invert(1);
}

.cs-success-hero__quote-body {
    display: flex;
    flex-direction: column;
    gap: var(--var-24);
    color: var(--color-1st-fg);
}

.cs-success-hero__quote-icon {
    color: var(--color-1st-fg);
    display: block;
}

.cs-success-hero__quote-text {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-1st-fg);
}

.cs-success-hero__attr {
    display: flex;
    align-items: flex-start;
    gap: var(--var-8);
    color: var(--color-1st-fg);
}

.cs-success-hero__attr-dash {
    margin-top: 6px;
    color: var(--color-1st-fg);
    flex-shrink: 0;
}

.cs-success-hero__attr-text {
    display: flex;
    flex-direction: column;
    gap: var(--var-12);
}

.cs-success-hero__attr-name {
    margin: 0;
    font-weight: 500;
    font-size: var(--fs-label-lg);
    line-height: 1;
    color: var(--color-1st-fg);
}

.cs-success-hero__attr-role {
    margin: 0;
    font-weight: 500;
    font-size: var(--fs-label-md);
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-2nd-fg);
}

/* ============================================================
   Tablet (≤ 1024px)
   Figma reference: node 6832-39566 (834px viewport) — featured card stack dọc
   Giữ desktop paddings/sizes, chỉ đổi structure. Mobile (≤768px) override thêm.
   ============================================================ */
@media (max-width: 1024px) {
    .cs-success-hero__card {
        flex-direction: column;
        align-items: stretch;
        gap: var(--var-20);
    }

    /* Unwrap card-media → photo + quote thành sibling trực tiếp của card */
    .cs-success-hero__card-media {
        display: contents;
    }

    .cs-success-hero__photo {
        order: 1;
        flex: none;
        width: 100%;
        height: 400px;
    }

    .cs-success-hero__card-text {
        order: 2;
        max-width: none;
        /* top 108 reserve chip overlay (top:40 + h28 + 40 gap, giữ desktop value) */
        padding: 108px var(--var-40) var(--var-40);
        border-bottom: 1px solid var(--color-stroke);
    }

    .cs-success-hero__quote {
        order: 3;
    }

    /* Chip overlay re-anchor: dưới photo (400px) + gap card (--var-20) + padding-top reserve */
    .cs-success-hero__progress-chip {
        top: calc(400px + var(--var-20) + var(--var-40));
        left: var(--var-40);
    }
}

/* ============================================================
   Mobile (≤ 768px)
   Note: chờ Figma mobile để chốt exact match — đây là sensible defaults
   ============================================================ */
@media (max-width: 768px) {
    .cs-success-hero {
        padding: var(--var-140) var(--section-horizontal-padding);
    }

    .cs-success-hero__inner {
        gap: var(--var-40);
    }

    .cs-success-hero__head {
        gap: var(--var-20);
    }

    .cs-success-hero__head-text {
        gap: var(--var-12);
    }

    /* CTA stack dọc, content-sized centered */
    .cs-success-hero__cta {
        flex-direction: column;
        align-items: center;
        gap: var(--var-12);
    }

    /* Featured card: photo tách lên đầu, text + quote merge thành 1 white card có divider */
    .cs-success-hero__card {
        flex-direction: column;
        align-items: stretch;
        gap: var(--var-20);
    }

    /* Unwrap card-media → photo + quote thành sibling trực tiếp của card */
    .cs-success-hero__card-media {
        display: contents;
    }

    .cs-success-hero__photo {
        order: 1;
        flex: none;
        width: 100%;
        height: 200px;
    }

    .cs-success-hero__card-text {
        order: 2;
        max-width: none;
        /* top 60 reserve cho chip overlay (24 + 28 chip + 8 gap) */
        padding: var(--var-60) var(--var-24) var(--var-24);
        gap: var(--var-40);
        border-bottom: 1px solid var(--color-stroke);
    }

    .cs-success-hero__quote {
        order: 3;
        padding: var(--var-24);
        gap: var(--var-24);
        justify-content: flex-start;
    }

    /* Brand logo trong quote ẩn trên mobile (Figma không hiện) */
    .cs-success-hero__brand-logo {
        display: none;
    }

    /* Chip overlay đổi anchor sang góc trên-trái của white card (sau photo + gap) */
    .cs-success-hero__progress-chip {
        top: calc(200px + var(--var-20) + var(--var-24));
        left: var(--var-24);
    }
}