/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* container query */

.events-slider {
  container-type: inline-size;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* section */

.events-slider {
  padding: 72px 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* header (centered: pre-title, title, buttons) */

.events-slider__header.section-header {
  margin-bottom: 36px;
  text-align: center;
}

.events-slider__header .section-header h2,
.events-slider__title {
  align-items: center;
}

.events-slider__buttons {
  margin-top: 24px;
}

/* .button-row is a full-width flex row that defaults to left — center it under the header */
.events-slider__buttons .button-row {
  justify-content: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* slider shell — relative so the arrows can sit in the side gutters.
   Inset from the container so the -70px arrows stay on-screen when the
   container's own gutter is narrower than the arrow overhang. */

.events-slider__slides {
  position: relative;
  margin-inline: 80px;
}

.events-slider__slides .splide__track {
  border-radius: var(--box-border-radius-lg);
  overflow: hidden;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* slide row — text panel left, image right */

.events-slider__slide__row {
  height: 100%;
  display: flex;
  align-items: stretch;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* text side (blue panel) */

.events-slider__slide__text-side {
  flex: 0 0 42%;

  display: flex;
  flex-direction: column;
  padding: 80px 26px;

  background: var(--blue-dk);
  color: var(--white);
}

.events-slider__slide__title {
  margin: 0 0 30px;
  font-size: 36px;
  text-transform: uppercase;
  color: var(--white);
}

.events-slider__slide__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.events-slider__slide__location,
.events-slider__slide__date {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: "Verdana";
  font-size: 16px;
  letter-spacing: -0.5px;
  font-weight: 700;
}

/* inline-flex makes the span an atomic box so the block-level .icon (from get_icon)
   stays on the line with the text instead of breaking to its own row */
.events-slider__slide__icon {
  display: inline-flex;
  align-items: center;
}

.events-slider__slide__icon .icon {
  font-size: 26px;
  color: var(--white);
}

.events-slider__slide__text {
  margin-bottom: 26px;
  font-weight: 300;
}

.events-slider__slide__text p {
  font-weight: 300;
}

.events-slider__slide__text p:last-child {
  margin-bottom: 0;
}

.events-slider__slide__button {
  align-self: flex-start;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* image side */

.events-slider__slide__img-side {
  position: relative;
  flex: 1 1 58%;
  min-height: 460px;

  background: var(--gray); /* placeholder until image IDs are wired in */
}

.events-slider__slide__img-side img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* arrows — purple circles centered vertically, just outside the card */

.events-slider__slides .splide__arrows {
  position: static;
}

.events-slider__slides .splide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.events-slider__slides .splide__arrow svg {
  width: 16px;
  height: auto;
}

.events-slider__slides .splide__arrow--prev {
  left: -70px;
}

.events-slider__slides .splide__arrow--prev svg {
  transform: rotate(180deg);
}

.events-slider__slides .splide__arrow--next {
  right: -70px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* pagination — blue dots centered below the card (colors come from defaults.css) */

.events-slider__slides .splide__pagination {
  justify-content: center;
  margin-top: 28px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* tablet */

@container (max-width: 900px) {
  /* below the desktop width the side arrows are dropped (pagination only),
     so reclaim the gutter inset that made room for them */
  .events-slider__slides {
    margin-inline: 0;
  }

  /* hide the arrows here — navigate by the pagination dots instead */
  .events-slider__slides .splide__arrows {
    display: none;
  }

  .events-slider__slide__text-side {
    flex-basis: 50%;
    padding: 40px 30px;
  }

  .events-slider__slide__img-side {
    flex-basis: 50%;
    min-height: 360px;
  }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* mobile section rhythm — root padding can't be container-queried (an element
   can't respond to its own container), so keep it on the viewport like the
   global section padding in defaults.css */

@media (max-width: 768px) {
  .events-slider {
    padding: 48px 0;
  }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* mobile — stack image over text */

@container (max-width: 680px) {
  /* Stack image over text. Keep the row at full slide height (Splide equalizes
     slides to the tallest) so the blue panel fills the card — the image is a
     fixed band and the text panel grows to fill the rest. */
  .events-slider__slide__row {
    flex-direction: column-reverse;
  }

  /* Fixed-height image band. Explicit height (not flex-basis:100% or min-height)
     so the position:absolute <img> always has a definite box to fill. */
  .events-slider__slide__img-side {
    flex: 0 0 auto;
    height: 240px;
    min-height: 0;
  }

  /* Grow to fill the height left after the image, and center the content
     vertically on the blue background. */
  .events-slider__slide__text-side {
    flex: 1 1 auto;
    justify-content: center;
    padding: 30px 24px;
  }

  .events-slider__slides .splide__arrow {
    width: 44px;
    height: 44px;
  }
}