/* ═══════════════════════════════════════════════════════════════════════
   dsx-slider — shared styles for all property galleries.
   Loaded ONCE via Squarespace Settings → Advanced → Code Injection (footer).
   Namespaced under .dsx-* so nothing collides with Squarespace's own CSS.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── layout ─────────────────────────────────────────────────────────── */
.dsx-slider{--dsx-ratio:2/1;--dsx-ease:cubic-bezier(.25,.46,.45,.94);
  position:relative;width:100%;margin:0 auto;font-family:inherit;-webkit-tap-highlight-color:transparent}
.dsx-stage{position:relative;width:100%;aspect-ratio:var(--dsx-ratio);overflow:hidden;
  background:#111;outline:none;touch-action:pan-y;cursor:grab}
.dsx-stage.is-dragging{cursor:grabbing}
.dsx-stage:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.6),0 0 0 6px rgba(0,0,0,.35)}
.dsx-track{display:flex;height:100%;will-change:transform}
.dsx-slide{position:relative;flex:0 0 100%;height:100%}
.dsx-slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  user-select:none;-webkit-user-drag:none;pointer-events:none}

/* ── arrows ─────────────────────────────────────────────────────────── */
.dsx-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:0;border-radius:50%;background:rgba(0,0,0,.28);backdrop-filter:blur(2px);
  color:#fff;cursor:pointer;opacity:.85;transition:opacity .3s var(--dsx-ease),background .3s var(--dsx-ease)}
.dsx-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.dsx-arrow--prev{left:16px}
.dsx-arrow--next{right:16px}
.dsx-arrow:hover,.dsx-arrow:focus-visible{background:rgba(0,0,0,.5);opacity:1}
.dsx-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Arrows carry navigation on their own, so they stay visible rather than
   revealing on hover. Set the rest opacity above to 0 for hover-reveal. */
.dsx-slider:hover .dsx-arrow,.dsx-slider:focus-within .dsx-arrow{opacity:1}

/* ── slide counter ──────────────────────────────────────────────────── */
.dsx-counter{position:absolute;right:16px;bottom:14px;z-index:5;
  padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);
  color:#fff;font-size:12px;letter-spacing:.06em;line-height:1.6;font-variant-numeric:tabular-nums}

/* ── indicator rail ─────────────────────────────────────────────────── */
.dsx-rail{display:flex;justify-content:center;align-items:center;width:100%}

/* dots */
.dsx-rail--dots{gap:8px;flex-wrap:wrap;padding:14px 0 2px}
.dsx-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:currentColor;
  color:#b7b7b7;opacity:.5;cursor:pointer;transition:opacity .3s var(--dsx-ease),transform .3s var(--dsx-ease)}
.dsx-dot:hover{opacity:.85}
.dsx-dot.is-active{opacity:1;transform:scale(1.35)}
.dsx-dot:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* thumbnail filmstrip — light ground, edge to edge, --dsx-per-view across.
   Set --dsx-strip-bg to #242424 and --dsx-thumb-rest to .4 for the dark
   WordPress-original treatment instead. */
.dsx-rail--thumbs{--dsx-per-view:9;--dsx-thumb-gap:6px;--dsx-strip-bg:transparent;
  --dsx-thumb-rest:.55;
  background:var(--dsx-strip-bg);gap:var(--dsx-thumb-gap);margin-top:10px;
  overflow-x:auto;justify-content:flex-start;scrollbar-width:none;scroll-behavior:smooth}
.dsx-rail--thumbs::-webkit-scrollbar{width:0;height:0}
.dsx-thumb{flex:0 0 calc((100% - (var(--dsx-per-view) - 1) * var(--dsx-thumb-gap)) / var(--dsx-per-view));
  padding:0;border:0;background:none;line-height:0;position:relative;
  opacity:var(--dsx-thumb-rest);cursor:pointer;transition:opacity .35s var(--dsx-ease)}
.dsx-thumb img{display:block;width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;background:#e9e9e9}
.dsx-thumb:hover,.dsx-thumb:focus-visible{opacity:.85}
.dsx-thumb.is-active{opacity:1}
/* active marker — inset hairline, so it reads on a light ground without
   shifting layout the way a border would */
.dsx-thumb.is-active::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),inset 0 0 0 3px rgba(0,0,0,.55);
  pointer-events:none}
.dsx-thumb:focus-visible{outline:2px solid #111;outline-offset:2px}

@media (max-width:700px){
  .dsx-arrow{width:36px;height:36px}
  .dsx-arrow svg{width:17px;height:17px}
  .dsx-arrow--prev{left:8px}.dsx-arrow--next{right:8px}
  /* thumb count per breakpoint is applied from config in JS, not here —
     an inline custom property outranks a media query */
  .dsx-rail--thumbs{--dsx-thumb-gap:4px;margin-top:6px}
}

@media (prefers-reduced-motion:reduce){
  .dsx-track{transition:none !important}
  .dsx-arrow,.dsx-dot,.dsx-thumb{transition:none}
}