/* Events Slider — heading. Scoped with the block id to beat the sitewide
   .Carousel__title rule from PortraitCarousel.css (40px/700). */

#block-eventsslider .Carousel__title {
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  margin-bottom: 24px;
}

/* Events Slider — footer row: overlay carousel and "See all" button via CSS grid,
   both bottom-anchored so the button lines up with the stepper dots below. */

.events-slider__footer-row {
  display: grid;
  margin-bottom: 5rem;
}

.events-slider__footer-row .events-slider__carousel {
  grid-row: 1;
  grid-column: 1;
}

.events-slider__footer-row > .Carousel__view-all {
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  justify-self: end;
  z-index: 1;
  /* Bottom-flush would leave the shorter CarouselStepper (--CarouselStepper--height,
     2rem) looking off-centre against the taller ButtonPrimary (--Button--height,
     3.5rem). Shift the button down by half the height difference so both are
     vertically centred on each other instead of sharing a bottom edge. */
  margin-bottom: calc((var(--CarouselStepper--height) - var(--Button--height)) / 1.5);
}

/* Hanna's CarouselStepper hugs the carousel images by default (padding-top: 0.5rem).
   Push it down so it lines up with the view-all button on the same row, matching the
   .event-page override in hvirfill_pro/js/src/sass/components/_list.scss. */
.events-slider__footer-row .CarouselStepper {
  margin-top: 2.75rem;
  padding-top: 0;
}


/* Events Slider card — portrait/landscape image variants. */

.event-card__title {
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  color: #2A2B2C;
  margin-top: 24px;
}

.event-card__link:hover .event-card__title {
  color: #0066cc;
}

.event-card__date-time,
.event-card__place {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  margin-top: 8px;
}

.event-card__date-time {
  color: #727477;
}

.event-card__place {
  color: #2A2B2C;
}


/* Card widths for Carousel layout — mirrors _list-item.scss values. */
.event-card {
  max-width: 284px;
}

.event-card--portrait {
  width: 272px;
  max-width: 100%;
}

.event-card--landscape {
  width: 325px;
  max-width: 100%;
}

.event-card--portrait .event-card__banner img,
.event-card--portrait .event-card__banner > div {
  width: 100%;
  aspect-ratio: 6/7;
  object-fit: cover;
  display: block;
}

.event-card--landscape .event-card__banner img,
.event-card--landscape .event-card__banner > div {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}