/* Stella's Ballroom — "The room, in use", from Leighton's mockup: the
   words on the left, the venue tour playing in a slim phone, a handwritten
   aside with an arrow, and four photographs on the right, on the warm
   ivory ground with leaf drawings in the margins. The tour and photographs
   come from js/content.js, so the dashboard still controls them. */

.room-use{position:relative;overflow:hidden;background:var(--paper)}
.room-use .container{position:relative;z-index:1}
.room-use .sprig--right{right:calc((100vw - var(--maxw)) / 2 - 220px);bottom:-80px}

.room-use__grid{display:grid;gap:var(--s-6);align-items:center}

/* ---- The words ---- */
.room-use .eyebrow{color:var(--bronze)}
.room-use__intro .display-h2{margin:0}
.room-use__rule{width:36px;height:1px;border:0;background:var(--bronze);margin:var(--s-4) 0}
.room-use__lead{font-size:var(--t-body-l);color:var(--ink);margin-bottom:var(--s-2)}
.room-use__intro p:not(.eyebrow):not(.room-use__lead){font-size:var(--t-body-s);color:var(--ink-soft);max-width:36ch}

/* ---- The phone ---- */
.room-use__phone{position:relative;justify-self:center}
.phone{
  position:relative;z-index:1;width:220px;
  padding:8px;border-radius:32px;background:#111;
  box-shadow:0 24px 50px rgba(24,28,36,.22),0 2px 6px rgba(24,28,36,.12);
}
.phone__screen{position:relative;aspect-ratio:9/16;border-radius:24px;overflow:hidden;background:var(--night)}
.phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Centre play: shown whenever the tour isn't playing; plays with sound */
.phone__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;
  background:rgba(20,22,26,.45);border:2px solid #fff;color:#fff;
  display:grid;place-items:center;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.phone__play svg{width:20px;height:20px;fill:currentColor;margin-left:3px}
.phone__play:hover{transform:translate(-50%,-50%) scale(1.06)}
.phone.is-playing .phone__play{opacity:0;pointer-events:none}

/* Bottom: time left on the tour, then sound and full screen */
.phone__bar{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:center;gap:var(--s-1);
  padding:var(--s-6) var(--s-3) var(--s-3);
  background:linear-gradient(0deg,rgba(12,14,18,.55),transparent);
  color:#fff;font-size:var(--t-fine);font-weight:var(--weight-label);
}
.phone__time{font-variant-numeric:tabular-nums;white-space:nowrap}
.phone__spacer{flex:1}
.phone .vframe__i--pause,.phone .vframe__i--sound{display:none}
.phone:not(.is-muted) .vframe__i--muted{display:none}
.phone:not(.is-muted) .vframe__i--sound{display:block}

/* Full screen: the frame fills the screen and the tour is shown whole */
.phone:fullscreen{width:100%;height:100%;padding:0;border-radius:0}
.phone:fullscreen .phone__screen{height:100%;aspect-ratio:auto;border-radius:0}
.phone:fullscreen video{object-fit:contain}
.phone:-webkit-full-screen{width:100%;height:100%;padding:0;border-radius:0}
.phone:-webkit-full-screen .phone__screen{height:100%;aspect-ratio:auto;border-radius:0}
.phone:-webkit-full-screen video{object-fit:contain}

/* A small leaf drawing tucked behind the phone's top-left corner */
.room-use .sprig--phone{width:96px;right:calc(100% - 30px);top:-40px;transform:rotate(-14deg)}

