/* ============================================================================
   HIGHLAND VAULT — PROMO BANNER
   One featured-draw banner between the category tabs and the first category.

   The artwork is designed off-site, so the golden rule here is DO NOT CROP IT:
   the image sets its own aspect ratio (width:100%; height:auto) and a separate
   mobile file — not a CSS crop — handles narrow screens. That means no
   object-fit, no fixed heights, and no guessing at a focal point.

   The heading / sub / button overlay is optional and only paints a scrim when
   it is actually present, so image-only banners stay exactly as designed.
   ========================================================================== */

.hv-promo {
  --hv-promo-radius: 16px;
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

.hv-promo__link {
  position: relative;
  display: block;
  border-radius: var(--hv-promo-radius);
  overflow: hidden;                 /* clip the artwork to the rounded corners */
  background: var(--hv-surface, #0A0A0A);
  text-decoration: none !important;
  /* Transform + shadow only; animating them never reflows the page. */
  transition: transform .35s ease, box-shadow .35s ease;
}
.hv-promo__link:hover,
.hv-promo__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(6, 91, 224, .22);
}
.hv-promo__link:focus-visible {
  outline: 2px solid var(--hv-primary, #065BE0);
  outline-offset: 3px;
}

/* With a details strip attached, the image and the strip form one card: the
   image keeps only its top corners, the strip only its bottom ones. */
.hv-promo.has-details .hv-promo__link {
  border-radius: var(--hv-promo-radius) var(--hv-promo-radius) 0 0;
}
.hv-promo.has-details .hv-promo__link:hover,
.hv-promo.has-details .hv-promo__link:focus-visible { transform: none; box-shadow: none; }

/* The image drives the box height — never stretched, never cropped. */
.hv-promo__img {
  display: block;
  width: 100%; height: auto;
  margin: 0; border-radius: 0;
}

/* --- overlay ---------------------------------------------------------------
   Only rendered when there is text or a button, and the scrim comes with it —
   an image-only banner must not be darkened. The scrim direction follows the
   overlay's side so the artwork stays readable on the opposite side. */
.hv-promo__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(.35rem, 1vw, .75rem);
  padding: clamp(1rem, 4vw, 3rem);
  pointer-events: none;             /* the whole banner is the link */
}
.hv-promo.has-overlay .hv-promo__link::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}
.hv-promo.is-left.has-overlay   .hv-promo__link::after { background: linear-gradient(90deg,  rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, .28) 45%, rgba(10, 10, 10, 0) 72%); }
.hv-promo.is-right.has-overlay  .hv-promo__link::after { background: linear-gradient(270deg, rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, .28) 45%, rgba(10, 10, 10, 0) 72%); }
.hv-promo.is-center.has-overlay .hv-promo__link::after { background: rgba(10, 10, 10, .48); }

.hv-promo.is-left   .hv-promo__overlay { align-items: flex-start; text-align: left; }
.hv-promo.is-right  .hv-promo__overlay { align-items: flex-end;   text-align: right; }
.hv-promo.is-center .hv-promo__overlay { align-items: center;     text-align: center; }

