/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 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-sm);
	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: 48px 26px;

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

.events-slider__slide__title {
	margin: 0 0 15px;
	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: 500;
}

.events-slider__slide__text p {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;

	font-weight: 500;
}

.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: 420px;

	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 desktop the side arrows move into a control row beneath the card:
     prev arrow | pagination | next arrow. Reclaim the gutter inset that made
     room for the old -70px side arrows, and lay the slider out so the track sits
     on top and the controls wrap centered underneath it. */
	.events-slider__slides {
		margin-inline: 0;

		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 24px 16px;
	}

	.events-slider__slides .splide__track {
		order: 0;
		flex: 0 0 100%;
	}

	/* drop the wrapper's own box so its two arrow buttons become flex items that
     can flank the pagination (the --purple background is a descendant rule, so it
     still applies through display: contents) */
	.events-slider__slides .splide__arrows {
		display: contents;
	}

	/* bring the arrows out of the side gutters into the inline control row */
	.events-slider__slides .splide__arrow {
		position: static;
		top: auto;
		left: auto;
		right: auto;
		transform: none;
	}

	.events-slider__slides .splide__arrow--prev {
		order: 1;
	}

	.events-slider__slides .splide__pagination {
		order: 2;
		margin-top: 0;
	}

	.events-slider__slides .splide__arrow--next {
		order: 3;
	}

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

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

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 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;
	}

	/* Aspect-ratio image band (not flex-basis:100% or min-height) so the
     position:absolute <img> has a definite box to fill that scales with the
     card's width instead of an arbitrary fixed height. */
	.events-slider__slide__img-side {
		flex: 0 0 auto;
		aspect-ratio: 3 / 2;
		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;
	}
}