/* ============================================================
   lib/styles/responsive/tablet.css — JusticeMatters Tablet Styles
   Breakpoint: 640px – 1023px (min-width: 640px and max-width: 1023px)


   Strategy: Expand 4-column mobile layouts into 8-column grids,
   increase typography and spacing to intermediate values,
   and adjust container padding to 24px.
   Motion Strategy: Tune reveal distances and stagger delays to 
   feel natural on mid-size viewports.


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


@media screen and (min-width: 640px) and (max-width: 1023px) {


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


    :root {
        /* Container padding for tablet */
        --container-padding: 24px;


        /* Typography scale up slightly */
        --fs-h1: 32px;
        --fs-h2: 24px;
        --fs-h3: 20px;
        --fs-h4: 18px;
        --fs-body: 16px;

        /* Motion overrides: Restore slightly more generous motion distances */
        --motion-distance-md: 12px;
        --motion-distance-lg: 24px;
    }


    /* ========================================================================
     2. 8-COLUMN GRID SYSTEM (Tablet Base)
     ======================================================================== */


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


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


    /* Full width overrides */
    .tablet-span-8 {
        grid-column: span 8 / span 8;
    }


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


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


    .hero-section__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }


    .hero-section__actions .btn {
        width: auto;
    }


    /* ========================================================================
     4. CARDS & GRIDS
     ======================================================================== */


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


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


    /* ========================================================================
     5. BUTTONS & FORMS
     ======================================================================== */


    .btn-group {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }


    .btn-group .btn {
        width: auto;
    }


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


    .form-grid__full {
        grid-column: 1 / -1;
    }


    .form-footer {
        flex-direction: row;
        align-items: center;
    }


    .form-footer .btn {
        width: auto;
        margin-top: 0;
    }


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


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


    .site-footer__nav-columns {
        grid-template-columns: repeat(2, 1fr);
    }


    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }


    .site-footer__legal-links {
        flex-direction: row;
    }


    .site-footer__legal-links li+li::before {
        content: "|";
        display: inline-block;
        margin: 0 var(--space-sm);
        color: var(--color-mid-grey);
    }


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


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


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


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


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

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

    /* Re-introduce slight staggers for 2-column grids */
    .card-grid>[data-aos],
    .card-grid--two-col>[data-aos],
    .responsive-grid>[data-aos] {
        transition-delay: calc(var(--aos-order, 0) * 100ms) !important;
    }

    [data-aos="fade-up"] {
        transform: translate3d(0, var(--motion-distance-lg), 0) !important;
    }

}


/* end @media (min-width: 640px) and (max-width: 1023px) */