/* ==========================================================================
   HOUSE-VIEWER.CSS — Interactive cutaway viewer (scoped to .cg-house)
   Loaded only on pages that use the viewer (currently process.html).
   Reads the shared brand tokens from core.css (--gold, --sand, --mahogany,
   spacing, motion, fonts). Light "sand" section to match .gallery/.projects.
   ========================================================================== */
.cg-house{
  background:var(--sand);
  color:var(--mahogany);
  /* The rooms dropdown floats past the section's bottom edge; without a
     raised stacking context the next section paints over it. */
  position:relative;
  z-index:5;
}
.cg-house .section-head .lede{color:var(--mahogany-70);}

/* ---- layout: stage + side rail --------------------------------------- */
.cg-house__layout{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
  max-width:var(--container-wide);
  margin:0 auto;
}
/* min-width:0 stops the stage's transferred min-content width (from its
   aspect-ratio + min-height pair) blowing the 1fr column past the viewport
   on small screens. */
.cg-house__layout > *{min-width:0;}
@media (min-width:992px){
  .cg-house__layout{grid-template-columns:minmax(0,1fr) 320px;align-items:start;}
}

/* ---- the 3D stage ---------------------------------------------------- */
.cg-house__stage-wrap{position:relative;}
/* Transparent stage: the 3D render sits directly on the section's sand
   background — no card gradient, shadow or vignette, so the house reads as
   part of the page rather than a boxed viewer. */
.cg-house__stage{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  min-height:260px;
  border-radius:8px;
  overflow:hidden;
  background:transparent;
  outline:none;
  cursor:grab;
  touch-action:none; /* OrbitControls owns touch gestures */
}
/* On touch devices the stage spans the whole viewport, so it must not trap
   vertical scrolling: pan-y lets one-finger vertical swipes scroll the page
   while horizontal drags orbit and two-finger pinches dolly. */
@media (pointer:coarse){
  .cg-house__stage{touch-action:pan-y;}
}
.cg-house__stage:active{cursor:grabbing;}
.cg-house__stage:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.cg-house__stage canvas{display:block;width:100%!important;height:100%!important;}

/* poster fallback (WebGL off / data-saver) */
.cg-house__poster-wrap{display:none;position:relative;}
.cg-house__poster{
  width:100%;height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:8px;
  box-shadow:0 16px 40px rgba(26,20,19,0.12);
}
.cg-house.is-live .cg-house__poster-wrap{display:none;}
.cg-house.is-fallback .cg-house__stage{display:none;}
.cg-house.is-fallback .cg-house__poster-wrap{display:block;}
.cg-house.is-fallback .cg-house__controls,
.cg-house.is-fallback .cg-house__hotspots{display:none;}

/* loading shimmer */
.cg-house__loader{
  position:absolute;inset:0;
  display:none;align-items:center;justify-content:center;
  color:var(--mahogany-70);
  font-family:var(--font-display);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--sand); /* matches the section so loading blends in too */
}
.cg-house.is-loading .cg-house__loader{display:flex;}
.cg-house__loader::before{
  content:"";width:20px;height:20px;margin-right:10px;
  border:2px solid rgba(26,20,19,0.18);border-top-color:var(--gold);
  border-radius:50%;animation:cg-house-spin .8s linear infinite;
}
@keyframes cg-house-spin{to{transform:rotate(360deg);}}

/* ---- hotspots -------------------------------------------------------- */
/* The layer is hidden while the house is closed (labels floating over a
   sealed shell read as a glitch) and fades in as the cutaway opens —
   js/house-viewer.js toggles .is-open past ~35% cut. */
.cg-house__hotspots{
  position:absolute;inset:0;pointer-events:none;
  z-index:3;                       /* above the vignette overlay */
  opacity:0;
  transition:opacity .45s var(--ease-out);
}
.cg-house__hotspots.is-open{opacity:1;}
.cg-house__hotspots:not(.is-open) .cg-house__hotspot{pointer-events:none;}
/* Dot-only markers; the text label appears only for the clicked (active)
   room so the open house isn't blanketed in overlapping pills. */
