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

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

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

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

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

    /* ========================================================================
     3. HERO SECTION
     ======================================================================== */
    .hero-section { min-height: 560px; padding-top: 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; gap: var(--space-lg); }
    .hero-section__headline { font-size: 48px; letter-spacing: -1px; }
    .hero-section__subheadline { font-size: 18px; }
    .hero-section__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .hero-section__actions .btn { width: auto; }
    .hero-section__form-panel { width: 400px; flex-shrink: 0; padding: var(--space-xl); }

    /* ========================================================================
     4. TRUST BANNER
     ======================================================================== */
    .trust-banner__logos { gap: var(--space-xl) var(--space-3xl); flex-wrap: nowrap; justify-content: space-between; }
    .trust-banner__logo-item img { height: 32px; max-width: 140px; }

    /* ========================================================================
     5. SECTION HEADERS & GRIDS
     ======================================================================== */
    .section__title { font-size: 36px; }
    .section__subtitle { font-size: 18px; max-width: 600px; }

    .value-prop-section__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
    .value-prop-section__grid > *:last-child:nth-child(odd) { grid-column: auto; max-width: none; margin: 0; }

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

    .features-section__layout { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
    .features-section__grid { grid-template-columns: 1fr; gap: var(--space-md); }

    /* ========================================================================
     6. PROCESS SECTION
     ======================================================================== */
    .process-section__steps { grid-template-columns: repeat(4, 1fr); gap: 0; max-width: none; align-items: start; position: relative; }
    
    .process-section__steps::before {
        content: ''; position: absolute; top: 27px; left: calc(27px + (100% / 8)); right: calc(27px + (100% / 8));
        height: 2px; background: linear-gradient(to right, var(--color-gold, #F59E0B) 0%, rgba(245, 158, 11, 0.3) 100%); z-index: 0;
    }

    .process-step:not(:last-child)::after { display: none; }
    .process-step { flex-direction: column; align-items: center; text-align: center; padding: 0 var(--space-md); gap: var(--space-md); }
    
    .process-step__number {
        width: 56px; height: 56px; font-size: 20px; position: relative; z-index: 1;
        box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.15), 0 0 0 8px var(--color-primary, #0A192F);
        background-color: var(--color-accent, #00B4D8); color: var(--color-primary, #0A192F);
    }
    
    .process-step__content { padding-top: 0; text-align: center; }
    .process-step__title { font-size: 16px; }
    .process-step__description { font-size: 14px; }

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

    .cta-section__title { font-size: 36px; }
    .cta-section__subtitle { font-size: 18px; }
    .cta-section__actions { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: var(--space-md); }
    .cta-section__actions .btn { width: auto; }

    .fleet-section__layout { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
    .fleet-section__image-wrap { aspect-ratio: 4 / 3; }

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

    .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; }
    .site-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; gap: var(--space-xl); }

    .form-grid { grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-lg); }
    .form-footer { flex-direction: row; align-items: center; gap: var(--space-md); }
    .accordion-section__list { max-width: 800px; }
    .btn-group { flex-direction: row; align-items: center; }
    .btn-group .btn { width: auto; }

    /* ========================================================================
     8. UTILITIES
     ======================================================================== */
    .show-mobile, .show-mobile-flex { display: none !important; }
    .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; }
}

/* ============================================================
   LARGE DESKTOP — 1536px+
   ============================================================ */
@media screen and (min-width: 1536px) {
    :root { --container-padding: 80px; }
    .hero-section { min-height: 640px; }
    .hero-section__headline { font-size: 52px; }
    .hero-section__form-panel { width: 440px; }
    .stats-bar__number { font-size: 48px; }
    .section__title { font-size: 36px; }
    .site-footer__top { grid-template-columns: 360px 1fr; }
}