/* ==========================================================================
   GERA REALTY — Responsive Layer
   Mobile-first overrides layered on top of style.css desktop defaults.
   ========================================================================== */

/* ---------- ≤1200px : condense header nav gap, hero scale ---------- */
@media (max-width: 1200px) {
  .container-xl { padding-inline: 22px; }
  .hero h1 { font-size: 50px; }
  .main-nav { gap: 26px; }
  .lead-cta-inner { padding: 54px; gap: 40px; }
  .case-body { padding: 40px; }
}

/* ---------- ≤992px : tablet — stack major two-column layouts ---------- */
@media (max-width: 992px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-phone { display: none; }

  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero h1 { font-size: 42px; }
  .hero-form-card { max-width: 480px; margin-top: -24px; }
  .hero-lede { max-width: none; }

  .requirement-panel { margin-top: -40px; padding: 32px; }
  .req-form { grid-template-columns: repeat(2, 1fr); }
  .req-submit { grid-column: 1 / -1; width: 100%; }

  .trust-grid { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .trust-item:nth-child(3) { border-right: none; }

  .why-grid { grid-template-columns: 1fr; gap: 40px; }
  .why-image { aspect-ratio: 16/9; }

  .solutions-grid .sol-card:nth-child(1),
  .solutions-grid .sol-card:nth-child(2),
  .solutions-grid .sol-card:nth-child(3),
  .solutions-grid .sol-card:nth-child(4) { grid-column: span 6; }

  .property-grid { grid-template-columns: repeat(2, 1fr); }

  .location-explorer { grid-template-columns: 1fr; }
  .location-list { display: flex; overflow-x: auto; gap: 6px; padding: 14px; }
  .location-item { flex: 0 0 auto; padding: 12px 18px; font-size: 15px; }
  .location-item.is-active, .location-item:hover { transform: none; }
  .location-visual { min-height: 360px; }
  /* Scroll-pin is a desktop-only effect — below this breakpoint the list
     becomes a horizontal scroller, so pinning/scroll-linking, the sliding
     indicator and the progress rail are all disabled. */
  .location-scroll-pin { height: auto !important; }
  .location-scroll-pin .location-explorer { position: static; }
  .location-active-indicator, .location-progress-track { display: none; }

  .district-grid { grid-template-columns: repeat(2, 1fr); }
  .segment-grid { grid-template-columns: 1fr; }
  .explore-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }

  .timeline-zigzag { grid-template-columns: 1fr; gap: 40px; margin-top: 20px; margin-bottom: 20px; }
  .tz-connector-svg { display: none; }
  .tz-odd, .tz-even { margin-top: 0; margin-bottom: 0; flex-direction: column; }
  .tz-even .tz-node { margin-top: 0; margin-bottom: 20px; }
  .tz-node { margin-bottom: 20px; }
  .tz-content { height: auto; }

  .case-study { grid-template-columns: 1fr; }
  .case-media { min-height: 320px; }

  .testimonial-wrap { grid-template-columns: 1fr; gap: 36px; }

  .proof-grid { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }

  .insight-grid { grid-template-columns: repeat(2, 1fr); }

  .lead-cta-inner { grid-template-columns: 1fr; padding: 44px; }
  .lead-form { grid-template-columns: 1fr; }

  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .contact-form-wrap { padding: 32px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
}

/* ---------- ≤768px ---------- */
@media (max-width: 768px) {
  .utility-bar { font-size: 11px; }
  .utility-bar span:nth-child(3) { display: none; }

  .hero h1 { font-size: 36px; margin-block: 14px 16px; }
  .hero-lede { font-size: 16px; margin-bottom: 28px; }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn-gr { width: 100%; }

  .section-heading { font-size: 30px; }

  .property-grid { grid-template-columns: 1fr; }
  .district-grid { grid-template-columns: 1fr; }
  .explore-grid { grid-template-columns: 1fr; gap: 32px; }
  .explore-media { aspect-ratio: 16/10; }
  .insight-grid { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }

  .case-body { padding: 30px; }
  .case-facts { grid-template-columns: 1fr 1fr; }
  .case-body h2 { font-size: 28px; }

  .lead-cta h2 { font-size: 30px; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }

  .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .filter-chip { flex: 0 0 auto; }

  .office-filter-bar { padding: 20px; gap: 16px; }
  .office-filter-field { flex-basis: 100%; }
  .office-filter-reset { width: 100%; }
}

/* ---------- ≤576px : phones ---------- */
@media (max-width: 576px) {
  .container-xl { padding-inline: 18px; }

  .utility-bar span:nth-child(2) { display: none; }

  .header-inner { height: 100px; }
  .site-header.is-scrolled .header-inner { height: 76px; }
  .brand { font-size: 18px; }
  .brand .brand-mark { height: 76px; }
  .site-header.is-scrolled .brand .brand-mark { height: 56px; }
  .brand .brand-sub { display: none; }

  .hero { padding-top: 0; }
  .hero h1 { font-size: 29px; }
  .hero-form-card { padding: 26px 20px; max-width: none; }
  .hero-form-card h3 { font-size: 20px; }

  .requirement-panel { padding: 24px 18px; margin-top: 28px; border-radius: var(--radius-md); }
  .requirement-panel h2 { font-size: 21px; }
  .req-form { grid-template-columns: 1fr; }

  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item { border-right: none !important; }
  .trust-item .trust-num { font-size: 32px; }

  .benefit-row { gap: 16px; padding-block: 20px; }
  .benefit-content h3 { font-size: 18px; }

  .sol-card-body { padding: 22px; }
  .sol-card-body h3 { font-size: 22px; }

  .property-actions { flex-direction: column; }

  .location-info { padding: 22px; }
  .location-info h3 { font-size: 22px; }

  .tz-node { width: 64px; height: 64px; margin-bottom: 16px; }
  .tz-num { font-size: 20px; }
  .tz-even .tz-node { margin-bottom: 16px; }

  .case-facts { grid-template-columns: 1fr; }

  .testimonial-primary { padding: 28px; }
  .testimonial-quote { font-size: 19px; }

  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 36px; }
  .proof-num { font-size: 32px; }

  .lead-cta-inner { padding: 30px 22px; }
  .lead-cta h2 { font-size: 25px; }

  .contact-form-wrap { padding: 24px; }
  .contact-detail-icon { width: 40px; height: 40px; font-size: 16px; }

  .site-footer { padding-top: 60px; }
  .footer-grid { padding-bottom: 40px; }
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; gap: 12px 20px; }

  .floating-actions { right: 16px; bottom: 16px; }
  .fab { width: 50px; height: 50px; font-size: 21px; }

  .page-header { padding: 44px 0 44px; }
  .page-header h1 { font-size: 34px; }
  .included-grid-2x2 { grid-template-columns: 1fr; }
}

/* ---------- ≥1400px : large desktop, extra breathing room ---------- */
@media (min-width: 1400px) {
  .container-xl { max-width: 1400px; }
}

@media (min-width: 1600px) {
  .container-xl { max-width: 1480px; }
  .hero h1 { font-size: 62px; }
}

/* ---------- Prevent horizontal overflow globally ----------
   overflow-x: clip (not hidden) — hidden implicitly forces overflow-y:auto,
   which turns body/html into their own scroll container and silently
   breaks position:sticky on the header. clip avoids that side effect. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }
.property-media img, .why-image img, .sol-card img,
.district-media img, .segment-card img, .case-media img, .insight-media img,
.location-visual img { height: 100%; }