/* responsive.css — Horizon Living Realty
   Mobile-first. Four breakpoints only: 480 / 768 / 1024 / 1440.
   Loaded after style.css, so unprefixed rules here set the true mobile
   default and progressively restore the desktop layout at each breakpoint.
*/

/* ── Base (< 480px) ────────────────────────────────────────────────── */
.nav-menu {
  position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); height: 100vh;
  background: var(--color-navy); flex-direction: column; align-items: flex-start;
  justify-content: flex-start; gap: 0; padding: 5.5rem var(--gutter) var(--space-md);
  transform: translateX(100%); transition: transform var(--transition);
  overflow-y: auto;
}
html.is-js .nav-menu.is-open { transform: translateX(0); }
html:not(.is-js) .nav-menu { position: static; width: auto; height: auto; transform: none; flex-direction: row; padding: 0; background: none; }
.nav-menu li { width: 100%; border-bottom: 1px solid var(--color-border-navy); }
.nav-link { display: block; padding: 0.9rem 0; }
.nav-cta { display: inline-block; margin-top: 1rem; }
.nav-toggle { display: flex; }
html:not(.is-js) .nav-toggle { display: none; }

.hero { min-height: 100vh; padding-top: 5.5rem; }
.hero-title { font-size: clamp(2.25rem, 10vw, 3rem); }
.hero-search { flex-direction: row; flex-wrap: wrap; padding-bottom: 1rem; }
.hs-tab-label { padding: 0.75rem 0.6rem; font-size: var(--text-xs); flex: 1 1 auto; justify-content: center; }
.hs-panel { flex-direction: column; align-items: stretch; }
.hs-field { flex: 1 1 auto; }
.hs-submit { justify-content: center; width: 100%; }

.community-row { grid-template-columns: 1fr; }
.property-grid { grid-template-columns: 1fr; }

.standard-inner { grid-template-columns: 1fr; }
.standard-grid { grid-template-columns: 1fr; }

.experience-inner { grid-template-columns: 1fr; }
.stat-row { grid-template-columns: repeat(2, 1fr); }

.footer-inner { grid-template-columns: 1fr; gap: var(--space-md); }
.footer-bottom { flex-direction: column; align-items: flex-start; }

.page-head-split .page-head-grid { grid-template-columns: 1fr; }
.page-head-media { order: -1; }

.process-row { grid-template-columns: 1fr; }
.comm-detail, .comm-detail-reverse { grid-template-columns: 1fr; direction: ltr; }
.dev-grid { grid-template-columns: 1fr; }
.resource-list { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.form-row-2 { flex-direction: column; gap: 0.6rem; }
.careers-inner { flex-direction: column; align-items: flex-start; }
.press-outlet { flex: 0 0 auto; }

.testimonial-text { font-size: var(--text-base); }

/* ── 480px — large mobile ─────────────────────────────────────────── */
@media (min-width: 480px) {
  .community-row { grid-template-columns: repeat(2, 1fr); }
  .property-grid { grid-template-columns: repeat(2, 1fr); }
  .standard-grid { grid-template-columns: repeat(2, 1fr); }
  .dev-grid { grid-template-columns: repeat(2, 1fr); }
  .resource-list { grid-template-columns: repeat(2, 1fr); }
  .hs-tab-label { flex: 0 0 auto; justify-content: flex-start; padding: 0.95rem 1.6rem; font-size: var(--text-sm); }
  .hs-panel { flex-direction: row; flex-wrap: wrap; }
  .hs-field { flex: 1 1 140px; }
  .hs-submit { width: auto; }
}

/* ── 768px — tablet ───────────────────────────────────────────────── */
@media (min-width: 768px) {
  .community-row { grid-template-columns: repeat(3, 1fr); }
  .property-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .page-head-split .page-head-grid { grid-template-columns: 1fr 1fr; }
  .page-head-media { order: 0; }
  .process-row { grid-template-columns: repeat(2, 1fr); }
  .comm-detail { grid-template-columns: 1fr 1fr; }
  .comm-detail-reverse { direction: rtl; }
  .comm-detail-reverse > * { direction: ltr; }
  .dev-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1.3fr; }
  .form-row-2 { flex-direction: row; }
  .standard-inner { grid-template-columns: 1fr 1.4fr; }
}

/* ── 1024px — desktop ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  .nav-menu {
    position: static; width: auto; height: auto; transform: none; flex-direction: row;
    align-items: center; gap: var(--space-md); padding: 0; background: none; overflow: visible;
  }
  .nav-menu li { width: auto; border-bottom: 0; }
  .nav-link { padding-block: 0.25rem; }

  .community-row { grid-template-columns: repeat(5, 1fr); }
  .property-grid { grid-template-columns: repeat(4, 1fr); }
  .standard-grid { grid-template-columns: repeat(2, 1fr); }
  .experience-inner { grid-template-columns: 1.3fr 1fr; }
  .stat-row { grid-template-columns: repeat(4, 1fr); }
  .footer-inner { grid-template-columns: 1.6fr repeat(3, 1fr) 1.4fr; }
  .process-row { grid-template-columns: repeat(4, 1fr); }
  .resource-list { grid-template-columns: repeat(3, 1fr); }
}

/* ── 1440px — large desktop ───────────────────────────────────────── */
@media (min-width: 1440px) {
  .hero-title { font-size: var(--text-hero); }
}