/**
 * Events carousel — base layout + slide anatomy.
 *
 * Spacing and slide sizing are custom-property driven so variants and
 * Elementor controls change them without fighting selectors:
 *   --sanaa-ec-spv        visible slides (fractions show a peek)
 *   --sanaa-ec-gap        slide gap (CSS margin — Swiper measures it)
 *   --sanaa-ec-ratio      media aspect ratio
 *   --sanaa-ec-pagination bullet/progress accent
 *
 * Without JS (or Swiper) the viewport stays a scroll-snapping rail —
 * `:not(.swiper-initialized)` is the no-JS path. When Swiper mounts it
 * stamps .swiper-initialized and owns overflow/transform.
 */

.sanaa-events-carousel {
	--sanaa-ec-spv: 1;
	--sanaa-ec-gap: var(--sanaa-grid-gap, 24px);
	--sanaa-ec-ratio: 4 / 3;
	--sanaa-ec-pagination: var(--sanaa-primary, currentColor);
}

@media (width >= 768px) {
	.sanaa-events-carousel {
		--sanaa-ec-spv: 2;
	}
}

@media (width >= 1024px) {
	.sanaa-events-carousel {
		--sanaa-ec-spv: 3;
	}
}

.sanaa-events-carousel__viewport {
	margin: 0;
}

.sanaa-events-carousel__viewport.swiper-initialized {
	overflow: hidden;
}

/* No-JS / no-Swiper: a real horizontal rail — snap + swipe natively. */
.sanaa-events-carousel__viewport:not(.swiper-initialized) {
	overflow: auto hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.sanaa-events-carousel__viewport:not(.swiper-initialized)::-webkit-scrollbar {
	display: none;
}

.sanaa-events-carousel__track {
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Ancestor-anchored so it beats Swiper's own .swiper-slide{width:100%},
   which prints after our stylesheets when the handle is enqueued. */
.sanaa-events-carousel .sanaa-events-carousel__slide {
	flex: 0 0 auto;
	width: calc((100% - (var(--sanaa-ec-spv) - 1) * var(--sanaa-ec-gap)) / var(--sanaa-ec-spv));

	/* Swiper prints height:100% on .swiper-slide, which stops align-items:stretch —
	   auto restores equal-height stretching so card feet can align. */
	height: auto;
	margin: 0 var(--sanaa-ec-gap) 0 0;
}

.sanaa-events-carousel__viewport:not(.swiper-initialized) .sanaa-events-carousel__slide {
	scroll-snap-align: start;
}

.sanaa-events-carousel .sanaa-events-carousel__slide:last-child {
	margin-right: 0;
}

/* Slide anatomy — image, date, name, location, arrow. Flat and
   image-led; chrome belongs to the variant/design system. */
.sanaa-ev-slide {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;

	/* The viewport clips (overflow:hidden) — leave room for the CTA's
	   hard offset shadow so it isn't cut at the slide bottom. */
	padding-bottom: 6px;
}

.sanaa-ev-slide__media {
	position: relative;
	margin: 0;
	aspect-ratio: var(--sanaa-ec-ratio);
	overflow: hidden;
	border-radius: var(--sanaa-radius-md, 12px);
	background: var(--sanaa-surface-alt, var(--sanaa-surface));
}

.sanaa-ev-slide__media::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.sanaa-ev-slide__img-link {
	display: block;
	height: 100%;
}

.sanaa-ev-slide__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sanaa-motion-duration, 320ms) var(--sanaa-motion-easing, ease);
}

.sanaa-ev-slide:hover .sanaa-ev-slide__img,
.sanaa-ev-slide:focus-within .sanaa-ev-slide__img {
	transform: scale(1.03);
}

/* Excerpt overlay — revealed on hover/focus like the events-grid card.
   pointer-events:none keeps the media link clickable underneath. */