.cg-house__hotspot{
  position:absolute;top:0;left:0;
  display:inline-flex;align-items:center;gap:0;
  padding:5px;
  background:rgba(251,248,241,0.9);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border:1px solid rgba(26,20,19,0.12);border-radius:999px;
  font-family:var(--font-display);font-size:.66rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mahogany);
  cursor:pointer;pointer-events:auto;white-space:nowrap;
  transition:background .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
.cg-house__hotspot:hover{background:var(--card);box-shadow:0 6px 18px rgba(26,20,19,0.16);}
.cg-house__hotspot:hover .cg-house__hotspot-dot{transform:scale(1.2);}
.cg-house__hotspot:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.cg-house__hotspot-dot{
  width:11px;height:11px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(185,151,91,0.24);
  transition:transform .25s var(--ease-out);
}
.cg-house__hotspot-label{display:none;}
.cg-house__hotspot.is-active{gap:6px;padding:4px 11px 4px 5px;background:var(--gold);color:var(--card);}
.cg-house__hotspot.is-active .cg-house__hotspot-label{display:inline;}
.cg-house__hotspot.is-active .cg-house__hotspot-dot{background:var(--card);box-shadow:0 0 0 4px rgba(251,248,241,0.4);}

/* ---- controls bar ---------------------------------------------------- */
.cg-house__controls{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
  margin-top:var(--space-3);
}
.cg-house__cut-group{display:flex;align-items:center;gap:12px;flex:1 1 240px;min-width:200px;}
.cg-house__cut-group label{
  font-family:var(--font-display);font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mahogany-70);white-space:nowrap;
}
.cg-house__cut{
  -webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:4px;
  background:var(--sand-dim);outline:none;border:1px solid rgba(26,20,19,0.1);
}
.cg-house__cut::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--gold);cursor:pointer;border:2px solid var(--card);box-shadow:0 1px 5px rgba(26,20,19,0.3);
}
.cg-house__cut::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--gold);cursor:pointer;border:2px solid var(--card);
}
.cg-house__cut:focus-visible{box-shadow:0 0 0 3px rgba(185,151,91,0.4);}

/* the Exterior<->Cutaway toggle reuses the site .btn .btn-dark styles;
   the rotate buttons are smaller icon variants */
.cg-house__roters{display:inline-flex;gap:8px;}
.cg-house__roters .btn{padding:.85rem 1.1rem;letter-spacing:0;text-indent:0;}

/* ---- side rail: room list (dropdown) + info panel --------------------- */
.cg-house__rail{display:flex;flex-direction:column;gap:var(--space-3);}
.cg-house__rail-title{
  font-family:var(--font-display);font-size:.66rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0;
}
/* Native <details> disclosure so the long room list collapses to a dropdown
   (works without JS and stays keyboard-accessible). The list itself is
   populated by JS, so hide the empty dropdown in the no-JS baseline. */
