/* ============================================================
   VibrantMinds Companies — assets/css/mobile-responsive.css
   Mobile & Tablet Responsive Overrides
   ============================================================ */

/* ── HERO: class-based reliable overrides ───────────────────── */

/* Trust bar — styled via class */
.co-hero-trust-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(12px);
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  /* Hero: collapse 2-col to 1-col */
  .co-hero-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-10) !important;
  }
  /* Dashboard goes below text on mobile */
  .co-hero-dashboard {
    order: 2;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
  }
  .co-hero-left-col {
    order: 1;
  }
}

@media (max-width: 768px) {
  /* Hero headline size */
  .co-hero-left-col h1 {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
  }
  /* CTA row stack */
  .co-hero-cta-row {
    flex-direction: column !important;
  }
  .co-hero-cta-row a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* Trust bar text truncation */
  .co-hero-trust-bar { gap: var(--sp-3); }
}

@media (max-width: 480px) {
  .co-hero-left-col h1 {
    font-size: clamp(1.8rem, 7vw, 2.2rem) !important;
  }
  .co-hero-dashboard { max-width: 100%; }
}

/* ── GLOBAL MOBILE BASE ─────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --header-height: 110px; }

  .section-padding      { padding: var(--sp-12) 0; }
  .section-padding-sm   { padding: var(--sp-8) 0; }
  .container            { padding: 0 var(--sp-4); }

  /* Hide custom cursor on touch */
  .custom-cursor, .custom-cursor-ring { display: none; }
}

/* ── HEADER ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .header-top-row .container {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .logo-icon  { height: 36px; }
  .logo-title .orange,
  .logo-title .navy   { font-size: 1.15rem; }
  .logo-badge { display: none; }
  .header-actions { gap: var(--sp-2); }
  .header-cta { display: none !important; }

  /*
   * IMPORTANT: Do NOT use display:none on header-bottom-row.
   * #main-nav is position:fixed and escapes normal flow, but display:none
   * on a parent still removes all children from the render tree.
   * We hide the row visually via height/overflow, keeping #main-nav accessible.
   */
  .header-bottom-row {
    height: 0;
    overflow: visible; /* let #main-nav escape */
    padding: 0;
    border: none;
  }
}
@media (max-width: 480px) {
  .logo-title .orange,
  .logo-title .navy   { font-size: 1rem; }
}

/* ── HERO SECTION ───────────────────────────────────────────── */
@media (max-width: 900px) {
  /* 2-col → 1-col */
  #hero .container > div[style*="grid-template-columns:1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--sp-8) !important;
  }

  /* badge strip */
  #hero .container > div[style*="display:flex"][style*="gap:var(--sp-3)"] {
    flex-wrap: wrap !important;
    gap: var(--sp-2) !important;
    margin-bottom: var(--sp-6) !important;
  }

  /* feature pills row */
  #hero div[style*="flex-wrap:wrap"][style*="gap:var(--sp-2)"] {
    gap: var(--sp-2) !important;
  }

  /* Metric right panel — show after text */
  #hero .hero-layer[style*="position:relative"] {
    order: 2;
  }
}

@media (max-width: 768px) {
  /* Hero headline */
  #hero h1 {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
  }

  /* CTA row stack */
  .co-hero-cta-row {
    flex-direction: column !important;
    gap: var(--sp-3) !important;
  }
  .co-hero-cta-row a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Featured metric card */
  #hero div[style*="grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom"] {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--sp-3) !important;
  }

  /* Hero trust bar */
  #hero div[style*="display:inline-flex;align-items:center;gap:var(--sp-4)"] {
    width: 100% !important;
    display: flex !important;
  }

  /* Accent line */
  #hero > div[style*="position:absolute;top:0;right:0;width:2px"] {
    display: none;
  }
}

@media (max-width: 480px) {
  #hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; }

  /* Smaller metric grid on tiny phones */
  #hero div[style*="grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-bottom"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Feature pills */
  #hero div[style*="flex-wrap:wrap"] span {
    font-size: 0.75rem !important;
    padding: 0.3rem 0.7rem !important;
  }

  /* Badge strip */
  #hero .container > div[style*="display:flex;align-items:center;gap:var(--sp-3)"] span {
    font-size: 0.72rem !important;
    padding: 0.35rem 0.8rem !important;
  }
}

/* ── STATS STRIP ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .co-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .co-stat-card {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: var(--sp-6) !important;
  }
  .co-stat-card:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.08) !important; }
  .co-stat-card:nth-last-child(-n+2):nth-child(odd):last-child,
  .co-stat-card:last-child { border-bottom: none !important; }
  .co-stat-number { font-size: var(--text-4xl) !important; }
}
@media (max-width: 480px) {
  .co-stats-grid { grid-template-columns: 1fr !important; }
  .co-stat-card  { border-right: none !important; }
}

/* ── LOGO MARQUEE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .logo-marquee-inner { gap: var(--sp-8); }
  .logo-marquee-inner img { height: 28px; }
}

/* ── SERVICE CARDS ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .co-services-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 600px) {
  .co-services-grid {
    grid-template-columns: 1fr !important;
  }
  .co-svc-card { padding: var(--sp-6) !important; }
}

/* ── ABOUT SECTION ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .co-about-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-8) !important;
  }
  .co-about-grid .reveal-right {
    order: 2;
    padding: 0 !important;
  }
  .co-about-grid .reveal-left { order: 1; }
}
@media (max-width: 768px) {
  /* About checklist: single col */
  .co-about-grid .reveal-left > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--sp-3) !important;
  }
}

