/**
 * SPAWRTS SPORTS — Responsive Stylesheet
 * Breakpoints: 1280px, 1024px, 768px, 480px, 390px, 360px
 */

/* ==========================================================================
   DESKTOP & LARGE LAPTOPS (Max 1280px)
   ========================================================================== */
@media (max-width: 1280px) {
  .process-timeline {
    grid-template-columns: repeat(4, 1fr);
  }
  .regions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .social-strip-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .showcase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   TABLETS & SMALL LAPTOPS (Max 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Mobile Navigation Drawer */
  .mobile-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background-color: var(--color-black);
    border-top: 1px solid var(--color-border);
    padding: 2rem var(--container-pad);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--transition-smooth);
    z-index: 1020;
  }

  .nav-menu.active {
    transform: translateX(0);
  }

  .nav-menu .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    width: 100%;
  }

  .nav-item {
    width: 100%;
  }

  .nav-link {
    font-size: 1.4rem;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .nav-dropdown {
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    border: none;
    background-color: var(--color-surface);
    margin-top: 0.5rem;
    padding: 1rem;
    display: none;
  }

  .has-dropdown.open .nav-dropdown {
    display: block;
    opacity: 1;
    visibility: visible;
  }

  .dropdown-grid {
    grid-template-columns: 1fr;
  }

  .dropdown-link.view-all-link {
    grid-column: span 1;
  }

  /* Hero */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hero-visual {
    min-height: 420px;
  }

  .hero-main-media {
    width: 100%;
  }

  .hero-main-media img {
    height: 420px;
  }

  /* Category Grid */
  .category-editorial-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cat-card-featured,
  .cat-card-wide,
  .cat-card-vertical,
  .cat-card-regular,
  .cat-card-third {
    grid-column: span 1;
    min-height: 380px;
  }

  /* Customizer */
  .customizer-layout {
    grid-template-columns: 1fr;
  }

  /* Factory Quad */
  .factory-quad-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Video USP */
  .video-usp-card {
    grid-template-columns: 1fr;
  }

  /* Methods & B2B */
  .methods-grid,
  .b2b-grid,
  .why-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Quote CTA Card */
  .quote-cta-card {
    grid-template-columns: 1fr;
  }

  /* Quote Form */
  .quote-layout {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-col.col-brand {
    grid-column: span 2;
  }
  .footer-col.col-contact {
    grid-column: span 2;
  }
}

/* ==========================================================================
   MOBILE PHONES & TABLETS (Max 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .site-header {
    height: 70px;
  }
  .nav-container {
    height: 70px;
  }
  .nav-menu {
    top: 70px;
    height: calc(100vh - 70px);
  }

  .nav-logo .logo-img {
    width: 160px;
  }

  .btn-nav {
    display: none; /* Hide top nav quote button on mobile to prevent clutter */
  }

  /* Trust Strip: Horizontal Scrollable on Mobile */
  .trust-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 0;
  }

  .trust-items-grid {
    display: flex;
    min-width: 720px;
    gap: 0;
  }

  .trust-item {
    flex: 0 0 160px;
    padding: 0 1.25rem;
  }

  /* Category Grid Mobile */
  .category-editorial-grid {
    grid-template-columns: 1fr;
  }
  .cat-card-featured,
  .cat-card-wide,
  .cat-card-vertical,
  .cat-card-regular,
  .cat-card-third {
    grid-column: span 1;
    min-height: 340px;
  }

  /* Process Timeline */
  .process-timeline {
    grid-template-columns: 1fr;
  }

  /* Grids */
  .methods-grid,
  .b2b-grid,
  .why-grid,
  .showcase-grid,
  .gallery-grid,
  .factory-quad-grid {
    grid-template-columns: 1fr;
  }

  .regions-grid {
    grid-template-columns: 1fr 1fr;
  }

  .social-strip-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Form Grid */
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-group.full-width {
    grid-column: span 1;
  }

  /* Low MOQ Banner */
  .low-moq-banner {
    grid-template-columns: 1fr;
  }

  /* Floating Card Overlap */
  .hero-float-card {
    position: static;
    margin-top: 1.5rem;
  }
  .hero-badge-float {
    top: 10px;
    right: 10px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-col.col-brand,
  .footer-col.col-contact {
    grid-column: span 1;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .legal-links {
    justify-content: center;
  }
}

/* ==========================================================================
   COMPACT MOBILE (Max 430px, 390px, 360px)
   ========================================================================== */
@media (max-width: 430px) {
  :root {
    --container-pad: 1rem;
  }

  .nav-logo .logo-img {
    width: 145px;
  }

  .whatsapp-label {
    display: none;
  }
  .nav-whatsapp-btn {
    padding: 0.5rem;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-ctas .btn {
    width: 100%;
  }

  .hero-main-media img {
    height: 340px;
  }

  .cta-pills {
    grid-template-columns: 1fr;
  }

  .cta-actions {
    flex-direction: column;
  }
  .cta-actions .btn {
    width: 100%;
  }

  .whatsapp-fab {
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
  }
  .whatsapp-fab svg {
    width: 24px;
    height: 24px;
  }

  .whatsapp-quick-popup {
    width: calc(100vw - 40px);
    right: -5px;
  }
}