/* ============================================
   AMETHYST — villa gallery
   Full grid layout + preview wrapper for this
   villa page only. Independent from the other
   villa pages and from gallery.html — edit this
   file freely to give amethyst its own gallery
   layout without touching anyone else's.
   ============================================ */

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

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

/* Masonry via CSS multi-column, no forced crop. Each tile's height follows
   its photo's real proportions — that's the whole point of masonry: it's
   the layout that handles a mix of portrait/landscape neatly WITHOUT
   cropping any of them, unlike a uniform grid with object-fit: cover. */
.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 */
  background: var(--color-border, #e5e0d8); /* visible placeholder tint while an item's image is missing/broken */
}

.gallery-img {
  width: 100%;
  height: auto; /* no crop — box follows the image's own intrinsic ratio, full photo always visible */
  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;
}

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

/* ============================================
   DESKTOP ROW LAYOUT (min-width: 901px)
   "Justified rows" — a full rectangle: every
   row (4 / 5 / 5 / 3) spans 100% of the
   container width, left AND right edges straight,
   bottom edge even, gap 10px everywhere.

   Each tile gets a slot orientation via --r:
     P (portrait)  2:3 → --r = 0.6667
     L (landscape) 3:2 → --r = 1.5
   Rows:  1: P P P P  (S = 2.6667)
          2: L P P P P  (S = 4.1667)
          3: P P P P L  (S = 4.1667)
          4: L L L    (S = 4.5)

   Method: flex-wrap. flex-basis is the slot's
   share × 0.96 (row total slightly under 100%
   so the next row's first tile can never fit →
   rows break exactly 4/5/5/3, read left→right).
   flex-grow: var(--r) then stretches each row
   to exactly 100%; because both basis and grow
   are proportional to --r, every tile in a row
   ends up the same height H = (W − gaps) / S
   and width = --r × H. aspect-ratio: var(--r)
   fixes tile height; object-fit: cover absorbs
   small ratio differences (2:3 / 3:2 photos
   themselves are never cropped).
   All sizes are % / flex based — proportional at
   any desktop width and HiDPI-safe.
   Below 901px the masonry above takes over.
   ============================================ */
@media (min-width: 901px) {
  .gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    column-count: auto;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .gallery-item {
    break-inside: auto;
    -webkit-column-break-inside: auto;
    margin-bottom: 0; /* gap: 10px handles spacing in flex mode */
    overflow: hidden;
    aspect-ratio: var(--r);
    flex-grow: var(--r);
    flex-shrink: 1;
  }

  .gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Row 1 — tiles 1–4 (zenamethyst, amethystview,
     amethystkitchen, bedamethyst): P P P P */
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(2),
  .gallery-item:nth-child(3),
  .gallery-item:nth-child(4) {
    --r: 0.6667;
    flex-basis: calc((100% - 30px) * 0.24); /* (r / 2.6667) × 0.96 */
  }

  /* Row 2 — tiles 5–9 (gallery/item1–item5): L P P P P */
  .gallery-item:nth-child(5) { /* landscape */
    --r: 1.5;
    flex-basis: calc((100% - 40px) * 0.3456); /* (1.5 / 4.1667) × 0.96 */
  }
  .gallery-item:nth-child(6),
  .gallery-item:nth-child(7),
  .gallery-item:nth-child(8),
  .gallery-item:nth-child(9) { /* portrait */
    --r: 0.6667;
    flex-basis: calc((100% - 40px) * 0.1536); /* (0.6667 / 4.1667) × 0.96 */
  }

  /* Row 3 — tiles 10–14 (gallery/item6–item10): P P P P L */
  .gallery-item:nth-child(10),
  .gallery-item:nth-child(11),
  .gallery-item:nth-child(12),
  .gallery-item:nth-child(13) { /* portrait */
    --r: 0.6667;
    flex-basis: calc((100% - 40px) * 0.1536);
  }
  .gallery-item:nth-child(14) { /* landscape */
    --r: 1.5;
    flex-basis: calc((100% - 40px) * 0.3456);
  }

  /* Row 4 — tiles 15–17 (gallery/item11–item13): L L L */
  .gallery-item:nth-child(15),
  .gallery-item:nth-child(16),
  .gallery-item:nth-child(17) {
    --r: 1.5;
    flex-basis: calc((100% - 20px) * 0.32); /* (1.5 / 4.5) × 0.96 */
  }

  /* style.css's .wide (on tile 2, amethystview) must not widen the
     tile on desktop — it keeps exactly the row-1 slot size above. */
  .gallery-grid .gallery-item.wide {
    max-width: none;
    flex-basis: calc((100% - 30px) * 0.24);
    --r: 0.6667;
  }
}