.sanaa-ev-slide__overlay {
	position: absolute;
	inset: 0;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: var(--sanaa-space-sm, 12px);
	padding: var(--sanaa-space-lg, 24px);
	text-align: center;
	color: var(--sanaa-text-inverse, var(--sanaa-surface));
	background: var(
		--sanaa-ec-hover-bg,
		color-mix(in srgb, var(--sanaa-ink, var(--sanaa-text)) 88%, transparent)
	);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--sanaa-motion-duration, 200ms) var(--sanaa-motion-easing, ease);
}

.sanaa-ev-slide__media:hover .sanaa-ev-slide__overlay,
.sanaa-ev-slide__media:focus-within .sanaa-ev-slide__overlay {
	opacity: 1;
}

.sanaa-ev-slide__overlay-title {
	font-family: var(--sanaa-font-heading, var(--sanaa-font-body));
	font-size: 1.1rem;
	font-weight: var(--sanaa-heading-weight, 600);
	line-height: 1.2;
}

.sanaa-ev-slide__excerpt {
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.9rem;
	line-height: 1.5;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
}

.sanaa-ev-slide__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--sanaa-space-xs, 8px);
	padding-top: var(--sanaa-space-md, 20px);
	min-width: 0;
}

.sanaa-ev-slide__date {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	font-family: var(--sanaa-font-accent, var(--sanaa-font-body));
	font-size: 1rem;
	font-weight: 500;
	color: var(--sanaa-text-muted);
}

.sanaa-ev-slide__date .sanaa-icon,
.sanaa-ev-slide__location .sanaa-icon {
	flex: 0 0 auto;
}

.sanaa-ev-slide__title {
	margin: 0;
	font-family: var(--sanaa-font-heading, var(--sanaa-font-body));
	font-size: 1.125rem; /* 18px default — Elementor typography overrides */
	font-weight: var(--sanaa-heading-weight, 600);
	letter-spacing: var(--sanaa-heading-tracking, 0);
	text-transform: var(--sanaa-heading-transform, none);
	line-height: 1.25;
}

.sanaa-ev-slide__link {
	color: var(--sanaa-heading-color, var(--sanaa-ink));
	text-decoration: none;
}

.sanaa-ev-slide__link:hover,
.sanaa-ev-slide__link:focus-visible {
	color: var(--sanaa-primary);
}

/* The foot only carries the CTA — margin-top:auto pins it to the card
   bottom so buttons line up across slides of uneven title length. */
.sanaa-ev-slide__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sanaa-space-sm, 12px);
	margin: auto 0 0;
}

.sanaa-ev-slide__location {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 1rem;
	color: var(--sanaa-text-muted);
}

/* The CTA is the theme primary button, sized down for a slide foot —
   compact padding and type while .sanaa-button carries the chrome. */
.sanaa-ev-slide__cta {
	flex: 0 0 auto;
	padding: 0.45rem 0.95rem;
	font-size: 0.78rem;
	gap: 0.4rem;
}

/* Details overlay — date/name/location sit on a token-driven band over
   the media instead of beneath it. Slides without an image keep the
   standard stacked anatomy (no floating empty band). The band colour
   is --sanaa-ec-details-bg so Elementor can repaint it. */
.sanaa-events-carousel--details-overlay .sanaa-ev-slide:not(.sanaa-ev-slide--no-media) {
	position: relative;
	height: auto;
	aspect-ratio: var(--sanaa-ec-ratio);
	overflow: hidden;
	border-radius: var(--sanaa-radius-md, 12px);
}

.sanaa-events-carousel--details-overlay .sanaa-ev-slide__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border-radius: 0;
}

.sanaa-events-carousel--details-overlay
	.sanaa-ev-slide:not(.sanaa-ev-slide--no-media)
	.sanaa-ev-slide__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: var(--sanaa-space-md, 20px);
	background: var(--sanaa-ec-details-bg, color-mix(in srgb, var(--sanaa-ink) 62%, transparent));
}

.sanaa-events-carousel--details-overlay
	.sanaa-ev-slide:not(.sanaa-ev-slide--no-media)
	.sanaa-ev-slide__link,
