/* Aspen Appliance Services — responsive refinements.
   All base styling is inline on the elements; this file only contains
   narrow-viewport overrides that cannot be expressed inline (@media). */

/* ---------- tablet and below ---------- */
@media (max-width: 1024px) {
  [data-r="hero"] { grid-template-columns: 1fr !important; gap: 40px !important; padding: 56px 20px 96px !important; }
  [data-r="collagewrap"] { height: 440px !important; }
  [data-r="two"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  [data-r="steps"] { flex-direction: column !important; gap: 24px !important; }
  [data-r="steparrow"] { transform: rotate(90deg); padding-top: 0 !important; align-self: flex-start; margin-left: 18px; }
  [data-r="stats"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-content: start !important; }
  [data-r="marquee"] { gap: 48px !important; }
  [data-r="mapframe"] { height: 760px !important; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  [data-r="topbar"] { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; font-size: 13px !important; padding: 9px 20px !important; }
  [data-r="topbar"] > div { gap: 14px !important; }

  [data-r="collagewrap"] { height: 380px !important; }
  [data-r="collage"] { grid-template-rows: 1fr 1.15fr !important; grid-template-columns: 1fr 1fr !important; }
  [data-r="collage"] > *:nth-child(1) { grid-area: 1 / 1 / 2 / 2 !important; }
  [data-r="collage"] > *:nth-child(2) { grid-area: 1 / 2 / 2 / 3 !important; }
  [data-r="collage"] > *:nth-child(3),
  [data-r="collage"] > *:nth-child(4) { display: none !important; }
  [data-r="collage"] > *:nth-child(5) { grid-area: 2 / 1 / 3 / 3 !important; }

  [data-r="svcrow"] { grid-template-columns: 38px minmax(0, 1fr) 26px !important; gap: 12px !important; padding: 20px 4px !important; row-gap: 4px !important; }
  [data-r="svcrow"] > *:nth-child(3) { grid-column: 2 / 4 !important; text-align: left !important; font-size: 14px !important; }
  [data-r="svcrow"] > *:nth-child(4) { grid-area: 1 / 3 / 2 / 4 !important; align-self: center !important; }

  [data-r="band3"] { grid-template-columns: 1fr 1fr !important; }
  [data-r="band3"] > *:nth-child(3) { grid-column: 1 / 3 !important; }

  [data-r="tcard"] { width: min(340px, 82vw) !important; padding: 22px 22px !important; }
  [data-r="stats"] { gap: 20px 24px !important; }
  [data-r="mapframe"] { height: 640px !important; }
  [data-r="form2"] { grid-template-columns: 1fr !important; }
  [data-r="pad"] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-r="cta"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* generic containers: tighten the 24px gutters and heavy vertical rhythm */
  [data-r="sec"] { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 480px) {
  [data-r="collagewrap"] { height: 320px !important; }
  [data-r="tcard"] { width: 78vw !important; }
  [data-r="mapframe"] { height: 560px !important; }
}

/* ---------- navigation: desktop bar vs. compact mobile bar ---------- */
@media (max-width: 1080px) and (min-width: 901px) {
  [data-r="nav"] { gap: 18px !important; font-size: 15.5px !important; }
  [data-r="navlogo"] img { height: 78px !important; }
  [data-r="navlogo"] { margin: -8px 0 -26px !important; }
  [data-r="nav"] .dd > div { width: 460px !important; }
}

@media (max-width: 900px) {
  /* the utility strip and the full desktop nav are replaced by the compact bar */
  [data-r="topbar"] { display: none !important; }
  [data-r="navrow"] { display: none !important; }
  [data-r="mnav"] { display: flex !important; }
}

@media (max-width: 620px) {
  [data-r="mphone"] { display: none; }
  [data-r="mnav"] { padding: 8px 14px !important; gap: 8px !important; }
  [data-r="mnav"] > a img { height: 46px !important; }
  [data-r="mnav"] a[aria-label^="Call"] { padding: 0 !important; width: 42px; justify-content: center; }
}

@media (max-width: 400px) {
  [data-r="mnav"] > a img { height: 40px !important; }
  [data-r="mbook"] { padding: 0 12px !important; font-size: 14px !important; }
  [data-r="mnav"] > div { gap: 6px !important; }
}