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

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

    /* ========================================================================
     1. CSS VARIABLE OVERRIDES
     ======================================================================== */
    :root {
        --container-padding: 20px;
        --fs-h1: 28px;
        --fs-h2: 24px;
        --fs-h3: 18px;
        --fs-h4: 17px;
        --fs-body: 15px;
        --space-3xl: 48px;
    }

    h1 { font-size: 28px; letter-spacing: -0.5px; }
    h2 { font-size: 24px; margin-top: var(--space-2xl, 40px); }
    h3 { font-size: 18px; }
    p { font-size: 15px; max-width: 100%; }

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

    /* ========================================================================
     3. HERO SECTION
     ======================================================================== */
    .hero-section { min-height: 260px; padding-top: var(--space-lg, 24px); padding-bottom: var(--space-xl, 32px); }
    .hero-section__inner { gap: var(--space-xl, 32px); }
    .hero-section__headline { font-size: 28px; }
    .hero-section__subheadline { font-size: 15px; }
    .hero-section__actions { flex-direction: column; align-items: stretch; }
    .hero-section__actions .btn { width: 100%; justify-content: center; }
    .hero-section__trust-signals { gap: var(--space-sm, 8px); }
    .hero-section__form-panel { padding: var(--space-lg, 24px); }

    /* ========================================================================
     4. TRUST BANNER
     ======================================================================== */
    .trust-banner__logos { gap: var(--space-lg, 24px) var(--space-xl, 32px); }
    .trust-banner__logo-item img { height: 24px; }
    .trust-banner__logo-text { font-size: 14px; }

    /* ========================================================================
     5. SECTION HEADERS
     ======================================================================== */
    .section__title { font-size: 24px; }
    .section__subtitle { font-size: 15px; }
    .section__header { margin-bottom: var(--space-xl, 32px); }
    .section__header--centered .section__title { font-size: 24px; }

    /* ========================================================================
     6. CARDS & GRIDS
     ======================================================================== */
    .card, .card--dark, .industry-card, .testimonial-card, .team-card, .value-card { padding: var(--space-lg, 24px); }
    .card--featured { padding-left: calc(var(--space-lg, 24px) - 3px); }
    .feature-card { padding: var(--space-md, 16px); }

    .card-grid, .card-grid--two-col, .card-grid--four-col,
    .value-prop-section__grid, .industry-section__grid, 
    .features-section__grid, .testimonials-section__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md, 16px);
    }

    .features-section__layout { grid-template-columns: 1fr; gap: var(--space-xl, 32px); }
    
    .testimonial-card__quote-mark { font-size: 48px; top: var(--space-sm, 8px); right: var(--space-lg, 24px); }
    .value-card__icon-wrap { width: 64px; height: 64px; }
    .value-card__icon { font-size: 28px; }

    /* ========================================================================
     7. PROCESS SECTION
     ======================================================================== */
    .process-section__steps { gap: var(--space-lg, 24px); }
    .process-step { gap: var(--space-md, 16px); }
    
    .process-step__number {
        width: 44px; height: 44px; font-size: 16px;
        background-color: var(--color-accent, #00B4D8);
        color: var(--color-primary, #0A192F);
    }
    
    .process-step:not(:last-child)::after { left: 21px; top: 48px; background-color: rgba(0, 180, 216, 0.8); }
    .process-step__title { font-size: 16px; }

    /* ========================================================================
     8. MISC SECTIONS
     ======================================================================== */
    .accordion-item__trigger { padding: var(--space-md, 16px); min-height: 52px; }
    .accordion-item__question { font-size: 15px; }
    .accordion-item__content { padding: var(--space-md, 16px); }

    .cta-section__title { font-size: 24px; padding: 0; }
    .cta-section__actions { flex-direction: column; align-items: stretch; width: 100%; }
    .cta-section__actions .btn { width: 100%; justify-content: center; }

    .fleet-section__layout { grid-template-columns: 1fr; gap: var(--space-xl, 32px); }
    .fleet-section__image-wrap { aspect-ratio: 16 / 9; }

    .stats-bar__inner { grid-template-columns: 1fr 1fr; gap: var(--space-md, 16px); }
    .stats-bar__number { font-size: 28px; }
    .stats-bar__item { padding: var(--space-sm, 8px); border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
    .stats-bar__item:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.06); }
    .stats-bar__item:nth-last-child(-n+2) { border-bottom: none; }

    /* ========================================================================
     9. UTILITIES & LAYOUTS
     ======================================================================== */
    .btn-group { flex-direction: column; align-items: stretch; }
    .btn-group .btn { width: 100%; justify-content: center; }

    .form-grid { grid-template-columns: 1fr; }
    .form-footer { align-items: stretch; }
    .form-footer .btn { width: 100%; justify-content: center; }

    .site-footer__top { grid-template-columns: 1fr; gap: var(--space-xl, 32px); }
    .site-footer__nav-columns { grid-template-columns: 1fr 1fr; gap: var(--space-xl, 32px) var(--space-lg, 24px); }
    .site-footer__bottom { flex-direction: column; gap: var(--space-md, 16px); text-align: center; }
    .site-footer__legal-links { gap: var(--space-sm, 8px) var(--space-md, 16px); }
    .site-footer__legal-links li+li::before { display: none; }
    .site-footer__tagline { max-width: 100%; }

    .breadcrumb { padding: var(--space-sm, 8px) 0; }
    .breadcrumb__item { font-size: var(--fs-label, 12px); }

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