/* ==========================================================================
   The layout side of tools/grid.json.

   Every photograph is now built by core/media.js and arrives inside a
   <picture>, where the first version had a bare <img>. base.css already covers
   the full-bleed frames — it anticipated the wrapper. What is left is the three
   places that are new: the preview stack beside the drawing, the contact sheet,
   and the drawing itself.

   THE RESERVED BOX. core/media.js gives a host a temporary min-height from the
   slot's aspect ratio, so the document reaches its true height before a single
   photograph is requested and nothing jumps as they land. A host that already
   has a box of its own — absolutely positioned inside a stage, or carrying an
   aspect-ratio — does not want that reservation, and says so here.
   ========================================================================== */

.hero__photo, .frame, .night__frame, .shot, .pshot,
.gallery__strip button, .next__figure, .plan__zoom { min-height: 0 !important; }

/* --- the preview stack beside the drawing ------------------------------ */
/* one element per room, cross-faded. It replaces a hand-written stack of seven
   <img data-room> in the markup: seven photographs, in one fixed order, that
   nothing checked against the rooms they claimed to show. */
.pshot {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.05);
  transition: opacity .7s var(--ease), transform 1.1s var(--slow);
}
.pshot.is-on { opacity: 1; transform: none; }
.pshot picture { position: absolute; inset: 0; }
.pshot img { width: 100%; height: 100%; object-fit: cover; }

/* --- the contact sheet -------------------------------------------------- */
.shot picture, .gallery__strip button picture { position: absolute; inset: 0; }

/* --- the drawing -------------------------------------------------------- */
/* the hotspots and the highlight sit over the photograph inside the zoom, so
   the zoom is what pans and scales and the picture rides with it */
.plan__zoom { position: relative; }
.plan__zoom > picture img { width: 100%; height: auto; }