/*
  Overview page (index.html) — 4-column photo grid.
  Page-specific rules only; shared nav/footer/reset live in base.css.

  Grid rhythm measured from Input/Overview.png (1920px reference,
  24px outer margin). Row-gap / top-clearance below are expressed as
  calc() combinations of the confirmed --space-* tokens (no ad hoc
  values) chosen to land within ~1-2% of the measured reference
  numbers:
    - row-gap    measured ~274px  -> calc(xl*2 + sm)    = 272px
    - grid top clearance measured ~254px -> calc(xl*2)  = 256px

  Revision 2026-07-22 (designer feedback round 1):
    - column-gap set to exactly var(--grid-gutter) (24px), replacing the
      earlier calc(xl+md+xs)=168px value. Row-gap rhythm kept as-is.
    - Portrait (aspect_ratio < 1) photos render at max-width 75% of
      their grid cell, left-aligned (default block alignment — no
      centering rule needed).

  Revision 2026-07-22 (designer feedback round 2):
    - The 75% max-width now applies to ALL photos, landscape included
      (round-1's "landscape 100%" reading reversed by the designer).
      Every image is 75% of its cell, left-aligned; landscape photos
      are therefore the same width as portraits, just shorter.
*/

.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: calc(var(--space-xl) * 2 + var(--space-sm));
  padding: 0 var(--grid-margin);
  padding-top: calc(var(--space-xl) * 2);
  padding-bottom: var(--space-xl);
}

.photo-card {
  display: block;
}

/* Round 15: media lives in a box that shows a soft placeholder tone
   (set inline from data) until the media has loaded, then the media
   fades in. The box carries the aspect ratio, so layout is stable
   before a single byte of image has arrived. */
.photo-card__media-box {
  display: block;
  overflow: hidden;
}

.photo-card__media-box img,
.photo-card__media-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity var(--motion-duration) var(--motion-easing);
}

.photo-card__media-box img.is-loaded,
.photo-card__media-box video.is-loaded {
  opacity: 1;
}

/* Round 21 (feedback): after the once-per-session reveal, the grid is
   marked .is-instant — media paints straight to full opacity with no
   tone and no fade (overview.js adds no .is-loaded class in this mode). */
.photo-grid.is-instant .photo-card__media-box img,
.photo-grid.is-instant .photo-card__media-box video {
  opacity: 1;
  transition: none;
}

/* Round 12 — NICHOLAS, fiddle here: grid media widths, as a share of
   the grid cell (currently both 80% per your call; the two blocks stay
   separate so you can split them again anytime). Left-aligned in the
   cell either way; video loops follow the same rules as photos. */
.photo-card--portrait .photo-card__media-box {
  width: 80%;
  max-width: 80%;
}

.photo-card--landscape .photo-card__media-box {
  width: 80%;
  max-width: 80%;
}

/* ---------------------------------------------------------------------
   Responsive (2026-07-22, designer-approved direction).
   Margins stay fixed at var(--grid-margin) (24px) at every breakpoint.
   Column-gap stays var(--grid-gutter) (24px) at every breakpoint — it
   was already the minimum sensible gutter, so there is no smaller step
   to fall back to. Row-gap steps down using existing --space-* tokens
   only (no new values). Portrait cards keep the 75%-of-cell rule; as
   the grid narrows to 2 then 1 column, "cell" narrows with it, per
   spec ("cell = full width" at 1 column).
--------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: calc(var(--space-xl) + var(--space-sm)); /* 144px — one xl step down from 272px */
  }
}

@media (max-width: 640px) {
  .photo-grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-lg); /* 64px — a further step down */
  }
}

/* Caption space is always reserved (not display:none) so the hover
   reveal never shifts layout — only opacity animates. */
.photo-card__caption {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  opacity: 0;
  transition: opacity var(--motion-duration) var(--motion-easing);
}

.photo-card:hover .photo-card__caption,
.photo-card:focus-visible .photo-card__caption {
  opacity: 1;
}