/* gallery.css — The archive: medium tabs (drill-down pages), dense uncropped
   tile grid, by-project view, and the shared metadata lightbox. */

/* ===== GALLERY ===== */

/* ----- Top bar: medium tabs + by-project side link ----- */
.gallery-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
/* Shrinks to the tabs' width and centers, so the right-aligned "browse by
   project" link lines up with the rightmost category button. */
.gallery-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gallery-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
}

.gallery-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 64px;
  padding: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: regular;
  font-size: var(--font-body);
  color: #000;
  text-decoration: none;
}
.gallery-tab:hover { background: rgba(255,255,255,0.4); border-color: #808080; }
.gallery-tab.active { background: rgba(255,255,255,0.7); border-color: #000; }

.gallery-tab-ico {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  overflow: hidden;
}
.gallery-tab-ico img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.gallery-tab-glyph { display: none; font-size: 18px; color: #808080; line-height: 1; }
.gallery-tab-ico.noimg img { display: none; }
.gallery-tab-ico.noimg .gallery-tab-glyph { display: block; }

.gallery-tab-label { white-space: nowrap; line-height: 1.1; }
.gallery-tab-count { color: #808080; line-height: 1; }

/* "Browse by project" — the second axis, kept off to the side. */
.gallery-byproj {
  font-family: regular;
  font-size: var(--font-body);
  color: #000080;
  white-space: nowrap;
  align-self: flex-end;
  cursor: pointer;
}
.gallery-byproj:hover,
.gallery-byproj.active { text-decoration: underline; }

/* ----- Subhead (which view + count) ----- */
.gallery-subhead {
  font-family: regular;
  font-size: var(--font-body);
  color: #000080;
  border-bottom: 1px solid #9a8a98;
  padding-bottom: 3px;
  margin-bottom: 8px;
}

/* ----- Dense tile grid ----- */
.gallery-grid { min-height: 100px; }
.gallery-cells {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
/* Project view: smaller cropped-square thumbnails. */
.gallery-cells--small {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 4px;
}

.gallery-cell { cursor: pointer; }

/* ===== Justified gallery (Flickr-style rows; JS sets each cell's width/height) ===== */
.gallery-justified { display: flex; flex-wrap: wrap; gap: 6px; }
.gj-cell {
  position: relative;
  overflow: hidden;
  background: #ddd6de;
  cursor: pointer;
  line-height: 0;
}
.gj-cell:hover { outline: 2px solid #000080; outline-offset: -2px; }
.gj-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gj-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: none;
  padding: 3px 6px 4px;
  line-height: 1.2;
  background: linear-gradient(transparent, rgba(0,0,0,0.78));
}
.gj-cell:hover .gj-info { display: block; }
.gj-title, .gj-meta {
  display: block;
  font-size: var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gj-title { color: #fff; }
.gj-meta { color: #cbc2da; }

.gallery-cell-frame {
  position: relative;
  background: #fff;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  overflow: hidden;
}
.gallery-cell:hover .gallery-cell-frame { border-color: #000080; }

/* Matte: images sit uncropped inside, spare space filled by the matte. */
.gallery-cell-matte {
  aspect-ratio: 4 / 3;
  background: #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gallery-cell-matte img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}

/* Info surfaces only on hover — poking around reveals it. */
.gallery-cell-info {
  display: none;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(26,26,46,0.86);
  padding: 2px 4px;
}
.gallery-cell:hover .gallery-cell-info { display: block; }
.gallery-cell-title,
.gallery-cell-meta {
  display: block;
  font-size: var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery-cell-title { color: #fff; }
.gallery-cell-meta { color: #b9b0c8; }

/* Project thumbnails: cropped squares, no hover info (the original style, smaller). */
.gallery-ptile {
  aspect-ratio: 1 / 1;
  background: #808080;
  border: 1px solid #808080;
  overflow: hidden;
  cursor: pointer;
}
.gallery-ptile:hover { border-color: #000080; }
.gallery-ptile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* External-link glyph (square with an arrow escaping the corner). */
.ext-ico { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; flex-shrink: 0; }

/* ----- By-project grouped view ----- */
.gallery-proj-section { margin-bottom: 12px; }
.gallery-proj-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid #808080;
  font-family: regular;
  font-size: var(--font-body);
  color: #000080;
  text-decoration: none;
}
.gallery-proj-head:hover .gallery-proj-name { text-decoration: underline; }
.gallery-proj-count { margin-left: auto; color: #808080; }

.gallery-empty,
.gallery-loading {
  color: #808080;
  font-family: regular;
  font-size: var(--font-body);
  padding: 8px;
}

/* ===== LIGHTBOX ===== */
/* Fixed full-window overlay (a child of #cursor-layer, outside the scroller so it
   doesn't scroll). z-index sits above the footer (501) so it darkens everything. */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 1000;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;   /* centre the fixed-region stack vertically (column is now full-height) */
  /* Fixed regions (design px): 360 image + 48 text + 56 previews = 464, centred.
     32px side padding -> a fixed 576x360 image area. Heights never change, so nothing
     shifts when the image, caption, or preview content varies. */
  padding: 0 32px;
}

.lightbox.active { display: flex; }

/* Image area: a FIXED 576x360 box (576 wide from the 32px side padding). Every image
   is scaled to fit within it — small images upscale, large downscale — object-fit. */
.lightbox-content {
  flex: 0 0 360px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lightbox-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  image-rendering: pixelated;
}

/* Text area: fixed 48px below the image. */
.lightbox-info {
  flex: 0 0 48px;
  height: 48px;
  color: #fff;
  text-align: center;
  font-family: regular;
  font-size: var(--font-body);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Full metadata panel (rich gallery items) — retro framed box. */
.lightbox-caption.lb-meta {
  display: inline-block;
  text-align: left;
  background: #1f1f33;
  border: 2px solid;
  border-color: #808080 #000 #000 #808080;
  padding: 6px 9px;
  max-width: 360px;
}
.lb-meta-title { font-family: heading; font-weight: bold; font-size: var(--font-heading); color: #fff; margin-bottom: 2px; }
.lb-meta-sub { font-size: var(--font-body); color: #ff9ec0; margin-bottom: 4px; }
.lb-meta-desc { font-size: var(--font-body); color: #dcdce8; margin-bottom: 4px; }
.lb-meta-proj a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-body);
  color: #9ec5ff;
  cursor: pointer;
}
.lb-meta-proj a:hover { text-decoration: underline; }

.lightbox-close {
  position: absolute;
  top: 8px; right: 8px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: regular;
  font-size: var(--font-body);
  z-index: 10;
  padding: 2px;
}

.lightbox-close:hover { color: #ff8c9d; }

.lightbox-nav {
  position: absolute;
  /* Vertical centre of the image area within the centred stack:
     50% - (stack 464/2) + (image 360/2) = 50% - 52px. */
  top: calc(50% - 52px);
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: regular;
  font-size: 14px;
  z-index: 10;
  padding: 4px;
  display: none;
}

.lightbox-nav:hover { color: #ff8c9d; }

.lightbox.has-nav .lightbox-nav { display: block; }

.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }

/* Image previews: fixed 56px region. A coverflow strip — the centre thumbnail is the
   current image (largest), the rest shrink/fade with distance. The window clips. */
.lightbox-thumbs {
  display: none;
  flex: 0 0 56px;
  height: 56px;
  position: relative;
  overflow: hidden;
}

.lightbox.has-nav .lightbox-thumbs { display: block; }

/* The sliding track: every thumbnail is a flex item here, so their spacing is fixed by
   layout and CANNOT collapse. js/router.js translates the track to centre the current
   thumb. The track's own height/centre line up with the 56px region. */
.lightbox-track {
  position: absolute;
  top: 0;
  left: 50%;
  height: 56px;
  display: flex;
  align-items: center;
  transition: transform 0.28s ease;
  will-change: transform;
}

.lightbox-thumb {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  margin: 0 4px;                 /* stride = 48 + 4 + 4 = 56px (STRIDE in router.js) */
  box-sizing: border-box;
  border: 2px solid #555;
  overflow: hidden;
  cursor: pointer;
  opacity: 0;                    /* default hidden; JS reveals thumbs near the centre */
  transform-origin: center;
  /* scale() + opacity are set inline by JS. transform is visual-only, so scaling a
     thumb never shifts its neighbours — the strip cannot bunch. */
  transition: transform 0.28s ease, opacity 0.28s ease, border-color 0.1s ease;
}

.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }

.lightbox-thumb.active { border-color: #fff; }

.lightbox-thumb:not(.active):hover { border-color: #ff9ec0; }