/* ==========================================================================
   File: responsive.css
   WETCO Synergies — Global Responsive Overrides
   Component-specific responsive rules live inside their own CSS files.
   This file handles global spacing, container, and typography scaling
   across breakpoints: Desktop / Laptop / Tablet / Mobile.
   ========================================================================== */

/* -----------------------------------------
   1. LAPTOP (max-width: 1200px)
----------------------------------------- */
@media (max-width: 1200px) {
  :root {
    --container-width: 1080px;
  }
}

/* -----------------------------------------
   2. TABLET LANDSCAPE (max-width: 992px)
----------------------------------------- */
@media (max-width: 992px) {
  :root {
    --section-padding: 76px;
  }

  .section {
    padding-block: var(--section-padding);
  }

  .page-banner {
    padding-top: 150px;
    padding-bottom: 70px;
  }

  .cta-band {
    margin-inline: 20px;
  }
}

/* -----------------------------------------
   3. TABLET PORTRAIT (max-width: 768px)
----------------------------------------- */
@media (max-width: 768px) {
  :root {
    --section-padding: 60px;
  }

  .container {
    padding-inline: 20px;
  }

  .section-header {
    margin-bottom: 40px;
  }

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

  .page-banner {
    padding-top: 130px;
    padding-bottom: 56px;
    text-align: center;
  }

  .breadcrumb {
    justify-content: center;
  }
}

/* -----------------------------------------
   4. MOBILE (max-width: 480px)
----------------------------------------- */
@media (max-width: 480px) {
  html {
    font-size: 15px;
  }

  .container {
    padding-inline: 18px;
  }

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

  .btn {
    padding: 13px 24px;
    font-size: 0.88rem;
  }

  .eyebrow {
    font-size: 0.72rem;
  }

  .back-to-top {
    width: 42px;
    height: 42px;
    right: 16px;
    bottom: 16px;
  }
}

/* -----------------------------------------
   5. SMALL MOBILE (max-width: 360px)
----------------------------------------- */
@media (max-width: 360px) {
  .hero-quickstats {
    flex-direction: column;
    gap: 16px;
  }

  .cta-band-actions,
  .hero-buttons {
    width: 100%;
  }

  .cta-band-actions .btn,
  .hero-buttons .btn {
    width: 100%;
  }
}

/* -----------------------------------------
   6. PRINT (bonus — clean printed contact/quote pages)
----------------------------------------- */
@media print {
  .main-nav,
  .topbar,
  .back-to-top,
  .site-footer,
  .cta-band,
  .preloader {
    display: none !important;
  }
}