/* ===========================================================================
   Villa gallery — shared behaviour (native horizontal scroll + thumbnail rail)
   Loaded on every villa detail page AFTER the page's inline <style> block, so
   equal-specificity rules here win. Paired with /assets/js/villa-gallery.js.
   Client correction: natural trackpad/touch/drag scrolling, arrows that advance
   ~one viewport, and a refined thumbnail filmstrip synced to the main gallery.
   =========================================================================== */

/* ── Main gallery: transform carousel → native scroller ─────────────────── */
.gallery-track {
  transition: none;
  transform: none;
  will-change: scroll-position;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--body-pad);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}
.gallery-track::-webkit-scrollbar { width: 0; height: 0; display: none; }

.gallery-item { scroll-snap-align: start; }

/* pointer-drag (desktop): suppress snap + image drag-ghost while dragging */
.gallery-track.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
}
.gallery-track.is-dragging .gallery-img { pointer-events: none; }
.gallery-img { -webkit-user-drag: none; user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .gallery-track { scroll-behavior: auto; }
}

/* ── Thumbnail filmstrip ───────────────────────────────────────────────── */
.gallery-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 18px var(--body-pad) 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}
.gallery-thumbs::-webkit-scrollbar { width: 0; height: 0; display: none; }

@media (prefers-reduced-motion: reduce) {
  .gallery-thumbs { scroll-behavior: auto; }
}

.gallery-thumb {
  flex: 0 0 auto;
  width: 100px;
  padding: 0 0 6px;
  margin: 0;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.28s var(--ease-luxury), border-color 0.28s var(--ease-luxury);
  -webkit-tap-highlight-color: transparent;
}
.gallery-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.gallery-thumb:hover { opacity: 0.8; }
.gallery-thumb.is-active {
  opacity: 1;
  border-bottom-color: var(--earth);
}
.gallery-thumb:focus-visible {
  outline: 1px solid var(--earth);
  outline-offset: 2px;
  opacity: 1;
}

@media (max-width: 900px) {
  .gallery-thumb { width: 88px; }
}
@media (max-width: 600px) {
  .gallery-thumbs { padding-left: 7px; padding-right: 7px; }
  .gallery-thumb { width: 72px; }
}

/* ── Category filter row: horizontal scroll instead of uneven wrap ──────
   Each villa page defines .gallery-filters/.gallery-filter-btn inline with
   flex-wrap:wrap, which lands unevenly on phones (sometimes stranding one
   category alone on its own line). Loaded after that inline block, this
   converts the row to a swipeable strip on phones — no arrows, native
   touch scroll, same buttons/labels/active state. Desktop is untouched. */
@media (max-width: 600px) {
  .gallery-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-left: var(--body-pad);
    padding-right: var(--body-pad);
  }
  .gallery-filters::-webkit-scrollbar { display: none; }
  .gallery-filter-btn {
    flex: 0 0 auto;
  }
}