/* ==========================================================================
   PixiPals — Gallery Page
   Loaded only by gallery.html. Reuses the shared design tokens and chunky
   bevel/shadow language already established in style.css (the primary
   navigation buttons and the visitor-counter's dark digital casing) rather
   than inventing new colors or fonts. Everything here is namespaced under
   .gallery-page / .gallery-* / #gallery-lightbox so it cannot affect any
   other page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Outer chunky frame
   Version 2.1: aligned to the shared .window frame tokens (style.css) —
   same border width/color and exterior shadow as every other content
   window sitewide — instead of its own one-off values, per the "apply the
   same window system appropriately" requirement. The Gallery keeps its
   own single outer frame (not one frame per thumbnail), unchanged.
   -------------------------------------------------------------------------- */
.gallery-frame {
  max-width: var(--content-max-width);
  /* Version 2.1: .site-content (style.css) is now a flex column holding
     one or more stacked .window/.gallery-frame modules, spaced by its own
     `gap` — the prior `margin: 0 auto 1.5rem` (for centering/spacing
     .gallery-frame directly inside the old block-layout `main`) is no
     longer needed and, worse, its horizontal auto margins suppress the
     flex column's default cross-axis stretch, leaving .gallery-frame at
     its content-based width (inflated by the horizontally-scrollable
     filmstrip) instead of the available column width — causing page-level
     horizontal overflow. width: 100% + min-width: 0 makes it fill the
     column instead, while .gallery-filmstrip's own overflow-x: auto
     (unchanged, below) still provides the intended internal horizontal
     scroll. */
  width: 100%;
  min-width: 0;
  background: var(--color-offwhite);
  border: var(--frame-border-w) solid var(--frame-border-color);
  box-shadow: var(--frame-shadow);
}

/* --------------------------------------------------------------------------
   Title bar
   Version 2.1: switched from the one-off dark digital-casing treatment to
   the shared .window__titlebar purple gradient + three decorative dots,
   for visual consistency with every other content window sitewide. The
   underlying #gallery-filmstrip/#gallery-prev/#gallery-next/#gallery-position
   structure below and the lightbox are untouched — only this title bar's
   chrome changed.
   -------------------------------------------------------------------------- */
.gallery-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: linear-gradient(
    180deg,
    var(--color-purple) 0%,
    var(--color-purple) 50%,
    var(--color-purple-deep) 50%,
    var(--color-purple-deep) 100%
  );
  border-bottom: 4px solid var(--frame-border-color);
  padding: 0.5rem 0.75rem;
}

.gallery-titlebar__text {
  margin: 0;
  /* Version 2.1: Press Start 2P, Regular 400 only, matching every other
     window title (see style.css's .window__title and its @font-face
     comment); reduced/clamped size for the same overflow reasons. */
  font-family: "Press Start 2P", var(--font-heading);
  font-weight: 400;
  letter-spacing: normal;
  font-size: clamp(0.7rem, 2.4vw, 1rem);
  color: var(--color-offwhite);
  text-shadow: 2px 2px 0 var(--color-charcoal);
}

.gallery-titlebar__controls {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* Purely decorative, matching style.css's .window__control; hidden from
   assistive technology via aria-hidden in the markup. */
.gallery-titlebar__control {
  width: 0.8rem;
  height: 0.8rem;
  background: var(--color-offwhite);
  border: 2px solid var(--frame-border-color);
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Thumbnail filmstrip
   -------------------------------------------------------------------------- */
.gallery-filmstrip-wrap {
  background: var(--color-charcoal);
  padding: 1rem 0.5rem;
}

.gallery-filmstrip {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0 0.75rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-filmstrip {
    scroll-behavior: auto;
  }
}

.gallery-cell {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 258px; /* ~4 visible within the 1140px bounded frame on desktop */
}

.gallery-thumb-button {
  display: block;
  width: 100%;
  padding: 0;
  cursor: pointer;
  background: #0d0a12; /* dark backing for letterboxing under object-fit: contain */
  border: 3px solid #6f6f78;
  border-radius: 0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5), 4px 4px 0 rgba(0, 0, 0, 0.55);
}

.gallery-thumb-button:hover {
  border-color: var(--color-cyan);
}

/* Version 2.4: circular filmstrip buffer cells (js/gallery.js clones the
   full set of thumbnails once on each side of the real set, purely so the
   strip can keep scrolling smoothly past either end instead of jumping
   backward across every still). Buffer cells remain non-focusable <span>
   elements and aria-hidden so assistive technology encounters only the
   real button for each still. They are pointer-clickable, however, so a
   visibly cloned first/last thumbnail opens the same lightbox item as its
   real counterpart. */
.gallery-thumb-button--clone {
  cursor: pointer;
}

.gallery-thumb-img {
  display: block;
  width: 100%;
  height: 165px;
  object-fit: contain;
  background: #0d0a12;
}

@media (min-width: 601px) {
  .gallery-cell {
    width: 258px;
  }
  .gallery-thumb-img {
    height: 165px;
  }
}

@media (max-width: 900px) {
  .gallery-cell {
    width: 240px;
  }
  .gallery-thumb-img {
    height: 155px;
  }
}

@media (max-width: 600px) {
  .gallery-cell {
    width: 210px;
  }
  .gallery-thumb-img {
    height: 140px;
  }
}

/* --------------------------------------------------------------------------
   Control row (position display + chunky arrow buttons)
   Arrow buttons reuse the same hard-edged chrome bevel formula as the
   primary navigation buttons (.nav-button, in style.css) for visual
   consistency with the site's chunky navigation.
   -------------------------------------------------------------------------- */
.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem 1.15rem;
}

