/* ═══════════════════════════════════════════════════════════════
   NORA HOUSE — the 3D model's frame while Nora drives it
   Shared by the experience site (its 3D Tour tab) and Nora House's own
   WordPress site (its 3D page, embed/nora.js): both put the SmartPixel
   app in a .tourframe as wide as the window, mark the page
   body[data-view="tour"], and the chat marks it body.lia-open and
   body.lia-amenity. Where the frame sits — under which header, how tall —
   is each site's own (css/main.css, embed/page.css).
   ═══════════════════════════════════════════════════════════════ */

.tourframe iframe { width: 100%; height: 100%; border: 0; display: block; }
/* The rules below make the frame WIDER than the window, so no site's own iframe rule may cap
   it: the live norahouse.com theme gives every iframe max-width:100% (.hello-animation-base
   iframe, found 2026-10-13; the staging copy did not have it then), which held the frame to the
   window and left the amenity's card half under Nora. This selector outranks such a rule. */
body.lia-open[data-view="tour"] .tourframe iframe { max-width: none; }
/* Nora in control (chat open on the tour): the SmartPixel unit list is a fixed
   448px column (its xl:w-md) once the app is ≥1280px wide, and the app has no
   switch for it. From 1280px up the open chat docks exactly over that column
   (chat.css), so the app's layout — and the model's place on screen — never
   change when Nora opens or closes. Between 1024px and 1279px the app runs its
   phone layout (list = bottom sheet): widening the iframe by the column's width
   switches it to the column layout with the list past the clip edge, so the
   model keeps the whole visible width for the chat to share. Under 1024px the
   chat is a split sheet — no clip. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  body.lia-open[data-view="tour"] .tourframe iframe { width: calc(100% + 448px); }
}
/* An amenity on stage (body.lia-amenity: the app has an amenity's card open, and Nora is the
   one telling it). The app has two layouts for that card, and no switch for either — measured
   2026-10-05, the card opened at each app-window width from 1280 to 2560px:
     under 1920px  [ model | card | list ]  the card DOCKED, full height, clamp(288px, 20%, 384px)
                   wide, the list clamp(320px, 23%, 448px); the model is centred in what is left;
     from 1920px   [ model ........ | list ]  the card FLOATS over the model's right end, 384px
                   wide, 19px short of the list; the model is centred under it, card or no card.
   Left alone, the docked card stands half under Nora. So the frame is given the width that
   puts the card where it cannot be half seen, and keeps the amenity's marker on the stage:
     1280-1541px   the frame is as wide as it takes for the MODEL to be exactly what the docked
                   chat leaves (57% of the frame, 20 + 23 being the card and the list): card and
                   list are past the chat's edge, the marker is in the middle of the stage;
     1542-1919px   that width would pass 1920px and float the card, so the frame takes the
                   floating layout on purpose, 403px wider than the window: the card (384 + 19)
                   sits exactly under the chat, the marker a fifth of the stage right of centre;
     from 1920px   nothing to do — the list is under the chat, as the unit list is, and the card
                   floats whole over the model beside Nora, its own "Amenity View" within reach;
     1024-1279px   Nora floats too, so the stage is the whole window: the model takes all of it
                   up to 1094px (card and list past the clip edge). Wider than that the frame
                   stops at 1919px — one more and the card floats, the marker centred behind
                   Nora — so the model keeps its 1094px, the marker left of her, and the frame
                   is cut there: what shows around her card past that line is the tour's own
                   backdrop, not slices of the app's card.
   From 1920px an amenity with a gallery keeps the docked card, as a column between the model
   and Nora; both read well, so nothing is done about it. Under 1024px the app is in its phone
   layout and its card is a sheet: under Nora's sheet on a phone, beside her card on a tablet. */
@media (min-width: 1280px) and (max-width: 1541.98px) {
  body.lia-open.lia-amenity[data-view="tour"] .tourframe iframe { width: calc((100% - 448px) / .57); }
}
@media (min-width: 1542px) and (max-width: 1919.98px) {
  body.lia-open.lia-amenity[data-view="tour"] .tourframe iframe { width: calc(100% + 403px); }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  body.lia-open.lia-amenity[data-view="tour"] .tourframe iframe {
    width: min(calc(100% / .57), 1919px);
    clip-path: inset(0 calc(100% - 1094px) 0 0); /* past a 1094px window: the docked card and the list */
  }
}