/*
 * INDEX.PHP — Responsive Compatibility Fixes
 * ============================================
 * Scoped overrides for index.php ONLY.
 * Loaded after all other CSS via landing_header.php.
 * Purpose: Reflow existing design for all viewports.
 * Rule: NO redesign. NO content removal. Preserve visual identity.
 */

/* ═══════════════════════════════════════════════════════════════
   1. GLOBAL SAFETY — Prevent horizontal overflow
   ═══════════════════════════════════════════════════════════════ */

html, body {
    overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   2. ORBITAL SYSTEM — Fix fixed 500px width
   Used in: showcase_ats_b.php, showcase_neural.php
   ═══════════════════════════════════════════════════════════════ */

.orbital-system {
    width: min(500px, 100%);
    height: min(500px, 100vw);
}

@media (max-width: 576px) {
    .orbital-system {
        width: 280px;
        height: 280px;
    }
    /* Scale down orbits to fit */
    .orbit-1 { width: min(260px, 90vw) !important; height: min(260px, 90vw) !important; }
    .orbit-2 { width: min(180px, 65vw) !important; height: min(180px, 65vw) !important; }
    .orbit-3 { width: min(100px, 36vw) !important; height: min(100px, 36vw) !important; }
}

@media (max-width: 400px) {
    .orbital-system {
        width: 240px;
        height: 240px;
    }
    .orbit-1 { width: 220px !important; height: 220px !important; }
    .orbit-2 { width: 150px !important; height: 150px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   3. ORBITAL CONTAINER (showcase_orbital.php)
   ring-3 = 450px → overflow on < 450px screens
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .orbital-container {
        min-height: 420px !important;
        padding: 40px 0 80px !important;
    }
    .ring-1 { width: 180px !important; height: 180px !important; }
    .ring-2 { width: 220px !important; height: 220px !important; }
    .ring-3 { width: 260px !important; height: 260px !important; }
    .singularity-orbit-wrap { width: 160px !important; height: 160px !important; }
    .singularity-core {
        width: 100px !important;
        height: 100px !important;
    }
    .singularity-core img { width: 65px !important; }
    .intel-node {
        width: 65px !important;
        height: 65px !important;
    }
    .intel-node i { font-size: 1rem !important; }
    .intel-node span { font-size: 7px !important; }
    .core-metrics { gap: 12px !important; }
    .metric-value { font-size: 1rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   4. CIRCULAR VISUALS — radar, copilot, security
   max-width: 400px + aspect-ratio: 1/1 → scale down on small screens
   ═══════════════════════════════════════════════════════════════ */

.radar-visual-wrapper,
.copilot-visual-container,
.security-visual-container {
    max-width: min(400px, 85vw) !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. WHALE RADAR SECTION — min-height fix for mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .whale-radar-section {
        min-height: auto !important;
        padding: 50px 0 !important;
    }
    .radar-visual-wrapper {
        max-width: min(300px, 75vw) !important;
        margin-top: 2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   6. CS CARDS (Currency Strength) — 2 col on mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 360px) {
    .cs-card {
        padding: 14px 10px 12px !important;
    }
    .cs-value { font-size: 15px !important; }
    .cs-symbol { font-size: 13px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   7. HEATMAP WIDGET — height on small mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .heatmap-widget {
        height: 320px !important;
    }
    .heatmap-glass-container {
        border-radius: 20px !important;
        padding: 6px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   8. COMPARISON SECTION (showcase_comparison.php)
   comparison-grid and unfair-grid: CSS Grid → responsive
   Already has @media (max-width: 991px) → 1fr in inline CSS.
   Extra fix for very small screens.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {
    .comparison-grid,
    .unfair-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .comp-card { padding: 20px !important; }
    .unfair-item { padding: 18px !important; }
    .comp-title { font-size: 18px !important; }
    .unfair-title { font-size: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   9. EXPERT HUD — engine-core-wrap fixed height fix
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .engine-core-wrap {
        height: 280px !important;
    }
    .sr-1 { width: 180px !important; height: 180px !important; }
    .sr-2 { width: 240px !important; height: 240px !important; }
    .sr-3 { width: 280px !important; height: 280px !important; }
    .expert-sovereign-hud {
        padding: 60px 0 !important;
    }
    .action-footer .btn-hud-primary,
    .action-footer .btn-hud-secondary {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 0 12px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   10. PARTNER SECTION — bar chart on mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {
    .partner-alliance-v9 .glass-card {
        padding: 20px !important;
    }
    .partner-alliance-v9 .col-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   11. TESTIMONIALS MARQUEE — prevent overflow
   ═══════════════════════════════════════════════════════════════ */

.testimonials-marquee-wrap {
    max-width: 100vw;
    overflow: hidden;
}

@media (max-width: 576px) {
    .testi-card {
        width: 280px !important;
        padding: 18px !important;
    }
    .testi-name { font-size: 12px !important; }
    .testi-quote { font-size: 11px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   12. SOVEREIGN TOOLS CARDS — icon sizing
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {
    .col-lg-3.col-md-6 .glass-card {
        padding: 20px 16px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   13. AI BANNER — flex wrap properly on mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .d-flex.justify-content-center.gap-3.flex-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .d-flex.justify-content-center.gap-3.flex-wrap .btn,
    .d-flex.justify-content-center.gap-3.flex-wrap a {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   14. GLASS CARD PADDING — reduce on small mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .glass-card {
        padding: 20px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   15. CTA SECTION — button full width on mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .cta-section .btn {
        width: 100% !important;
        padding: 16px 24px !important;
        font-size: 1rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   16. SOVEREIGN CHART SECTION — image overflow guard
   ═══════════════════════════════════════════════════════════════ */

.sovereign-chart-section img.img-fluid {
    max-width: 100% !important;
    height: auto !important;
}

/* ═══════════════════════════════════════════════════════════════
   17. RTL FLEX DIRECTION fixes
   Prevent icon/button flip issues in mixed content
   ═══════════════════════════════════════════════════════════════ */

.d-flex.align-items-center.gap-3 .fas,
.d-flex.align-items-center.gap-3 .fab {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   18. TYPOGRAPHY — Clamp headings on very small screens
   Only for display-3 and display-4 on < 360px
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 360px) {
    .display-3 { font-size: 1.5rem !important; }
    .display-4 { font-size: 1.3rem !important; }
    .display-5 { font-size: 1.2rem !important; }
    .lead      { font-size: 0.9rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   19. ANIMATED MARQUEE — safe containment
   ═══════════════════════════════════════════════════════════════ */

.animated-marquee-section {
    overflow: hidden !important;
    max-width: 100vw !important;
}

/* ═══════════════════════════════════════════════════════════════
   20. ALLIANCES SECTION — cards on mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {
    .alliance-card { padding: 20px !important; }
    .alliance-title { font-size: 15px !important; }
    .alliance-icon-wrap {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   21. SOVEREIGN ENGINES — g-5 row on tablet
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    .sovereign-engines-section .row.g-4 > [class*="col-lg-4"],
    .algorithmic-indicators-section .row.g-4 > [class*="col-lg-4"],
    .algorithmic-indicators-section .row.g-4 > [class*="col-lg-6"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 576px) {
    .sovereign-engines-section .row.g-4 > [class*="col-lg-4"],
    .sovereign-engines-section .row.g-4 > [class*="col-md-6"],
    .algorithmic-indicators-section .row.g-4 > [class*="col-lg-4"],
    .algorithmic-indicators-section .row.g-4 > [class*="col-lg-6"],
    .algorithmic-indicators-section .row.g-4 > [class*="col-md-6"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   22. FAQ SECTION — accordion padding on mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {
    .faq-btn { padding: 16px 18px !important; font-size: 0.9rem !important; }
    .accordion-body { padding: 0 18px 18px 18px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   23. SECURITY SECTION — visual container on col stack
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .security-visual-container {
        max-width: min(300px, 75vw) !important;
        margin: 2rem auto 0 !important;
    }
    .security-infrastructure-section {
        padding: 50px 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   24. NEURAL SECTION — row g-5 and glass card on mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .copilot-visual-container {
        max-width: min(300px, 75vw) !important;
        margin: 0 auto 2rem !important;
    }
    #neural-a .row.mt-5 {
        margin-top: 2rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   25. LANDSCAPE MOBILE — adjust heights
   ═══════════════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
    .whale-radar-section { min-height: auto !important; }
    .orbital-container   { min-height: 300px !important; }
    .expert-sovereign-hud { padding: 40px 0 !important; }
}