/* ============================================
   ONYX — 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.
   15 tiles, rows of 5 / 5 / 5.
   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 aquamarine gallery (only P 2:3 and L 3:2 slots, rows of 5).
   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–5: n=5, S=5.0001 */
  .gallery-item:nth-child(1) { /* L 1.5 */
    flex-basis: calc((100% - 40px) * 0.287994); /* (1.5 ÷ 5.0001) × 0.96 */
  }
  .gallery-item:nth-child(2) { /* P 0.6667 */
    flex-basis: calc((100% - 40px) * 0.128004); /* (0.6667 ÷ 5.0001) × 0.96 */
  }
  .gallery-item:nth-child(3) { /* P 0.6667 */
    flex-basis: calc((100% - 40px) * 0.128004); /* (0.6667 ÷ 5.0001) × 0.96 */
  }
  .gallery-item:nth-child(4) { /* P 0.6667 */
    flex-basis: calc((100% - 40px) * 0.128004); /* (0.6667 ÷ 5.0001) × 0.96 */
  }
  .gallery-item:nth-child(5) { /* L 1.5 */
    flex-basis: calc((100% - 40px) * 0.287994); /* (1.5 ÷ 5.0001) × 0.96 */
  }

  /* Row 2 — tiles 6–10: n=5, S=5.0001 */
  .gallery-item:nth-child(6) { /* L 1.5 */
    flex-basis: calc((100% - 40px) * 0.287994); /* (1.5 ÷ 5.0001) × 0.96 */
  }
  .gallery-item:nth-child(7) { /* P 0.6667 */
    flex-basis: calc((100% - 40px) * 0.128004); /* (0.6667 ÷ 5.0001) × 0.96 */
  }
  .gallery-item:nth-child(8) { /* P 0.6667 */
    flex-basis: calc((100% - 40px) * 0.128004); /* (0.6667 ÷ 5.0001) × 0.96 */
  }
  .gallery-item:nth-child(9) { /* L 1.5 */
    flex-basis: calc((100% - 40px) * 0.287994); /* (1.5 ÷ 5.0001) × 0.96 */
  }
  .gallery-item:nth-child(10) { /* P 0.6667 */
    flex-basis: calc((100% - 40px) * 0.128004); /* (0.6667 ÷ 5.0001) × 0.96 */
  }

  /* Row 3 — tiles 11–15: n=5, S=5.0001 */
  .gallery-item:nth-child(11) { /* P 0.6667 */
    flex-basis: calc((100% - 40px) * 0.128004); /* (0.6667 ÷ 5.0001) × 0.96 */
  }
  .gallery-item:nth-child(12) { /* L 1.5 */
    flex-basis: calc((100% - 40px) * 0.287994); /* (1.5 ÷ 5.0001) × 0.96 */
  }
  .gallery-item:nth-child(13) { /* P 0.6667 */
    flex-basis: calc((100% - 40px) * 0.128004); /* (0.6667 ÷ 5.0001) × 0.96 */
  }
  .gallery-item:nth-child(14) { /* L 1.5 */
    flex-basis: calc((100% - 40px) * 0.287994); /* (1.5 ÷ 5.0001) × 0.96 */
  }
  .gallery-item:nth-child(15) { /* P 0.6667 */
    flex-basis: calc((100% - 40px) * 0.128004); /* (0.6667 ÷ 5.0001) × 0.96 */
  }

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

/* 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.5; } /* row 1 (L) */
.gallery-item:nth-child(2) { --r: 0.6667; } /* row 1 (P) */
.gallery-item:nth-child(3) { --r: 0.6667; } /* row 1 (P) */
.gallery-item:nth-child(4) { --r: 0.6667; } /* row 1 (P) */
.gallery-item:nth-child(5) { --r: 1.5; } /* row 1 (L) */
.gallery-item:nth-child(6) { --r: 1.5; } /* row 2 (L) */
.gallery-item:nth-child(7) { --r: 0.6667; } /* row 2 (P) */
.gallery-item:nth-child(8) { --r: 0.6667; } /* row 2 (P) */
.gallery-item:nth-child(9) { --r: 1.5; } /* row 2 (L) */
.gallery-item:nth-child(10) { --r: 0.6667; } /* row 2 (P) */
.gallery-item:nth-child(11) { --r: 0.6667; } /* row 3 (P) */
.gallery-item:nth-child(12) { --r: 1.5; } /* row 3 (L) */
.gallery-item:nth-child(13) { --r: 0.6667; } /* row 3 (P) */
.gallery-item:nth-child(14) { --r: 1.5; } /* row 3 (L) */
.gallery-item:nth-child(15) { --r: 0.6667; } /* row 3 (P) */

/* --- 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; }
}