/* ==========================================================================
   WebrixLab — responsive.css
   Every media query for the site lives in this one file.
   Load order: style.css (fluid clamp() scale) then responsive.css (layout switches).
   Verified at 1920 / 1440 / 1280 / 1024 / 900 / 768 / 600 / 430 / 390 / 360 / 320
   ========================================================================== */

/* ===== >= 1600px — let the layout breathe on large desktops ===== */
@media (min-width: 1600px) {
  :root { --container: 1360px; }
}

/* ===== <= 1180px — tighten the nav before it collides ===== */
@media (max-width: 1180px) {
  :root { --container: 1120px; }
  .nav__link { padding: 10px 10px; font-size: 14px; }
  .article__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 290px); }
}

/* ===== <= 1024px — tablets: header collapses, wide grids halve ===== */
@media (max-width: 1024px) {
  /* Header becomes the hamburger panel */
  .nav { display: none; }
  .hamburger { display: inline-flex; }
  .header__actions .btn { display: none; }

  .hero { padding: calc(var(--header-h) + clamp(40px, 6vw, 60px)) 0 clamp(48px, 6vw, 72px); }

  .section__head { flex-wrap: wrap; align-items: flex-start; gap: 16px; }
  .section__title { flex: 1 1 100%; }
  .section__desc { max-width: 58%; }
  .section__head .btn { margin-left: auto; }

  .logo-strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

  .services-showcase { grid-template-columns: minmax(0, 1fr); }
  .services-showcase__media img { aspect-ratio: 16 / 10; }
  .service-row { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 14px; padding: 22px 2px; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-left: 0; padding-left: 0; }

  .checklist { grid-template-columns: minmax(0, 1fr); }
  .process li { grid-template-columns: 60px minmax(0, 1fr); gap: 18px; }

  .post-featured { grid-template-columns: minmax(0, 1fr); }
  .post-featured__body { padding: 8px 18px 24px; }

  .article__layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cta__panel { flex-direction: column; align-items: flex-start; }
  .cta__badge { margin-left: 0; }

  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

/* ===== <= 900px — keep two-up cards but relax the section head ===== */
@media (max-width: 900px) {
  .section__desc { max-width: 100%; flex: 1 1 100%; order: 3; }
  .section__head .btn { order: 2; margin-left: 0; }
  .section__head { align-items: center; }
  .sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== <= 768px — phones/large phones: single column everywhere ===== */
@media (max-width: 768px) {
  :root { --radius-lg: 22px; }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .logo-strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

  .card { padding: 24px; }
  .quote-card { padding: 26px; }
  .price-card { padding: 26px; }
  .industry-card { min-height: 260px; }

  .form__row { grid-template-columns: minmax(0, 1fr); }
  .sidebar { grid-template-columns: minmax(0, 1fr); }

  .accordion__btn { font-size: 16px; padding: 20px 2px; gap: 12px; }
  .accordion__panel-inner { padding: 0 6px 22px 2px; font-size: 15px; }

  .cta__actions { flex-direction: column; align-items: stretch; }
  .cta__actions .btn { width: 100%; }

  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ===== <= 600px ===== */
@media (max-width: 600px) {
  .logo-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .pullquote__cite { margin-top: 20px; }
  .process li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 24px 0; }
  .process__num { padding-top: 0; }
  .team-card__body { text-align: left; }
}

/* ===== <= 430px — small phones (430 / 390 / 360) ===== */
@media (max-width: 430px) {
  .service-row { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .service-row .arrow-badge { display: none; }
  .service-row__num { padding-top: 4px; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .card { padding: 20px; }
  .quote-card { padding: 22px; }
  .price-card { padding: 22px; }
  .sidebar__box { padding: 22px; }
  .accordion__btn { gap: 10px; }
  .carousel__controls { gap: 12px; }
  .to-top { right: 14px; bottom: 14px; }
}

/* ===== <= 360px ===== */
@media (max-width: 360px) {
  .logo-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn { padding: 12px 20px; }
  .btn--sm { padding: 10px 16px; }
  .filter-btn { padding: 10px 16px; font-size: 14px; }
}

/* ===== <= 320px — smallest supported viewport ===== */
@media (max-width: 320px) {
  :root { --gutter: 14px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .logo-strip__list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .btn { font-size: 14px; }
}