/* =====================================================================
   Responsive — tablet & mobile, hardened down to 360px.
   Replaces the old responsive.css entirely.
   ===================================================================== */

/* ---- Global safety (kills sideways scroll, keeps media in bounds) ---- */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; }


/* =====================================================================
   TABLET  (≤ 1080px)
   ===================================================================== */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-ring { order: -1; margin-top: 20px; }
  #ringSvg { width: min(300px, 70%); }
  .hero-ctas, .hero-sub { justify-content: center; margin-left: auto; margin-right: auto; }
  .hero-socials { display: none; }

  .split, .plan-grid, .loc-grid, .tv-grid, .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .float-card { position: static; display: inline-block; margin: 14px 10px 0 0; }
  .split-media { text-align: center; }

  .am-wrap { grid-template-columns: 1fr; }
  .am-slider .swiper-slide img { min-height: 340px; }
  .am-panel { padding: 40px 24px; }

  .invest-rail { grid-template-columns: 1fr 1fr; }
  .plot-tabs { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .stats-row { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}


/* =====================================================================
   MOBILE NAV  (≤ 900px)  — hamburger appears here so tablets get it too
   ===================================================================== */
@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
  .head-inner { height: 68px; gap: 14px; }
  .head-inner > .btn { display: none; }            /* hide desktop CTA */

  .burger {
    display: block; margin-left: auto;
    position: relative; z-index: 210;
  }

  /* Slide-down panel below the header, full width, always on top */
  .head-nav {
    position: fixed; top: 68px; left: 0; right: 0;
    z-index: 195;
    display: flex; flex-direction: column; gap: 0; margin: 0;
    padding: 8px 24px 22px;
    background: rgba(24, 24, 24, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45);
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    transform: translateY(-125%);
    transition: transform 0.32s ease;
  }
  .head-nav.open { transform: translateY(0); }
  .head-nav a {
    padding: 15px 2px; font-size: 1rem;
    border-bottom: 1px solid rgba(247, 243, 234, 0.09);
  }
  /* Give the header a solid backdrop while the menu is open */
  .site-head:has(.head-nav.open) {
    background: rgba(29, 29, 29, 0.97);
    backdrop-filter: blur(14px);
  }
}


/* =====================================================================
   PHONE  (≤ 720px)
   ===================================================================== */
@media (max-width: 720px) {
  .section { padding: 60px 0; }

  .hero { min-height: 92svh; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .invest-rail { grid-template-columns: 1fr; }
  .m-item { width: 280px; }
  .m-tall { width: 230px; }
  .price-strip { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; }

  /* Footer CTA buttons — stack full width so they never overflow */
  .footer-cta-btns { flex-direction: column; align-items: stretch; gap: 10px; }
  .footer-cta-btns .btn { width: 100%; }

  /* ---- Floating action buttons → even bottom bar ---- */
  .fabs {
    left: 10px; right: 10px; bottom: 10px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  }
  .fab {
    min-height: 52px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; border-radius: 14px; font-size: 0.8rem;
  }
  .fab svg { width: 22px; height: 22px; }

  /* Make room so the bar never covers footer text */
  .footer-legal { padding-bottom: 92px; }
}


/* =====================================================================
   SMALL PHONE  (≤ 480px)  — verified usable at 360px
   ===================================================================== */
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .section { padding: 48px 0; }

  /* Hero copy fits and CTAs stack full width */
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas .btn { width: 100%; }
  .hero-proof { font-size: 0.8rem; }

  /* One-column everywhere that was still two */
  .stats-row { grid-template-columns: 1fr 1fr; gap: 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }

  /* Amenity + facts tiles to a single column */
  .vk-am-grid { grid-template-columns: 1fr; }
  .vk-feature { grid-column: span 1; }
  .vk-facts-grid { grid-template-columns: 1fr; }

  /* Gallery frames a touch smaller so more peeks in */
  .vk-shot { width: 240px; height: 180px; }

  /* Newsletter input + button stack */
  .news-form { flex-direction: column; align-items: stretch; gap: 10px; }
  .news-form .btn { width: 100%; }

  /* Popup card fits the viewport */
  .popup-card { width: calc(100vw - 24px); max-width: 100%; padding: 26px 20px; }

  /* Tighten big display headings so they don't overflow at 360 */
  h1.serif, .hero h1 { font-size: clamp(2rem, 11vw, 2.6rem); }

  /* Keep the fab bar comfortable on the narrowest screens */
  .fab { min-height: 50px; }
  .fab svg { width: 20px; height: 20px; }
}