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

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

    /* ========================================================================
     1. CSS VARIABLE OVERRIDES
     ======================================================================== */
    :root {
        --container-padding: 40px;
        --fs-h1: 36px;
        --fs-h2: 28px;
        --fs-h3: 22px;
        --fs-h4: 20px;
        --fs-body: 16px;
        --space-3xl: 56px;
    }

    h1 { font-size: 36px; letter-spacing: -0.75px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
    p { font-size: 16px; max-width: 65ch; }

    /* ========================================================================
     2. NAVBAR
     ======================================================================== */
    .navbar__hamburger { display: flex; }
    .navbar__inner { padding: 0 var(--container-padding); }

    /* ========================================================================
     3. HERO SECTION
     ======================================================================== */
    .hero-section { min-height: 340px; padding-top: calc(90px + var(--space-2xl, 40px)); padding-bottom: var(--space-2xl, 40px); }
    .hero-section__inner { gap: var(--space-2xl, 40px); flex-direction: row; align-items: center; }
    .hero-section__content { flex: 1; max-width: 100%; }
    .hero-section__headline { font-size: 36px; }
    .hero-section__subheadline { font-size: 16px; }
    .hero-section__actions { flex-direction: row; flex-wrap: wrap; }
    .hero-section__actions .btn { width: auto; }
    .hero-section__form-panel { width: 320px; flex-shrink: 0; }

    /* ========================================================================
     4. TRUST BANNER
     ======================================================================== */
    .trust-banner__logos { gap: var(--space-xl, 32px) var(--space-2xl, 40px); justify-content: center; }
    .trust-banner__logo-item img { height: 28px; }

    /* ========================================================================
     5. SECTION HEADERS & GRIDS
     ======================================================================== */
    .section__title { font-size: 28px; }
    .section__subtitle { font-size: 16px; }

    .value-prop-section__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg, 24px); }
    .value-prop-section__grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 420px; margin: 0 auto; width: 100%; }

    .industry-section__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg, 24px); }
    .features-section__layout { grid-template-columns: 1fr 1fr; gap: var(--space-xl, 32px); align-items: start; }
    .features-section__grid { grid-template-columns: 1fr; gap: var(--space-md, 16px); }

    /* ========================================================================
     6. PROCESS SECTION
     ======================================================================== */
    .process-section__steps { gap: var(--space-xl, 32px); max-width: 640px; margin-left: auto; margin-right: auto; }
    .process-step__number { 
        width: 52px; height: 52px; font-size: 18px; 
        background-color: var(--color-accent, #00B4D8);
        color: var(--color-primary, #0A192F);
    }
    .process-step:not(:last-child)::after { left: 25px; top: 55px; background-color: rgba(0, 180, 216, 0.8); }
    .process-step__title { font-size: 17px; }

    /* ========================================================================
     7. MISC SECTIONS & CARDS
     ======================================================================== */
    .testimonials-section__grid, .card-grid, .card-grid--two-col, .card-grid--four-col { 
        grid-template-columns: repeat(2, 1fr); gap: var(--space-lg, 24px); 
    }

    .cta-section__title { font-size: 28px; }
    .cta-section__actions { flex-direction: row; justify-content: center; flex-wrap: wrap; }
    .cta-section__actions .btn { width: auto; }

    .fleet-section__layout { grid-template-columns: 1fr 1fr; gap: var(--space-xl, 32px); align-items: center; }

    .stats-bar__inner { grid-template-columns: repeat(4, 1fr); gap: 0; }
    .stats-bar__number { font-size: 32px; }
    .stats-bar__item { border-right: 1px solid rgba(255, 255, 255, 0.06); border-bottom: none; padding: var(--space-md, 16px) var(--space-sm, 8px); }
    .stats-bar__item:last-child { border-right: none; }

    /* ========================================================================
     8. UTILITIES & LAYOUTS
     ======================================================================== */
    .btn-group { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .btn-group .btn { width: auto; }
    .btn-group--column { flex-direction: column; }

    .form-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid__full { grid-column: 1 / -1; }
    .form-footer { flex-direction: row; align-items: center; flex-wrap: wrap; }

    .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-2xl, 40px) var(--space-xl, 32px); }
    .site-footer__nav-columns { grid-template-columns: 1fr 1fr; gap: var(--space-xl, 32px) var(--space-lg, 24px); grid-column: 1 / -1; }
    .site-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }

    .accordion-section__list { max-width: 680px; }

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