/* =========================================
   ASMC RESPONSIVE SYSTEM
========================================= */


/*
    BREAKPOINT SYSTEM

    Wide Desktop:
    Above 1200px

    Laptop / Small Desktop:
    1200px and below

    Tablet:
    1024px and below

    Mobile:
    768px and below

    Small Mobile:
    480px and below
*/


/* =========================================
   1. LAPTOP / SMALL DESKTOP
========================================= */

@media (max-width: 1200px) {

    .card-test-grid {
        gap:
            var(--space-md);
    }


    .motion-demo-grid {
        gap:
            var(--space-md);
    }


    .layout-demo {
        padding:
            var(--space-lg);
    }

}


/* =========================================
   2. TABLET
========================================= */

@media (max-width: 1024px) {

    :root {

        --section-space:
            clamp(
                4rem,
                8vw,
                6rem
            );

        --section-space-compact:
            clamp(
                3rem,
                5vw,
                4.5rem
            );

    }


    .grid-two {
        grid-template-columns:
            1fr;
    }


    .card-test-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .motion-demo-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* =========================================
   3. MOBILE
========================================= */

@media (max-width: 768px) {

    :root {

        --fs-body-lg:
            1.1875rem;

        --fs-body:
            1.0625rem;

        --fs-body-sm:
            1rem;

        --fs-label:
            0.9375rem;

        --page-gutter:
            1.25rem;

        --section-space:
            4rem;

        --section-space-compact:
            3rem;

    }


    .design-system-test {
        padding-top:
            var(--space-2xl);

        padding-bottom:
            var(--space-3xl);
    }


    .test-section {
        margin-bottom:
            var(--space-2xl);
    }


    .card-test-grid {
        grid-template-columns:
            1fr;
    }


    .motion-demo-grid {
        grid-template-columns:
            1fr;
    }


    .component-group {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .component-group
    .button {
        width:
            100%;
    }


    .card {
        padding:
            var(--space-lg);

        border-radius:
            var(--radius-md);
    }


    .motion-demo-card {
        min-height:
            200px;

        padding:
            var(--space-lg);
    }


    .color-test {
        min-height:
            80px;

        padding:
            var(--space-md);
    }


    .layout-demo {
        padding:
            var(--space-md);
    }


    .layout-demo-item {
        min-height:
            140px;
    }


    .spacing-demo {
        gap:
            var(--space-md);
    }

}


/* =========================================
   4. SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    :root {

        --fs-display:
            3rem;

        --fs-h1:
            2.4rem;

        --fs-h2:
            1.9rem;

        --fs-h3:
            1.45rem;

        --fs-h4:
            1.15rem;

        --fs-body-lg:
            1.125rem;

        --fs-body:
            1.0625rem;

        --fs-body-sm:
            1rem;

        --fs-label:
            0.875rem;

        --page-gutter:
            1rem;

    }


    .button {
        min-height:
            50px;

        padding:
            0.85rem
            1.25rem;
    }


    .badge {
        font-size:
            0.8rem;

        padding:
            0.5rem
            0.85rem;
    }


    .card {
        padding:
            var(--space-md);
    }


    .motion-demo-card {
        padding:
            var(--space-md);
    }


    .test-section {
        margin-bottom:
            var(--space-xl);
    }


    .display-heading,
    h1,
    h2,
    h3,
    h4 {
        overflow-wrap:
            break-word;
    }

}


/* =========================================
   5. REDUCED MOTION ACCESSIBILITY
========================================= */

/*
    Some users configure their operating
    system to request reduced motion.

    When that preference is active,
    we remove almost all decorative
    animations and transitions.

    Later our GSAP animations will also
    respect this same preference.
*/

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto !important;
    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;

    }

}