/* Slide decks (shared/slide-deck.js). The frame sets the deck's width; the slides
   keep the deck's shape (--deck-ratio, 16:9 by default) at every size. The
   controls float over the slide: previous · count · next in a pill at the lower
   centre, full screen in the lower right corner. */
.deck {
  --deck-ratio: 16 / 9;
  --deck-inset: 16px;
  position: relative;
  container-type: inline-size;
  font-family: "Darker Grotesque", "Helvetica Neue", Arial, sans-serif;
}

.deck-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--deck-ratio);
  overflow: hidden;
  border-radius: 20px;   /* case-study main images: 20px corners, soft shadow */
  background: #f5efe9;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25);
}

.deck-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.deck-slide--video { background: #000000; }
.deck-slide--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The slide's corner label (white on black), redrawn over the video */
.deck-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 9.375%;
  pointer-events: none;
}

/* Before the script runs, only the first slide shows */
.deck:not(.armed) .deck-slide:not(:first-child) { visibility: hidden; }

/* One slide at a time: the current one shows, the rest are hidden. No
   transition: the next slide simply appears */
.deck.armed .deck-slide { visibility: hidden; }
.deck.armed .deck-slide.is-current { visibility: visible; }

/* Controls, floating over the slide */
.deck-bar {
  position: absolute;
  left: 50%;
  bottom: var(--deck-inset);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border-radius: 100px;
}
.deck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: #222222;
  cursor: pointer;
  transition: background-color 0.2s;
}
.deck-btn svg { width: 16px; height: 16px; display: block; }
.deck-btn:disabled { opacity: 0.3; cursor: default; }
.deck-btn:focus-visible { outline: 2px solid #222222; outline-offset: 2px; }
@media (hover: hover) { .deck-btn:not(:disabled):hover { background: rgba(255, 255, 255, 0.5); } }
.deck-count {
  min-width: 44px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #222222;
  font-variant-numeric: tabular-nums;
}

/* Round buttons on their own over the slide: full screen, and sound on a video slide */
.deck-full-btn,
.deck-sound {
  position: absolute;
  width: 34px;
  height: 34px;
}
.deck-full-btn { right: var(--deck-inset); bottom: var(--deck-inset); }
.deck-sound { left: var(--deck-inset); top: var(--deck-inset); }
.deck-full-btn .icon-exit,
.deck-sound .icon-on { display: none; }
.deck-full-btn.is-on .icon-enter,
.deck-sound.is-on .icon-off { display: none; }
.deck-full-btn.is-on .icon-exit,
.deck-sound.is-on .icon-on { display: block; }

/* Liquid glass on the controls: the nav's recipe (shared/nav.css). A clear body
   with a light blur and colour lift, bright rims and specular glints, so the slide
   shows through like a thick lens */
.deck-bar,
.deck-full-btn,
.deck-sound {
  isolation: isolate;
  border: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0.14) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(200%) brightness(1.06) contrast(1.05);
  backdrop-filter: blur(10px) saturate(200%) brightness(1.06) contrast(1.05);
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 0 0 14px 0 rgba(255, 255, 255, 0.45),
    inset 0 -8px 16px -10px rgba(120, 100, 85, 0.18),
    0 0 0 0.5px rgba(60, 48, 38, 0.12),
    0 2px 6px rgba(40, 30, 20, 0.06),
    0 14px 36px -12px rgba(40, 30, 20, 0.22);
}
.deck-bar::before,
.deck-full-btn::before,
.deck-sound::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(60% 120% at 14% -30%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(40% 90% at 92% 135%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 65%);
  pointer-events: none;
}
.deck-bar::after,
.deck-full-btn::after,
.deck-sound::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.15) 35%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
@media (hover: hover) {
  .deck-full-btn:hover,
  .deck-sound:hover { background-color: rgba(255, 255, 255, 0.3); }
}
/* Over a dark slide (the video), a frosted tone (like the nav's, a little more
   opaque), so the icons stay legible over black */
.deck.is-dark .deck-bar,
.deck.is-dark .deck-full-btn,
.deck-sound {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.62) 42%, rgba(236, 226, 218, 0.7) 100%);
}
/* Browsers without backdrop blur get solid controls */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .deck-bar, .deck-full-btn, .deck-sound { background: rgba(250, 246, 242, 0.92); }
}

/* Small decks (phones): tighter controls */
@container (max-width: 500px) {
  .deck-bar { bottom: 8px; padding: 2px; }
  .deck-btn { width: 26px; height: 26px; }
  .deck-btn svg { width: 14px; height: 14px; }
  .deck-count { min-width: 40px; font-size: 13px; }
  .deck-full-btn, .deck-sound { width: 30px; height: 30px; }
  .deck-full-btn { right: 8px; bottom: 8px; }
  .deck-sound { left: 8px; top: 8px; }
}

/* Full screen viewer: the deck fitted to the window, same shape, on black */
.deck-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #111111;
}
.deck--full {
  /* room below the slide for the controls row (16px gap + 34px controls) */
  width: min(100%, calc((100dvh - 48px - 50px) * (var(--deck-ratio))));
}
.deck--full .deck-stage { border-radius: 0; background: #000000; box-shadow: none; }
/* In full screen the controls sit below the slide, not over it: the pill centred,
   the exit button at the right end of the same row, both in the frosted tone */
.deck--full .deck-bar {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: max-content;
  margin: 16px auto 0;
}
.deck--full .deck-full-btn { right: 0; bottom: 0; }
.deck--full .deck-bar,
.deck--full .deck-full-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.62) 42%, rgba(236, 226, 218, 0.7) 100%);
}