/* proxies page — layered on top of style.css */

.proxy-sub { opacity: .75; margin: 0 0 1.25rem; }

/* 3 x 3 grid, each cell keeps real card proportions (63 x 88 mm) */
.proxy-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.6rem, 2vw, 1.25rem);
}
.proxy-grid li[hidden] { display: none; }
/* hold off showing anything until missing images have been filtered out */
.proxy-grid:not(.ready) { visibility: hidden; }
.proxy-empty { opacity: .75; font-style: italic; }
.proxy-empty[hidden] { display: none; }

.proxy-card {
  display: block;
  width: 100%;
  aspect-ratio: 63 / 88;
  padding: 0;
  border: 0;
  background: rgba(0,0,0,.25);
  border-radius: 4.5% / 3.2%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  filter: brightness(.92);
}
.proxy-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* hover: lift toward the viewer + highlight */
.proxy-card:hover,
.proxy-card:focus-visible {
  transform: translateY(-6px) scale(1.06);
  filter: brightness(1.05);
  box-shadow: 0 0 0 2px #e8923a, 0 0 18px 2px rgba(232,146,58,.55), 0 14px 24px rgba(0,0,0,.5);
  z-index: 2;
  outline: none;
}
.proxy-card:active { transform: translateY(-3px) scale(1.03); }

/* pager (only visible with more than 9 cards) */
.proxy-pager { display: flex; justify-content: center; gap: .4rem; margin-top: 1.25rem; }
.proxy-pager[hidden] { display: none; }
.proxy-pager button {
  font: inherit; color: inherit; cursor: pointer;
  background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px; padding: .2rem .65rem;
}
.proxy-pager button.active, .proxy-pager button:hover { border-color: #e8923a; box-shadow: 0 0 8px rgba(232,146,58,.5); }

/* focused viewer */
.no-scroll { overflow: hidden; }
.proxy-viewer {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8,10,12,.82);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: vfade .15s ease;
}
.proxy-viewer[hidden] { display: none; }
.viewer-inner { display: flex; align-items: center; gap: 1rem; max-width: 100%; padding: 1rem; }

.viewer-fig { margin: 0; text-align: center; color: #fff; }
.viewer-fig img {
  height: min(78vh, 125vw);       /* keep it inside small screens */
  max-width: 82vw;
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: 4.5% / 3.2%;
  box-shadow: 0 0 0 2px #e8923a, 0 0 40px rgba(232,146,58,.4), 0 20px 50px rgba(0,0,0,.6);
  animation: vpop .2s ease;
}
.viewer-fig figcaption { margin: .75rem 0 .6rem; display: flex; flex-direction: column; gap: .15rem; }
.v-name { font-size: 1.15rem; }
.v-orig { font-size: .85rem; opacity: .7; }
.v-orig[hidden] { display: none; }
.viewer-actions { display: flex; gap: .6rem; justify-content: center; }

.viewer-btn {
  font: inherit; color: #231a10; background: #e8923a; text-decoration: none;
  border: 1px solid #e8923a; border-radius: 8px; padding: .4rem 1rem; cursor: pointer;
}
.viewer-btn:hover { filter: brightness(1.1); }
.viewer-btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }

.viewer-nav {
  font-size: 2.5rem; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer;
  padding: .5rem; opacity: .7;
}
.viewer-nav:hover { opacity: 1; color: #e8923a; }

@keyframes vfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vpop  { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (max-width: 600px) {
  .viewer-nav { position: absolute; top: 50%; }
  .viewer-nav.prev { left: .25rem; } .viewer-nav.next { right: .25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .proxy-card, .proxy-viewer, .viewer-fig img { transition: none; animation: none; }
}