/* ==========================================================================
   Progate — responsive.css
   Breakpoints: 1440 / 1200 / 992 / 768 / 576 / 360 (max-width, mobile-down)
   ========================================================================== */

/* --------------------------------------------------------------------------
   >= 1440px — widen the container slightly on large screens
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root { --container: 1750px; }
}

/* --------------------------------------------------------------------------
   <= 1200px — tighten grids
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .nav__list { gap: 26px; }
  .nav__menu { gap: 28px; }

  .services__grid { grid-template-columns: repeat(3, 1fr); }
  .products__grid { grid-template-columns: repeat(3, 1fr); }
  .why__grid { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }

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

/* --------------------------------------------------------------------------
   <= 992px — tablet: collapse nav to mobile menu, stack heavy grids
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  /* Mobile navigation */
  .nav__toggle { display: flex; }
  .nav__cta { display: none; }

  .nav__menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 82vw);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: calc(var(--nav-h) + 20px) 28px 32px;
    background: #fff;
    box-shadow: -12px 0 40px rgba(16, 24, 40, 0.12);
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
    overflow-y: auto;
  }
  .nav__menu.is-open { transform: translateX(0); }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .nav__link {
    padding: 14px 4px;
    border-bottom: 1px solid var(--color-border);
  }
  .nav__link.is-active::after { display: none; }
  .nav__cta-mobile {
    display: inline-flex;
    margin-top: 24px;
    width: 100%;
  }

  /* Backdrop when menu open */
  body.nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(16, 24, 40, 0.45);
  }
  body.nav-open { overflow: hidden; }
  .nav__menu { z-index: 101; }
  .nav__toggle { z-index: 102; position: relative; }

  /* Hero → single column, media landing */
  .hero__inner { grid-template-columns: 1fr; }
  .hero__content { order: 2; }
  .hero__media { order: 1; max-width: 560px; margin-inline: auto; }
  .hero__desc { max-width: none; }

  /* Choose service → stack cards */
  .choose__grid { grid-template-columns: 1fr; }

  /* Services / why → two columns */
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }

  /* How it works → 2x2, drop connecting line */
  .how__steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .how__steps::before { display: none; }

  /* Products → 3 cols */
  .products__grid { grid-template-columns: repeat(3, 1fr); }

  /* Quote form → 2 cols */
  .form-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   <= 768px — small tablet / large phone
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root { --gutter: 18px; }

  /* Top bar → wrap, hide long address text on very tight space */
  .topbar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .topbar__address { flex-wrap: wrap; gap: 4px 12px; }
  .topbar__contact { gap: 20px; }

  /* Service cards → stack body over media */
  .service-card { grid-template-columns: 1fr; }
  .service-card__media { padding: 0 clamp(28px, 4vw, 40px) clamp(28px, 4vw, 40px); }

  /* Products → 2 cols */
  .products__grid { grid-template-columns: repeat(2, 1fr); }

  /* CTA → stack */
  .cta__card { flex-direction: column; align-items: flex-start; }
  .cta__actions { width: 100%; }
  .cta__actions .btn { flex: 1; }

  /* Footer → 2 cols */
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   <= 576px — phone
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
  .btn { --btn-px: 24px; width: 100%; }
  .hero__actions .btn,
  .services__action .btn,
  .products__action .btn { width: 100%; }
  .services__action .btn,
  .products__action .btn { max-width: 320px; }

  .hero__features { gap: 20px; }
  .hero__feature { width: calc(50% - 10px); }

  /* Single-column grids */
  .services__grid { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; row-gap: 32px; }
  .form-grid { grid-template-columns: 1fr; }

  /* Footer single column */
  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer__legal { gap: 24px; }

  .section-head { margin-bottom: 32px; }
}

/* --------------------------------------------------------------------------
   <= 360px — small phone
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .hero__title { font-size: 2.125rem; }
  .hero__feature { width: 100%; }
  .products__grid { grid-template-columns: 1fr; }
  .products__grid .product-card__media { max-width: 260px; margin-inline: auto; width: 100%; }
  .topbar__contact { flex-direction: column; align-items: flex-start; gap: 10px; }
}