/* ---- The handwritten aside ---- */
.room-use__note{text-align:left;justify-self:center}
.room-use__script{
  margin:0;font-family:"Pinyon Script",cursive;font-size:1.85rem;line-height:1.05;
  color:var(--ink-soft);transform:rotate(-8deg);transform-origin:left bottom;
}
.room-use__script span{display:block;padding-left:.7em}
.room-use__script span:first-child{padding-left:0}
.room-use__arrow{
  display:block;width:64px;height:40px;margin:var(--s-2) 0 var(--s-3) var(--s-2);
  fill:none;stroke:var(--bronze);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.room-use__caption{margin:0;font-size:var(--t-fine);line-height:1.5;color:var(--ink-soft);max-width:16ch}

/* ---- The photographs: four prints in a pile ----
   A white border round each picture, a soft shadow, a small angle and a
   generous overlap, from Leighton's "Floating Cards" reference. The prints
   must not stretch to the height of the row, or the white border below the
   picture comes out uneven — hence align-items:start and no set width. */
.room-use__cards{
  display:grid;grid-template-columns:1fr 1fr;column-gap:0;row-gap:0;
  align-items:start;
  padding:var(--s-4) var(--s-4) var(--s-5) var(--s-3);
}
.room-use__cards .print{
  position:relative;padding:7px;
  font-size:0;line-height:0;          /* a button leaves a text strut behind */
  background:#fff;border-radius:1px;
  box-shadow:0 18px 32px rgba(24,28,36,.20),0 2px 5px rgba(24,28,36,.10);
  display:flex;flex-direction:column;
  transition:box-shadow var(--dur) var(--ease);
}
.room-use__cards .print__shot{
  position:relative;display:block;flex:none;width:100%;
  overflow:hidden;background:var(--pearl);aspect-ratio:4/3;
}
.room-use__cards .print img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.room-use__cards .print:hover{box-shadow:0 24px 40px rgba(24,28,36,.26),0 2px 5px rgba(24,28,36,.12)}
.room-use__cards .print:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* Each print sits a little differently */
.room-use__cards .print--1{rotate:-5deg;z-index:2;margin:var(--s-3) -32px 0 0}
.room-use__cards .print--2{rotate:2.5deg;z-index:3;margin:0 0 0 -26px}
.room-use__cards .print--3{rotate:3deg;z-index:1;margin:-26px -32px 0 0}
.room-use__cards .print--4{rotate:-3.5deg;z-index:4;margin:-32px 0 0 -30px}

/* Where each photograph is cropped from */
.room-use__cards .print--1 img{object-position:center 42%}
.room-use__cards .print--4 img{object-position:58% center}

/* The gallery still loads and fails inside this box */
.room-use__cards .state{grid-column:1/-1}

/* Phone widths: the aside sits under the phone; the arrow would point
   at nothing there. */
@media (max-width:559px){
  .room-use__note{text-align:center}
  /* one column of prints, stepped left and right, still lapping */
  .room-use__cards{grid-template-columns:1fr;width:min(320px,100%);justify-self:center;padding:var(--s-4) var(--s-3) var(--s-5)}
  .room-use__cards .print--1{margin:0 var(--s-4) 0 0}
  .room-use__cards .print--2{margin:calc(var(--s-4) * -1) 0 0 var(--s-4)}
  .room-use__cards .print--3{margin:calc(var(--s-4) * -1) var(--s-4) 0 0}
  .room-use__cards .print--4{margin:calc(var(--s-4) * -1) 0 0 var(--s-3)}
  .room-use__script{transform:rotate(-4deg);transform-origin:center}
  .room-use__script span{padding-left:0}
  .room-use__arrow{display:none}
  .room-use__caption{margin:var(--s-2) auto 0}
}

/* Tablet: words across the top; phone, aside and photographs in a row */
@media (min-width:560px){
  .room-use__grid{grid-template-columns:auto auto}
  .room-use__intro,.room-use__cards{grid-column:1/-1}
  .room-use__phone{justify-self:end}
  .room-use__note{justify-self:start}
}
@media (min-width:860px){
  .room-use__grid{grid-template-columns:auto auto minmax(0,1fr);align-items:stretch}
  .room-use__cards{grid-column:auto}
  .room-use__phone,.room-use__note{align-self:center}
}
/* Desktop: all four side by side, as in the mockup */
@media (min-width:1100px){
  .room-use__grid{grid-template-columns:minmax(0,.95fr) auto auto minmax(0,1.25fr);column-gap:var(--s-6)}
  .room-use__intro{grid-column:auto;align-self:center}
}