/* ============================================================
   ACTIVISIONVR — Responsive Styles
   Media queries for mobile, tablet, desktop breakpoints
   ============================================================ */

/* ================================================================
   TABLET (max-width: 1024px)
   ================================================================ */
@media (max-width: 1024px) {
  /* Layout */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .two-col,
  .two-col-reverse {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .two-col-reverse > *:first-child { order: 1; }
  .two-col-reverse > *:last-child { order: 2; }

  /* Bento Grid */
  .bento-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .bento-span-3 { grid-column: span 3; }
  .bento-span-4 { grid-column: span 3; }
  .bento-span-5 { grid-column: span 6; }
  .bento-span-7 { grid-column: span 6; }
  .bento-span-8 { grid-column: span 6; }

  /* Stats */
  .stats-bar {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats-bar .stat-item:nth-child(3)::after {
    display: none;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  /* Problem/Solution */
  .problem-solution-grid {
    grid-template-columns: 1fr;
  }

  /* Mega Menu */
  .mega-menu {
    min-width: 480px;
  }

  .mega-menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================================
   MOBILE (max-width: 768px)
   ================================================================ */
@media (max-width: 768px) {
  /* Typography Scale */
  h1 { font-size: clamp(2rem, 8vw, 2.75rem); }
  h2 { font-size: clamp(1.75rem, 6vw, 2.25rem); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }

  /* Sections */
  .section {
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
  }

  .section-header {
    margin-bottom: var(--space-10);
  }

  /* Navbar */
  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .navbar {
    height: 64px;
  }

  .navbar.scrolled {
    height: 56px;
  }

  /* Grid */
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5 {
    grid-template-columns: 1fr;
  }

  /* Bento */
  .bento-grid {
    grid-template-columns: 1fr;
  }

  .bento-span-3,
  .bento-span-4,
  .bento-span-5,
  .bento-span-6,
  .bento-span-7,
  .bento-span-8,
  .bento-span-12 {
    grid-column: span 1;
  }

  /* Stats */
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .stats-bar .stat-item::after {
    display: none;
  }

  .stat-number {
    font-size: var(--text-4xl);
  }

  /* Hero */
  .hero {
    min-height: auto;
    padding-top: calc(64px + var(--space-12));
    padding-bottom: var(--space-12);
  }

  .hero p {
    font-size: var(--text-lg);
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-page {
    padding-top: calc(64px + var(--space-12));
    padding-bottom: var(--space-10);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }

  /* Cards */
  .card-elevated,
  .feature-card {
    padding: var(--space-6);
  }

  .partner-card {
    padding: var(--space-6);
  }

  /* CTA Section */
  .cta-section {
    padding: var(--space-10) var(--space-6);
  }

  .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .cta-actions .btn {
    width: 100%;
    max-width: 320px;
  }

  /* Team Infographic */
  .team-infographic {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Metric Display */
  .metric-display {
    flex-direction: column;
  }

  .metric-item {
    min-width: auto;
  }

  /* Project Hero Icon */
  .project-hero-icon {
    width: 64px;
    height: 64px;
    font-size: 2rem;
  }

  /* Buttons */
  .btn-xl {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
  }

  /* Tech Badges */
  .tech-badges {
    justify-content: center;
  }

  /* Breadcrumbs */
  .breadcrumbs {
    font-size: var(--text-xs);
    flex-wrap: wrap;
  }

  /* Toast */
  .toast {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
  }

  /* Fund Grid */
  .fund-grid {
    flex-direction: column;
  }
}

/* ================================================================
   SMALL MOBILE (max-width: 480px)
   ================================================================ */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  h2 { font-size: clamp(1.5rem, 5vw, 1.875rem); }

  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .stats-bar {
    grid-template-columns: 1fr;
  }

  .team-infographic {
    grid-template-columns: 1fr;
  }

  .hero-label {
    font-size: 0.65rem;
  }

  .section-label {
    font-size: 0.65rem;
  }
}

/* ================================================================
   LARGE DESKTOP (min-width: 1440px)
   ================================================================ */
@media (min-width: 1440px) {
  .container {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }

  .hero-content {
    max-width: 900px;
  }
}

/* ================================================================
   ULTRA WIDE (min-width: 1920px)
   ================================================================ */
@media (min-width: 1920px) {
  :root {
    font-size: 18px;
  }
}