/* ============================================================================
   HIGHLAND VAULT — FEATURED PRIZES  ([hv_featured_prizes])
   Hand-picked draws in a scroll-snap row: square artwork with an "Ends in"
   chip straddling the top edge and the ticket price on the bottom, arrows on
   the right of the heading, drag/swipe (featured-prizes.js). Light surfaces,
   on-white tokens re-asserted. ~5 cards across on desktop, ~2.3 on phones.
   ========================================================================== */

.hv-fp {
  --hv-ink: #111827; --hv-body: #4B5563; --hv-muted: #6B7280; --hv-line: #E7EAF0;
  --fp-blue: var(--hv-primary, #065BE0);
  --fp-blue-strong: var(--hv-primary-strong, #0A6BFF);
  --fp-gap: 16px;
  position: relative;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
  font-family: var(--hv-font, inherit);
}

/* ---- head ---------------------------------------------------------------- */
.hv-fp__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.hv-fp__title {
  margin: 0; font-family: var(--hv-font-heading, inherit) !important;
  font-size: clamp(1.45rem, 2.6vw, 2rem); font-weight: var(--hv-fw-bold, 700);
  color: var(--hv-ink); line-height: 1.05; letter-spacing: -.01em;
}
.hv-fp__title .accent { color: var(--fp-blue); }
.hv-fp__sub { margin: 4px 0 0; max-width: none; font-size: var(--hv-fs-sm, .875rem); color: var(--hv-muted); }

.hv-fp__nav { display: flex; gap: 8px; flex: 0 0 auto; }
/* Every state pinned: the Elementor kit paints bare <button>s pink on hover. */
.hv-fp__arrow,
.hv-fp__arrow:focus {
  width: 42px; height: 42px; padding: 0 !important;
  display: grid; place-items: center;
  border-radius: 50% !important; border: 1px solid var(--hv-line) !important;
  background: #fff !important; color: var(--hv-ink) !important;
  box-shadow: 0 4px 12px rgba(17, 24, 39, .06); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.hv-fp__arrow:hover,
.hv-fp__arrow:active { background: var(--fp-blue) !important; color: #fff !important; border-color: var(--fp-blue) !important; }
.hv-fp__arrow:focus-visible { outline: none; box-shadow: var(--hv-ring, 0 0 0 3px rgba(6, 91, 224, .4)); }
.hv-fp__arrow[disabled] { opacity: .35; cursor: default; }
.hv-fp__arrow svg { width: 18px; height: 18px; display: block; }
.hv-fp.is-static .hv-fp__nav { display: none; } /* everything fits — no arrows */

/* ---- row ----------------------------------------------------------------- */
.hv-fp__viewport {
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; cursor: grab;
  /* room for the chip that straddles the top edge, and the hover lift */
  padding: 14px 2px 10px; margin: -14px -2px -10px;
}
.hv-fp__viewport::-webkit-scrollbar { display: none; }
.hv-fp__viewport.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
.hv-fp__viewport.is-grabbing a { pointer-events: none; }
.hv-fp__track { display: flex; gap: var(--fp-gap); }

/* ---- card ---------------------------------------------------------------- */
.hv-fp-card {
  position: relative; flex: 0 0 calc((100% - 4 * var(--fp-gap)) / 5); min-width: 0;
  scroll-snap-align: start;
  display: block; border-radius: 16px; overflow: visible;
  text-decoration: none !important;
  transition: transform .2s ease;
  -webkit-user-select: none; user-select: none;
}
@media (max-width: 1100px) { .hv-fp-card { flex-basis: calc((100% - 3 * var(--fp-gap)) / 4); } }
@media (max-width: 768px)  { .hv-fp-card { flex-basis: calc((100% - 2 * var(--fp-gap)) / 3); } }
@media (max-width: 560px)  { .hv-fp { --fp-gap: 12px; } .hv-fp-card { flex-basis: 44%; } }

.hv-fp-card__media {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 16px; background: #EEF2F8;
  border: 1.5px solid rgba(var(--hv-primary-rgb, 6, 91, 224), .25);
  box-shadow: 0 8px 20px rgba(17, 24, 39, .06);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hv-fp-card__media img.hv-fp-card__img {
  width: 100% !important; height: 100% !important; object-fit: cover;
  margin: 0 !important; padding: 0 !important; border-radius: 0 !important; display: block;
  -webkit-user-drag: none; transition: transform .45s ease;
}
.hv-fp-card__noimg {
  display: grid; place-items: center; height: 100%; padding: 12%;
  text-align: center; font-weight: var(--hv-fw-bold, 700); color: var(--hv-muted);
}
.hv-fp-card:hover { transform: translateY(-4px); }
.hv-fp-card:hover .hv-fp-card__media,
.hv-fp-card:focus-visible .hv-fp-card__media {
  border-color: var(--fp-blue);
  box-shadow: 0 16px 32px rgba(var(--hv-primary-rgb, 6, 91, 224), .18);
}
.hv-fp-card:hover img.hv-fp-card__img { transform: scale(1.04); }
.hv-fp-card:focus-visible { outline: none; }

/* "Ends in 3 days" — brand pill straddling the top-right corner */
.hv-fp-card__ends {
  position: absolute; top: -11px; right: 10px; z-index: 2;
  padding: .5em .9em; border-radius: 999px;
  background: var(--fp-blue); color: #fff;
  font-size: var(--hv-fs-xs, .75rem); font-weight: var(--hv-fw-bold, 700);
  letter-spacing: .02em; line-height: 1; white-space: nowrap;
  box-shadow: 0 8px 18px rgba(var(--hv-primary-rgb, 6, 91, 224), .4);
}

/* Price — white chip on the bottom-left of the artwork */
.hv-fp-card__price {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: baseline; gap: .4em;
  padding: .45em .8em; border-radius: 10px;
  background: rgba(255, 255, 255, .94); color: var(--hv-ink);
  border: 1px solid rgba(17, 24, 39, .08);
  box-shadow: 0 4px 12px rgba(17, 24, 39, .14);
  line-height: 1;
}
.hv-fp-card__price b { font-size: var(--hv-fs-body, 1rem); font-weight: var(--hv-fw-black, 700); color: var(--hv-ink); }
.hv-fp-card__price s { font-size: var(--hv-fs-xs, .75rem); color: var(--hv-muted); }
/* wc_price() wraps the figure in its own span — keep WooCommerce's price colour out */
.hv-fp-card__price .woocommerce-Price-amount { color: inherit; font: inherit; }
.hv-fp-card__price s .woocommerce-Price-amount { text-decoration: line-through; }

@media (max-width: 560px) {
  .hv-fp__arrow { width: 38px; height: 38px; }
  .hv-fp-card__media { border-radius: 14px; }
  .hv-fp-card__ends { top: -9px; right: 8px; padding: .42em .7em; font-size: 10px; }
  .hv-fp-card__price { left: 8px; bottom: 8px; padding: .4em .65em; }
  .hv-fp-card__price b { font-size: var(--hv-fs-sm, .875rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hv-fp-card, .hv-fp-card__media, img.hv-fp-card__img, .hv-fp__arrow { transition: none; }
  .hv-fp-card:hover { transform: none; }
  .hv-fp-card:hover img.hv-fp-card__img { transform: none; }
  .hv-fp__viewport { scroll-behavior: auto; }
}