/* Version 2.3: switched from the shared --metal-gradient* treatment to the
   approved "Rose Arcade" button treatment already implemented for the
   sidebar navigation and Social Links (style.css's --rose-arcade-* tokens
   — see that file for the full rationale/contrast verification). Reused
   here verbatim (same colors/gradient/bevel/text treatment); only the
   button's own dimensions/font-size (below, unchanged from before this
   pass) are Gallery-specific. `.gallery-arrow:disabled` is left in place,
   unused, since the Gallery's Prev/Next/lightbox controls are now
   circular and never actually disable (Version 2.3) — matching this
   project's existing practice of not deleting superseded rules. */
.gallery-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Press Start 2P", var(--font-heading);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--rose-arcade-text);
  text-shadow: 1px 1px 0 var(--rose-arcade-text-shadow);
  background: var(--rose-arcade-gradient);
  border: 4px solid var(--rose-arcade-border);
  border-radius: 0;
  box-shadow: var(--rose-arcade-bevel);
  cursor: pointer;
}

.gallery-arrow:hover:not(:disabled) {
  background: var(--rose-arcade-gradient-hover);
}

.gallery-arrow:active:not(:disabled) {
  background: var(--rose-arcade-gradient-current);
  box-shadow: var(--rose-arcade-bevel-current);
  color: var(--rose-arcade-current-text);
  text-shadow: 2px 2px 0 var(--rose-arcade-current-text-shadow);
}

.gallery-arrow:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.gallery-controls .gallery-arrow {
  width: 3rem;
  height: 3rem;
  font-size: 1.1rem;
}

.gallery-position {
  /* Version 2.1: switched from Pixelify Sans to the self-hosted Press
     Start 2P, Regular 400 only (no bold synthesis), falling back to the
     original monospace stack if unavailable. Font-size reduced and
     min-width increased because Press Start 2P's digit glyphs are wider
     per character than the prior stack, to avoid overflow. */
  font-family: "Press Start 2P", "Courier New", monospace;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--color-charcoal);
  min-width: 6rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Lightbox (native <dialog>)
   -------------------------------------------------------------------------- */
.gallery-lightbox {
  padding: 0;
  border: none;
  background: transparent;
  max-width: 100vw;
  max-height: 100dvh;
}

.gallery-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.gallery-lightbox__frame {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 92vw;
  max-width: 1100px;
  height: 92dvh;
  max-height: 92dvh;
  background: var(--color-charcoal);
  border: 6px solid #0d0a12;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.6);
  padding: 1rem;
  box-sizing: border-box;
}

.gallery-lightbox__toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.gallery-lightbox__position {
  /* Version 2.1: switched from Pixelify Sans to the self-hosted Press
     Start 2P, Regular 400 only (no bold synthesis), falling back to the
     original monospace stack if unavailable. Font-size reduced heavily —
     this label's longest text ("Film still 10 of 10") is far wider per
     character in Press Start 2P — and allowed to shrink/wrap instead of
     forcing the toolbar wider than the lightbox frame at narrow widths. */
  flex: 1 1 auto;
  min-width: 0;
  font-family: "Press Start 2P", "Courier New", monospace;
  font-weight: 400;
  font-size: clamp(0.5rem, 2.8vw, 0.7rem);
  line-height: 1.4;
  color: var(--color-yellow);
}

.gallery-lightbox__close {
  flex: 0 0 auto;
  height: 2.75rem;
  padding: 0 1.15rem;
  font-size: 0.55rem;
  letter-spacing: normal;
  text-transform: uppercase;
}

.gallery-lightbox__viewport {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.gallery-lightbox__viewport .gallery-arrow {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  font-size: 1.1rem;
}

.gallery-lightbox__image-wrap {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.gallery-lightbox__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.gallery-lightbox__caption {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-offwhite);
  text-align: center;
}