/************************************************
HOMEPAGE BASE
************************************************/
.vaf-home {
  padding-bottom: var(--vaf-page-padding-bottom);
}

.vaf-home-section {
  margin-bottom: var(--vaf-section-gap);
}

/************************************************
HERO EVENTS
************************************************/
.vaf-event-hero {
  margin-right: calc(var(--vaf-hero-gap) / -2);
  margin-left: calc(var(--vaf-hero-gap) / -2);
}

  .vaf-event-hero > [class*="col-"] {
    padding-right: calc(var(--vaf-hero-gap) / 2);
    padding-left: calc(var(--vaf-hero-gap) / 2);
  }

  .vaf-event-hero .panel {
    overflow: hidden;
    margin-bottom: 0;
    border: 0;
    border-radius: var(--vaf-radius);
    background: var(--vaf-navy);
    box-shadow: var(--vaf-shadow-card);
  }

.vaf-event-hero-side-row {
  display: flex;
  flex-direction: column;
  gap: var(--vaf-hero-gap);
  margin-right: 0;
  margin-left: 0;
}

  .vaf-event-hero-side-row:before,
  .vaf-event-hero-side-row:after {
    display: none;
    content: none;
  }

  .vaf-event-hero-side-row > [class*="col-"] {
    float: none;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

.vaf-event-hero-link {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--vaf-navy);
  color: var(--vaf-white);
  text-decoration: none;
}

  .vaf-event-hero-link:hover,
  .vaf-event-hero-link:focus {
    color: var(--vaf-white);
    text-decoration: none;
  }

.vaf-event-hero-main .vaf-event-hero-link {
  height: var(--vaf-hero-height);
}

.vaf-event-hero-side .vaf-event-hero-link {
  height: calc((var(--vaf-hero-height) - var(--vaf-hero-gap)) / 2);
}

.vaf-event-hero-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--vaf-transition-slow);
}

.vaf-event-hero-link:hover .vaf-event-hero-image {
  transform: scale(1.04);
}

.vaf-event-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--vaf-hero-overlay);
}

.vaf-event-hero-content {
  position: absolute;
  right: var(--vaf-hero-content-x);
  bottom: var(--vaf-hero-content-bottom);
  left: var(--vaf-hero-content-x);
  z-index: 2;
}

.vaf-event-hero-title {
  display: block;
  margin-top: 8px;
  font-family: var(--vaf-font-display);
  font-size: var(--vaf-hero-title-size);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.vaf-event-hero-side .vaf-event-hero-title {
  font-size: var(--vaf-hero-side-title-size);
}

.vaf-event-hero-subtitle,
.vaf-event-hero-meta {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, .85);
}

/* Hero CTA: amber colors come from .btn-warning. This class only adds
   the display-font, uppercase typography modifier on top. */
.vaf-event-hero-button {
  margin-top: 14px;
  font-family: var(--vaf-font-display);
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Status pills on event cards / hero. We use AWE's own
   .event-row__status--{preview|active|closed|paused} modifier classes —
   AWE_Bootstrap3.css ships base colours for each, and AWE's SignalR
   handler emits the same classes on live state changes (see
   eventHomepageStatusHtmlDictionary in SignalRHandler.cshtml). We only
   re-skin the pill — translucent gradient + soft glow + a small dot —
   while keeping each modifier's colour intent (blue=preview, green=
   active, amber=paused, muted=closed).

   `:not(.awe-hidden)` keeps SignalR's awe-hidden toggle working: AWE
   renders all possible state spans up front and swaps which one shows.
   Without :not, our display rule fights .awe-hidden { display:none }. */
.event-row__status--preview:not(.awe-hidden),
.event-row__status--active:not(.awe-hidden),
.event-row__status--closed:not(.awe-hidden),
.event-row__status--paused:not(.awe-hidden) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 5px 12px;
  height: auto;            /* defeat AWE's fixed 28px box */
  font-family: var(--vaf-font-body);
  font-size: 11px;
  font-weight: 600;
  /* line-height:1 tightens the text line-box so its visual centre matches
     the geometric centre of the 7px dot — uppercase glyphs sit high in a
     default 1.4-ish line-box, which makes the flex-centred dot look low. */
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vaf-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Leading "live" dot — only on actively-bidding events. Colour comes
   from currentColor so it picks up the green tint from the modifier. */
.event-row__status--active:not(.awe-hidden)::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex: 0 0 auto;
}

/* Per-state colours. Override AWE_Bootstrap3.css's solid backgrounds
   with our translucent theme colours. */
.event-row__status--active {
  background: linear-gradient(135deg,
    rgba(var(--vaf-green-rgb), .35) 0%,
    rgba(var(--vaf-green-rgb), .18) 100%);
  border-color: rgba(var(--vaf-green-rgb), .55);
  color: #b8f0c5;
}
.event-row__status--preview {
  background: linear-gradient(135deg,
    rgba(51, 122, 183, .35) 0%,
    rgba(51, 122, 183, .18) 100%);
  border-color: rgba(51, 122, 183, .55);
  color: #cfe5fb;
}
.event-row__status--paused {
  background: linear-gradient(135deg,
    rgba(var(--vaf-amber-rgb), .35) 0%,
    rgba(var(--vaf-amber-rgb), .18) 100%);
  border-color: rgba(var(--vaf-amber-rgb), .55);
  color: #ffd897;
}
.event-row__status--closed {
  background: linear-gradient(135deg,
    rgba(var(--vaf-navy-rgb), .55) 0%,
    rgba(var(--vaf-navy-rgb), .35) 100%);
  border-color: rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .75);
}