.hv-promo__heading {
  display: block; max-width: 22ch;
  font-size: clamp(1.25rem, 1rem + 2.2vw, 2.5rem);
  font-weight: var(--hv-fw-black, 800);
  line-height: 1.08; letter-spacing: -.01em;
  color: #FFFFFF; text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.hv-promo__sub {
  display: block; max-width: 34ch;
  font-size: clamp(.8125rem, .72rem + .5vw, 1.125rem);
  font-weight: 600; line-height: 1.4;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

/* Looks and behaves like a button, but it is a <span> inside the banner's own
   <a> — nesting a second link would be invalid and would break the tab order. */
.hv-promo__btn {
  display: inline-flex; align-items: center; gap: .5em;
  margin-top: clamp(.25rem, 1vw, .5rem);
  padding: .8em 1.5em; border-radius: 999px;
  background: var(--hv-primary, #065BE0); color: #fff;
  font-size: clamp(.75rem, .68rem + .3vw, .9375rem);
  font-weight: var(--hv-fw-black, 800);
  text-transform: uppercase; letter-spacing: .04em; line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(6, 91, 224, .4);
  transition: background .25s ease;
}
.hv-promo__btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.hv-promo__link:hover .hv-promo__btn,
.hv-promo__link:focus-visible .hv-promo__btn { background: var(--hv-primary-strong, #0A6BFF); }

/* --- mobile ---------------------------------------------------------------
   Text over artwork gets cramped fast on a phone. The overlay stays, but it
   anchors to the bottom (where designed banners usually leave space) and
   centres regardless of the desktop alignment, with a vertical scrim. */
@media (max-width: 768px) {
  .hv-promo { --hv-promo-radius: 14px; }
  .hv-promo__overlay {
    justify-content: flex-end;
    align-items: center !important;
    text-align: center !important;
    padding: 1rem;
  }
  .hv-promo.has-overlay .hv-promo__link::after {
    background: linear-gradient(0deg, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .34) 42%, rgba(10, 10, 10, 0) 70%) !important;
  }
  .hv-promo__heading { max-width: 100%; }
  .hv-promo__sub { max-width: 100%; }
  /* Two short lines of copy plus a button is already a lot over artwork this
     small — the sub-heading is the first thing to go. */
  .hv-promo.has-overlay .hv-promo__sub { display: none; }
}


/* --- draw details ----------------------------------------------------------
   Live data for the linked draw, in the same visual language as the draw
   cards: blue countdown chips, blue progress fill, the prize badge. It sits
   BELOW the artwork rather than over it, because a designed banner has no
   reliable empty area to overlay — and at the mobile size (400x130) there is
   no room over the image at all. */
.hv-promo__details {
  display: flex; align-items: center;
  /* space-between, not auto margins: with four items it makes every gap the
     same, so the timer and the tickets readout sit evenly spaced between the
     price and the button instead of the timer bunching against the price. */
  justify-content: space-between;
  gap: clamp(.75rem, 2vw, 1.5rem);
  padding: clamp(.85rem, 2vw, 1.15rem) clamp(1rem, 2.5vw, 1.5rem);
  background: #fff;
  border: 1px solid var(--hv-line, #E7EAF0); border-top: 0;
  border-radius: 0 0 var(--hv-promo-radius) var(--hv-promo-radius);
  /* Card tokens: the banner may sit in a dark-surface scope, and the strip is
     white, so on-white ink has to be re-asserted (same trick as the cards). */
  --hv-ink: #111827; --hv-body: #4B5563; --hv-muted: #6B7280; --hv-line: #E7EAF0;
  color: var(--hv-ink);
}

/* Price — leads the strip, same treatment as the card: big brand-blue figure,
   struck-through regular price when discounted, small "PER TICKET" caption. */
.hv-promo__price {
  display: flex; flex-direction: column; gap: .2em; flex: 0 0 auto;
  line-height: 1;
}
.hv-promo__price-row { display: flex; align-items: baseline; gap: .45em; }
.hv-promo__price .now {
  font-size: clamp(1.1rem, .95rem + .5vw, 1.5rem);
  font-weight: var(--hv-fw-black, 800);
  color: var(--hv-ink);
}
.hv-promo__price .was {
  font-size: var(--hv-fs-sm, .875rem); font-weight: 600;
  color: var(--hv-muted); text-decoration: line-through;
}
.hv-promo__price .lbl {
  font-size: var(--hv-fs-xs, .75rem); font-weight: var(--hv-fw-bold, 700);
  color: var(--hv-muted); text-transform: uppercase; letter-spacing: .06em;
}
/* wc_price() wraps the figure in its own span — stop the global WooCommerce
   price styling (colour, strikethrough <del>) leaking in. */
.hv-promo__price .woocommerce-Price-amount { color: inherit; font: inherit; }
.hv-promo__price .was .woocommerce-Price-amount { text-decoration: line-through; }

/* Countdown — same chips as the card, so there is one timer look on the site */
.hv-promo__timer { flex: 0 0 auto; min-width: 0; }
.hv-promo__timer .hv-loop-countdown { margin: 0; }
.hv-promo__timer .hv-loop-countdown__label {
  margin: 0 0 5px; font-size: var(--hv-fs-xs, .75rem); font-weight: var(--hv-fw-bold, 700);
  color: var(--hv-ink); text-transform: uppercase; letter-spacing: .08em;
}
.hv-promo__timer .hv-countdown--bar {
  display: grid !important; grid-template-columns: repeat(4, minmax(38px, 1fr)); gap: 6px;
  background: none !important; border: 0 !important; border-radius: 0; overflow: visible;
}
.hv-promo__timer .hv-countdown__unit {
  padding: .5em .2em !important; border: 0 !important; border-radius: 8px;
  background: rgba(6, 91, 224, .08) !important; text-align: center; min-width: 0;
}
.hv-promo__timer .hv-countdown__num {
  display: block; font-size: var(--hv-fs-h4, 1.25rem) !important;
  font-weight: var(--hv-fw-black, 800) !important; color: var(--hv-primary, #065BE0) !important;
  line-height: 1;
}
.hv-promo__timer .hv-countdown__lbl {
  display: block; margin-top: 3px; font-size: 8px !important;
  color: var(--hv-muted) !important; text-transform: uppercase; letter-spacing: .03em;
}

/* Tickets sold — deliberately NOT flex:1. Stretched across the slack it read as
   a giant rule through the middle of the strip; a bounded width keeps it a
   compact readout, and the auto side margins centre it between the timer and
   the button whatever their widths. */
.hv-promo__progress {
  display: flex; flex-direction: column; gap: .4em;
  flex: 0 1 clamp(170px, 24vw, 300px);
}
.hv-promo__progress .hv-progress__meta {
  display: flex; justify-content: space-between; gap: 1em;
  font-size: var(--hv-fs-xs, .75rem); font-weight: var(--hv-fw-bold, 700);
  color: var(--hv-ink); text-transform: uppercase; letter-spacing: .02em;
}
/* --hv-track is #1C1C1C — a DARK-surface token. The strip is white, so it has
   to be pinned to the cards' light track or the bar renders solid black. */
.hv-promo__progress .hv-progress__track {
  position: relative; height: 8px; border-radius: 999px;
  background: #EDF0F5; overflow: hidden;
}
.hv-promo__progress .hv-progress__fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit;
  background: var(--hv-grad-primary, linear-gradient(90deg, #065BE0, #0A6BFF));
}

/* Button in the strip is a REAL link (it is outside the banner's <a>), so it
   carries no margin-top and never inherits the overlay button's positioning. */
.hv-promo__btn--solo {
  flex: 0 0 auto; margin-top: 0; text-decoration: none !important;
}
.hv-promo__btn--solo:hover,
.hv-promo__btn--solo:focus-visible { background: var(--hv-primary-strong, #0A6BFF); color: #fff; }
.hv-promo__btn--solo:focus-visible { outline: 2px solid var(--hv-primary, #065BE0); outline-offset: 3px; }

/* Sale flag — the draw card's corner treatment, on the banner's top-right */
.hv-promo__flag {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  padding: .55em 1.05em; border-radius: 10px;
  background: var(--hv-primary, #065BE0); color: #fff;
  font-size: var(--hv-fs-sm, .875rem); font-weight: var(--hv-fw-black, 800);
  text-transform: uppercase; letter-spacing: .03em; line-height: 1;
  box-shadow: 0 8px 18px rgba(6, 91, 224, .4);
}

@media (max-width: 768px) {
  /* 400x130 artwork leaves no room for text on top of it — with the details
     strip carrying the message, the overlay would only cover the design. */
  .hv-promo.has-details .hv-promo__overlay { display: none; }
  .hv-promo.has-details.has-overlay .hv-promo__link::after { background: none !important; }

  .hv-promo__flag { top: 10px; right: 10px; padding: .45em .7em; font-size: var(--hv-fs-xs, .75rem); }

  /* Two rows of two: price + timer, then tickets + button. Four across would
     crush the countdown chips to nothing on a 375px screen, and stacking all
     four would make the strip taller than the 400x130 artwork above it. */
  .hv-promo__details { flex-wrap: wrap; gap: .75rem 1rem; padding: .9rem 1rem 1rem; }
  .hv-promo__price { order: 1; }
  .hv-promo__price .lbl { font-size: 9px; letter-spacing: .04em; }
  .hv-promo__timer { order: 2; }
  .hv-promo__timer .hv-loop-countdown__label { display: none; }
  .hv-promo__timer .hv-countdown--bar { grid-template-columns: repeat(4, minmax(30px, 1fr)); gap: 4px; }
  .hv-promo__timer .hv-countdown__num { font-size: var(--hv-fs-sm, .875rem) !important; }
  .hv-promo__progress { order: 3; flex: 1 1 auto; min-width: 100px; }
  .hv-promo__btn--solo { order: 4; flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hv-promo__link, .hv-promo__btn { transition: none; }
  .hv-promo__link:hover, .hv-promo__link:focus-visible { transform: none; }
}