/* ── PROCESS TIMELINE ───────────────────────────────────────── */
@media (max-width: 900px) {
  .co-process-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .co-process-grid::before { display: none !important; }
}
@media (max-width: 600px) {
  .co-process-grid { grid-template-columns: 1fr !important; }
}

/* ── CTA BANNER ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .co-cta-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: var(--sp-6) !important;
  }
  .co-cta-inner h2 { font-size: var(--text-3xl) !important; }
  .co-cta-btns {
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .co-cta-btns a { width: 100% !important; justify-content: center !important; }
}

/* ── FOOTER ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--sp-8) !important;
  }
  .footer-brand { grid-column: span 2 !important; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-brand { grid-column: span 1 !important; }
  .footer-bottom-inner { flex-direction: column !important; text-align: center !important; gap: var(--sp-3) !important; }
  .footer-bottom-links { justify-content: center !important; }
  .footer-stats-mini { justify-content: center !important; }
}

/* ── INNER PAGE HERO ────────────────────────────────────────── */
@media (max-width: 768px) {
  .co-inner-hero { padding: 130px 0 60px !important; }
  .co-inner-hero h1 { font-size: clamp(1.7rem, 6vw, 2.4rem) !important; }
  .co-inner-hero-lead { font-size: var(--text-base) !important; }
  .co-inner-meta { gap: var(--sp-4) !important; flex-wrap: wrap !important; }
}

/* ── INNER PAGE LAYOUT (sidebar form) ──────────────────────── */
@media (max-width: 1024px) {
  .co-page-layout {
    grid-template-columns: 1fr !important;
    gap: var(--sp-8) !important;
  }
  .co-sidebar-form { order: -1 !important; position: static !important; }
}
@media (max-width: 768px) {
  .co-page-layout { padding: var(--sp-10) 0 !important; }
  .co-sidebar-form { padding: var(--sp-6) !important; }
}

/* ── FEATURE CARD GRIDS ─────────────────────────────────────── */
@media (max-width: 768px) {
  .co-feature-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .co-feature-grid { grid-template-columns: 1fr !important; }
  .co-feature-card { padding: var(--sp-5) !important; }
}

/* ── ROLE CARDS ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .co-role-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .co-role-grid { grid-template-columns: 1fr !important; }
}

/* ── TESTIMONIAL CARDS ──────────────────────────────────────── */
@media (max-width: 768px) {
  .co-testi-grid { grid-template-columns: 1fr !important; }
}

/* ── SECTION TITLE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .co-section-title {
    font-size: var(--text-3xl) !important;
    letter-spacing: -0.01em !important;
  }
  .co-section-desc { font-size: var(--text-base) !important; }
}
@media (max-width: 480px) {
  .co-section-title { font-size: var(--text-2xl) !important; }
}

/* ── FORM GRID ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .co-form-grid-2 { grid-template-columns: 1fr !important; }
}

/* ── WHATSAPP FLOAT ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .whatsapp-float { width: 52px; height: 52px; bottom: 1.2rem; right: 1.2rem; }
  .whatsapp-float svg { width: 24px; height: 24px; }
}

/* ── HERO RIGHT PANEL full-width on mobile ──────────────────── */
@media (max-width: 900px) {
  #hero div[style*="position:relative;"][class="hero-layer"] {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
  }
  /* Featured card number smaller */
  #hero div[style*="font-size:clamp(2.5rem"] {
    font-size: 2.6rem !important;
  }
}

/* ── ABOUT SECTION inline grid override ─────────────────────── */
@media (max-width: 900px) {
  .container[style*="display:grid; grid-template-columns:1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--sp-8) !important;
  }
}

/* ── FIX: Inline 2-col containers everywhere ─────────────────── */
@media (max-width: 768px) {
  /* Generic catch for all inline 2-col grids */
  [style*="display:grid; grid-template-columns:1fr 1fr"],
  [style*="display:grid;grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* But keep metric card 2-col since they're small */
  #hero div[style*="grid-template-columns:1fr 1fr;gap:var(--sp-4)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* About section inner metrics mini-grid */
  div[style*="grid-template-columns:1fr 1fr;gap:var(--sp-4)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── INNER HERO: Inline 2-col content area ───────────────────── */
@media (max-width: 768px) {
  .co-inner-hero .co-inner-meta-item { font-size: var(--text-xs); }
}

/* ── SECTION HEADER spacing ─────────────────────────────────── */
@media (max-width: 768px) {
  .co-section-header { margin-bottom: var(--sp-8) !important; }
}

/* ── BUTTON full-width on mobile ────────────────────────────── */
@media (max-width: 480px) {
  .btn-orange,
  .btn-navy,
  .btn-ghost,
  .btn-ghost-navy {
    width: 100%;
    justify-content: center !important;
  }
  /* But not inside nav or header */
  #main-header .btn-orange,
  #main-header .btn-ghost,
  .header-cta { width: auto !important; }
}

/* ── INDUSTRIES GRID ────────────────────────────────────────── */
@media (max-width: 768px) {
  [style*="display:grid"][style*="grid-template-columns:repeat(3"],
  [style*="display:grid"][style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  [style*="display:grid"][style*="grid-template-columns:repeat(3"],
  [style*="display:grid"][style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}