/* ============================================================================
   HIGHLAND VAULT — DRAW SLIDER  ([hv_draw_slider])
   Full-bleed, auto-sliding, DRAGGABLE banner carousel of featured draws. Each
   card: a custom banner image with an "Ends in …" badge centred on its top edge,
   the draw title below, and an optional subtitle. Centre-snapped cards (the
   focused one sits in the middle with neighbours peeking); mouse-drag + touch
   swipe; dots on mobile; no arrows. Tokens only; light page ground.
   ========================================================================== */

/* Full-bleed: break out of any container to the full viewport width. */
.hv-dslider {
  position: relative;
  width: 100vw; max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
}

.hv-dslider__head { text-align: center; margin-bottom: var(--hv-space-5); padding-inline: var(--hv-space-5); }
.hv-dslider__title { margin: 0; font-size: var(--hv-fs-h1); font-weight: var(--hv-fw-black); color: var(--hv-ink); line-height: 1.1; }

.hv-dslider__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;               /* Firefox */
  cursor: grab;
}
.hv-dslider__viewport::-webkit-scrollbar { display: none; }
/* While mouse-dragging: free scroll (snap off) + no accidental link taps.
   .is-settling keeps snap off for the glide back onto a slide after release —
   re-enabling mandatory snap instantly would hard-jump the viewport. */
.hv-dslider__viewport.is-grabbing { cursor: grabbing; }
.hv-dslider__viewport.is-grabbing,
.hv-dslider__viewport.is-settling { scroll-snap-type: none; }
.hv-dslider__viewport.is-grabbing a { pointer-events: none; }

.hv-dslider__track {
  display: flex; gap: var(--hv-space-4);
  /* top room so the badge can straddle the card's top edge without clipping */
  padding: 16px var(--hv-space-4) 2px;
}

/* Cards: centre-snapped; ~2.5 across on desktop, ~1 (with peek) on phones. */
.hv-dslide {
  position: relative;
  flex: 0 0 clamp(320px, 40%, 560px);
  scroll-snap-align: center;
  display: flex; flex-direction: column; gap: var(--hv-space-3);
  -webkit-user-select: none; user-select: none;
}
@media (max-width: 1024px) { .hv-dslide { flex-basis: 60%; } }
@media (max-width: 640px)  { .hv-dslide { flex-basis: 84%; } }

/* Flat cards — no box shadows anywhere in the slider (design). */
.hv-dslide__card {
  position: relative; display: block;
  border-radius: var(--hv-radius-lg); overflow: hidden;
  box-shadow: none;
}

.hv-dslide__media { position: relative; aspect-ratio: auto; background: var(--hv-surface-2); }
.hv-dslide__img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; pointer-events: none; }
.hv-dslide__noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--hv-surface-2), var(--hv-surface)); }

/* "Ends in …" badge — brand-blue pill centred on the card's TOP edge (straddles
   it, like the reference). Lives outside the overflow-clipped card so it isn't cut. */
.hv-dslide__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 3;
  padding: 0.45em 1em; border-radius: var(--hv-radius-pill);
  background: var(--hv-primary); color: #fff;
  font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold);
  letter-spacing: var(--hv-ls-wide); text-transform: uppercase; line-height: 1; white-space: nowrap;
}

/* Title + subtitle under the card */
.hv-dslide__name { margin: 0; text-align: center; font-size: var(--hv-fs-h4); font-weight: var(--hv-fw-bold); color: var(--hv-ink); line-height: var(--hv-lh-snug); }
.hv-dslide__name a { color: inherit; text-decoration: none; }
.hv-dslide__name a:hover { color: var(--hv-primary); }
.hv-dslide__sub { margin: 0; text-align: center; font-size: var(--hv-fs-sm); color: var(--hv-muted); }

/* Dots — shown on mobile/tablet (hidden on desktop to match the reference). */
.hv-dslider__dots { display: none; justify-content: center; gap: 8px; margin-top: var(--hv-space-4); }
.hv-dslider__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--hv-line); cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.hv-dslider__dot.is-active { background: var(--hv-primary); transform: scale(1.3); }
.hv-dslider__dot:focus-visible { outline: none; box-shadow: var(--hv-ring); }
@media (max-width: 900px) { .hv-dslider__dots { display: flex; } }

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