/**
 * Custom Featured Events Carousel
 *
 * Card typography/appearance comes from the existing What's On grid styles
 * (`.event-row-wrapper .event-card ...` in the site's custom CSS). This file only adds the
 * carousel mechanics and neutralises the grid layout inside each slide.
 *
 * Design hooks:
 *   .cfec-carousel   wrapper          .cfec-controls  controls row
 *   .cfec-viewport   clipping area    .cfec-progress  progress line (segments added by JS)
 *   .cfec-track      moving strip     .cfec-prev / .cfec-next  arrow buttons
 *   .cfec-slide      one card
 */

.cfec-carousel {
	--cfec-per-view: var(--cfec-per-view-desktop, 3);
	--cfec-gap: 40px;
	--cfec-speed: 200ms; /* same as the previous Divi carousel; overridable via the shortcode */
	--cfec-accent: #244E45;
	--cfec-shadow-space: 24px;

	position: relative;
	width: 100%;
}

@media (max-width: 1024px) {
	.cfec-carousel {
		--cfec-per-view: var(--cfec-per-view-tablet, 2);
		--cfec-gap: 30px;
	}
}

@media (max-width: 767px) {
	.cfec-carousel { 
		--cfec-per-view: var(--cfec-per-view-mobile, 1);
		--cfec-gap: 24px;
	}
}

/* Viewport: clips the track. Extra block padding keeps the card shadow visible. */
.cfec-carousel .cfec-viewport {
	overflow: hidden;
	margin: calc(var(--cfec-shadow-space) * -1) calc(var(--cfec-gap) / -2);
	padding: var(--cfec-shadow-space) 0;
}

.cfec-carousel .cfec-track {
	display: flex;
	align-items: stretch;
	transition: transform var(--cfec-speed) ease-in-out;
	will-change: transform;
}

.cfec-carousel .cfec-slide {
	flex: 0 0 calc(100% / var(--cfec-per-view));
	box-sizing: border-box;
	display: flex;
	min-width: 0;
	padding: 0 calc(var(--cfec-gap) / 2);
}

/* Neutralise the grid wrapper inside each slide, keep the card styles. */
.cfec-carousel .cfec-slide .cfec-card-scope.event-row-wrapper {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	width: 100%;
	padding: 0;
}

.cfec-carousel .cfec-slide .cfec-card-scope .event-card {
	width: 100%;
	height: 100%;
}

/* Before JS runs (or if it fails): a plain horizontally scrollable row. */
.cfec-carousel:not(.cfec-ready) .cfec-viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.cfec-carousel:not(.cfec-ready) .cfec-slide {
	scroll-snap-align: start;
}

.cfec-carousel:not(.cfec-ready) .cfec-controls,
.cfec-carousel.cfec-is-static .cfec-controls {
	display: none;
}

.cfec-carousel.cfec-is-static .cfec-track {
	transform: none !important;
}

/* Controls row: progress line on the left, Previous/Next on the right (as the current carousel). */
.cfec-carousel .cfec-controls {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-top: 56px;
}

.cfec-carousel .cfec-progress {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
	margin-right: 42px;
}

/* Keeps the arrows right-aligned when dots="false". */
.cfec-carousel .cfec-progress-spacer {
	flex: 1 1 auto;
}

.cfec-carousel .cfec-progress-segment {
	flex: 1 1 0;
	height: 9px;
	margin: 0;
	padding: 0;
	border: 0;
	background: linear-gradient(var(--cfec-accent), var(--cfec-accent)) center / 100% 2px no-repeat;
	cursor: pointer;
	appearance: none;
}

.cfec-carousel .cfec-progress-segment.is-active {
	background-size: 100% 9px;
}

.cfec-carousel .cfec-progress-segment:focus-visible {
	outline: 2px solid var(--cfec-accent);
	outline-offset: 3px;
}

.cfec-carousel .cfec-nav {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--cfec-accent);
	cursor: pointer;
	line-height: 0;
}

.cfec-carousel .cfec-nav-icon {
	display: block;
	width: 42px;
	height: 42px;
}

/* Same artwork for both arrows; "next" is rotated, as on the current carousel. */
.cfec-carousel .cfec-next .cfec-nav-icon {
	transform: rotate(180deg);
}

.cfec-carousel .cfec-nav:hover {
	opacity: 0.8;
}

/* Only used when loop="false": arrows are disabled at the first/last position. */
.cfec-carousel .cfec-nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.cfec-carousel .cfec-nav:focus-visible {
	outline: 2px solid var(--cfec-accent);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.cfec-carousel .cfec-controls {
		margin-top: 36px;
		gap: 16px;
	}

	.cfec-carousel .cfec-progress {
		margin-right: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cfec-carousel .cfec-track {
		transition: none;
	}
}