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

.cs-intro__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-60);
}

.cs-intro__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-28);
    width: 100%;
}

.cs-intro__title {
    margin: 0;
    max-width: 800px;
    /* layout-specific */
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-h2);
    /* 48px */
    line-height: 1.15;
    text-align: center;
    color: var(--color-1st-fg);
}

.cs-intro__meta {
    display: flex;
    align-items: center;
    gap: var(--var-8);
    font-weight: 500;
    font-size: var(--fs-label-lg);
    /* 16px */
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-2nd-fg);
}

.cs-intro__dot {
    width: var(--var-4);
    height: var(--var-4);
    border-radius: 50%;
    background: var(--color-2nd-fg);
    display: inline-block;
}

.cs-intro__media {
    position: relative;
    width: 100%;
    height: 600px;
    /* hero height — design-specific */
    margin: 0;
    overflow: hidden;
}

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

.cs-intro__stats {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;
    /* overlay height — design-specific */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--var-40);
    padding: var(--var-40);
    /* gradient dùng --color-reverse-bg (#050505) với opacity — color-mix cho token-aware */
    background: linear-gradient(180deg,
            color-mix(in srgb, var(--color-reverse-bg) 0%, transparent) 0%,
            color-mix(in srgb, var(--color-reverse-bg) 90%, transparent) 50%,
            color-mix(in srgb, var(--color-reverse-bg) 90%, transparent) 100%);
    color: var(--color-reverse-fg);
}

.cs-intro__stat {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--var-4);
    min-width: 0;
}

.cs-intro__stat-value {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-h3);
    /* 40px */
    line-height: 1.15;
    white-space: nowrap;
}

.cs-intro__stat-label {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label-md);
    /* 14px */
    line-height: 1;
    text-transform: uppercase;
}

/* Responsive */
@media (max-width: 1024px) {
    .cs-intro {
        padding: var(--var-56) var(--var-24);
    }

    .cs-intro__media {
        height: 480px;
    }

    .cs-intro__stats {
        gap: var(--var-24);
        padding: var(--var-32) var(--var-24);
    }
}

@media (max-width: 640px) {
    .cs-intro {
        padding: 72px var(--var-20);
        /* 72px outside --var-* scale */
    }

    .cs-intro__inner {
        gap: var(--var-60);
    }

    .cs-intro__media {
        height: 500px;
    }

    .cs-intro__stats {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        height: auto;
        bottom: 0;
        gap: var(--var-40);
        padding: var(--var-40) var(--var-20);
    }
}