/* ==========================================================================
   carousel.css — Reusable horizontal photo carousel
   --------------------------------------------------------------------------
   Project:   Kali Villas Mentawai
   Layer:     Component (ITCSS)
   Loaded by: Pages that mount a .gallery-carousel
              (currently: index.html, the-villas.html)
   --------------------------------------------------------------------------
   Markup contract

     <div class="gallery-carousel" aria-label="...">
       <button class="carousel-arrow carousel-prev">‹</button>
       <button class="carousel-arrow carousel-next">›</button>
       <div class="carousel-track">
         <button class="carousel-item" data-lightbox="..." data-alt="...">
           <img src="..." alt="...">
         </button>
         <!-- … many more cards … -->
       </div>
     </div>

   The watermark only appears on the enlarged lightbox view (.lightbox-stage
   carries .wm) — gallery/carousel thumbnails stay clean.

   Behaviour
     Desktop:  ~3 cards visible per snap, prev/next arrow controls,
               edge fade overlays signalling more content beyond the edges.
     Mobile:   first card centred on screen with a peek of the next card
               on the right. Arrows hidden, fingers swipe. Page-specific
               overrides (e.g. .gallery-carousel--villa) can adjust the
               card aspect-ratio and lay the track out as multiple rows.

   Behaviours wired by JS
     js/carousel.js — arrow controls + wheel-hijack fix + tap-to-centre.
     js/lightbox.js — opens any clicked [data-lightbox] in an overlay.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Container — relative anchor for arrows + edge fade overlays
   -------------------------------------------------------------------------- */
.gallery-carousel {
  position: relative;
}
.gallery-carousel::before,
.gallery-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  z-index: 3;
  pointer-events: none;
}
.gallery-carousel::before {
  left: 0;
  background: linear-gradient(to right, var(--sand) 10%, rgba(245, 239, 227, 0) 100%);
}
.gallery-carousel::after {
  right: 0;
  background: linear-gradient(to left,  var(--sand) 10%, rgba(245, 239, 227, 0) 100%);
}


/* --------------------------------------------------------------------------
   Track — the scrollable rail
   -------------------------------------------------------------------------- */
.carousel-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;                /* Firefox */
}
.carousel-track::-webkit-scrollbar {    /* WebKit */
  display: none;
}


/* --------------------------------------------------------------------------
   Card — sized so ~3.3 fit visually (3 fully + bleed under the right fade)
   -------------------------------------------------------------------------- */
.carousel-item {
  position: relative;
  flex: 0 0 calc((100% - 30px) / 3.3);
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
  overflow: hidden;
  background: var(--sand-deeper);
  border: none;
  padding: 0;
  text-decoration: none;
}
button.carousel-item { display: block; }   /* button reset for native gallery triggers */

.carousel-item img,
.carousel-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.carousel-item:hover img {
  transform: scale(1.04);
}


/* --------------------------------------------------------------------------
   Prev / next arrows — desktop only
   -------------------------------------------------------------------------- */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;                          /* above the fade overlays (z=3) */
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 239, 227, 0.92);
  border: 0.5px solid var(--sand-deeper);
  border-radius: 50%;
  color: var(--navy);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(28, 43, 74, 0.18);
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.carousel-arrow:hover {
  background: var(--terra);
  color: var(--sand);
}
.carousel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.carousel-prev { left:  18px; }
.carousel-next { right: 18px; }

/* On touch devices, swipe instead of buttons */
@media (hover: none) {
  .carousel-arrow { display: none; }
}


/* --------------------------------------------------------------------------
   Caption hint below the carousel — visible only on touch devices
   -------------------------------------------------------------------------- */
.carousel-hint {
  display: none;
  margin-top: 1rem;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-dim);
  text-align: center;
}
@media (hover: none) {
  .carousel-hint { display: block; }
}


/* --------------------------------------------------------------------------
   Mobile (< 901px) — first card centred, peek next on right, no fades
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .gallery-carousel::before,
  .gallery-carousel::after { display: none; }

  .carousel-track {
    margin: 0 -1.75rem;
    padding-inline: 12vw;             /* (100vw − 76vw)/2 — first card centred */
    scroll-padding-inline: 12vw;
  }
  .carousel-item {
    flex: 0 0 76vw;
    aspect-ratio: 3 / 4;
    scroll-snap-align: center;        /* every snap centres the card */
  }
  .carousel-arrow { display: none; }
}