/* ============================================================
   Emerald 87 — Responsive Breakpoints
   ============================================================ */

/* ── Tablet ── */
@media (max-width: 1024px) {
  :root {
    --space-xl:  40px;
    --space-2xl: 80px;
  }

  .overview__inner,
  .floorplan__inner,
  .location__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .overview__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  :root {
    --space-xl:  24px;
    --space-2xl: 64px;
  }

  /* Nav */
  .nav { padding: 16px 24px; }
  .nav__links { display: none; }

  /* Hero */
  .hero__title { letter-spacing: 0; }
  .hero__actions { flex-direction: column; align-items: center; }
  .btn { width: 100%; max-width: 300px; text-align: center; }

  /* Stats */
  .overview__stats { grid-template-columns: repeat(2, 1fr); }

  /* Floorplan */
  .floorplan__inner { grid-template-columns: 1fr; }

  /* Contact */
  .contact__form .form__input,
  .contact__form .form__select,
  .contact__form .form__btn { font-size: 14px; }

  /* Footer */
  .footer {
    flex-direction: column;
    padding: 40px 24px;
    text-align: center;
  }
  .footer__disclaimer { font-size: 10px; }

  /* Popup */
  .popup__box { padding: 36px 24px; }
  .popup__title { font-size: 26px; }

  /* Pills */
  .amenity-pills { gap: 8px; }
  .pill { padding: 10px 16px; font-size: 10px; }
}

/* ── Small Mobile ── */
@media (max-width: 400px) {
  .hero__eyebrow { font-size: 9px; letter-spacing: .15em; }
  .section-label  { font-size: 9px; }
  .nav__cta {
    padding: 10px 15px;
    border: var(--border-gold);
    color: var(--color-gold);
    font-size: var(--text-xs);
    letter-spacing: .15em;
    text-transform: uppercase;
    background: transparent;
    transition: all var(--transition-base);
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .fade-up { transition: none; opacity: 1; transform: none; }
  .hero__scroll-line { animation: none; }
  .brochure-img-wrap:hover img { transform: none; }
  html { scroll-behavior: auto; }
}