/* ==========================================================================
   SALOSPORTS - Responsive Layouts & Breakpoints
   ========================================================================== */

/* Large Desktops (1440px - 1920px+) */
@media (min-width: 1440px) {
  :root {
    --container-max: 1420px;
  }
}

/* Medium Desktops & Laptops (1025px - 1280px) */
@media (max-width: 1240px) {
  .site-header .nav-menu {
    gap: 0.75rem;
  }

  .nav-link {
    font-size: 0.74rem;
    padding: 0.3rem 0.1rem;
  }

  .btn-whatsapp-header span {
    display: none; /* Icon only on medium screens to keep header ultra-clean */
  }

  .btn-whatsapp-header {
    padding: 0.45rem 0.65rem;
  }

  .categories-grid .category-card.col-8 { grid-column: span 12; }
  .categories-grid .category-card.col-4 { grid-column: span 6; }
  .categories-grid .category-card.col-6 { grid-column: span 6; }
  .categories-grid .category-card.col-3 { grid-column: span 6; }
  
  .process-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-top-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }
}

/* Breakpoint for Tablets & Small Laptops (max-width: 1080px) */
@media (max-width: 1080px) {
  .site-header .nav-menu {
    display: none;
  }

  .hamburger-btn {
    display: flex;
  }

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

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

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

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

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

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .stat-box:nth-child(2)::after {
    display: none;
  }

  .quality-tabs-container {
    grid-template-columns: 1fr;
  }

  .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .product-detail-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
  :root {
    --section-py: 3.5rem;
  }

  .announcement-bar {
    padding: 0.35rem 0;
  }

  .marquee-item {
    font-size: 0.68rem;
    gap: 0.9rem;
    padding: 0 0.9rem;
  }

  .site-header {
    padding: 0.5rem 0;
  }

  .brand-logo img.logo-img {
    height: 28px;
    max-width: 140px;
  }

  .nav-actions .btn-primary {
    display: none; /* Clean look with WhatsApp + Hamburger on mobile */
  }

  .hero-section {
    padding-top: 6rem;
    padding-bottom: 4.5rem;
    min-height: 88vh;
  }

  .hero-meta-bar {
    position: relative;
    bottom: auto;
    margin-top: 2.5rem;
  }

  .hero-meta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .categories-grid .category-card.col-8,
  .categories-grid .category-card.col-4,
  .categories-grid .category-card.col-6,
  .categories-grid .category-card.col-3 {
    grid-column: span 12;
    min-height: 300px;
  }

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

  .benefits-grid,
  .process-steps-grid,
  .custom-matrix-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .stat-box::after {
    display: none !important;
  }

  .stat-box:not(:last-child) {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.25rem;
  }

  .oem-features-grid {
    grid-template-columns: 1fr;
  }

  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 0.65rem;
  }

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

  .product-quick-actions {
    opacity: 1;
    transform: translateY(0);
  }

  .lightbox-nav-btn {
    display: none;
  }

  .cta-buttons-wrap {
    flex-direction: column;
    width: 100%;
  }

  .cta-buttons-wrap .btn {
    width: 100%;
  }
}

/* Extra Small Screens (max-width: 430px) */
@media (max-width: 430px) {
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

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

  .category-info {
    padding: 1.25rem;
  }

  .category-title {
    font-size: 1.5rem;
  }

  .benefit-card,
  .custom-matrix-card,
  .testimonial-card,
  .rfq-form-card {
    padding: 1.25rem 1rem;
  }
}