/* ==========================================================================
   SAN Media Solution — Section 4 · the deck
   Three slides — Services, AI Snake Marketing, Our Approach — held in one
   pinned window. The reader scrolls down; deck.js turns that scroll into the
   slides moving sideways, and into each slide's own vertical travel where a
   slide is taller than the screen. Nothing here has a horizontal scrollbar.
   ========================================================================== */

.deck {
  /* one artboard pixel, fitted under the header — but never under 0.84 of a
     width-fitted pixel, so the type stays legible on short laptop screens
     (1366 x 768, 1280 x 720). A slide that then outgrows the screen travels
     vertically, as the stacked slides do on phones. */
  --fit: max(min(calc(1cqw / 15.36), calc((100vh - 94 * var(--u)) / 1024)),
             min(calc(1cqw / 15.36), 0.84px));
  position: relative;
  container-type: inline-size;
  background: #fcfcfc;
  /* height is set by deck.js: one screen plus every slide's travel and every transition */
}
.deck__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #fcfcfc;
}
.deck__slide {
  position: absolute;
  left: 0; right: 0; top: 0;
  min-height: 100vh;                      /* taller where its content is: the pin does the clipping */
  background: #fcfcfc;
  will-change: transform, opacity;
  transform: translate3d(100%, 0, 0);     /* a slide waits to the right until the deck sets it */
}
.deck__slide:first-child { transform: none; }

/* the three slides borrow the deck's fitted unit and sit under the header */
@media (min-width: 1081px) {
  .deck .svc, .deck .snk, .deck .grow {
    position: absolute;
    left: 50%;
    top: max(calc(94 * var(--u)), calc(94 * var(--u) + (100vh - 94 * var(--u) - 1024 * var(--fit)) / 2));   /* centred under the header, or flush to it when taller than the screen */
    translate: -50% 0;
    width: calc(1536 * var(--fit));
    height: calc(1024 * var(--fit));
    container-type: normal;
  }
  .deck .svc { --s: var(--fit); }
  .deck .snk { --k: var(--fit); }
  /* the AI Snake artboard is taller than the other two (its packages carry
     their full service lists): it keeps its own height and travels */
  .deck .snk {
    height: calc(var(--snk-h) * var(--fit));
    top: max(calc(94 * var(--u)), calc(94 * var(--u) + (100vh - 94 * var(--u) - var(--snk-h) * var(--fit)) / 2));
  }
  .deck .grow { --g: var(--fit); }
  .deck .grow__pin { position: static; height: auto; padding: 0; display: block; overflow: visible; }
}
@media (max-width: 1080px) {
  .deck .svc, .deck .snk, .deck .grow { position: relative; }
  /* a pinned slide ends with its foot on the fold, where the WhatsApp button
     floats: room under the last row, so nothing sits behind it for good */
  .deck .svc, .deck .snk, .deck .grow { padding-bottom: clamp(84px, 10vh, 104px); }
  .deck .grow { height: auto; }
  .deck .grow__pin { position: static; height: auto; padding: 0; display: block; overflow: visible; }
}

/* `?solo=<slide>`: the harness renders one slide as a plain section */
.deck.is-solo { height: auto !important; }
.deck.is-solo .deck__pin { position: static; height: auto; overflow: visible; }
.deck.is-solo .deck__slide { position: static; transform: none !important; opacity: 1 !important; overflow: visible; }
.deck.is-solo .deck__slide[hidden] { display: none; }
@media (min-width: 1081px) {
  .deck.is-solo .svc, .deck.is-solo .snk, .deck.is-solo .grow { position: relative; left: auto; top: 0; translate: 0 0; margin: calc(94 * var(--u)) auto 0; }
}

@media (prefers-reduced-motion: reduce) {
  .deck__slide { transition: none; }
}