/* =========================================================================
   WICKED WIRE — responsive.css
   Base styles in main.css are authored desktop-comfortable; these overrides
   collapse layouts for smaller screens. Mobile-first intent: the smallest
   layout is the safe default, larger screens get the multi-column grids.
   Breakpoints:  sm 480 · md 768 · lg 1024 · xl 1280
   ========================================================================= */

/* ---------- LARGE DESKTOP: widen container gutters ---------- */
@media (min-width: 1280px) {
  .ww-container { padding-inline: var(--ww-space-6); }
}

/* ---------- TABLET & DOWN (<= 1024px) ---------- */
@media (max-width: 1024px) {
  .ww-footer__top { grid-template-columns: 1fr 1fr; row-gap: var(--ww-space-7); }
  .ww-footer__brand { grid-column: 1 / -1; }
  .ww-two-col { grid-template-columns: 1fr; gap: var(--ww-space-6); }
  .ww-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .ww-related, .ww-post-grid, .ww-trust { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- MOBILE NAV BREAKPOINT (<= 1024px) ----------
   Raised from 900px: the primary nav now carries a top-level
   "Wicked Wire Home" item, so it collapses to the drawer earlier
   to avoid crowding on tablets. */
@media (max-width: 1024px) {
  .ww-nav, .ww-header__actions .ww-button-primary { display: none; }
  .ww-burger { display: grid; }
}

/* ---------- SMALL TABLET / LARGE PHONE (<= 768px) ---------- */
@media (max-width: 768px) {
  :root { --ww-header-h: 66px; }

  .ww-section { padding-block: var(--ww-space-8); }
  .ww-section-head { margin-bottom: var(--ww-space-6); }

  .ww-grid--2, .ww-grid--3, .ww-grid--4 { grid-template-columns: 1fr; }
  .ww-trust { grid-template-columns: 1fr; }
  .ww-checkgrid { grid-template-columns: repeat(2, 1fr); }
  .ww-field-row { grid-template-columns: 1fr; }

  .ww-related, .ww-post-grid { grid-template-columns: 1fr; }

  .ww-footer__top { grid-template-columns: 1fr 1fr; }
  .ww-footer__bottom { flex-direction: column; }

  .ww-process__step { grid-template-columns: 1fr; gap: var(--ww-space-3); }
  .ww-process__num { width: 44px; height: 44px; }

  .ww-hero__actions, .ww-cta-band__actions { flex-direction: column; }
  .ww-hero__actions .ww-button, .ww-cta-band__actions .ww-button { width: 100%; }

  .ww-card { padding: var(--ww-space-5); }
}

/* ---------- PHONE (<= 480px) ---------- */
@media (max-width: 480px) {
  .ww-container { padding-inline: var(--ww-space-4); }
  .ww-checkgrid { grid-template-columns: 1fr; }
  .ww-footer__top { grid-template-columns: 1fr; }
  .ww-mobilenav__link { font-size: var(--ww-fs-lg); }
  .ww-rate-row { flex-direction: column; gap: var(--ww-space-1); align-items: flex-start; }
}

/* ---------- MOTIF: lighten on small screens for performance ---------- */
@media (max-width: 768px) {
  .ww-hero__motif { opacity: 0.5; }
  .ww-wire--pulse.delay-3, .ww-wire--pulse.delay-4,
  .ww-node--pulse.delay-3, .ww-node--pulse.delay-4 { display: none; }
}

/* v3 responsive header/footer/hero refinements */
@media (max-width: 680px) {
  .ww-header .ww-logo img.ww-logo__mark,
  .ww-header .ww-logo > img,
  .ww-header .ww-logo .custom-logo {
    height: 38px;
    width: 38px;
  }
  .ww-footer__logo img {
    width: min(230px, 90vw);
  }
}