/* ============================================
   AQUAMARINE — villa gallery
   Desktop (≥901px): justified rows — every row,
   first and last included, fills 100% of the
   container, so the gallery is one solid
   rectangle: straight left edge, straight right
   edge, flush bottom, constant 10px gaps, visual
   order = DOM order (left → right, top → bottom),
   each row starting from the LEFT.
   19 tiles, rows of 4 / 5 / 6 / 4.
   Row height comes from the layout, not from the
   photos: H = (container − (n−1) × 10px) ÷ S,
   tile width = --r × H, where S is that row's sum
   of slot ratios. A photo whose own ratio differs
   from its slot is cropped (object-fit: cover)
   instead of bending the edge — straight edges win.
   Tablet/mobile (≤900px): masonry multi-column
   using the images' natural ratios, no crop.
   Layout style borrowed from the onyx gallery (rows 4 / 5 / 6 + a closing row of 4).
   Independent from the other villa pages and from
   gallery.html — edit this file freely.
   ============================================ */

.gallery-preview { margin-top: 3rem; }

.villa-gallery-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: center;
}

/* --- Base: true masonry via CSS multi-column (tablet / mobile) ---
   Each tile keeps its image's natural aspect ratio, so column heights
   self-balance from real photo dimensions. This is the default, and the
   desktop block below overrides it from 901px up. */
