/* ============================================================
   lib/styles/responsive/desktop.css — JusticeMatters Desktop Styles
   Breakpoint: 1024px+ (min-width: 1024px)


   Strategy: Expand to full 12-column grids, reveal the desktop navbar,
   apply full typography sizes, and enforce the 1120px max-width ceiling.
   Motion Strategy: Allow richer motion than mobile while keeping it
   restrained, stable, and editorial.


   Depends on: global.css, tablet.css, all component CSS files
   ============================================================ */


@media screen and (min-width: 1024px) {


    /* ========================================================================
     1. CSS VARIABLE OVERRIDES — Desktop token values
     ======================================================================== */


    :root {
        /* Container padding for desktop */
        --container-padding: 32px;


        /* Max content width enforced here (1120px for JusticeMatters) */
        --max-content-width: 1120px;


        /* Typography scale max */
        --fs-h1: 32px;
        /* Kept at 32px per BCI spec to remain calm/informative */
        --fs-h2: 24px;
        --fs-h3: 20px;
        --fs-h4: 18px;
        --fs-body: 16px;

        /* Motion overrides: desktop can carry slightly more depth */
        --motion-distance-md: 16px;
        --motion-distance-lg: 32px;
        --motion-duration-base: 320ms;
        --motion-duration-slow: 520ms;
        --motion-duration-vslow: 800ms;
    }


    /* ========================================================================
     2. 12-COLUMN GRID SYSTEM (Desktop Base)
     ======================================================================== */


    .responsive-grid {
        grid-template-columns: repeat(12, 1fr);
        gap: var(--space-xl);
    }


    /* By default, force items to span 4 columns (3 per row) on desktop */
    .responsive-grid>* {
        grid-column: span 4 / span 4;
    }


    /* Column overrides */
    .desktop-span-3 {
        grid-column: span 3 / span 3;
    }


    .desktop-span-6 {
        grid-column: span 6 / span 6;
    }


    .desktop-span-8 {
        grid-column: span 8 / span 8;
    }


    /* Used for main content reading view */
    .desktop-span-12 {
        grid-column: span 12 / span 12;
    }


    /* ========================================================================
     3. NAVBAR — Show full desktop navigation
     ======================================================================== */


    .navbar__links {
        display: flex !important;
    }


    .navbar__actions {
        display: flex !important;
    }


    .navbar__hamburger {
        display: none !important;
    }


    /* ========================================================================
     4. HERO SECTION
     ======================================================================== */


    .hero-section {
        padding-top: calc(80px + var(--space-3xl));
        padding-bottom: var(--space-3xl);
    }


    .hero-section__inner {
        flex-direction: row;
        align-items: center;
        gap: var(--space-3xl);
    }


    .hero-section__content {
        flex: 1;
    }


    .hero-section__form-panel,
    .hero-section__image-panel {
        width: 480px;
        flex-shrink: 0;
    }


    /* ========================================================================
     5. CARDS & GRIDS
     ======================================================================== */


    .card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xl);
    }


    .card-grid--two-col {
        grid-template-columns: repeat(2, 1fr);
    }


    .card-grid--four-col {
        grid-template-columns: repeat(4, 1fr);
    }


    /* ========================================================================
     6. FOOTER
     ======================================================================== */


    .site-footer__top {
        grid-template-columns: 320px 1fr;
        gap: var(--space-3xl);
        align-items: start;
    }


    .site-footer__nav-columns {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xl);
        grid-column: auto;
    }


    /* ========================================================================
     7. UTILITY CLASSES
     ======================================================================== */


    .show-mobile,
    .show-mobile-flex,
    .show-tablet,
    .show-tablet-flex {
        display: none !important;
    }


    .hide-mobile,
    .hide-tablet {
        display: block !important;
    }


    .show-desktop {
        display: block !important;
    }


    .show-desktop-flex {
        display: flex !important;
    }

    /* ========================================================================
     8. MOTION & INTERACTION OVERRIDES
     ======================================================================== */

    /* Richer, still restrained stagger timing for wide layouts */
    .card-grid>[data-aos],
    .card-grid--two-col>[data-aos],
    .card-grid--four-col>[data-aos],
    .responsive-grid>[data-aos] {
        transition-delay: calc(var(--aos-order, 0) * 120ms) !important;
    }

    /* Desktop reveal distance can be slightly fuller without feeling theatrical */
    [data-aos="fade-up"] {
        transform: translate3d(0, var(--motion-distance-lg), 0) !important;
    }

    [data-aos="fade-up"].aos-animate {
        transform: translate3d(0, 0, 0) !important;
    }

    /* Parallax-ready hooks for future use; depth remains intentionally subtle */
    [data-parallax="soft"] {
        will-change: transform;
        transform: translate3d(0, 0, 0);
    }

    /* Sticky elements should remain visually stable above motion-enabled content */
    .navbar,
    .site-header,
    .sticky,
    [data-sticky="true"] {
        z-index: 40;
    }
}


/* end @media (min-width: 1024px) */