/* Subtle "live" pulse on the dot for actively-bidding events. */
.event-row__status--active::before {
  animation: vafStatusPulse 1.6s ease-in-out infinite;
}
@keyframes vafStatusPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .55; transform: scale(.78); }
}
@media (prefers-reduced-motion: reduce) {
  .event-row__status--active::before { animation: none; }
}

/************************************************
SCROLL AREAS
************************************************/
.vaf-category-slider,
.vaf-carousel {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

  .vaf-category-slider::-webkit-scrollbar,
  .vaf-carousel::-webkit-scrollbar {
    display: none;
  }

/************************************************
CATEGORY SLIDER
************************************************/
.vaf-home-section-categories .vaf-section-header {
  margin-bottom: 16px;
}

.vaf-category-slider {
  margin: calc(var(--vaf-hover-space) * -1) -2px 0;
  padding: calc(10px + var(--vaf-hover-lift)) 2px;
  scroll-behavior: smooth;
}

  .vaf-category-slider .nav {
    display: flex;
    flex-wrap: nowrap;
    min-width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
  }

    .vaf-category-slider .nav > li {
      float: none;
      flex: 0 0 auto;
    }

  .vaf-category-slider .vaf-cat-pill {
    flex-direction: column;
    justify-content: center;
    min-width: 110px;
    margin: 0 4px;
    gap: 6px;
    text-align: center;
    white-space: normal;
  }

  .vaf-category-slider .nav > li:first-child .vaf-cat-pill {
    margin-left: 0;
  }

  .vaf-category-slider .nav > li:last-child .vaf-cat-pill {
    margin-right: 0;
  }

/************************************************
LOT GRIDS / SMALLER GROUPS
************************************************/
.vaf-lot-grid {
  margin-right: -8px;
  margin-left: -8px;
}

  .vaf-lot-grid:before,
  .vaf-lot-grid:after {
    content: " ";
    display: table;
  }

  .vaf-lot-grid:after {
    clear: both;
  }

  .vaf-lot-grid > [class*="col-"] {
    margin-bottom: 16px;
    padding-right: 8px;
    padding-left: 8px;
  }

.vaf-carousel-small .vaf-lot-card-title {
  font-size: var(--vaf-card-title-small-size);
}

.vaf-carousel-small .vaf-lot-card-price {
  font-size: var(--vaf-price-small-size);
}

.vaf-carousel-small .vaf-lot-card .panel-body {
  padding: var(--vaf-card-padding-small-y) var(--vaf-card-padding-small-x);
}

.vaf-carousel-small .vaf-lot-number {
  display: none !important;
}

/************************************************
HORIZONTAL CAROUSELS
************************************************/
.vaf-carousel {
  display: flex;
  gap: var(--vaf-carousel-gap);
  margin: calc(var(--vaf-hover-space) * -1) -2px 0;
  padding: var(--vaf-hover-space) 2px calc(10px + var(--vaf-hover-lift)) 2px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}

.vaf-carousel-item {
  flex: 0 0 calc(25% - 12px);
  min-width: 0;
  scroll-snap-align: start;
}

.vaf-carousel-item-small {
  flex-basis: calc(16.666% - 14px);
}

.vaf-carousel .vaf-lot-card,
.vaf-carousel .vaf-event-card {
  height: 100%;
  margin-bottom: 0;
}

.vaf-home-section-ending-soon .vaf-lot-card {
  border: 2px solid var(--vaf-red-light);
  border-radius: var(--vaf-radius-sm);
}

  .vaf-home-section-ending-soon .vaf-lot-card .vaf-lot-card-price,
  .vaf-home-section-ending-soon .vaf-lot-card .vaf-lot-card-time {
    color: var(--vaf-red);
  }

/************************************************
RESPONSIVE
************************************************/
@media (max-width: 1199px) {
  .vaf-carousel-item {
    flex-basis: calc(33.333% - 11px);
  }

  .vaf-carousel-item-small {
    flex-basis: calc(25% - 12px);
  }
}

@media (max-width: 767px) {
  .vaf-category-slider .nav {
    gap: 6px;
  }

  .vaf-category-slider .vaf-cat-pill {
    min-width: 96px;
    margin: 0 2px;
    padding: 10px 8px;
  }

  .vaf-category-slider .nav > li:first-child .vaf-cat-pill {
    margin-left: 0;
  }

  .vaf-category-slider .nav > li:last-child .vaf-cat-pill {
    margin-right: 0;
  }

  .vaf-carousel-item,
  .vaf-carousel-item-small {
    flex-basis: 100%;
  }
}