/* ============================================
   MOONSTONE — villa gallery
   Desktop (≥901px): justified rows — every row
   (first and last included) fills 100% of the
   container, so the grid is one solid rectangle:
   straight left edge, straight right edge, flush
   bottom, constant 10px gaps, rows of 3 / 3 / 3 / 6
   tiles, visual order = DOM order, each row
   starting from the left.
   Row height is derived from the layout, not from
   the photos: H = (container − (n−1) × 10px) / S,
   tile width = --r × H, with only two slot ratios —
   POTRET (P) 2:3 → 0.6667, LANDSCAPE (L) 3:2 → 1.5.
   Photos at the slot ratio are not cropped; a
   photo whose ratio is slightly off loses only a
   hairline (object-fit: cover).
   Tablet/mobile (≤900px): masonry multi-column
   using the images' natural ratios.
   ============================================ */

.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 for ≥901px. */
.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 ---
   Every row, first and last included, spans the full container: straight
   left edge, straight right edge, flush bottom, 10px gaps, no empty space.
   Rows break exactly 3 / 3 / 3 / 6, in DOM order, each starting left.
     row height  H = (container − (n−1) × 10px) ÷ S
     tile width    = --r × H         (S = sum of that row's ratios)
   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 is what locks the
   3 / 3 / 3 / 6 breaks. flex-grow: var(--r) then stretches each row back
   out to exactly 100%; because both basis and grow are proportional to
   --r, every tile in a row also ends up the same height. */
@media (min-width: 901px) {
  .gallery-grid {
    /* kill the masonry multi-column behaviour */
    column-count: auto;
    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;
  }

  .gallery-item {
    break-inside: auto;
    -webkit-column-break-inside: auto;
    margin-bottom: 0; /* gap: 10px on the container replaces it */
    min-width: 0; /* safety net: never let a tile outgrow its basis (the
                     base rule's overflow: hidden already zeroes the
                     automatic minimum size, this just makes it explicit) */
    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%;
    object-fit: cover; /* straight edges win — only a hairline is cropped */
    object-position: center;
  }

  /* Row 1 — tiles 1–3 (item1 / item2 / item3): L L P, n=3, S=3.6667 */
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(2) { /* landscape */
    flex-basis: calc((100% - 20px) * 0.392727); /* (1.5 ÷ 3.6667) × 0.96 */
  }
  .gallery-item:nth-child(3) { /* portrait */
    flex-basis: calc((100% - 20px) * 0.174554); /* (0.6667 ÷ 3.6667) × 0.96 */
  }

  /* Row 2 — tiles 4–6 (item4 / gallery/item1 / gallery/item2): L L P, n=3, S=3.6667 */
  .gallery-item:nth-child(4),
  .gallery-item:nth-child(5) { /* landscape */
    flex-basis: calc((100% - 20px) * 0.392727);
  }
  .gallery-item:nth-child(6) { /* portrait */
    flex-basis: calc((100% - 20px) * 0.174554);
  }

  /* Row 3 — tiles 7–9 (gallery/item3 / gallery/item4 / gallery/item5):
     L L L, n=3, S=4.5 */
  .gallery-item:nth-child(7),
  .gallery-item:nth-child(8),
  .gallery-item:nth-child(9) { /* landscape */
    flex-basis: calc((100% - 20px) * 0.32); /* (1.5 ÷ 4.5) × 0.96 */
  }

  /* Row 4 — tiles 10–15 (gallery/item6 … gallery/item11): P P P P P L,
     n=6, S=4.8333 */
  .gallery-item:nth-child(10),
  .gallery-item:nth-child(11),
  .gallery-item:nth-child(12),
  .gallery-item:nth-child(13),
  .gallery-item:nth-child(14) { /* portrait */
    flex-basis: calc((100% - 50px) * 0.132420); /* (0.6667 ÷ 4.8333) × 0.96 */
  }
  .gallery-item:nth-child(15) { /* landscape */
    flex-basis: calc((100% - 50px) * 0.297931); /* (1.5 ÷ 4.8333) × 0.96 */
  }
}

/* Per-tile slot ratios (--r = width : height). Two values only:
   POTRET (P) 2:3 → 0.6667 | LANDSCAPE (L) 3:2 → 1.5.
   Order = DOM order = visual reading order, left → right, top → bottom.
   The number is the tile's position counted from the LEFT of each row,
   then down to the next row (not column by column):
   row 1 = 1–3, row 2 = 4–6, row 3 = 7–9, row 4 = 10–15. */
.gallery-item:nth-child(1)  { --r: 1.5; }    /* row 1 — item1         (L) */
.gallery-item:nth-child(2)  { --r: 1.5; }    /* row 1 — item2         (L) */
.gallery-item:nth-child(3)  { --r: 0.6667; } /* row 1 — item3         (P) */
.gallery-item:nth-child(4)  { --r: 1.5; }    /* row 2 — item4         (L) */
.gallery-item:nth-child(5)  { --r: 1.5; }    /* row 2 — gallery/item1 (L) */
.gallery-item:nth-child(6)  { --r: 0.6667; } /* row 2 — gallery/item2 (P) */
.gallery-item:nth-child(7)  { --r: 1.5; }    /* row 3 — gallery/item3 (L) */
.gallery-item:nth-child(8)  { --r: 1.5; }    /* row 3 — gallery/item4 (L) */
.gallery-item:nth-child(9)  { --r: 1.5; }    /* row 3 — gallery/item5 (L) */
.gallery-item:nth-child(10) { --r: 0.6667; } /* row 4 — gallery/item6 (P) */
.gallery-item:nth-child(11) { --r: 0.6667; } /* row 4 — gallery/item7 (P) */
.gallery-item:nth-child(12) { --r: 0.6667; } /* row 4 — gallery/item8 (P) */
.gallery-item:nth-child(13) { --r: 0.6667; } /* row 4 — gallery/item9 (P) */
.gallery-item:nth-child(14) { --r: 0.6667; } /* row 4 — gallery/item10 (P) */
.gallery-item:nth-child(15) { --r: 1.5; }    /* row 4 — gallery/item11 (L) */

/* --- Tablet / mobile: masonry multi-column ---
   Still the default above: no aspect-ratio, no flex sizing and no
   object-fit: cover here — each tile keeps its photo's natural height
   (height: auto) and nothing is cropped. 3 → 2 → 1 columns, DOM order. */
@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; }
}