.gallery-header {
  margin-bottom: 24px;
}

/* Centred under a centred header. Ranged-left copy in a centred column read
   as a block that had slipped (owner, 2026-09-18: "weird uncentering stuff
   going on"). */
.gallery-intro {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}

.gallery-search-form {
  margin-bottom: 28px;
}

.gallery-search-form .games-search-input {
  display: block;
  width: 100%;
  min-width: 0;
}

.gallery-results-header {
  margin-bottom: 22px;
}

.gallery-results-header .section-title {
  margin-bottom: 8px;
}

/* Outranks `.gallery-results .entity-meta { text-align: start }` below. */
.gallery-results .gallery-results-header .gallery-result-count {
  margin: 0;
  text-align: center;
}

.gallery-results .entity-meta,
.gallery-detail .entity-meta {
  display: block;
  text-align: start;
}

.gallery-results .section-title {
  gap: 12px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  align-items: stretch;
  gap: 18px;
}

.gallery-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gallery-image-link {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.gallery-image-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 180ms ease, filter 180ms ease;
}

.gallery-image-link:hover img,
.gallery-image-link:focus-visible img {
  transform: scale(1.015);
  filter: brightness(1.06);
}

.gallery-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px;
}

.gallery-card-topline,
.gallery-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gallery-card-topline {
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 5px;
}

body.site-theme-charcoal .gallery-card-date,
body.site-theme-charcoal .gallery-card-scene {
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.gallery-card-scene {
  margin-left: auto;
}

body.site-theme-charcoal .gallery-card-scene::before {
  content: none;
}

.gallery-player-names {
  margin: 10px 0 0;
}

.gallery-player-names a,
.gallery-card-event a {
  position: relative;
  z-index: 1;
}

.gallery-card-event,
.gallery-card-location {
  margin: 8px 0 0;
}

.gallery-card-footer {
  margin-top: auto;
  padding-top: 14px;
}

.gallery-card-license {
  min-width: 0;
  overflow-wrap: anywhere;
}

.gallery-card-open {
  position: relative;
  z-index: 1;
}

/* The photograph page is a biography dossier (owner, 2026-10-13: "the back
   button and these pages should follow the style of the bios to some extend,
   not exact copy paste as that wouldnt work with this, but it should
   uniform"). Its hero, keys, rule and At a glance card are the bio's own
   components, styled in biographies-and-events.css, so the two cannot drift
   apart. This file places only what a bio lacks: the photograph beside the
   rail, and its source record under it. The icon-only back square that used
   to float above a centred heading is gone; back is the hero's first key.

   From 900px, where a bio's rail floats beside its story, the photograph and
   its record take the column left of the rail, and the rail stands at the
   right edge, level with the photograph, at a bio rail's width and gap.
   Narrower, the photograph comes first and the facts follow it: the
   photograph is what the visitor opened, and a bio's rail-first order would
   put a screen of facts above it on a phone. */
.gallery-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 40px;
  margin-bottom: 52px;
}

@media (min-width: 900px) {
  .gallery-detail-layout {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 34%, 400px);
    column-gap: clamp(32px, 4vw, 56px);
    align-items: start;
  }

  .gallery-detail-rail {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* The photograph's column starts on the article's left edge, under the
   heading, as a bio's story does, and the photograph is centred in it. Most
   photographs are height-capped below the column width, and a tall portrait
   pinned to the left edge left a wide empty gap before the rail (owner,
   2026-10-15: "this layout for the gallery doesnt work"; "if the image was
   centered it probably be fine"). The caption centres under it as a block. */
.gallery-detail-figure {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0;
}

.gallery-detail-figure a {
  display: block;
  max-width: 100%;
}

.gallery-detail-figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(72vh, 820px);
  object-fit: contain;
}

.gallery-detail-figure figcaption {
  max-width: 720px;
}

.gallery-detail-list {
  margin: 0;
}

.gallery-detail-row {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
  gap: 20px;
  padding: 15px 0;
}

.gallery-detail-row dt,
.gallery-detail-row dd {
  margin: 0;
}

.gallery-detail-row dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.gallery-detail-note {
  display: block;
  margin-top: 5px;
}

.gallery-filename {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .gallery-results-header {
    padding: 0 14px;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(245px, 100%), 1fr));
    gap: 12px;
  }

  .gallery-card {
    border-left-width: 0;
    border-right-width: 0;
    border-radius: 0;
  }

  .gallery-detail-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  /* Each key takes a full row on a phone, as on a player bio, rather than
     wrapping into a ragged pair and a stray third key. */
  .gallery-detail .bio-hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .gallery-detail .bio-hero-actions .bio-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-image-link img {
    transition: none;
  }
}