/* ============================================
   ECPSOLUTIONS — Mobile Optimization Layer
   Loaded LAST so these rules win in the cascade.
   Strategy:
   - Reduce expensive effects (heavy blur, large orbs) on mobile
   - Enforce 44px touch targets across interactive elements
   - Tighten spacing
   - Improve typography for thumb readability
   - Disable hover-only effects on touch devices
   - Sticky-hover prevention for navbar/menus/cards
   ============================================ */

/* ============================================
   1. PERFORMANCE — reduce expensive effects on mobile
   backdrop-filter blur is the #1 performance hog on
   mid-range Android. Drop blur radius significantly.
   ============================================ */
@media (max-width: 768px) {
    /* Navbar — was 40px blur */
    .navbar-bg {
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        backdrop-filter: blur(18px) saturate(160%);
    }

    /* Mega-dropdown — was 32px */
    .nav-mega {
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        backdrop-filter: blur(20px) saturate(160%);
    }

    /* Mobile menu — was 40px */
    .mobile-menu-bg {
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
    }

    /* Cards / pills that natively use backdrop-blur — clamp to 8px on mobile.
       (Intentionally narrow list — only elements that genuinely have the
       property today; we don't want to ADD blur where there was none.) */
    .hero-chip,
    .ecp360-pillar,
    .mv-card,
    .ct-form-wrap,
    .ct-connect,
    .svc-industries,
    .story-stamps li {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

    /* Reduce gradient orb sizes (they're huge by default) */
    .gradient-orb-1 { width: 380px; height: 380px; filter: blur(60px); }
    .gradient-orb-2 { width: 320px; height: 320px; filter: blur(60px); }
    .gradient-orb-3 { width: 260px; height: 260px; filter: blur(60px); }

    /* Reduce footer glow */
    .ft-bg-glow { height: 220px; filter: blur(40px); }

    /* Reduce contact section orbs */
    .ct-orb-1 { width: 300px; height: 300px; filter: blur(60px); }
    .ct-orb-2 { width: 260px; height: 260px; filter: blur(60px); }
}

/* ============================================
   2. TOUCH TARGET ENFORCEMENT
   Every interactive element should be >= 44x44px.
   Apple HIG / WCAG recommendation.
   IMPORTANT: only set min-height/min-width here — do NOT override
   display/padding/alignment from the page CSS, otherwise we break
   the carefully-designed grid/flex layouts.
   ============================================ */
@media (max-width: 1024px) {
    .mobile-link,
    .mobile-services-toggle { min-height: 56px; }
    .mobile-sublink         { min-height: 48px; }
    .ft-social              { min-width: 44px; min-height: 44px; }
    .ct-quick-btn           { min-height: 64px; }
    .svc-cta,
    .svc-cta-ghost,
    .ecp360-cta-primary,
    .ecp360-cta-ghost,
    .nf-cta,
    .nf-cta-ghost,
    .story-cta,
    .ct-submit              { min-height: 48px; }
    .faq-q                  { min-height: 56px; }
    .hero-chip              { min-height: 40px; }
    .ft-col-list a          { min-height: 36px; }
}

/* ============================================
   3. STICKY-HOVER PREVENTION
   On touch devices, :hover sticks after a tap.
   Disable hover-only visual effects on devices
   that can't truly hover.
   ============================================ */
@media (hover: none) {
    /* Cards: don't keep transform after tap */
    .service-card:hover,
    .cap-card:hover,
    .mv-card:hover,
    .ct-quick-btn:hover,
    .ct-channel:hover,
    .ct-ecp360:hover,
    .ecp360-pillar:hover,
    .nav-mega-item:hover,
    .stack-item:hover,
    .industry-card:hover,
    .hero-chip:hover,
    .ft-social:hover,
    .proc-step:hover,
    .nf-quick a:hover {
        transform: none !important;
    }

    /* Navbar links: disable decoder + tumble + glow on touch */
    .nav-link:hover .nav-icon,
    .nav-link:hover .nav-label,
    .nav-link:hover .nav-underline {
        transform: none !important;
        filter: none !important;
    }

    /* Footer column link underline draws — keep static */
    .ft-col-list a::before { display: none; }
}

/* ============================================
   4. TYPOGRAPHY — thumb readability
   Smallest body text on mobile should be >= 14px,
   smallest UI text >= 13px. Many uppercase tracking
   pills get unreadable below 11px.
   ============================================ */
@media (max-width: 540px) {
    /* Bump up the smallest uppercase pills */
    .svc-tag,
    .ct-tag,
    .ecp360-tag,
    .ecp360-status,
    .story-tag,
    .section-tag,
    .ft-status,
    .location-stamp {
        font-size: 0.72rem;
        letter-spacing: 0.16em;
    }

    /* Bottom strips can be tiny but not invisible */
    .ft-bottom,
    .ct-stamp,
    .ecp360-stamp {
        font-size: 0.66rem;
        letter-spacing: 0.14em;
    }

    /* Body paragraphs comfortable */
    .hero-description,
    .story-p,
    .svc-hero-lede,
    .ct-lede,
    .ecp360-lede,
    .nf-lede,
    .section-description,
    .page-hero-subtitle {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* Capability card body */
    .cap-desc {
        font-size: 0.92rem;
    }

    /* FAQ answer text */
    .faq-a p {
        font-size: 0.95rem;
        padding: 0 1.15rem 1.15rem;
    }
}

/* ============================================
   5. SECTION SPACING — tighter on mobile
   Many sections use 6-8rem vertical padding which
   feels excessive on a 6" screen.
   ============================================ */
@media (max-width: 640px) {
    .svc-hero { padding: 2.5rem 1.25rem 3rem; }
    .svc-section { padding: 3.5rem 1.25rem; }
    .svc-section-head { margin-bottom: 2rem; }
    .ecp360-section { padding: 4rem 1.25rem 3.5rem; }
    .services-overview { padding: 3rem 1.25rem 4rem; }
    .ecp360-band { padding: 0; }

    /* Hero on home */
    .hero { padding: 3rem 1.25rem 2.5rem; min-height: auto; }

    /* About story */
    .story-section { padding: 3.5rem 1.25rem; }
    .story-intro { padding: 3rem 1.25rem 1.5rem; }
}

/* ============================================
   6. HERO TEXT — mobile alignment improvements
   Prevent cycle word from causing horizontal scroll.
   Make sure ECP360 wordmark fits.
   ============================================ */
@media (max-width: 640px) {
    .hero-title {
        font-size: clamp(2.1rem, 11vw, 3.5rem);
    }

    /* Cycling word stays inline rather than wrapping awkwardly */
    .title-line-cycle {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.18em;
    }

    /* The cycle slot itself: cap width to viewport */
    .title-cycle {
        max-width: 100%;
    }

    /* Ensure cycle word doesn't overflow */
    .title-cycle-word {
        white-space: nowrap;
    }

    /* ECP360 mega wordmark */
    .ecp360-wordmark { font-size: clamp(2.8rem, 16vw, 5rem); }
    .ecp360-orb-wrap { width: clamp(180px, 50vw, 240px); height: clamp(180px, 50vw, 240px); }

    /* Hero brand line: fit nicely */
    .hero-brand-line {
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
    }
    .brand-divider { display: none; }

    /* Hero description tighter */
    .hero-description {
        margin-bottom: 1.5rem;
    }

    /* Service hero CTA stacks */
    .svc-hero-cta {
        flex-direction: column;
        align-items: stretch;
    }
    .svc-cta, .svc-cta-ghost {
        justify-content: center;
    }
}

/* ============================================
   7. SECTION HEADERS / TITLES on mobile
   ============================================ */
@media (max-width: 640px) {
    .svc-hero-title { font-size: clamp(2rem, 9vw, 3.2rem); }
    .svc-section-h  { font-size: clamp(1.6rem, 7vw, 2.4rem); }
    .story-h        { font-size: clamp(1.7rem, 8vw, 2.6rem); }
    .story-title    { font-size: clamp(2rem, 10vw, 3.2rem); }
    .ct-title       { font-size: clamp(1.9rem, 8.5vw, 3rem); }
    .page-hero-title { font-size: clamp(1.9rem, 9vw, 3.2rem); }

    /* Mega dropdown isn't shown on mobile (collapses to mobile menu),
       but if it ever is, make it scrollable */
    .nav-mega {
        max-width: 92vw;
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* ============================================
   8. SERVICE NUMBER WATERMARKS on mobile
   Smaller, more subtle, anchored to the side
   so they don't visually fight with content.
   ============================================ */
@media (max-width: 760px) {
    .svc-num,
    .story-num {
        position: absolute;
        top: 0.5rem !important;
        right: -0.25rem !important;
        left: auto !important;
        transform: none !important;
        font-size: clamp(4rem, 18vw, 7rem) !important;
        opacity: 0.4;
        line-height: 0.85;
    }

    .svc-section:nth-of-type(even) .svc-num {
        left: -0.25rem !important;
        right: auto !important;
    }

    /* Section padding-top gives the small watermark room and prevents
       the content from butting up against the navbar / previous section */
    .svc-section,
    .story-section {
        padding-top: 4.5rem;
    }
}

/* ============================================
   9. NAVBAR — slightly smaller brand on small phones
   ============================================ */
@media (max-width: 380px) {
    .navbar-container { padding: 0 0.85rem; }
    .brand-name { font-size: 0.95rem; letter-spacing: 0.05em; }
    .brand-inc  { display: none; } /* hide tiny INC chip when ultra-narrow */
    .brand-logo { width: 36px; height: 36px; min-width: 36px; }
    .navbar-toggle { width: 42px; height: 42px; }

    /* ECP360 button (in navbar.actions) is hidden on mobile via earlier rule,
       but make sure if shown it stays compact */
    .btn-ecp360 .ecp360-text-wrap { display: none; }
}

/* ============================================
   10. SAFETY: prevent any horizontal scroll
   Common cause: overly-wide watermarks, SVGs
   ============================================ */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

@media (max-width: 640px) {
    .ecp360-watermark,
    .nf-watermark,
    .ft-watermark,
    .ct-watermark,
    .hero-watermark,
    .story-num,
    .svc-num {
        max-width: 100vw;
        word-break: keep-all;
    }
}

/* ============================================
   11. MOTION — reduce overall animation cost on small screens
   ============================================ */
@media (max-width: 640px) {
    /* Slower / smaller particle population already handled in JS.
       Halve the gradient-orb float distance on mobile to reduce repaints. */
    @keyframes orbFloat {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%      { transform: translate(8px, -8px) scale(1.02); }
    }
}