.gallery-grid {
  column-count: 4;
  column-gap: 10px;
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-item {
  break-inside: avoid; /* stops a tile being split across two columns */
  -webkit-column-break-inside: avoid; /* older Safari */
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  display: block; /* required inside a column container to avoid inline-gap artifacts */
}

.gallery-img {
  width: 100%;
  height: auto; /* natural aspect ratio drives each tile's height — the masonry effect */
  display: block;
  transition: transform 0.5s ease;
}

.gallery-item:hover .gallery-img {
  transform: scale(1.08);
}

.gallery-view-all {
  text-align: center;
  margin-top: 1.5rem;
}

/* --- Desktop ≥901px: justified rows — one solid rectangle ---
   Implementation: flex-basis = (100% − (n−1) × 10px) × (r ÷ S) × 0.96.
   The 0.96 factor keeps each row's bases just under 100%, so the next
   row's first tile can never fit on the line — that locks the row breaks.
   flex-grow: var(--r) then stretches each row back out to exactly 100%;
   because basis and grow are both proportional to --r, every tile in a
   row ends up the same height. All sizes are % / flex values — no fixed
   px — so the rectangle stays whole at any desktop width. */
@media (min-width: 901px) {
  .gallery-grid {
    column-count: auto; /* kill the masonry multi-column behaviour */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* every row starts from the LEFT */
    align-items: flex-start; /* height comes from aspect-ratio, not stretch */
    gap: 10px; /* 10px horizontal AND vertical, identical in every row */
  }

  .gallery-item {
    break-inside: auto;
    -webkit-column-break-inside: auto;
    margin-bottom: 0; /* gap: 10px on the container replaces it */
    min-width: 0; /* never let a tile outgrow its basis */
    aspect-ratio: var(--r); /* slot shape: width = --r × row height */
    flex-grow: var(--r); /* pulls each row out to exactly 100% */
    flex-shrink: 1;
  }

  .gallery-img {
    width: 100%;
    height: 100%; /* fills its slot, so the row edges stay straight */
    object-fit: cover; /* straight edges win — the photo crops, not the row */
    object-position: center;
  }


  /* Row 1 — tiles 1–4: n=4, S=5.1100 */
  .gallery-item:nth-child(1) { /* L 1.49 */
    flex-basis: calc((100% - 30px) * 0.279922); /* (1.49 ÷ 5.1100) × 0.96 */
  }
  .gallery-item:nth-child(2) { /* L 1.5 */
    flex-basis: calc((100% - 30px) * 0.281800); /* (1.5 ÷ 5.1100) × 0.96 */
  }
  .gallery-item:nth-child(3) { /* P 0.66 */
    flex-basis: calc((100% - 30px) * 0.123992); /* (0.66 ÷ 5.1100) × 0.96 */
  }
  .gallery-item:nth-child(4) { /* L 1.46 */
    flex-basis: calc((100% - 30px) * 0.274286); /* (1.46 ÷ 5.1100) × 0.96 */
  }

  /* Row 2 — tiles 5–9: n=5, S=5.0700 */
  .gallery-item:nth-child(5) { /* P 0.75 */
    flex-basis: calc((100% - 40px) * 0.142012); /* (0.75 ÷ 5.0700) × 0.96 */
  }
  .gallery-item:nth-child(6) { /* L 1.5 */
    flex-basis: calc((100% - 40px) * 0.284024); /* (1.5 ÷ 5.0700) × 0.96 */
  }
  .gallery-item:nth-child(7) { /* P 0.67 */
    flex-basis: calc((100% - 40px) * 0.126864); /* (0.67 ÷ 5.0700) × 0.96 */
  }
  .gallery-item:nth-child(8) { /* P 0.67 */
    flex-basis: calc((100% - 40px) * 0.126864); /* (0.67 ÷ 5.0700) × 0.96 */
  }
  .gallery-item:nth-child(9) { /* L 1.48 */
    flex-basis: calc((100% - 40px) * 0.280237); /* (1.48 ÷ 5.0700) × 0.96 */
  }

  /* Row 3 — tiles 10–15: n=6, S=7.1700 */
  .gallery-item:nth-child(10) { /* L 1.48 */
    flex-basis: calc((100% - 50px) * 0.198159); /* (1.48 ÷ 7.1700) × 0.96 */
  }
  .gallery-item:nth-child(11) { /* L 1.47 */
    flex-basis: calc((100% - 50px) * 0.196820); /* (1.47 ÷ 7.1700) × 0.96 */
  }
  .gallery-item:nth-child(12) { /* L 1.46 */
    flex-basis: calc((100% - 50px) * 0.195481); /* (1.46 ÷ 7.1700) × 0.96 */
  }
  .gallery-item:nth-child(13) { /* P 0.65 */
    flex-basis: calc((100% - 50px) * 0.087029); /* (0.65 ÷ 7.1700) × 0.96 */
  }
  .gallery-item:nth-child(14) { /* P 0.65 */
    flex-basis: calc((100% - 50px) * 0.087029); /* (0.65 ÷ 7.1700) × 0.96 */
  }
  .gallery-item:nth-child(15) { /* L 1.46 */
    flex-basis: calc((100% - 50px) * 0.195481); /* (1.46 ÷ 7.1700) × 0.96 */
  }

  /* Row 4 — tiles 16–19: n=4, S=4.3200 */
  .gallery-item:nth-child(16) { /* L 1.5 */
    flex-basis: calc((100% - 30px) * 0.333333); /* (1.5 ÷ 4.3200) × 0.96 */
  }
  .gallery-item:nth-child(17) { /* P 0.67 */
    flex-basis: calc((100% - 30px) * 0.148889); /* (0.67 ÷ 4.3200) × 0.96 */
  }
  .gallery-item:nth-child(18) { /* P 0.67 */
    flex-basis: calc((100% - 30px) * 0.148889); /* (0.67 ÷ 4.3200) × 0.96 */
  }
  .gallery-item:nth-child(19) { /* L 1.48 */
    flex-basis: calc((100% - 30px) * 0.328889); /* (1.48 ÷ 4.3200) × 0.96 */
  }

  /* style.css's legacy "wide" class sits on tile 2. On desktop it must NOT
     widen the tile — it keeps exactly its row slot above. Higher
     specificity than :nth-child(2), same values. */
  .gallery-grid .gallery-item.wide {
    max-width: none;
    --r: 1.5;
    flex-basis: calc((100% - 30px) * 0.281800);
  }
}

/* Per-tile slot ratios (--r = width : height of the tile's SLOT).
   Order = DOM order = visual reading order, left → right, then down to
   the next row (never column by column). */
.gallery-item:nth-child(1) { --r: 1.49; } /* row 1 (L) */
.gallery-item:nth-child(2) { --r: 1.5; } /* row 1 (L) */
.gallery-item:nth-child(3) { --r: 0.66; } /* row 1 (P) */
.gallery-item:nth-child(4) { --r: 1.46; } /* row 1 (L) */
.gallery-item:nth-child(5) { --r: 0.75; } /* row 2 (P) */
.gallery-item:nth-child(6) { --r: 1.5; } /* row 2 (L) */
.gallery-item:nth-child(7) { --r: 0.67; } /* row 2 (P) */
.gallery-item:nth-child(8) { --r: 0.67; } /* row 2 (P) */
.gallery-item:nth-child(9) { --r: 1.48; } /* row 2 (L) */
.gallery-item:nth-child(10) { --r: 1.48; } /* row 3 (L) */
.gallery-item:nth-child(11) { --r: 1.47; } /* row 3 (L) */
.gallery-item:nth-child(12) { --r: 1.46; } /* row 3 (L) */
.gallery-item:nth-child(13) { --r: 0.65; } /* row 3 (P) */
.gallery-item:nth-child(14) { --r: 0.65; } /* row 3 (P) */
.gallery-item:nth-child(15) { --r: 1.46; } /* row 3 (L) */
.gallery-item:nth-child(16) { --r: 1.5; } /* row 4 (L) */
.gallery-item:nth-child(17) { --r: 0.67; } /* row 4 (P) */
.gallery-item:nth-child(18) { --r: 0.67; } /* row 4 (P) */
.gallery-item:nth-child(19) { --r: 1.48; } /* row 4 (L) */

/* --- Responsive: tablet / mobile masonry (3 → 2 → 1 columns) ---
   No aspect-ratio, no flex sizing and no object-fit: cover below 901px —
   each tile keeps its photo's natural height and nothing is cropped.
   DOM order is unchanged. */
@media (max-width: 900px) {
  .gallery-grid { column-count: 3; }
}

@media (max-width: 640px) {
  .gallery-grid { column-count: 2; }
}

@media (max-width: 420px) {
  .gallery-grid { column-count: 1; }
}