/* File: /css/gallery.css
   Purpose: Gallery grid and photo viewer for /inc/inc-gallery.asp and /js/gallery.js (classic-asp-photo-gallery).
   Version: 1.0.3 (2026-10-08: the viewer caption 500 like the tiles (Steve).)
   Version: 1.0.2 (2026-10-08: a video tile stays 4:3 whatever the video's shape: the video is placed inside the box, so a portrait clip no longer makes its tile taller (AuroraYacht).)
   Version: 1.0.1 (2026-10-08: captions 500 instead of 600, lighter (Steve, Marbella).)
   Version: 1.0.0 (classic-asp-photo-gallery 1.0.0; modelled on AuroraYacht /css/aurora-yacht-gallery.min.css, 2026-10-07)
   TruLouYacht (2026-10-08): TruLou's deep blue and blue (css/site.css tokens). Its own rules are at the end. */
:root { --gal-ink: #083a5a; --gal-accent: #0f6ea8; }

.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.gal-item { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid #e0e0e0;
  border-radius: 12px; overflow: hidden; color: var(--gal-ink); text-decoration: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .08); transition: transform .15s ease, box-shadow .15s ease; }
.gal-item:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, .12); }
.gal-item:focus-visible { outline: 3px solid var(--gal-accent); outline-offset: 2px; }
.gal-item[hidden] { display: none; }
.gal-item img, .gal-video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #000; }
.gal-video { position: relative; overflow: hidden; }
.gal-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.gal-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.gal-play::after { content: ""; position: absolute; left: 25px; top: 18px; border-style: solid; border-width: 14px 0 14px 23px;
  border-color: transparent transparent transparent #fff; }
.gal-caption { padding: 10px 8px 14px; text-align: center; font-weight: 500; letter-spacing: .02em; }
.gal-empty { text-align: center; padding: 2rem 1rem; color: #555; }
@media (max-width: 575px) { .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }

/* Viewer */
.gal-open { overflow: hidden; }
.gal-viewer { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .9); }
.gal-viewer[hidden] { display: none; }
.gal-stage { margin: 0; max-width: min(1100px, 92vw); text-align: center; }
.gal-stage img, .gal-stage video { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; border-radius: 8px; background: #000; }
.gal-stage [hidden] { display: none; }
.gal-label { margin-top: .5rem; color: #fff; font-weight: 500; }
.gal-viewer button { position: absolute; border: 0; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
  min-width: 44px; min-height: 44px; font-size: 1.8rem; line-height: 1; border-radius: 6px; }
.gal-viewer button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.gal-close { top: 12px; right: 12px; }
.gal-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.gal-next { right: 8px; top: 50%; transform: translateY(-50%); }
.gal-fullscreen { right: 12px; bottom: 12px; font-size: .85rem !important; padding: 0 12px; }
.gal-failed .gal-label { color: #ffb4a8; }
.gal-viewer:fullscreen { background: #000; }
.gal-viewer:fullscreen .gal-stage img, .gal-viewer:fullscreen .gal-stage video { max-height: 100vh; border-radius: 0; }

@media print {
  .gal-viewer, .gal-search, .gal-count, .gal-video { display: none !important; }
  .gal-grid { grid-template-columns: repeat(2, 1fr); gap: 14pt; }
  .gal-item { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
}
@media (prefers-reduced-motion: reduce) { .gal-item { transition: none; } .gal-item:hover { transform: none; } }

/* TruLouYacht: the hero photos are links that open the viewer (contract 14). */
a.hero-tile { display: block; color: inherit; text-decoration: none; }