/* Slides read locally, in the copy column, instead of behind a case link.
   ----------------------------------------------------------------------
   The YotaPhone row has no case page, and the line that stood in for one said «Details coming
   soon» — a promise instead of the work. The deck pages that already tell the case exist, so they
   are shown where the reader is: a carousel under the metrics, one page at a time, each one
   opening full size in place. Nothing navigates, so nothing has to be written twice.

   The values are the page's own: --ink, --line, --radius-sm, --radius-full and the --space-* scale
   from BaseLayout's :root, the glass of `.read-more a` for anything that reads as a control. */

/* The deck is a footnote to the copy, not a second column of artwork, so it runs narrower than
   the text it sits under. Narrowing the block rather than the slide inside the track keeps one
   whole page in view — a slide cut to a fraction of the track puts the next one's edge back on
   screen, which is what the track was widened to get rid of. */
.case-slides { margin-top: var(--space-4); max-width: 440px; }

.case-slides .carousel { position: relative; }

/* The track is a real scroller, not a transform: a phone then swipes it with the gesture it already
   has, the trackpad scrolls it sideways, and the arrows are two more ways into the same thing
   rather than the only one. Snapping is what makes it a carousel instead of a scrolling strip. */
.case-slides .track {
  display: flex;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* The gesture stays in the strip: a swipe that runs off the end must not take the page with it. */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--radius-sm, 12px);
}
.case-slides .track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .case-slides .track { scroll-behavior: auto; }
}

.case-slides .track > li {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.case-slides .slide {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm, 12px);
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: 0 1px 2px rgba(26, 0, 90, .05);
  transition: box-shadow 160ms ease;
}

.case-slides .slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* The deck pages are white with a lot of air; `contain` would letterbox them against the frame,
     and at 16:9 in a 16:9 box there is nothing to crop either way. */
  object-fit: cover;
  background: #fff;
}

.case-slides .slide:hover { box-shadow: 0 2px 4px rgba(26, 0, 90, .06), 0 10px 24px rgba(26, 0, 90, .1); }
.case-slides .slide:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

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

/* Step, marks, step — one strip under the slide. On the artwork the arrows needed glass to stay
   legible and still covered the page they were there to turn; down here they are two more marks in
   the same grey, and the deck is shown whole. */
.case-slides .rail {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.case-slides .step {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full, 9999px);
  background: none;
  cursor: pointer;
  transition: background-color 160ms ease, opacity 160ms ease;
}

.case-slides .step:hover { background: rgba(32, 23, 42, .06); }
.case-slides .step:focus-visible { outline: 2px solid #000; outline-offset: -2px; }
/* At the ends the control goes quiet rather than disappearing: a button that vanishes moves the
   other one in the reader's peripheral vision every time the deck reaches an end. */
.case-slides .step:disabled { opacity: .25; cursor: default; pointer-events: none; }

.case-slides .step svg { width: 14px; height: 14px; fill: none; stroke: rgba(32, 23, 42, .55); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.case-slides .step:hover svg { stroke: #000; }

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

.case-slides .dots { display: flex; }

/* A 5px mark inside a 16px target: the finger gets its area, the eye gets a dot. The cell carries
   the spacing, so the marks sit on an even pitch and the row reads as one rule of them. */
.case-slides .dot {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.case-slides .dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(32, 23, 42, .2);
  transition: background-color 160ms ease;
}

.case-slides .dot:hover::before { background: rgba(32, 23, 42, .4); }
.case-slides .dot[aria-current="true"]::before { background: #1A00E0; }
.case-slides .dot:focus-visible { outline: 2px solid #000; outline-offset: -2px; border-radius: var(--radius-full, 9999px); }

@media (prefers-reduced-motion: reduce) {
  .case-slides .dot::before { transition: none; }
}

/* ---------- the viewer ----------
   One dialog for the whole page, appended once and reused: the slides of a row are handed to it as
   a list, so a second row with a deck needs markup and nothing else. */

.slide-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-5);
  /* Dark enough that a white deck page is the only lit thing on the screen, translucent enough
     that the reader keeps their place on the page underneath. */
  background: rgba(14, 10, 22, .88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.slide-viewer[hidden] { display: none; }
.slide-viewer.open { opacity: 1; }

.slide-viewer figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 100%;
  max-height: 100%;
}

.slide-viewer img {
  display: block;
  max-width: min(1400px, 92vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm, 12px);
  background: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}

.slide-viewer figcaption {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  color: rgba(255, 255, 255, .82);
  font-size: var(--text-sm);
  line-height: 1.3;
  text-align: center;
}

.slide-viewer figcaption .count {
  color: rgba(255, 255, 255, .45);
  font-variant-numeric: tabular-nums;
}

/* Three marks on a dark field, and nothing behind them. A glass disc was there to lift a white
   stroke off the artwork, but the artwork is already behind a dimmed, blurred backdrop — the disc
   was lifting the stroke off something that is not there, and read as three buttons floating over
   the page instead of as the page's own controls. */
.slide-viewer button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full, 9999px);
  background: none;
  color: rgba(255, 255, 255, .62);
  cursor: pointer;
  transition: color 160ms ease;
}

.slide-viewer button:hover { color: #fff; }
.slide-viewer button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.slide-viewer button:disabled { opacity: .3; cursor: default; }
.slide-viewer button:disabled:hover { color: rgba(255, 255, 255, .62); }

.slide-viewer .close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 40px;
  height: 40px;
}

.slide-viewer .step {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 48px;
  height: 48px;
}

.slide-viewer .step.prev { left: var(--space-5); }
.slide-viewer .step.next { right: var(--space-5); }

.slide-viewer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* On a phone the arrows would sit on top of the slide itself, so they come down to a row under the
   caption and the slide gets the full width. */
@media (max-width: 720px) {
  .slide-viewer { padding: var(--space-5) var(--space-3) var(--space-4); }
  .slide-viewer img { max-width: 100%; max-height: 62vh; }
  .slide-viewer .step { position: static; translate: none; width: 44px; height: 44px; }
  .slide-viewer .rail { display: flex; gap: var(--space-4); }
}

@media (min-width: 721px) {
  .slide-viewer .rail { display: contents; }
}

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