html:not(.js) .cg-house__rooms-dd{display:none;}
.cg-house__rooms-dd{position:relative;}
.cg-house__rooms-summary{
  display:flex;align-items:center;gap:12px;
  list-style:none;cursor:pointer;
  padding:14px 16px;
  background:var(--card);border:1px solid rgba(26,20,19,0.1);border-radius:10px;
  transition:border-color .25s var(--ease-out),box-shadow .25s var(--ease-out);
}
.cg-house__rooms-summary::-webkit-details-marker{display:none;}
.cg-house__rooms-summary:hover{border-color:var(--gold);box-shadow:0 4px 14px rgba(26,20,19,0.08);}
.cg-house__rooms-summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
/* live value (room count / selected room), injected by JS */
.cg-house__rooms-value{
  margin-left:auto;
  font-family:var(--font-serif);font-size:.95rem;font-weight:400;
  color:var(--mahogany-70);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:60%;
}
.cg-house__rooms-value.is-set{color:var(--gold);}
.cg-house__rooms-chevron{
  width:8px;height:8px;flex:none;
  border-right:1.5px solid var(--mahogany-70);border-bottom:1.5px solid var(--mahogany-70);
  transform:rotate(45deg);           /* points down (closed) */
  transition:transform .25s var(--ease-out);
  margin:-2px 4px 2px 0;
}
.cg-house__rooms-dd[open] .cg-house__rooms-chevron{transform:rotate(-135deg);margin:2px 4px -2px 0;}
.cg-house__rooms-dd[open] .cg-house__rooms-summary{
  border-color:var(--gold);
  box-shadow:0 4px 14px rgba(26,20,19,0.08);
}
/* Floating panel: overlays the info card instead of shoving it down. */
.cg-house__rooms{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;
  list-style:none;margin:0;padding:6px;
  display:flex;flex-direction:column;gap:1px;
  background:var(--card);
  border:1px solid rgba(26,20,19,0.1);border-radius:12px;
  box-shadow:0 20px 48px rgba(26,20,19,0.18);
  max-height:min(430px, 52vh);overflow-y:auto;
  overscroll-behavior:contain;
}
.cg-house__rooms::-webkit-scrollbar{width:6px;}
.cg-house__rooms::-webkit-scrollbar-track{background:transparent;}
.cg-house__rooms::-webkit-scrollbar-thumb{background:rgba(26,20,19,0.16);border-radius:3px;}
.cg-house__rooms::-webkit-scrollbar-thumb:hover{background:rgba(26,20,19,0.28);}
/* Flat rows with a gold accent rail — quieter than the old card-per-room. */
.cg-house__room-btn{
  width:100%;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;
  padding:10px 12px 10px 14px;
  background:transparent;border:none;border-radius:8px;
  box-shadow:inset 2px 0 0 transparent;   /* accent rail, transform-free */
  color:var(--mahogany);font-family:var(--font-body);
  transition:background .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.cg-house__room-btn:hover:not(:disabled){background:var(--sand);}
.cg-house__room-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.cg-house__room-btn[aria-pressed="true"]{
  background:var(--gold-dim);
  box-shadow:inset 2px 0 0 var(--gold);
}
.cg-house__room-btn:disabled{opacity:.45;cursor:default;}
.cg-house__room-name{font-family:var(--font-serif);font-weight:400;font-size:1rem;letter-spacing:.01em;}
.cg-house__room-note{font-size:.78rem;color:var(--mahogany-70);line-height:1.4;}

.cg-house__panel{
  position:relative;
  background:var(--card);
  border:1px solid rgba(26,20,19,0.1);border-left:3px solid var(--gold);border-radius:8px;
  padding:var(--space-3);
  opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
}
.cg-house__panel.is-open{opacity:1;transform:none;}
.cg-house__panel[hidden]{display:none;}
.cg-house__panel-title{font-family:var(--font-serif);font-weight:400;font-size:1.25rem;margin-bottom:4px;color:var(--mahogany);}
.cg-house__panel-note{font-size:.88rem;color:var(--mahogany-70);line-height:1.5;}
.cg-house__panel-close{
  position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;
  border:none;background:transparent;cursor:pointer;color:var(--mahogany-70);font-size:1.2rem;line-height:1;
}
.cg-house__panel-close:hover{background:rgba(26,20,19,0.06);}
.cg-house__panel-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

.cg-house__status{margin-top:var(--space-3);font-size:.78rem;color:var(--mahogany-70);}

/* reduced motion: kill viewer transitions/animation (site also guards globally) */
@media (prefers-reduced-motion:reduce){
  .cg-house *,.cg-house *::before{animation:none!important;transition:none!important;}
}