/* =====================================================
   ACC SPORTS GALLERY SYSTEM
   A dedicated layout for /personal-work/sports — deliberately
   NOT the Places gallery.css system. Same visual language
   (tokens.css vars, .media/.media__img/.reveal from base.css,
   same gutter/margin rhythm, same editorial restraint — every
   box's aspect-ratio is set inline to each photo's real ratio,
   never a fixed crop shape) but a different default density:
   sports photography reads best dense, so three columns is the
   default unit here instead of Places' two. Breaks — a full-
   width single, a two-column duo for a matched vertical pair —
   are the exception, used only where a photo or pair earns it.

   Column balance for every .trio/.duo block is solved by exact
   (or near-exact) weight-matching across columns, not eyeballed
   — same discipline as the Places pages, extended to three
   columns instead of two.
===================================================== */

.sports-gallery{
  display:flex;
  flex-direction:column;
  gap:var(--gutter);
  margin:0 var(--margin);
  padding-bottom:clamp(56px,7vw,96px);
}

/* intro block above the gallery — mirrors gallery.css's .project-intro
   (Places pages get this from gallery.css; Sports gets its own copy
   here since it deliberately doesn't link gallery.css at all).
   .body-text max-width widened 44ch -> 52ch (most recent pass) so
   the current one-sentence copy fits on a single line at desktop
   widths instead of wrapping to two; text-wrap:pretty keeps any
   wrap (mobile, or future longer copy) from stranding an orphaned
   word on its own last line. Font-size/weight/margin auto-centering
   untouched. */
.project-intro{
  padding:clamp(40px,5.6vw,70px) var(--margin) clamp(36px,5.3vw,66px);
  text-align:center;
}
.project-intro .eyebrow{ text-align:center; margin-bottom:14px; }
.project-intro h1{ margin-bottom:18px; }
.project-intro .body-text{ max-width:52ch; margin:0 auto; text-wrap:pretty; }

.sports-gallery .trio{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:var(--gutter);
  align-items:start;
}
.sports-gallery .duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--gutter);
  align-items:start;
}
.sports-gallery .trio .col,
.sports-gallery .duo .col{
  display:flex;
  flex-direction:column;
  gap:var(--gutter);
}

@media (max-width:900px){
  .sports-gallery .trio{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .sports-gallery .trio{ grid-template-columns:1fr; }
  .sports-gallery .duo{ grid-template-columns:1fr; }
}