/* Homepage: page-scoped rules. Loaded after css/style.css.
   Keep this file small; anything reusable belongs in css/style.css. */

/* Hero: property/pool-terrace-palms-wide.jpg (and the film poster, the same
   file). The desktop hero shows a band of the 3:2 photograph, about 21:9 and
   up to 4:1 once the height caps at 640px; 50% 80% keeps the loungers and
   the two walking figures whole, feet included. On phones the band is the
   full height of the file, so only the centred horizontal position applies. */
.hero__media img, .hero__media video { object-position: 50% 80%; }

/* Chalets block: the shared .amenities--3 falls back to a 2 + 1 grid
   below 860px. The three category names are short, so they stay on one
   row of three while the split is stacked (561 to 860px) and sit in one
   column on phones. */
@media (max-width: 860px) {
  .split__body .amenities--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .split__body .amenities--3 { grid-template-columns: 1fr; }
}

/* Gallery preview (Postcards). The shared .gallery is a masonry column
   layout, which leaves uneven column ends with only six mixed portrait
   and landscape images. Here every tile gets the same square crop in a
   plain grid: 3 by 2 on desktop, 2 by 3 below 860px, so the preview
   always ends on a straight line. The lightbox still shows the full
   photograph. gallery.html keeps the masonry. */
.home-gallery {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.home-gallery .gallery__item { margin: 0; }
.home-gallery .gallery__item img { aspect-ratio: 1 / 1; height: auto; }
/* The Club House sign hangs right of centre; a centre square would cut it.
   The photo is named by its media key, so the rule holds for the built-in
   copy and for the same photo coming from the staff system. (Live
   postcards also carry their own crop point, set inline by js/main.js.) */
.home-gallery img[data-media-key="site-property-club-house-sign-wide"] { object-position: 100% 50%; }
@media (max-width: 860px) {
  .home-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Food and Drink menu links: on phones the three buttons stack at full
   width instead of wrapping two plus one. */
@media (max-width: 560px) {
  .home-menus { flex-direction: column; align-items: stretch; }
  .home-menus .btn { width: 100%; justify-content: center; }
}