/* ---------- Photography (Figma 129:1393) ----------
   Five galleries in the 1196px column, same rhythm as the other pages:
   48px under the intro, 96px between sports, Body/S Hairline caption 8px
   above each gallery, 24px gutters.

   Rows are justified: every photo keeps its Figma crop shape (--ar = w/h)
   and grows in proportion to it, so each row fills the column exactly and
   its photos share one height. Each gallery ends on a half-width closer. */

.cs-intro + .cs-section.ph-group { margin-top: 48px; }
.ph-group > .cs-cap { margin: 0 0 var(--space-xs); }

.ph-rows { display: flex; flex-direction: column; gap: var(--space-md); }
.ph-row { display: flex; align-items: flex-start; gap: var(--space-md); }

.cs-section .ph-row > img {
  flex: var(--ar) 1 0;
  width: 0;
  min-width: 0;
  height: auto;
  aspect-ratio: var(--ar);
  object-fit: cover;
}
.cs-section .ph-row--closer > img { flex: none; width: calc((100% - var(--space-md)) / 2); }

/* Phones: landscape photos run full width, portrait and square ones pair up
   two-across (--po reorders a row so pairs sit together) */
@media (max-width: 640px) {
  .cs-intro + .cs-section.ph-group { margin-top: var(--space-lg); }
  .ph-rows, .ph-row { gap: var(--space-sm); }
  .ph-row { flex-wrap: wrap; }
  .cs-section .ph-row > img { order: var(--po, 0); }
  .cs-section .ph-row > img.ph-full,
  .cs-section .ph-row--closer > img { flex: 1 1 100%; width: 100%; }
}

/* Basketball closer: trimmed 4% off the bottom, clear of the shirt logo */
.cs-section #basketball-closer { object-position: 50% 0; }