/* ============================================================
   lib/styles/responsive/mobile.css — JusticeMatters Mobile Styles
   Breakpoint: 0px – 639px (max-width: 639px)


   Strategy: global.css is already mobile-first, so this file
   handles:
   - 4-column grid layout configuration for small screens
   - 16px global margin/padding constraints
   - Explicit show/hide rules for mobile-only elements
   - Typography scaling for readability on smaller devices
   - Motion intensity and stagger reduction for smaller viewports


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


@media screen and (max-width: 639px) {


    /* ========================================================================
     1. CSS VARIABLE OVERRIDES — Mobile-specific token values
     ======================================================================== */


    :root {
        /* Enforce 16px margins on mobile per BCI/accessibility specs */
        --container-padding: 16px;


        /* Typography scale down for small screens */
        --fs-h1: 28px;
        --fs-h2: 20px;
        --fs-h3: 18px;
        --fs-h4: 16px;
        --fs-body: 16px;
        /* Keep body at 16px for WCAG compliance */


        /* Reduce maximum vertical spacing */
        --space-3xl: 48px;
        --space-2xl: 32px;

        /* Motion overrides: Reduce distances to prevent tap-target overlap */
        --motion-distance-md: 8px;
        --motion-distance-lg: 16px;
        --motion-duration-vslow: 600ms;
        /* Speed up slow reveals on shorter scrolls */
    }


    /* ========================================================================
     2. TYPOGRAPHY — Mobile adjustments
     ======================================================================== */


    h1 {
        font-size: var(--fs-h1);
    }


    h2 {
        font-size: var(--fs-h2);
        margin-top: var(--space-xl);
    }


    h3 {
        font-size: var(--fs-h3);
    }


    p {
        font-size: var(--fs-body);
        max-width: 100%;
        /* Utilize full width on mobile */
    }


    /* ========================================================================
     3. 4-COLUMN GRID SYSTEM (Mobile Base)
     ======================================================================== */


    .responsive-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-md);
    }


    /* By default, force items to span all 4 columns on mobile unless specified */
    .responsive-grid>* {
        grid-column: span 4 / span 4;
    }


    /* ========================================================================
     4. NAVBAR & NAVIGATION
     ======================================================================== */


.navbar__hamburger {
        display: flex;
    }

    .navbar__inner,
    .navbar__container {
        padding: 0 var(--container-padding);
        /* Slightly reduce height to save vertical screen space on mobile */
        height: 64px; 
    }

    /* Logo scaling for mobile */
    .navbar__logo {
        gap: 8px; /* Tighter spacing */
    }

    .navbar__logo-image {
        height: 28px; /* Scaled down from 36px */
    }

    .navbar__logo-text {
        font-size: 18px; /* Scaled down from 22px */
    }


    /* ========================================================================
     5. HERO & SECTION LAYOUTS
     ======================================================================== */


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


    .hero-section__actions {
        flex-direction: column;
        align-items: stretch;
    }


    .section__header {
        margin-bottom: var(--space-lg);
    }


    .section__header--centered .section__title {
        font-size: var(--fs-h2);
    }


    /* ========================================================================
     6. CARDS & GRIDS
     ======================================================================== */


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


    .card-grid,
    .card-grid--two-col,
    .card-grid--three-col {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }


    /* ========================================================================
     7. BUTTONS & FORMS
     ======================================================================== */


    .btn-group {
        flex-direction: column;
        align-items: stretch;
    }


    .btn-group .btn {
        width: 100%;
        justify-content: center;
    }


    .form-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }


    .form-footer {
        flex-direction: column;
        align-items: stretch;
    }


    .form-footer .btn {
        width: 100%;
        margin-top: var(--space-sm);
    }


    /* ========================================================================
     8. FOOTER
     ======================================================================== */


    .site-footer__top {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }


    .site-footer__nav-columns {
        grid-template-columns: 1fr;
        /* Stack navigation columns on mobile */
        gap: var(--space-lg);
    }


    .site-footer__bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }


    .site-footer__legal-links {
        flex-direction: column;
        gap: var(--space-sm);
    }


    .site-footer__legal-links li+li::before {
        display: none;
        /* Remove horizontal dividers */
    }


    /* ========================================================================
     9. UTILITY CLASSES
     ======================================================================== */


    .hide-mobile {
        display: none !important;
    }


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


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

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

    /* Reduce stagger lengths for mobile card grids to keep scrolling snappy */
    .card-grid>[data-aos],
    .card-grid--two-col>[data-aos],
    .card-grid--three-col>[data-aos],
    .responsive-grid>[data-aos] {
        transition-delay: 50ms !important;
    }

    /* Restrict AOS fade-up translate distance on mobile to prevent tap-target overlap */
    [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;
    }

}


/* end @media (max-width: 639px) */