/* PHOTO-BANDS-0610: the ONE rule for a row of photos on the home page. Both render sites use it (public/index.html: #gallery-grid and
   #mission-cards; public/js/shell-components.js: .hkplc-gallery-grid and .hkplc-mission-cards, which carry class "photo-band").

   A band is a centred, wrapping flex row whose cells have the width of ONE column of the full grid: a row with fewer photos than
   columns (2 photos in a 3-column gallery, 3 mission cards in a 4-column band, the last row of 7 photos) is CENTRED instead of
   leaving the right-hand third empty. Full rows look exactly like the grid they replace.

   From 769 px up only: the phone swipe strip (css/h-scroll.css, max-width 768) is untouched. Columns per band: data-band="gallery"
   = 3; data-band="mission" = 2, and 4 from 1024 px. */
.photo-band { --pb-gap: 16px; }
.photo-band[data-band="gallery"] { --pb-cols: 3; }
.photo-band[data-band="mission"] { --pb-cols: 2; }
@media (min-width: 1024px) { .photo-band[data-band="mission"] { --pb-cols: 4; } }
@media (min-width: 769px) {
  .photo-band { display: flex !important; flex-wrap: wrap; justify-content: center; gap: var(--pb-gap); overflow: visible; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .photo-band.photo-band > * { flex: 0 0 calc((100% - (var(--pb-cols, 3) - 1) * var(--pb-gap)) / var(--pb-cols, 3)); max-width: calc((100% - (var(--pb-cols, 3) - 1) * var(--pb-gap)) / var(--pb-cols, 3)); min-width: 0; }
}