/* ═══════════════════════════════════════════════════════════════════════════
   listing-plans — floor-plan slider component

   CANONICAL SOURCE. Two sites serve this file:
     · destinationhv.com          Website/v3 (current)/css/listing-plans.css   ← this file
     · dhv-open-house.netlify.app open-house-signin/assets/css/listing-plans.css

   They are separate Netlify origins, so the file cannot be linked across them
   without a cross-site render-blocking request. Keep them identical instead:
       ops/sync-listing-plans.sh        (copies this file + verifies)
   Edit here, never in the open-house copy.

   One plan at a time, on a light card so linework stays legible on a dark page.
   Named tabs rather than dots: with five plans you want to jump to "Second
   floor", not cycle blindly to find it.

   THEMING. Structure is fixed; colour comes from these custom properties, which
   fall back to the DHV dark tokens. A site on another palette (Felicity's cream
   register) can adopt the component by redefining them — nothing here is
   hardcoded to one brand except the fallbacks.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --plan-card-bg:      #f4f2ee;   /* the paper the linework sits on */
  --plan-caption:      #6b6459;   /* caption over that paper */
  --plan-nav-border:   rgba(232, 228, 223, 0.25);
  --plan-nav-fg:       var(--porcelain, #e8e4df);
  --plan-nav-hover-bg: var(--hazelnut, #c9a227);
  --plan-nav-hover-fg: var(--ink, #01040c);
  --plan-tab-fg:       var(--gray, #8b8b8b);
  --plan-tab-hover:    var(--porcelain, #e8e4df);
  --plan-tab-active:   var(--hazelnut, #c9a227);
  --plan-scrim:        rgba(1, 4, 12, 0.55);
}

.listing-plans { margin-top: 2.5rem; }

.listing-plans-stage {
  position: relative; display: flex; align-items: center;
  justify-content: center; gap: clamp(0.5rem, 2vw, 1.25rem);
}

.listing-plans-figure {
  margin: 0; flex: 1 1 auto; max-width: 900px;
  background: var(--plan-card-bg);
  padding: clamp(0.9rem, 2vw, 1.5rem);
}

.listing-plans-btn {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; line-height: 0;
}
.listing-plans-btn img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 4 / 3; object-fit: contain;
}

.listing-plans-figure figcaption {
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--plan-caption); text-align: center; padding: 0.9rem 0 0.2rem;
}
.listing-plans-figure figcaption .listing-plans-hint {
  display: block; margin-top: 0.4rem; opacity: 0.6; letter-spacing: 0.14em;
}

.listing-plans-nav {
  flex: 0 0 auto; width: 44px; height: 44px; background: transparent;
  border: 1px solid var(--plan-nav-border); color: var(--plan-nav-fg);
  font-family: var(--sans, sans-serif); font-size: 1.1rem; cursor: pointer;
  transition: background 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease), color 0.3s var(--ease, ease);
}
.listing-plans-nav:hover {
  background: var(--plan-nav-hover-bg); border-color: var(--plan-nav-hover-bg);
  color: var(--plan-nav-hover-fg);
}

.listing-plans-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem 1.5rem; margin-top: 2rem;
}
.listing-plans-tab {
  background: none; border: 0; border-bottom: 1px solid transparent; padding: 0.35rem 0;
  font-family: var(--sans, sans-serif); font-size: 0.6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--plan-tab-fg); cursor: pointer;
  transition: color 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease);
}
.listing-plans-tab:hover { color: var(--plan-tab-hover); }
.listing-plans-tab[aria-selected="true"] {
  color: var(--plan-tab-active); border-bottom-color: var(--plan-tab-active);
}

.listing-plans-note {
  font-size: 0.7rem; font-style: italic; text-align: center;
  color: var(--gray-soft, #8b8b8b); margin-top: 1.75rem;
}

@media (max-width: 600px) {
  /* Narrow screens: float the arrows over the card edges instead of letting them
     eat width from the plan, which is the one thing that needs the room. */
  .listing-plans-stage { gap: 0; }
  .listing-plans-figure { width: 100%; }
  .listing-plans-nav {
    position: absolute; top: 42%; transform: translateY(-50%);
    width: 38px; height: 38px; z-index: 2;
    background: var(--plan-scrim); border-color: rgba(232, 228, 223, 0.35);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  .listing-plans-nav[data-plan-prev] { left: 0.35rem; }
  .listing-plans-nav[data-plan-next] { right: 0.35rem; }
  .listing-plans-tabs { gap: 0.4rem 1rem; }
}