/* ═══════════════════════════════════════════════════════════════════════════
   The two live embedded product screens in this deck:
     slide 3  /nextgen-l2.html     NextGen Scheduler Book + the price preview
     slide 4  /storefront-oam.html the Storefront, as OAM Michigan's own page

   This replaces the base deck's flat Skylight screenshot plus its .sko DOM
   overlay (skylight-overlay.css/.js), which are not loaded on this deck. The
   product being shown here is the browser extension, not the Skylight browser,
   so the visual is a live application window rather than a monitor render, and
   there is no POS device or payment-method row anywhere in it.

   Sizing: the base rule shapes .prod__visual as a height:0 / padding-top:76.65%
   box for the 2985x2288 Skylight PNG, which fixes height from width. That
   leaves a 16:9 screen far shorter than the row it sits in. Pure-CSS fixes all
   fail the same way: `aspect-ratio` with an explicit height is over-constrained
   (the height wins and the ratio is ignored), and with an explicit width the
   max-height clamp shortens the box without narrowing it — either way the
   embedded screen letterboxes itself inside a frame of the wrong shape.

   So the frame is laid out at its authored 1920x1080 and CSS-scaled to fit,
   with nextgen-slide.js measuring the column and setting both the scale and
   the stage's box. That guarantees the iframe's own viewport is exactly 16:9,
   so the screen inside it fills the frame edge to edge with no bands.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Give the frames more of the row than the base splits do — the copy columns
   are capped at 30ch and 28ch anyway, so the slack was dead space. */
.s-product .prod { grid-template-columns: 30% 70%; }
/* .prod is height:100% in the base, .store is not — so the storefront column
   had no height to fit into and the frame collapsed to its content size.
   Stretch the row and centre the copy inside it instead. */
.s-store .store { grid-template-columns: 32% 68%; height: 100%; align-items: stretch; }
.s-store .store__copy { align-self: center; }

/* width:100% + min-width:0 are load-bearing, not tidying. The stage's width is
   set by script from this box's measured width; as a plain auto-width flex item
   the box would then be pushed back out to the stage's width by min-width:auto,
   so once the frame was measured at a wide viewport it could never shrink again
   and it overflowed its column on a narrow one. Pinning the box to the column
   breaks that feedback loop. */
.prod__visual.ngs {
  height: 100%;
  width: 100%;
  min-width: 0;
  padding-top: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Box dimensions are set by nextgen-slide.js; everything else lives here. */
.ngs__stage {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #22303A;
  box-shadow: 0 18px 44px rgba(0, 12, 30, .34), 0 2px 6px rgba(0, 12, 30, .22);
  opacity: 0;
  transition: opacity 1s ease .2s;
}
.s-product.in-view .ngs__stage { opacity: 1; }

.ngs__frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  display: block;
  transform-origin: top left;
}

.ngs__cap {
  margin: 0;
  text-align: center;
  font-size: clamp(8px, .72vw, 10px);
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .5);
  opacity: 0;
  transition: opacity .8s ease .8s;
}
.s-product.in-view .ngs__cap { opacity: 1; }

@media (max-width: 1100px) {
  /* Stacked layout: the row no longer has a height to fit into, so the script
     falls back to width-driven scaling. The max-width is the same cap the base
     deck applies to .prod__visual here — without it the visual jumps from ~66%
     of a two-column grid to 100% of a single stacked column, ballooning the
     frame for a few hundred px of viewport before shrinking again. */
  .prod__visual.ngs { height: auto; max-width: 560px; margin: 24px auto 0; }
}

@media (max-width: 700px) {
  .ngs__cap { font-size: 8px; letter-spacing: .12em; }
}


/* ── slide 4: the Storefront ───────────────────────────────────────────────
   Same scaled-frame technique as slide 3, authored at 1200x990. The page is
   the shipped Storefront's own layout, so it carries no browser chrome of its
   own; the rounded card and shadow here stand in for the browser window.     */
.store__visual.sfs {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
}

.sfs__stage {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 54px rgba(0, 18, 44, .30), 0 2px 6px rgba(0, 18, 44, .18);
  opacity: 0;
  transition: opacity 1s ease .2s;
  animation: none;
}
.s-store.in-view .sfs__stage { opacity: 1; }

.sfs__frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  display: block;
  transform-origin: top left;
}

.sfs__cap {
  margin: 0;
  text-align: center;
  font-size: clamp(8px, .72vw, 10px);
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .62);
  opacity: 0;
  transition: opacity .8s ease .8s;
}
.s-store.in-view .sfs__cap { opacity: 1; }

@media (max-width: 1100px) {
  .store__visual.sfs { height: auto; max-width: 560px; margin: 24px auto 0; }
}
@media (max-width: 700px) {
  .sfs__cap { font-size: 8px; letter-spacing: .12em; }
}