/* ==========================================================================
   BREAKPOINTS: 1440 | 1200 | 992 | 768 | 576 | 360
   ========================================================================== */

/* Max Container Widths & Scale */
@media (max-width: 1440px) {
  :root {
    --container-max-width: 1280px;
  }
}

@media (max-width: 1200px) {
  :root {
    --container-max-width: 960px;
  }
}

/* ==========================================================================
   TABLET PORTRAIT (992px)
   ========================================================================== */
@media (max-width: 992px) {
  :root {
    --container-max-width: 720px;
  }

  /* Header shift heights */
  .main-header {
    height: 70px; /* Tablet specified height */
    top: 45px;
  }
  
  .main-header.header-scrolled {
    top: 0;
  }

  /* Navigation overrides */
  .desktop-nav,
  .cta-quote-btn {
    display: none !important;
  }

  .hamburger-btn {
    display: flex;
  }

  /* Drawer position adjust */
  .mobile-menu-drawer {
    top: 0;
    padding-top: 115px;
    height: 100vh;
    z-index: 1000;
  }

  .main-header.header-scrolled ~ .mobile-menu-drawer,
  .main-header.header-scrolled .mobile-menu-drawer {
    top: 0;
    padding-top: 70px;
    height: 100vh;
  }

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

  .footer-col {
    grid-column: span 4;
  }

  .footer-col.col-info,
  .footer-col.col-products {
    grid-column: span 8;
  }

  /* Page title scales */
  .page-title {
    font-size: 2.75rem;
  }
}

/* ==========================================================================
   MOBILE LANDSCAPE (768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Top bar layout stack */
  .top-bar {
    height: auto;
    padding: var(--space-xs) 0;
    position: relative;
  }

  .top-bar-container {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xxs);
    text-align: center;
  }

  .top-bar-left,
  .top-bar-right {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
  }

  .top-bar-item,
  .made-in-india {
    font-size: 0.75rem;
  }

  /* Header adjustments due to dynamic top bar height on mobile */
  .main-header {
    position: sticky;
    top: 0;
    background-color: var(--color-white);
    box-shadow: var(--shadow-soft);
    border-bottom: 1px solid var(--color-border);
    height: 60px;
    z-index: 1001;
  }

  .main-header.header-scrolled {
    top: 0;
  }
  
  .mobile-menu-drawer {
    position: fixed;
    top: 0;
    padding-top: 120px !important;
    height: 100vh;
    z-index: 1000;
  }

  .main-header.header-scrolled ~ .mobile-menu-drawer {
    top: 0;
    padding-top: 120px !important;
    height: 100vh;
  }

  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }

  .footer-col,
  .footer-col.col-info,
  .footer-col.col-contact,
  .footer-col.col-products {
    grid-column: span 4;
  }
}

/* ==========================================================================
   MOBILE PORTRAIT (576px)
   ========================================================================== */
@media (max-width: 576px) {
  :root {
    --container-max-width: 100%;
  }

  .main-header {
    height: 65px; /* Mobile specified height */
  }

  .logo-img {
    height: 52px;
    max-height: 52px;
  }

  .page-header {
    padding-top: var(--space-xl);
    padding-bottom: 50px;
  }

  .page-title {
    font-size: 2.25rem;
  }

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

  .floating-btn {
    width: 44px;
    height: 44px;
    bottom: 24px;
  }

  .whatsapp-btn {
    left: 24px;
  }

  .scroll-to-top-btn {
    right: 24px;
  }

  .call-mobile-btn {
    left: 24px;
    bottom: 80px;
  }

  /* Legal Document Responsive Grid */
  main > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  aside[style*="position: sticky"] {
    position: relative !important;
    top: 0 !important;
  }
}

/* ==========================================================================
   SMALL MOBILE (360px)
   ========================================================================== */
@media (max-width: 360px) {
  .logo-text {
    font-size: 1.15rem;
  }
  
  .logo-icon {
    width: 24px;
    height: 24px;
  }
}