/* ============================================================================
   HIGHLAND VAULT — WINNERS  ([lty_lottery_winners_by_date] redesigned)
   Reference card layout: the DRAW's image on top, draw name, a Drawn/Ticket
   meta row, then a tinted footer band with the masked winner name.
   Light cards on the white page (no dark surfaces), grouped into month
   sections with theme pagination. 4 per row desktop, 3 tablet, 2 mobile.
   ========================================================================== */

.hv-winners { padding-block: var(--hv-space-5, 1.5rem) var(--hv-space-7, 3rem); }

/* ---------------------------------------------------------------------------
   PAGE HEADING — eyebrow + title (brand accent on the last word) + subheading
   --------------------------------------------------------------------------- */
.hv-winners__head { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.hv-winners__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--hv-fs-sm, .875rem); font-weight: var(--hv-fw-bold, 700);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--hv-primary, var(--hv-primary));
}
.hv-winners__eyebrow::before,
.hv-winners__eyebrow::after {
  content: ""; width: 30px; height: 2px; border-radius: 2px;
  background: var(--hv-primary, var(--hv-primary));
}
.hv-winners__title {
  margin: .3em 0 .28em;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: var(--hv-fw-black, 700);
  color: #111827; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance;
}
.hv-winners__title .accent { color: var(--hv-primary, var(--hv-primary)); }
.hv-winners__sub {
  margin: 0 auto; max-width: 56ch;
  font-size: clamp(.95rem, 1.4vw, 1.0625rem); line-height: 1.6; color: #6B7280;
}
.hv-winners__empty {
  padding: var(--hv-space-7, 3rem) var(--hv-space-5, 1.5rem);
  text-align: center; color: var(--hv-muted, #6B7280);
  border: 1px dashed #E4E7EC; border-radius: 10px;
}

/* ---------------------------------------------------------------------------
   MONTH SECTIONS
   --------------------------------------------------------------------------- */
.hv-winners__section { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.hv-winners__section:last-of-type { margin-bottom: var(--hv-space-6, 2rem); }
.hv-winners__section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: var(--hv-space-4, 1rem);
  padding-bottom: var(--hv-space-3, .75rem);
  border-bottom: 1px solid #E8EAEE;
}
.hv-winners__section-title {
  margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: var(--hv-fw-black, 700); color: #111827; line-height: 1.15;
}
.hv-winners__section-count {
  color: #6B7280; font-size: var(--hv-fs-sm, .875rem);
  font-weight: var(--hv-fw-medium, 500);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   GRID — 4 / 3 / 2
   --------------------------------------------------------------------------- */
.hv-winners__grid {
  display: grid; gap: var(--hv-space-5, 1.5rem);
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}
@media (max-width: 1100px) { .hv-winners__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .hv-winners__grid { grid-template-columns: repeat(2, 1fr); gap: var(--hv-space-4, 1rem); } }
@media (max-width: 480px)  { .hv-winners__grid { gap: 12px; } } /* stays 2-up on phones */

/* ---------------------------------------------------------------------------
   CARD
   --------------------------------------------------------------------------- */
.hv-winner {
  display: flex; flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E8EAEE;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hv-winner:hover {
  border-color: #D7DBE2;
  box-shadow: 0 10px 24px rgba(17, 24, 39, .07);
  transform: translateY(-2px);
}

/* Draw image */
.hv-winner__media {
  position: relative; aspect-ratio: 1 / 1;
  background: #F4F6F9; display: grid; place-items: center;
  border-bottom: 1px solid #EEF0F4;
}
.hv-winner__media img.hv-winner__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; margin: 0; padding: 0; border-radius: 0;
}
.hv-winner__placeholder { color: #C4CBD6; }

/* Body: draw name + meta row */
.hv-winner__body {
  flex: 1; display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px 14px;
}
.hv-winner__draw {
  margin: 0; font-size: 13.5px; font-weight: var(--hv-fw-bold, 700);
  color: #111827; line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hv-winner__meta {
  margin-top: auto; display: flex; align-items: flex-start; gap: 10px;
  padding-top: 10px; border-top: 1px solid #EEF0F4;
}
.hv-winner__cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hv-winner__cell em {
  font-style: normal; font-size: 10.5px; font-weight: var(--hv-fw-medium, 500);
  color: #9AA1AC; letter-spacing: .02em;
}
.hv-winner__cell b {
  font-size: 12.5px; font-weight: var(--hv-fw-bold, 700); color: #111827;
  line-height: 1.25; font-variant-numeric: tabular-nums;
}
.hv-winner__cell--ticket { flex: 0 0 auto; text-align: right; align-items: flex-end; }
.hv-winner__cell--ticket b { color: var(--hv-primary, var(--hv-primary)); }

/* Footer band: masked winner name */
.hv-winner__footer {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #F7F8FA; border-top: 1px solid #EEF0F4;
}
.hv-winner__ico { display: inline-flex; flex: 0 0 auto; color: #9AA1AC; }
.hv-winner__ico svg { display: block; }
.hv-winner__name {
  font-size: 12.5px; font-weight: var(--hv-fw-bold, 700); color: #111827;
  line-height: 1.3; overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   PAGINATION BAR — results count (left) + segmented pager (right), matching
   the reference. The pager is a joined button group; on narrow screens the bar
   stacks and the group scrolls horizontally with the scrollbar hidden, so the
   ‹ › controls always stay reachable without the layout breaking.
   --------------------------------------------------------------------------- */
.hv-winners__pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: var(--hv-space-6, 2rem);
  padding: 12px 14px;
  background: #F9FAFB; border: 1px solid #E8EAEE; border-radius: 10px;
}
.hv-winners__count {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: 13.5px; color: #4B5563; font-variant-numeric: tabular-nums;
}

.hv-winners__pages {
  display: flex; align-items: center; flex: 0 1 auto;
  max-width: 100%; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hv-winners__pages::-webkit-scrollbar { display: none; }

.hv-winners__pages .page-numbers {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  background: #FFFFFF; color: #111827;
  border: 1px solid #E3E6EB; border-left-width: 0;
  font-size: 13.5px; font-weight: var(--hv-fw-bold, 700); line-height: 1;
  font-variant-numeric: tabular-nums;
  text-decoration: none !important;
  transition: background .18s ease, color .18s ease;
}
/* joined group: outer corners rounded, inner borders shared */
.hv-winners__pages .page-numbers:first-child { border-left-width: 1px; border-radius: 8px 0 0 8px; }
.hv-winners__pages .page-numbers:last-child  { border-radius: 0 8px 8px 0; }
.hv-winners__pages a.page-numbers:hover { background: #F1F3F6; color: var(--hv-primary, var(--hv-primary)); }
.hv-winners__pages .page-numbers.current {
  position: relative; z-index: 1;
  background: var(--hv-primary, var(--hv-primary)); color: #fff;
  border-color: var(--hv-primary, var(--hv-primary));
}
.hv-winners__pages .page-numbers.dots { color: #9AA1AC; padding: 0 8px; min-width: 32px; }
/* chevrons: same footprint, glyph optically centred and sized up */
.hv-winners__pages .prev,
.hv-winners__pages .next { font-size: 20px; padding: 0 10px; color: #4B5563; }
.hv-winners__pages .page-numbers:focus-visible {
  outline: 2px solid var(--hv-primary, var(--hv-primary)); outline-offset: -2px; z-index: 2;
}

/* ---------------------------------------------------------------------------
   MOBILE — compacted so two cards sit comfortably side by side
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hv-winner__body { padding: 10px 11px 11px; gap: 8px; }
  .hv-winner__draw { font-size: 12px; -webkit-line-clamp: 2; }
  .hv-winner__meta { gap: 8px; padding-top: 8px; }
  .hv-winner__cell em { font-size: 9.5px; }
  .hv-winner__cell b { font-size: 11.5px; }
  .hv-winner__footer { padding: 8px 11px; gap: 6px; }
  .hv-winner__name { font-size: 11.5px; }

  /* pagination bar stacks: count centred on top, pager centred below */
  .hv-winners__pager { flex-direction: column; gap: 10px; padding: 12px 10px; }
  .hv-winners__count { flex: 0 0 auto; text-align: center; font-size: 12.5px; }
  .hv-winners__pages { justify-content: flex-start; margin-inline: auto; }
  .hv-winners__pages .page-numbers { min-width: 36px; height: 36px; padding: 0 9px; font-size: 12.5px; }
  .hv-winners__pages .page-numbers.dots { min-width: 26px; padding: 0 4px; }
  .hv-winners__pages .prev,
  .hv-winners__pages .next { font-size: 18px; padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hv-winner { transition: none; }
  .hv-winner:hover { transform: none; }
}