/* Floor Plans / Residences — scoped entirely to .residences-section.
   Reuses existing tokens (--ocean, --coral, --aqua, --ivory, --serif,
   --sans, --ease-out) and existing decorative classes (.residence-panel
   sheen sweep, .plan-graphic/.plan-ring orbit) already defined in
   styles.css/motion.css so this section keeps the site's exact motion
   language for free. No other section's markup or styles are touched. */

.residence-intro-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: center; margin-top: 70px; }
.residence-eyebrow { color: var(--coral) !important; margin-bottom: 14px; }
.residence-title h2 { margin-bottom: 18px; }

.residence-plan-motif { align-self: center; justify-self: end; width: min(100%, 360px); }
.residence-plan-motif .plan-graphic { height: 210px; }

.residence-list-wrap { margin-top: 64px; }

.residence-branch-list { position: relative; list-style: none; margin: 0; padding: 0 0 0 54px; display: flex; flex-direction: column; gap: 16px; }
.residence-branch-list::before { content: ""; position: absolute; left: 23px; width: 1px; top: 8px; bottom: 8px; background: linear-gradient(180deg, rgba(125,203,208,0), rgba(125,203,208,.4) 10%, rgba(125,203,208,.4) 90%, rgba(125,203,208,0)); }

.residence-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1px 1fr auto;
  align-items: center;
  column-gap: 28px;
  padding: 26px 28px;
  background: rgba(255,251,244,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px;
  transition: transform .3s var(--ease-out), border-color .3s, background .3s;
}
.residence-row:hover, .residence-row:focus-within { transform: translateY(-3px); border-color: rgba(238,128,96,.45); background: rgba(255,251,244,.05); }

.row-node { position: absolute; left: -31px; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 5px rgba(125,203,208,.16); transform: translateY(-50%); }
.row-node::before { content: ""; position: absolute; top: 50%; left: 9px; width: 22px; height: 1px; background: rgba(125,203,208,.4); transform: translateY(-50%); }

.row-top { display: flex; align-items: baseline; gap: 10px; min-width: 190px; }
.row-index { color: var(--coral); font: 800 11px var(--sans); letter-spacing: .1em; }
.row-name { font: 400 30px var(--serif); letter-spacing: -.02em; color: var(--ivory); }

.row-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,.14); }

.row-facts { display: flex; gap: 56px; }
.row-fact { display: flex; flex-direction: column; gap: 6px; }
.row-fact span { font: 800 8px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(125,203,208,.85); }
.row-fact strong { font: 400 21px var(--serif); color: var(--ivory); white-space: nowrap; }
.row-fact strong small { font: 700 9px var(--sans); letter-spacing: .06em; }

.row-actions { display: flex; align-items: center; gap: 14px; justify-self: end; }
.row-cta { min-height: 46px; padding: 12px 18px; white-space: nowrap; }

.residence-footer-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; margin-top: 54px; text-align: center; color: rgba(255,251,244,.7); }
.footer-cta-line { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.footer-cta-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: var(--aqua); flex-shrink: 0; }
.footer-cta-icon svg { width: 17px; height: 17px; }
.residence-footer-cta p { margin: 0; font-size: 13px; letter-spacing: .02em; }

@media (max-width: 1000px) {
  .row-facts { gap: 22px; }
  .row-name { font-size: 26px; }
}

@media (max-width: 900px) {
  .residence-intro-grid { grid-template-columns: 1fr; gap: 20px; }
  .residence-plan-motif { justify-self: start; width: min(100%, 300px); }
  .residence-row { grid-template-columns: 1fr; row-gap: 18px; }
  .row-divider { display: none; }
  .row-top { grid-column: 1 / -1; }
  .row-facts { grid-column: 1 / -1; flex-wrap: wrap; gap: 22px 34px; }
  .row-actions { grid-column: 1 / -1; justify-self: stretch; }
  .row-cta { flex: 1; justify-content: space-between; }
}

@media (max-width: 650px) {
  .residence-intro-grid { margin-top: 55px; }
  .residence-list-wrap { margin-top: 48px; }
  .residence-branch-list { padding-left: 0; gap: 14px; }
  .residence-branch-list::before { display: none; }
  .row-node { display: none; }
  .residence-row { padding: 22px 18px; border-left: 2px solid rgba(238,128,96,.5); }
  .row-top { min-width: 0; }
  .row-name { font-size: 23px; }
  .row-facts { gap: 18px 26px; }
  .row-fact strong { font-size: 18px; }
  .row-actions { flex-direction: column; align-items: stretch; }
  .row-cta { width: 100%; }
  .row-actions .circle-button { align-self: center; }
  .residence-footer-cta { flex-direction: column; gap: 10px; margin-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .residence-row { transition: none; }
}