/**
 * S.S. Enterprises - Responsive Breakpoints
 * Tested at: 1920, 1600, 1440, 1280, 1024, 768, 600, 480, 390, 360px
 */

/* ==================================================
   1. LAPTOP & SMALL DESKTOP (<= 1280px)
   ================================================== */
@media (max-width: 1280px) {
  .products-grid {
    gap: 1.5rem;
  }
  .services-grid {
    gap: 1.25rem;
  }
  .why-choose-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .process-grid::before {
    display: none; /* remove connector line if too cramped */
  }
}

/* ==================================================
   2. TABLET LANDSCAPE & PORTRAIT (<= 1024px)
   ================================================== */
@media (max-width: 1024px) {
  .nav-desktop,
  .header-actions .btn-quote-desktop {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .about-image-wrapper {
    max-height: 480px;
  }

  .experience-badge {
    bottom: -15px;
    right: 15px;
    padding: 1.25rem 1.5rem;
  }

  .featured-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

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

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

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

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

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

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

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

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

/* ==================================================
   3. TABLET PORTRAIT & MOBILE (<= 768px)
   ================================================== */
@media (max-width: 768px) {
  :root {
    --header-height: 76px;
    --header-height-scrolled: 68px;
  }

  /* Add clearance for mobile fixed bottom bar */
  body {
    padding-bottom: 70px;
  }

  .site-logo img {
    height: 40px;
  }

  .hero-section {
    min-height: 740px;
    padding-top: 6rem;
    padding-bottom: 4rem;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

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

  .floating-actions {
    display: none; /* Replaced by bottom bar */
  }

  .mobile-bottom-bar {
    display: flex;
  }

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

  .why-choose-grid {
    grid-template-columns: 1fr;
  }

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

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

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

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ==================================================
   4. MOBILE DEVICES (<= 600px)
   ================================================== */
@media (max-width: 600px) {
  .products-grid {
    grid-template-columns: 1fr;
  }

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

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

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

  .stat-item:nth-child(odd)::after {
    display: none;
  }

  .stat-item {
    padding: 0 0.5rem;
  }

  .experience-badge {
    position: static;
    margin-top: 1.25rem;
    width: 100%;
  }

  .about-highlights {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .enquiry-form-card {
    padding: 1.5rem 1.25rem;
  }

  .map-container {
    height: 320px;
  }
}

/* ==================================================
   5. COMPACT MOBILE SCREENS (360px - 390px)
   ================================================== */
@media (max-width: 390px) {
  .site-logo img {
    height: 34px;
  }

  .hero-section {
    min-height: 700px;
  }

  .stat-number {
    font-size: 2.2rem;
  }

  .stat-label {
    font-size: 0.85rem;
  }

  .mobile-bottom-item {
    font-size: 0.78rem;
    padding: 0.5rem 0.25rem;
  }

  .btn {
    padding: 0.85rem 1.4rem;
    font-size: 0.875rem;
  }
}