/* Floor Plans / Residences — scoped entirely to .residences-section.
   A tabbed floor-plan viewer inside a light floating card (same convention
   as .hero-offer-card popping off the dark hero). Master Plan is public
   info and renders sharp; every unit configuration renders blurred behind
   a "View Floor Plan" CTA that opens the enquiry form. Pricing lives in
   its own standalone section — see pricing.css. */

/* ---------- Centered section intro (mirrors .pricing-intro, kept small
   and quiet so it doesn't overshadow the viewer below it) ---------- */
.floorplan-intro { max-width: 560px; margin: 0 auto 44px; text-align: center; }
.floorplan-intro .section-index { align-items: center; margin-bottom: 18px; }
.floorplan-intro .section-index span:last-child { font-size: 11px; }
.floorplan-intro .kicker { color: var(--coral-glow); font-size: 12px; }
.floorplan-intro h2 { font-size: clamp(28px, 2.9vw, 38px); margin: 0 0 8px; color: var(--ivory); }
.floorplan-tagline { margin: 0; font-size: 13px; line-height: 1.7; color: rgba(255,249,242,.6); }
.floorplan-description-wrap { max-width: 1040px; margin: 0 auto 44px; text-align: center; }
.floorplan-description { margin: 0; font-size: 14px; line-height: 1.8; color: rgba(255,249,242,.72); }

/* ---------- Floor plan tabbed viewer ---------- */
.floorplan-viewer { max-width: 900px; margin: 0 auto 56px; }
.floorplan-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 28px; }
.floorplan-tab { padding: 12px 20px; border: 1px solid rgba(255,249,242,.28); border-radius: 30px; background: transparent; color: rgba(255,249,242,.72); font: 700 10px var(--sans); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.floorplan-tab:hover { border-color: var(--coral); color: var(--ivory); }
.floorplan-tab.active { background: var(--coral); border-color: var(--coral); color: var(--ivory); }

.floorplan-stage { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; align-items: stretch; background: var(--ivory); border-radius: 16px; padding: 32px; box-shadow: 0 30px 70px rgba(26,14,19,.35); }

.floorplan-image-wrap { position: relative; width: 100%; aspect-ratio: 450 / 288; border-radius: 10px; overflow: hidden; border: 1px solid rgba(59,36,48,.14); background: #f3ece6; }
.floorplan-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.floorplan-image-wrap.is-blurred .floorplan-image { object-fit: cover; filter: blur(9px) saturate(1.05); transform: scale(1.04); }
.floorplan-veil { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(59,36,48,.18); }
.floorplan-view-btn { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 30px; padding: 14px 26px; background: var(--ocean); color: var(--ivory); font: 800 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .2s, transform .2s var(--ease-out); }
.floorplan-view-btn:hover { background: var(--coral); }
.floorplan-view-btn span { color: var(--aqua); }

.floorplan-info { display: flex; flex-direction: column; min-width: 0; }
.floorplan-caption { margin: 0 0 20px; font: 400 28px var(--serif); color: var(--ocean); }
.floorplan-specs { border-top: 1px solid rgba(59,36,48,.14); }
.floorplan-spec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid rgba(59,36,48,.14); }
.floorplan-spec-row span { font: 800 9px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(59,36,48,.55); }
.floorplan-spec-row b { font: 400 20px var(--serif); font-weight: 400; color: var(--ocean); }
.floorplan-spec-row b sup { font-size: 11px; }
.floorplan-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.floorplan-actions .button { width: 100%; }

/* ---------- Section-level footer CTA strip ---------- */
.residence-footer-cta { margin-top: 46px; padding-top: 30px; border-top: 1px solid rgba(255,249,242,.16); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.footer-cta-line { display: flex; align-items: center; gap: 12px; }
.footer-cta-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255,249,242,.3); color: var(--aqua); }
.footer-cta-icon svg { width: 15px; height: 15px; }
.footer-cta-line p { margin: 0; font-size: 12.5px; color: rgba(255,249,242,.75); }

@media (max-width: 1000px) {
  .floorplan-stage { grid-template-columns: 1fr; }
  .floorplan-image-wrap { aspect-ratio: 450 / 260; }
}

@media (max-width: 650px) {
  .floorplan-intro { margin-bottom: 44px; }
  .floorplan-viewer { margin-bottom: 44px; }
  .floorplan-tabs { gap: 8px; margin-bottom: 22px; }
  .floorplan-tab { padding: 9px 15px; font-size: 9px; }
  .floorplan-stage { padding: 20px; gap: 22px; border-radius: 12px; }
  .floorplan-caption { font-size: 22px; margin-bottom: 16px; }
  .floorplan-view-btn { padding: 12px 20px; }
  .residence-footer-cta { margin-top: 36px; padding-top: 24px; justify-content: flex-start; }
  .residence-footer-cta .button { width: 100%; }
}