/**
 * GTHL Events Carousel — layout only.
 * Tokens / shared CTA / media image / placeholder: assets/css/gthl-blocks-global.css
 */

.gthl-events-carousel {
	margin-top: var(--gthl-space-xl);
}

.gthl-events-carousel__empty {
	border-radius: var(--gthl-radius-lg);
}

.gthl-events-carousel__viewport {
	width: 100%;
}

.gthl-events-carousel__card {
	position: relative;
	width: 100%;
	border-radius: var(--gthl-radius-lg);
	overflow: hidden;
	background: var(--gthl-color-white);
}

.gthl-events-carousel__track {
	position: relative;
	width: 100%;
	overflow: hidden;
	transition: height 0.45s ease;
}

/* Default (before JS): only the active slide in flow so the card has height. */
.gthl-events-carousel__slide {
	display: none;
	width: 100%;
	margin: 0;
	background: var(--gthl-color-white);
}

.gthl-events-carousel__slide.is-active {
	display: block;
}

/* After JS: slides sit in a row and the track slides sideways. No fade. */
.gthl-events-carousel.is-ready .gthl-events-carousel__track {
	display: flex;
	align-items: flex-start;
	overflow: visible;
	transition: transform 0.45s ease, height 0.45s ease;
}

.gthl-events-carousel.is-ready .gthl-events-carousel__slide {
	display: block;
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
	opacity: 1;
	pointer-events: none;
}

.gthl-events-carousel.is-ready .gthl-events-carousel__slide.is-active {
	pointer-events: auto;
}

.gthl-events-carousel__media {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 565px;
	max-height: 565px;
	min-height: 220px;
	overflow: hidden;
	background: var(--gthl-color-muted);
}

.gthl-events-carousel__media-link {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.gthl-events-carousel__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.gthl-events-carousel__placeholder {
	width: 100%;
	height: 100%;
	min-height: inherit;
}

.gthl-events-carousel__caption {
	padding: var(--gthl-space-xl) var(--gthl-space-xl) var(--gthl-space-3xl);
	background: var(--gthl-color-caption);
}

.gthl-events-carousel__title {
	margin: 0 0 var(--gthl-space-xl);
	max-width: 75rem;
	font-family: var(--gthl-font-family);
	font-size: var(--gthl-font-size-h2);
	font-weight: var(--gthl-font-weight-bold);
	line-height: var(--gthl-line-height-snug);
	color: var(--gthl-color-navy);
}

.gthl-events-carousel__title a {
	color: inherit;
	text-decoration: none;
}

.gthl-events-carousel__title a:hover,
.gthl-events-carousel__title a:focus-visible {
	text-decoration: none;
}

.gthl-events-carousel__cta {
	min-height: var(--gthl-space-3xl);
	padding: var(--gthl-space-lg) var(--gthl-space-2xl);
	font-size: var(--gthl-font-size-body);
}

.gthl-events-carousel__nav-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 565px;
	max-height: 565px;
	min-height: 220px;
	z-index: 6;
	pointer-events: none;
}

.gthl-events-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 7;
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.75rem;
	height: 4.75rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--gthl-color-white);
	color: var(--gthl-color-nav-icon);
	cursor: pointer;
	box-shadow: var(--gthl-shadow-nav);
	transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.gthl-events-carousel__nav:hover,
.gthl-events-carousel__nav:focus,
.gthl-events-carousel__nav:focus-visible,
.gthl-events-carousel__nav:active {
	background: var(--gthl-color-white);
	color: var(--gthl-color-nav-icon);
	box-shadow: var(--gthl-shadow-nav);
	outline: none;
}

.gthl-events-carousel__nav:hover,
.gthl-events-carousel__nav:focus-visible {
	transform: translateY(-50%) scale(1.06);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	color: var(--gthl-color-black, #000000);
}

.gthl-events-carousel__nav:focus-visible {
	box-shadow: 0 0 0 3px rgba(0, 32, 91, 0.35), 0 6px 18px rgba(0, 0, 0, 0.22);
}

.gthl-events-carousel__nav svg {
	display: block;
}

.gthl-events-carousel__nav--prev {
	left: clamp(0.75rem, 2vw, 1.25rem);
}

.gthl-events-carousel__nav--next {
	right: clamp(0.75rem, 2vw, 1.25rem);
}

.gthl-events-carousel__list {
	display: grid;
	gap: var(--gthl-space-lg);
}

.gthl-events-carousel__item {
	margin: 0;
	border-radius: var(--gthl-radius-lg);
	overflow: hidden;
	background: var(--gthl-color-white);
}

.gthl-events-carousel--static .gthl-events-carousel__media {
	aspect-ratio: 16 / 8;
	max-height: 360px;
}

@media (max-width: 1024px) {
	.gthl-events-carousel {
		--gthl-media-ratio: 16 / 8;
	}

	.gthl-events-carousel__media,
	.gthl-events-carousel__nav-layer {
		height: 420px;
		max-height: 420px;
	}
}

@media (max-width: 782px) {
	.gthl-events-carousel {
		--gthl-radius-lg: 12px;
		--gthl-media-ratio: 16 / 10;
	}

	.gthl-events-carousel__media,
	.gthl-events-carousel__nav-layer {
		min-height: 180px;
		height: 320px;
		max-height: 320px;
	}

	.gthl-events-carousel__nav {
		width: 4rem;
		height: 4rem;
	}

	.gthl-events-carousel__nav svg {
		width: 10px;
		height: 16px;
	}

	.gthl-events-carousel__caption {
		padding: var(--gthl-space-lg) var(--gthl-space-lg) var(--gthl-space-2xl);
	}

	.gthl-events-carousel__title {
		margin-bottom: var(--gthl-space-lg);
		font-size: var(--gthl-font-size-h3);
		line-height: var(--gthl-line-height-snug);
	}

	.gthl-events-carousel__cta {
		min-height: var(--gthl-space-3xl);
		padding: var(--gthl-space-lg) var(--gthl-space-2xl);
		font-size: var(--gthl-font-size-body);
	}
}

@media (max-width: 480px) {
	.gthl-events-carousel {
		--gthl-radius-lg: 10px;
		--gthl-media-ratio: 4 / 3;
	}

	.gthl-events-carousel__media,
	.gthl-events-carousel__nav-layer {
		min-height: 160px;
		height: 285px;
		max-height: 285px;
	}

	.gthl-events-carousel__nav {
		width: 3rem;
		height: 3rem;
	}

	.gthl-events-carousel__nav--prev {
		left: 0.75rem;
		top: 50%;
	}

	.gthl-events-carousel__nav--next {
		right: 0.75rem;
		top: 50%;
	}

	.gthl-events-carousel__caption {
		padding: var(--gthl-space-lg) var(--gthl-space-lg) var(--gthl-space-2xl);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gthl-events-carousel__track,
	.gthl-events-carousel.is-ready .gthl-events-carousel__track {
		transition: none;
	}

	.gthl-events-carousel__nav,
	.gthl-events-carousel__cta {
		transition: none;
	}
}