/* Gallery. Loaded after /site.css, which carries the whole look.
   This file holds only what is particular to the gallery: its sky, the
   picture grid on the index, and the model viewer on an entry. */

:root { --sky: url("/gallery/GallerySky01.jpg"); }

/* ---------- index: pictures in a grid, grouped by kind ---------- */

.gallery-group { margin: 0 0 4.5em; }

.gallery-group-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 0 0 1.2em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--rule);
}

.gallery-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px 24px;
}

.gallery-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.gallery-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 0 0.8em;
  background: var(--ground);
  transition: opacity 0.18s ease;
}
.gallery-card:hover img,
.gallery-card:focus-visible img { opacity: 0.86; }
.gallery-card:focus-visible { outline: 1px solid var(--accent); outline-offset: 8px; }

.gallery-card-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.3;
  transition: color 0.18s ease;
}
.gallery-card:hover .gallery-card-title,
.gallery-card:focus-visible .gallery-card-title { color: var(--accent-2); }

.gallery-card-summary {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-top: 0.3em;
}

/* The line under the heading keeps the date line's large gap, so the heading
   and its line stand as the header. The reading line gives up that gap so it
   sits with the Discord line as one block; the Discord line keeps the gap
   before the first group. */
.gallery-index .gallery-reading { margin-bottom: 0.7em; }

/* The gallery index is wider than the prose column: pictures want room. */
.page.gallery-index { width: min(calc(100% - 24px), calc(1100px + 2 * var(--panel-pad))); }