/* Villa card photo carousel (task t_33b7880d).
   Own file on purpose: lib/lux.js and lux.css are shared with parallel
   sessions; the carousel is self-contained so any page that renders
   villaCard() can load it without touching their in-flight edits.
   Load AFTER smart-cards.css: the card is an <article> with a stretched
   .vlink overlay (z-index 1) and the carousel controls must sit above it.

   Structure (server-rendered, no JS needed to browse):
     article.vcard > a.vlink (stretched, z1) + div.vmedia.vmediap
       > .vstrip > img.vframe * N        (one per photo, max 6)
       > button.vnav.vprev / button.vnav.vnext
       > .vdots > button * N             (position indicator)
     plus the existing badge/pill/view overlays, unchanged.

   The strip translates by --i card-widths; --drag carries the finger
   position during a swipe. Cards with 0-1 photos render the plain .vmedia
   markup and none of this applies. */

/* --- strip --------------------------------------------------------------- */
.vmediap{--i:0}
.vmediap .vstrip{
  position:absolute;inset:0;display:flex;
  transform:translate3d(calc(var(--i,0) * -100% + var(--drag,0px)),0,0);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.vmediap.dragging .vstrip{transition:none}
.vmediap .vframe{
  flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;-webkit-user-drag:none;user-select:none;
}
/* the zoom-on-hover from lux.css would scale every frame and show seams
   between them while the strip moves — carousel cards don't zoom */
.vcard:hover .vmediap .vframe{transform:none}

/* --- arrows (desktop hover / focus; touch devices never see them) -------- */
.vmediap .vnav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:none;border-radius:50%;
  background:rgba(255,255,255,.95);color:#1f2937;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  opacity:0;pointer-events:none;transition:opacity .15s ease;
  cursor:pointer;padding:0;z-index:3;
}
.vmediap .vnav svg{width:15px;height:15px;display:block}
.vmediap .vprev{left:8px}
.vmediap .vnext{right:8px}
@media (hover:hover) and (pointer:fine){
  .vcard:hover .vmediap .vnav,
  .vmediap .vnav:focus-visible,
  .vmediap .vnav:focus{opacity:1;pointer-events:auto}
}
/* touch: no hover — arrows stay hidden, the swipe is the control */
@media (hover:none){.vmediap .vnav{display:none}}

/* --- dots ----------------------------------------------------------------- */
.vmediap .vdots{
  position:absolute;left:0;right:0;bottom:8px;z-index:3;
  display:flex;justify-content:center;gap:5px;
}
.vmediap .vdots button{
  width:7px;height:7px;border:none;border-radius:50%;padding:0;
  background:rgba(255,255,255,.78);box-shadow:0 0 2px rgba(0,0,0,.4);
  cursor:pointer;transition:background .15s ease,width .15s ease;
}
.vmediap .vdots button.cur{background:#fff;width:16px;border-radius:999px}
.vmediap .vdots button:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* --- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .vmediap .vstrip{transition:none}
}

/* t_a3b0be32 — the strip's flex items are <picture> frames now, not bare
 * <img>: keep every frame exactly one card wide. */
.vmediap .vstrip > picture{flex:0 0 100%;width:100%;height:100%;display:block}