/* Gallery (Postcards): page-only rules.
   Everything else comes from css/style.css (hero, chips, gallery, lightbox). */

/* Opening: property/club-house-pool-wide.jpg. The hero shows about two thirds
   of its height on wide screens; 85% keeps the Club House's glass front and
   the pool together, where the centre would cut the pool away. */
.hero__media img { object-position: 50% 85%; }

/* The filter chips only do something once js/main.js runs, so readers
   without scripts see the static grid on its own, no inert buttons. */
html:not(.js) .chips { display: none; }

/* Grouped grid on wide screens. Each category holds three to six images, so
   the shared three-column masonry leaves a third of most rows empty.
   Justified rows fill the width instead: a tile's basis and growth follow
   its aspect ratio (3:2 or 4:5), so every tile in a row shares one height. */
@media (min-width: 861px) {
  .gallery__group .gallery {
    column-count: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
  }
  .gallery__group .gallery__item {
    margin: 0;
    flex: 150 1 34%;                 /* 3:2 tiles */
    max-width: calc(66.666% - 7px);  /* a tile left alone on a row never fills it */
  }
  .gallery__group .gallery__item--tall {
    flex: 80 1 18.13%;               /* 4:5 tiles, same target height as 3:2 */
    max-width: calc(40% - 7px);
  }
  /* Exactly four tiles sit in one row. */
  .gallery__group .gallery:has(> :nth-child(4):last-child) .gallery__item { flex-basis: 30%; }
  .gallery__group .gallery:has(> :nth-child(4):last-child) .gallery__item--tall { flex-basis: 16%; }
  /* Five tiles, or seven and more: the last row keeps its natural size instead of stretching. */
  .gallery__group .gallery:has(> :nth-child(5))::after { content: ""; flex: 9999 1 auto; }
  /* Exactly six tiles: two full rows of three, whatever the mix of 3:2 and 4:5.
     The ::before pseudo-element becomes a zero-height, full-width break that
     order places between tiles 3 and 4, and the spacer above is switched off,
     so both rows justify at one height each. The row gap moves onto tiles 1
     to 3, because the break sits on a line of its own. The bases are the
     four-tile ones, so any three tiles fit a row. */
  .gallery__group .gallery:has(> :nth-child(6):last-child) { row-gap: 0; }
  .gallery__group .gallery:has(> :nth-child(6):last-child)::before { content: ""; order: 2; flex: 0 0 100%; height: 0; }
  .gallery__group .gallery:has(> :nth-child(6):last-child)::after { content: none; }
  .gallery__group .gallery:has(> :nth-child(6):last-child) > .gallery__item { order: 3; flex-basis: 30%; }
  .gallery__group .gallery:has(> :nth-child(6):last-child) > .gallery__item--tall { flex-basis: 16%; }
  .gallery__group .gallery:has(> :nth-child(6):last-child) > .gallery__item:nth-child(-n+3) { order: 1; margin-bottom: 14px; }
}

/* Grouped grid and the static no-JS fallback below 861px: flex rows
   instead of the shared two-column masonry, which leaves a gap under a
   short 3:2 tile set beside a 4:5 one. */
@media (max-width: 860px) {
  .gallery__group .gallery,
  [data-gallery] > .gallery {
    columns: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
  }
  .gallery__group .gallery__item,
  [data-gallery] > .gallery > .gallery__item { margin: 0; }
}

/* Tablet, 561px to 860px: justified rows of two. Basis and growth both
   follow the aspect ratio (48% for 3:2, 25.6% for 4:5), so two tiles of
   any mix share a row at one height (3:2 beside 3:2 at half each) and a
   third never fits. A tile left alone on a row is capped (3:2 at two
   thirds, 4:5 at half) instead of stretching to the full width. A group
   of exactly three sits in one row. */
@media (min-width: 561px) and (max-width: 860px) {
  .gallery__group .gallery__item,
  [data-gallery] > .gallery > .gallery__item {
    flex: 150 1 48%;
    max-width: calc(66.666% - 5px);
  }
  .gallery__group .gallery__item--tall,
  [data-gallery] > .gallery > .gallery__item--tall {
    flex: 80 1 25.6%;
    max-width: calc(50% - 5px);
  }
  .gallery__group .gallery:has(> :nth-child(3):last-child) .gallery__item { flex-basis: 30%; }
  .gallery__group .gallery:has(> :nth-child(3):last-child) .gallery__item--tall { flex-basis: 16%; }
}

/* Phone, up to 560px: rows of at most two, no holes. A 4:5 tile takes
   34.78% and a 3:2 tile 65.22% of a row, the widths at which both reach
   the same height, so a mixed pair fills the row exactly. Two 4:5 tiles
   grow to half each; two 3:2 tiles cannot share a row, so each takes the
   full width. One pixel is kept back so rounding never forces a wrap. */
@media (max-width: 560px) {
  /* The phone hero shows about half the width of property/club-house-pool-wide.jpg,
     and all of its height; 88% keeps the Club House and the pool in frame, with
     the palms trimmed at the left. */
  .hero__media img { object-position: 88% 50%; }
  .gallery__group .gallery__item,
  [data-gallery] > .gallery > .gallery__item { flex: 1 1 calc((100% - 11px) * .6522); }
  .gallery__group .gallery__item--tall,
  [data-gallery] > .gallery > .gallery__item--tall { flex-basis: calc((100% - 11px) * .3478); }
}