/* ============================================================
   FIRSTHIVE — MOBILE RESPONSIVE SUPPLEMENT
   Full device & orientation support:
     • iPhones  portrait  (375–430 px)
     • iPhones  landscape (667–932 px)
     • iPads    portrait  (768–1024 px)
     • iPads    landscape (1024–1366 px)

   Breakpoints used:
     1040 px — hero two-column collapses (already in HTML)
      860 px — nav hamburger  (already in HTML)
      768 px — tablet portrait / phone landscape threshold
      640 px — small phones landscape
      480 px — small phones portrait
   ============================================================ */


/* ═══════════════════════════════════════════════════════════
   1. NAVIGATION
   ═══════════════════════════════════════════════════════════ */

/* Landscape phones: give the open nav menu a scrollable height */
@media (max-width: 860px) and (max-height: 500px) {
  .navbar { padding-top: 8px; padding-bottom: 8px; }
  .nav-logo { height: 48px; width: 48px; }
  .nav-links { max-height: calc(100svh - 52px); }
  .nav-link { min-height: 36px; padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
}

/* Ensure the open nav drawer always scrolls on any mobile */
@media (max-width: 860px) {
  .nav-links {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}


/* ═══════════════════════════════════════════════════════════
   2. HERO SECTION
   ═══════════════════════════════════════════════════════════ */

/* Tighten hero inner padding on tablets */
@media (max-width: 1040px) {
  .hero-inner { padding-inline: 32px; }
}

/* Phones: hide complex animated viz diagram (it's fixed 480 px wide) */
@media (max-width: 767px) {
  .hero-viz { display: none !important; }
}

/* Phones: stack CTA buttons full-width */
@media (max-width: 640px) {
  .hero-inner { padding-inline: 20px; }
  .hero-cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta-row .btn { width: 100%; justify-content: center; }
  .hero-stats { gap: 16px; }
  .hero h1 { font-size: clamp(28px, 7.5vw, 40px); }
  .hero-sub { font-size: 16px; }
}


/* ═══════════════════════════════════════════════════════════
   3. SOLUTIONS TABS  — horizontal scroll
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .solutions-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    flex-wrap: nowrap;
    padding-bottom: 2px;            /* keep 2-px bottom border visible */
  }
  .solutions-tabs::-webkit-scrollbar { display: none; }
  .sol-tab { flex-shrink: 0; }
}


/* ═══════════════════════════════════════════════════════════
   4. SOLUTIONS PANEL GRID
   ═══════════════════════════════════════════════════════════ */

/* Tablets: 2 columns */
@media (min-width: 481px) and (max-width: 860px) {
  .sol-panel.active { grid-template-columns: repeat(2, 1fr); }
}
/* Phones: single column */
@media (max-width: 480px) {
  .sol-panel.active { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   5. CUSTOMERS STATS GRID  (4 cols → 2 → 1)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .customers-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .customers-stats { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   6. TESTIMONIAL GRID  (3 cols → 2 → 1)
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 601px) and (max-width: 900px) {
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   7. RESOURCES GRID  (3 cols → 2 → 1)
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 601px) and (max-width: 900px) {
  .resources-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .resources-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   8. CDP CAPABILITIES GRID  (3 cols → 2 → 1)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .cdp-cap-grid { grid-template-columns: 1fr; }
  .cdp-callout {
    padding: 40px 24px;
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════
   9. FOOTER GRID  (2fr 1fr 1fr 1fr 1fr → 2 cols → 1 col)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .footer-legal-links { flex-wrap: wrap; gap: 12px; }
}


/* ═══════════════════════════════════════════════════════════
   10. SECTION SPACING & TYPOGRAPHY (phones)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .section { padding: 48px 0; }
  .section-title { font-size: 26px; }
  .section-sub { font-size: 15px; }
  .cta-band { padding: 48px 0; }
  .cta-band h2 { font-size: 24px; }
  .cta-band p { font-size: 15px; }
  .cta-row { flex-direction: column; align-items: center; }
  .cta-row .btn { width: 100%; max-width: 320px; justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════
   11. PLATFORM GRID — extra safety at 480 px
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .platform-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   12. CDP FLOW CORE — phones (already stacks at 900px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .cdp-flow-core { min-width: unset; width: 100%; }
}


/* ═══════════════════════════════════════════════════════════
   13. MEGA MENU OVERLAY SCROLL — tall menus on tablets
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .mega-menu { max-height: 70vh; overflow-y: auto; }
}


/* ═══════════════════════════════════════════════════════════
   14. CONDITIONAL VISUALS — hide complex diagrams on phones
       (per requirement §3)
   ═══════════════════════════════════════════════════════════ */

/* Hide animated Eddie orchestration diagram on phones */
@media (max-width: 640px) {
  /* The eddie-inner grid already stacks at 900px;
     on phones we hide the complex diagram to save space */
  .eddie-diagram { display: none; }
  .eddie-inner { grid-template-columns: 1fr !important; }
}

/* Hide app phone mockup on phones (already hidden at 900px on index) */
@media (max-width: 640px) {
  .app-banner-phone-wrap { display: none !important; }
}

/* Hide the hero use-case viz on phones */
@media (max-width: 767px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-copy { max-width: 100%; }
}


/* ═══════════════════════════════════════════════════════════
   15. PARTNER / ALLIANCE SPECIFIC  — safe fallback grids
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .partner-grid,
  .alliance-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .partner-grid,
  .alliance-grid {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════
   16. GENERAL GRID SAFETY — catch-all for any 3-4 col grids
       that don't have explicit responsive CSS
   ═══════════════════════════════════════════════════════════ */

/* Catch any 3-col or 4-col grid on page-specific sections */
@media (max-width: 768px) {
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════════
   17. ORIENTATION: LANDSCAPE PHONES — hero height control
   ═══════════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding-top: 40px; padding-bottom: 32px; }
  .hero-stats { margin-top: 24px; padding-top: 20px; }
  .section { padding: 40px 0; }
}