/* wgf-decor-page.css - the /housing/decor/<slug>-<id>/ page frame (decor_page_layout.py,
   owner redesign 2026-10-08). Layout only: the colours are the house tokens
   (static/css/_tokens.css), the frames are wgf-chrome's .wgf-window. Served under the
   1-year immutable /assets/ cache: bump decor_page_layout.CSS ?v= on every edit. */

/* -- first screen: stage left, Quick Facts + Description right ------------------------ */
.wgf-dp-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4, 1rem);
  align-items: start;
  margin-bottom: var(--space-5, 1.5rem);
}
@media (min-width: 900px) {
  .wgf-dp-top { grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); }
  .wgf-dp-top--nostage { grid-template-columns: minmax(0, 1fr); }
}
.wgf-dp-top__stage, .wgf-dp-top__side { min-width: 0; }
.wgf-dp-top__side { display: flex; flex-direction: column; gap: var(--space-4, 1rem); }
.wgf-dp-top .wgf-window { margin: 0; }

/* -- the stage --------------------------------------------------------------------------- */
.wgf-dp-stage__body { padding: var(--space-2, .5rem); }
.wgf-dp-stage .wgf-model3d-box { border-radius: 0; }
.wgf-dp-stage #wgf-model3d-stage { position: relative; z-index: 2; height: 460px; }
.wgf-dp-stage .wgf-model3d-box--auto .wgf-model3d-activate {
  height: 460px;
  align-items: flex-end;
  padding-bottom: var(--space-4, 1rem);
}
/* The poster: the decor's own picture, centred under the (transparent) canvas until the
   model has drawn, then gone. Also what a reader sees if the viewer cannot start. */
.wgf-dp-poster {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 460px;
  width: 100%;
  object-fit: contain;
  padding: 48px;
  box-sizing: border-box;
  pointer-events: none;
}
.wgf-dp-poster--icon, .wgf-dp-poster--item, .wgf-dp-poster--context { padding: 150px; opacity: .55; }
.wgf-dp-stage:has(#wgf-model3d-stage canvas) .wgf-dp-poster { display: none; }
.wgf-dp-stage .wgf-media.is-failed .wgf-dp-poster { display: block; z-index: 3; }

/* No baked model: the picture itself, large, on the same dark well as the 3D box. */
.wgf-dp-still {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 460px;
  border: 1px solid var(--wgf-border-neutral, #2e313a);
  background: radial-gradient(ellipse at 50% 40%, #14161c 0%, var(--wgf-well, #08090c) 78%);
}
/* An icon is 64 px of art: a short well, not a tall empty one. */
.wgf-dp-still--icon, .wgf-dp-still--item, .wgf-dp-still--context { height: 240px; }
.wgf-dp-still__img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.wgf-dp-still__img--render { width: 100%; height: 100%; padding: var(--space-4, 1rem); box-sizing: border-box; }
.wgf-dp-still__img--icon, .wgf-dp-still__img--item, .wgf-dp-still__img--context {
  width: 128px;
  height: 128px;
  border: 2px solid var(--wgf-metal, #6e5a2a);
  box-shadow: 0 0 0 1px var(--wgf-well-edge, #040507);
}
.wgf-dp-note {
  margin: var(--space-2, .5rem) var(--space-1, .25rem) 0;
  color: var(--wgf-neutral-text, #9b9384);
  font-size: .78rem;
}
@media (max-width: 700px) {
  .wgf-dp-stage #wgf-model3d-stage,
  .wgf-dp-stage .wgf-model3d-box--auto .wgf-model3d-activate,
  .wgf-dp-poster,
  .wgf-dp-still { height: 320px; }
  .wgf-dp-still--icon, .wgf-dp-still--item, .wgf-dp-still--context { height: 200px; }
  .wgf-dp-poster { padding: 28px; }
  .wgf-dp-poster--icon, .wgf-dp-poster--item, .wgf-dp-poster--context { padding: 100px; }
  .wgf-dp-stage__body { padding: var(--space-1, .25rem); }
}

/* Picture | 3D toggle (wgf-media-toggle.css): with both views the picture fills the same
   fixed box as the 3D stage, icons included, so switching never moves the page. */
.wgf-dp-stage .wgf-media--dual .wgf-dp-still { height: 100%; box-sizing: border-box; }

/* -- Quick Facts: two tight columns, the value starts beside its label --------------- */
.wgf-dp-facts .wgf-window__body { padding: var(--space-2, .5rem) var(--space-3, .75rem); }
.wgf-dp-dl { margin: 0; }
.wgf-dp-fact {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-3, .75rem);
  padding: 6px 0;
  border-bottom: 1px solid var(--wgf-border-neutral-soft, #202229);
  font-size: var(--text-sm, .9rem);
  line-height: 1.45;
}
.wgf-dp-fact:last-child { border-bottom: 0; }
.wgf-dp-fact dt {
  color: var(--wgf-gold-muted, #b5a06a);
  font-family: var(--font-game);
  font-variant: small-caps;
  letter-spacing: .03em;
}
.wgf-dp-fact dd { margin: 0; color: var(--wgf-text, #f4ecd8); overflow-wrap: anywhere; }
.wgf-dp-fact dd a { color: var(--wgf-link, #ffe375); }

/* -- Description (beside the model, as the reference layout does) --------------------- */
.wgf-dp-desc {
  padding: var(--space-3, .75rem) var(--space-4, 1rem);
  border: 1px solid var(--wgf-metal-soft, #3a3120);
  background: var(--wgf-well, #08090c);
}
.wgf-dp-desc__h {
  margin: 0 0 var(--space-2, .5rem);
  color: var(--wgf-gold, #ffd100);
  font-family: var(--font-game);
  font-size: var(--text-md, 1rem);
}
.wgf-dp-desc .wgf-dx-lead { margin: 0; font-size: var(--text-sm, .9rem); }
.wgf-dp-desc .wgf-dx-flavor { margin: 0 0 var(--space-2, .5rem); font-size: var(--text-sm, .9rem); }

/* -- every facts plate below the fold: compact pairs in a grid, no full-width rows -------- */
.wgf-dp .wgf-decor-lines {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0 var(--space-5, 1.5rem);
}
.wgf-dp .wgf-decor-line {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3, .75rem);
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--wgf-border-neutral-soft, #202229);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.wgf-dp .wgf-decor-line__v { text-align: left; overflow-wrap: anywhere; }

/* -- technical blocks last, a quieter divider above them ---------------------------------- */
.wgf-dp-tech { margin-top: var(--space-5, 1.5rem); border-top: 1px solid var(--wgf-metal-soft, #3a3120); }