.sanaa-events-carousel--details-overlay
	.sanaa-ev-slide:not(.sanaa-ev-slide--no-media)
	.sanaa-ev-slide__link:hover,
.sanaa-events-carousel--details-overlay
	.sanaa-ev-slide:not(.sanaa-ev-slide--no-media)
	.sanaa-ev-slide__link:focus-visible {
	color: var(--sanaa-text-inverse);
}

.sanaa-events-carousel--details-overlay
	.sanaa-ev-slide:not(.sanaa-ev-slide--no-media)
	.sanaa-ev-slide__date,
.sanaa-events-carousel--details-overlay
	.sanaa-ev-slide:not(.sanaa-ev-slide--no-media)
	.sanaa-ev-slide__location {
	color: color-mix(in srgb, var(--sanaa-text-inverse) 82%, transparent);
}

/* Controls — restrained: hairline-bordered arrows + quiet bullets. */
.sanaa-events-carousel__ui {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--sanaa-space-md, 20px);
	margin-top: var(--sanaa-space-lg, 32px);
}

.sanaa-events-carousel__ui[hidden] {
	display: none;
}

.sanaa-events-carousel__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: var(--sanaa-border-width, 1px) solid var(--sanaa-border);
	border-radius: var(--sanaa-radius-button, 50%);
	background: transparent;
	color: var(--sanaa-ink);
	cursor: pointer;
	transition:
		color var(--sanaa-motion-duration, 320ms) var(--sanaa-motion-easing, ease),
		border-color var(--sanaa-motion-duration, 320ms) var(--sanaa-motion-easing, ease),
		background-color var(--sanaa-motion-duration, 320ms) var(--sanaa-motion-easing, ease);
}

.sanaa-events-carousel__nav:hover:not(:disabled) {
	color: var(--sanaa-on-primary, var(--sanaa-bg));
	border-color: var(--sanaa-primary);
	background-color: var(--sanaa-primary);
}

.sanaa-events-carousel__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.sanaa-events-carousel__nav:focus-visible,
.sanaa-events-carousel__dot:focus-visible,
.sanaa-events-carousel__pagination .swiper-pagination-bullet:focus-visible {
	outline: 2px solid var(--sanaa-primary);
	outline-offset: 2px;
}

.sanaa-events-carousel__pagination {
	display: inline-flex;
	align-items: center;
	gap: var(--sanaa-space-xs, 8px);
	margin-right: auto;
}

.sanaa-events-carousel__pagination--progressbar {
	position: relative;
	flex: 1;
	height: 2px;
	margin-right: var(--sanaa-space-md, 20px);
	background: var(--sanaa-border);
	overflow: hidden;
}

.sanaa-events-carousel__pagination--progressbar .swiper-pagination-progressbar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 100%;
	background: var(--sanaa-ec-pagination);
	transform-origin: left;
}

/* Bullets — Swiper's own classes and the fallback engine's dots share
   one look. */
.sanaa-events-carousel__pagination .swiper-pagination-bullet,
.sanaa-events-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sanaa-ink);
	opacity: 0.25;
	cursor: pointer;
	transition:
		opacity var(--sanaa-motion-duration, 320ms) var(--sanaa-motion-easing, ease),
		transform var(--sanaa-motion-duration, 320ms) var(--sanaa-motion-easing, ease);
}

.sanaa-events-carousel__pagination .swiper-pagination-bullet-active,
.sanaa-events-carousel__dot.is-active {
	background: var(--sanaa-ec-pagination);
	opacity: 1;
	transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
	.sanaa-ev-slide__img,
	.sanaa-events-carousel__nav,
	.sanaa-events-carousel__pagination .swiper-pagination-bullet,
	.sanaa-events-carousel__dot {
		transition: none;
	}

	.sanaa-ev-slide:hover .sanaa-ev-slide__img,
	.sanaa-ev-slide:focus-within .sanaa-ev-slide__img {
		transform: none;
	}
}