/* ============================================================
   🔒 LOCKED 2026-07-19 — approved; STANDARD floor-plan component.
   Do not restyle unless a bug is found or a change is requested.
   ------------------------------------------------------------
   REUSABLE FLOOR-PLAN VIEWER  (asset-agnostic: PNG today, SVG later)
   Governed by FLOOR_PLANS.md + PROPERTY_EXPERIENCE_BLUEPRINT.md §9.
   The plan is NEVER cropped, mirrored, rotated, or stretched:
   object-fit: contain only. Controls live outside the drawing.
   ============================================================ */

.fpv {
  --fpv-gold: var(--gold, #B8922A);
  --fpv-ink: var(--ink, #1e1e1e);
  --fpv-mid: var(--mid, #5a5a5a);
  --fpv-muted: var(--muted, #9a9a9a);
  --fpv-border: var(--border, #e2e2e2);
  --fpv-bg2: var(--bg2, #f8f7f5);
  --fpv-r: var(--r, 3px);
  --fpv-shadow-control: var(--shadow-control, 0 4px 18px rgba(20,16,8,0.13));
  --fpv-shadow-control-hover: var(--shadow-control-hover, 0 7px 24px rgba(20,16,8,0.19));
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  color: var(--fpv-ink);
}

/* ── header ── */
.fpv-head { text-align: center; margin-bottom: 2.5rem; }
.fpv-eyebrow { font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fpv-gold); margin-bottom: 1rem; font-weight: 600; }
.fpv-title { font-family: var(--serif, 'Cormorant Garamond', serif); font-weight: 300; font-size: clamp(38px, 5vw, 60px); line-height: 1.05; letter-spacing: 0.005em; }
.fpv-rule { width: 36px; height: 1px; background: var(--fpv-gold); margin: 1.35rem auto 0; }

/* ── level selector (tablist) ── */
.fpv-levels { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 2rem; }
.fpv-level {
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  color: var(--fpv-mid); background: transparent;
  border: 1px solid var(--fpv-border); border-radius: 999px;
  padding: 13px 28px; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.fpv-level:hover { color: var(--fpv-ink); border-color: var(--fpv-mid); }
.fpv-level[aria-selected="true"] { color: #fff; background: var(--fpv-ink); border-color: var(--fpv-ink); }
.fpv-level:focus-visible { outline: 2px solid var(--fpv-gold); outline-offset: 2px; }

/* ── layout: drawing hero (≈77%) + slim info rail (≈23%) ── */
.fpv-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 23%);
  background: #fff;
  border: 1px solid var(--fpv-border); border-radius: var(--fpv-r); overflow: hidden;
}

/* stage */
.fpv-stage-wrap { background: #fff; position: relative; }
.fpv-stage {
  position: relative; width: 100%; height: 100%; min-height: 660px;
  overflow: hidden; background: #fff; touch-action: none; cursor: grab;
}
.fpv-stage.is-panning { cursor: grabbing; }
.fpv-plan {
  position: absolute; inset: 0; margin: auto;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;   /* never cover, never crop */
  transform-origin: center center;
  transition: transform .25s ease-out;
  padding: 2.5rem;
  user-select: none; -webkit-user-drag: none;
}
.fpv-stage.is-panning .fpv-plan,
.fpv-stage.is-zooming .fpv-plan { transition: none; }

/* premium floating icon controls (outside the drawing) */
.fpv-controls { position: absolute; left: 22px; bottom: 22px; display: flex; gap: 10px; z-index: 3; }
.fpv-ctrl {
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.97); border: 1px solid rgba(30,30,30,0.06); border-radius: 50%;
  color: var(--fpv-ink); font-size: 19px; line-height: 1; cursor: pointer;
  box-shadow: var(--fpv-shadow-control); backdrop-filter: blur(6px);
  transition: box-shadow .15s ease, transform .25s ease, border-color .15s;
}
.fpv-ctrl:hover { box-shadow: var(--fpv-shadow-control-hover); transform: translateY(-1px); border-color: rgba(30,30,30,0.12); }
.fpv-ctrl:active { transform: translateY(0); }
.fpv-ctrl:focus-visible { outline: 2px solid var(--fpv-gold); outline-offset: 3px; }
.fpv-ctrl[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }
.fpv-fs { position: absolute; right: 22px; top: 22px; z-index: 3; }

/* ── info rail ── */
.fpv-info { background: var(--fpv-bg2); padding: 2.75rem 1.9rem; display: flex; flex-direction: column; border-left: 1px solid var(--fpv-border); }
.fpv-info-level { font-family: var(--serif, 'Cormorant Garamond', serif); font-size: 30px; font-weight: 300; line-height: 1.12; }
/* Level-specific fields — status/ceiling height, and the level's own name
   (e.g. "Main Level"). Both optional; only rendered when a level supplies them. */
.fpv-info-meta { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fpv-gold); font-weight: 600; margin-top: .6rem; }
.fpv-info-subtitle { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-size: 15px; color: var(--fpv-mid); margin-top: .3rem; }
.fpv-info-prop { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fpv-muted); margin-top: .55rem; font-weight: 500; }
.fpv-info-rule { width: 30px; height: 1px; background: var(--fpv-gold); margin: 1.4rem 0; }
/* Level feature list — optional, mirrors the property page's former plan-list styling */
.fpv-feature-list { list-style: none; margin: 0 0 .5rem; padding: 0; }
.fpv-feature-list li { font-size: 13px; color: var(--fpv-mid); padding: .5rem 0; border-bottom: 1px solid var(--fpv-border); display: flex; align-items: center; gap: 9px; }
.fpv-feature-list li:last-child { border-bottom: none; }
.fpv-feature-list li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--fpv-gold); flex-shrink: 0; }
.fpv-note-level { font-size: 11px; color: var(--fpv-gold); font-style: italic; font-family: var(--serif, 'Cormorant Garamond', serif); margin-top: .25rem; }
.fpv-specs { display: flex; flex-direction: column; gap: 0; }
.fpv-spec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--fpv-border); }
.fpv-spec:first-child { border-top: 1px solid var(--fpv-border); }
.fpv-spec-k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fpv-mid); font-weight: 500; }
.fpv-spec-v { font-family: var(--serif, 'Cormorant Garamond', serif); font-size: 17px; color: var(--fpv-ink); }
.fpv-spec-v--empty { color: var(--fpv-muted); }
.fpv-download {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: var(--fpv-gold); text-decoration: none; padding-top: 1.75rem;
}

.fpv-note { text-align: center; font-size: 11px; color: var(--fpv-muted); margin-top: 1.15rem; font-style: italic; }

/* fullscreen */
.fpv-stage-wrap:fullscreen { background: #fff; }
.fpv-stage-wrap:fullscreen .fpv-stage { min-height: 100vh; }

/* tablet — stacked (layout unchanged) */
@media (max-width: 900px) {
  .fpv-body { grid-template-columns: 1fr; }
  .fpv-info { order: 2; border-left: none; border-top: 1px solid var(--fpv-border); }
  .fpv-stage-wrap { order: 1; }
  .fpv-stage { min-height: 62svh; }
  .fpv-plan { padding: 1.75rem; }
}
/* mobile — stacked (layout unchanged) */
@media (max-width: 560px) {
  .fpv-stage { min-height: 56svh; }
  .fpv-plan { padding: 1.1rem; }
  .fpv-level { padding: 11px 20px; }
  .fpv-info { padding: 2rem 1.4rem; }
  .fpv-controls { left: 14px; bottom: 14px; gap: 8px; }
  .fpv-ctrl { width: 42px; height: 42px; }
  .fpv-fs { right: 14px; top: 14px; }
}