/* ============================================================================
   gallery.css — Gallery page styles (Phase 2). Loaded only on /gallery.

   Sections:
     1. Category buttons
     2. The tile "wall" (CSS multi-column masonry) + tiles
     3. Lightbox (overlay, image, nav, top bar)
     4. Context menu + copy toast

   Reuses the shared dock-in animation from site.css (tiles carry data-dock).
   Themeable gallery values are declared as :root vars here so the later CSS pass has
   one place to touch.
   ============================================================================ */

:root {
  --gallery-columns: 3;              /* desktop column count for the wall      */
  --gallery-gap: 1em;                /* uniform padding between tiles           */
  --gallery-tile-radius: 6px;
  --lightbox-bg: rgba(0, 0, 0, 0.92);
}

/* ---------------------------------------------------------------------------
   1. CATEGORY BUTTONS — slim pills under the menu bar.
   --------------------------------------------------------------------------- */
.gallery-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.gallery-cat {
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: var(--nav-letterspacing);
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--menu-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  transition: background 160ms var(--anim-ease), color 160ms var(--anim-ease),
              border-color 160ms var(--anim-ease);
}
.gallery-cat:hover { border-color: var(--color-accent); }
.gallery-cat.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.gallery-cat__count { opacity: 0.6; font-size: 0.82em; margin-left: 0.3em; }
.gallery-cat.is-active .gallery-cat__count { opacity: 0.85; }

/* ---------------------------------------------------------------------------
   2. THE WALL — a row of equal-width column elements, each a vertical stack of
   tiles. gallery.js appends every newly loaded tile to the currently shortest
   column, so previously loaded tiles never move (a plain CSS multi-column layout
   re-balanced on each append, making the columns jump on every scroll load).
   Every thumbnail keeps its full aspect ratio (nothing is cropped).
   --------------------------------------------------------------------------- */
.gallery-grid {
  display: flex;
  align-items: flex-start;          /* columns grow independently from the top   */
  gap: var(--gallery-gap);
}
.gallery-col {
  flex: 1 1 0;                       /* equal-width columns                       */
  min-width: 0;                      /* allow shrinking below content width       */
  display: flex;
  flex-direction: column;
  gap: var(--gallery-gap);
}
.gallery-tile {
  margin: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--gallery-tile-radius);
  overflow: hidden;
  background: #eee;                 /* placeholder tone while the thumb loads   */
  cursor: zoom-in;
  line-height: 0;
}
.gallery-tile img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 220ms var(--anim-ease);
}
.gallery-tile:hover img { transform: scale(1.03); }

.gallery-sentinel { height: 1px; }

.gallery-empty { text-align: center; color: var(--color-muted); padding: 2rem 0; }

/* Column COUNT is managed by gallery.js — always 3 columns, at every screen size.
   On narrow screens the tiles simply get smaller; the gap below shrinks so three
   columns keep fitting on a phone. */
@media (max-width: 600px) {
  :root { --gallery-gap: 0.5em; }
}
@media (max-width: 380px) {
  :root { --gallery-gap: 0.35em; }
}

/* ---------------------------------------------------------------------------
   3. LIGHTBOX — full-screen overlay with the full-resolution image.
   --------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lightbox-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--anim-ease);
  touch-action: pan-y;             /* let JS handle horizontal swipes           */
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lightbox__img {
  max-width: 92vw;
  max-height: 84vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
  user-select: none;
  /* Pinch-zoom / pan is handled in JS (gallery.js enablePinchZoom); take the gesture
     away from the browser's own zoom/scroll so the handlers get every touch, and
     scale from the center to match the transform the script applies. */
  touch-action: none;
  transform-origin: center center;
  will-change: transform;
  -webkit-user-drag: none;
}

/* Top bar: counter on the left, copy-link + close on the right. */
.lightbox__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  color: #fff;
}
.lightbox__counter { font-size: 0.85rem; opacity: 0.8; }
.lightbox__actions { display: flex; gap: 0.5rem; }

.lightbox__btn {
  font: inherit;
  font-size: 0.8rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  transition: background 150ms var(--anim-ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.25); }

/* Prev/next arrows (hidden on touch — swipe is used there instead). */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 150ms var(--anim-ease);
}
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }
.lightbox__nav[disabled] { opacity: 0.25; cursor: default; }

@media (hover: none) {
  /* Touch devices: rely on swipe, free up the edges. */
  .lightbox__nav { display: none; }
}

/* ---------------------------------------------------------------------------
   4. CONTEXT MENU (right-click / long-press on a tile) + copy toast.
   --------------------------------------------------------------------------- */
.ctx-menu {
  position: fixed;
  z-index: 1100;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--menu-border);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  padding: 0.3rem;
  display: none;
}
.ctx-menu.is-open { display: block; }
.ctx-menu button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.85rem;
  background: none;
  border: 0;
  border-radius: 5px;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
}
.ctx-menu button:hover { background: #f1f1f1; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%) translateY(1rem);
  z-index: 1200;
  background: #111;
  color: #fff;
  font-size: 0.85rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--anim-ease), transform 200ms var(--anim-ease);
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }