/* Auto-advancing showcase gallery. Crossfade via the .active class only — no
   inline styles (the deployed CSP blocks them). Pauses on hover, respects
   reduced-motion. Driven by assets/js/gallery.js. */

.gallery { position: relative; margin: 0; }

.gal-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: #06090F;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.gal-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease;
  pointer-events: none;
}
.gal-slide.active { opacity: 1; visibility: visible; pointer-events: auto; }
/* Outside full screen the stage is tap-to-enlarge. */
.gallery:not(.is-fs) .gal-stage { cursor: zoom-in; }

.gal-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transform-origin: center center;
  transition: transform 0.2s ease;
}
/* No transform easing while actively dragging/pinching (feels direct). */
.gallery.grabbing .gal-slide img { transition: none; }

/* Per-slide caption source — hidden; the script mirrors the active one into
   .gal-caption BELOW the stage so it never covers the image. */
.gal-cap { display: none; }

/* Full-width stacked layout for the gallery sections — a much bigger stage. */
.six--gallery { grid-template-columns: minmax(0, 1fr) !important; gap: 26px; }
.six--gallery .six-copy { max-width: 780px; }
/* Height follows the (wide) image aspect — NOT the screen — so on a tall phone
   the montage fills the width instead of shrinking into a letterboxed strip. */
.six--gallery .gal-stage { aspect-ratio: 16 / 9; height: auto; max-height: 82vh; }

/* Caption below the stage (theme-aware — reads on light and dark). */
.gal-caption { margin-top: 14px; min-height: 42px; }
.gal-caption b { display: block; color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.gal-caption span { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.gal-caption em { color: var(--accent-b); font-style: normal; }

/* Controls — theme-aware (they sit on the page background, not the dark stage,
   so they must read on both light and dark themes → use the site's vars). */
.gal-ui {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.gal-btn {
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.gal-btn:hover { color: var(--accent-b); border-color: var(--accent-b); }
.gal-btn svg { width: 17px; height: 17px; }

/* pause/play + expand/compress icon swaps (driven by classes on .gallery) */
.gal-pause .i-play, .gal-fs .i-compress { display: none; }
.gallery.paused .gal-pause .i-pause { display: none; }
.gallery.paused .gal-pause .i-play { display: inline-flex; }
.gal-fs { margin-left: auto; }
.gallery.is-fs .gal-fs .i-expand { display: none; }
.gallery.is-fs .gal-fs .i-compress { display: inline-flex; }
/* Zoom buttons only exist in full screen. */
.gal-zoom { display: none; }
.gallery.is-fs .gal-zoom { display: grid; }
.gallery.is-fs .gal-fs { margin-left: 0; }

.gal-dots { display: flex; align-items: center; gap: 7px; margin-left: 8px; }
.gal-dot {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line-3);
  cursor: pointer;
  transition: width 0.2s, background 0.2s, border-radius 0.2s;
}
.gal-dot:hover { background: var(--ink-3); }
.gal-dot.on { width: 22px; border-radius: 5px; background: var(--accent-b); }

.gallery:focus-visible { outline: 2px solid var(--accent-b); outline-offset: 4px; border-radius: 16px; }

/* ── Full screen (native Fullscreen API + a position:fixed fallback for iOS,
      both driven by the .is-fs class the script toggles) ────────────────── */
.gallery.pseudo-fs { position: fixed; inset: 0; z-index: 3000; }
.gallery.is-fs {
  background: #06090F;
  margin: 0; padding: 12px;
  display: flex; flex-direction: column;
}
.gallery.is-fs { overscroll-behavior: none; }
.gallery.is-fs .gal-stage {
  aspect-ratio: auto; height: auto; flex: 1; min-height: 0; max-height: none;
  border-radius: 8px;
}
/* We own pinch/pan/swipe in full screen — the touch target is the <img>, so the
   rule must reach it (touch-action is NOT inherited), or the browser scrolls. */
.gallery.is-fs .gal-stage,
.gallery.is-fs .gal-slide,
.gallery.is-fs .gal-slide img { touch-action: none; }
.gallery.is-fs.zoomed .gal-stage { cursor: grab; }
.gallery.is-fs.zoomed.grabbing .gal-stage { cursor: grabbing; }
.gallery.is-fs .gal-ui { justify-content: center; margin-top: 12px; }
/* In full screen the controls are always on the dark stage backdrop. */
.gallery.is-fs .gal-btn { border-color: rgba(255, 255, 255, 0.14); color: #cbd5e1; }
.gallery.is-fs .gal-btn:hover { color: #fff; border-color: #5CC8FF; }
.gallery.is-fs .gal-dot { background: rgba(255, 255, 255, 0.25); }
.gallery.is-fs .gal-dot.on { background: #5CC8FF; }
.gallery.is-fs .gal-caption { margin-top: 10px; text-align: center; }
.gallery.is-fs .gal-caption b { color: #EAEEF7; }
.gallery.is-fs .gal-caption span { color: #9AA5BB; }
body.gal-locked { overflow: hidden; }

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