/* ==========================================================================
   TEAM7INDIA — RESPONSIVE MEDIA QUERIES
   Adapts layout seamlessly from 320px up to 4K Displays
   ========================================================================== */

/* Large Desktop & High-DPI (1440px +) */
@media (min-width: 1440px) {
  :root {
    --container-max: 1360px;
  }
}

/* Standard Desktop / Laptop (1024px - 1439px) */
@media (max-width: 1200px) {
  .framework-timeline {
    grid-template-columns: repeat(3, 1fr);
  }

  .pod-builder-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1.5fr repeat(2, 1fr);
    gap: var(--space-8);
  }
}

/* Tablet Breakpoint (768px - 1023px) */
@media (max-width: 991px) {
  .navbar {
    height: 70px;
  }

  .nav-links {
    display: none; /* Handled via mobile menu toggle */
  }

  .nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0; right: 0;
    background: rgba(6, 9, 17, 0.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-glow);
    padding: var(--space-6);
    gap: var(--space-4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr !important;
  }

  .grid-4 {
    grid-template-columns: 1fr 1fr !important;
  }

  .flow-diagram-wrapper {
    flex-direction: column;
    gap: var(--space-6);
  }

  .flow-connector {
    width: 2px;
    height: 40px;
  }

  .flow-connector::after {
    top: auto;
    bottom: 0;
    right: -4px;
    transform: rotate(135deg);
  }
}

/* Mobile Devices (Up to 767px) */
@media (max-width: 767px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .section-title {
    font-size: 1.85rem;
  }

  .section-subtitle {
    font-size: 1rem;
  }

  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }

  .framework-timeline {
    grid-template-columns: 1fr;
  }

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

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

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

  .modal-container {
    padding: var(--space-5);
  }
}