/**
 * Unesco Carousel Post - Front-end styles
 * All customizable values are exposed as CSS custom properties and are
 * set inline per-instance from PHP (see class-ucp-render.php), so
 * multiple carousels with different settings can coexist on one page
 * without style conflicts. A few controls (content padding, text
 * alignment) are wired directly through Elementor's own responsive
 * "selectors" mechanism instead of custom properties — see
 * class-ucp-elementor-widget.php.
 *
 * ARCHITECTURE NOTE: the image frame and the content frame are both
 * always in a fixed position/size. They never move, slide or resize
 * between slides — only the item *inside* each frame cross-fades to
 * the next post's image / title / excerpt / date. This matches a
 * "content update", not a sliding-track carousel.
 */

.ucp-carousel {
	/* Fallback values - always overridden inline per instance. */
	--ucp-height: 500px;
	--ucp-title-size: 18px;
	--ucp-excerpt-size: 14px;
	--ucp-gap-title: 40px;
	--ucp-gap-excerpt: 40px;
	--ucp-bg: #006bb9;
	--ucp-text-color: #ffffff;
	--ucp-align-h: center;
	--ucp-align-v: center;
	--ucp-fade-delay: 0.3s;
	--ucp-radius: 0px;
	--ucp-mobile-image-height: 260px;
	--ucp-transition-duration: 700ms;
	--ucp-pagination-gap: 24px;

	position: relative;
	display: flex;
	flex-direction: row;
	/* Isolate the layout mechanics from the surrounding page direction
	 * (WordPress/WPML sets html[dir="rtl"] for Persian/Arabic). Without
	 * this, flex-direction:row would silently reverse itself on RTL
	 * pages, swapping the image/content sides unintentionally. The
	 * correct RTL/LTR mirroring below is handled explicitly by the
	 * .ucp-dir-rtl / .ucp-dir-ltr modifier classes instead. */
	direction: ltr;
	width: 100%;
	max-width: 100%;
	height: var(--ucp-height);
	overflow: hidden;
	border-radius: var(--ucp-radius);
	box-sizing: border-box;
	font-family: inherit;
	cursor: grab;
	touch-action: pan-y; /* allow vertical page scroll while we capture horizontal drags */
}

.ucp-carousel.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.ucp-carousel *,
.ucp-carousel *::before,
.ucp-carousel *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
 * Content frame — FIXED box, never moves. Only the item inside it
 * cross-fades between posts. It's a column flex container so the
 * pagination can live in normal flow *below* the content area instead
 * of floating on top of it (which used to overlap the date on short
 * boxes / mobile).
 * ------------------------------------------------------------------- */
.ucp-content-frame {
	position: relative;
	flex: 0 0 50%;
	max-width: 50%;
	height: 100%;
	background-color: var(--ucp-bg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 40px; /* fallback; actual per-side/per-breakpoint padding is applied by Elementor's responsive Dimensions control */
}

.ucp-content-items-wrap {
	position: relative;
	flex: 1 1 auto;
	min-height: 0; /* required so this flex child can shrink below its content size */
	width: 100%;
	overflow: hidden;
}

.ucp-content-item {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: var(--ucp-align-v);
	align-items: var(--ucp-align-h);
	text-align: start;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.ucp-content-item.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.4s ease;
	z-index: 1;
}

.ucp-slide-title,
.ucp-slide-excerpt,
.ucp-slide-date {
	display: block;
	width: 100%;
	color: var(--ucp-text-color);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	transition-delay: 0s;
}

/* Staggered, timed fade-in: title first, then excerpt, then date. */
.ucp-content-item.is-active .ucp-slide-title {
	opacity: 1;
	transform: translateY(0);
	transition-delay: var(--ucp-fade-delay);
}
.ucp-content-item.is-active .ucp-slide-excerpt {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(var(--ucp-fade-delay) + 0.15s);
}
.ucp-content-item.is-active .ucp-slide-date {
	opacity: 0.9;
	transform: translateY(0);
	transition-delay: calc(var(--ucp-fade-delay) + 0.3s);
}

.ucp-slide-title {
	font-size: clamp(15px, 1.4vw + 10px, var(--ucp-title-size));
	font-weight: 700;
	text-decoration: none;
	line-height: 1.5;
	margin: 0;
}

.ucp-slide-title:hover,
.ucp-slide-title:focus {
	opacity: 0.85;
}

.ucp-slide-excerpt {
	font-size: clamp(12px, 0.9vw + 8px, var(--ucp-excerpt-size));
	font-weight: 400;
	line-height: 1.8;
	margin: 0;
	margin-top: var(--ucp-gap-title);
	unicode-bidi: plaintext; /* keep trailing punctuation (e.g. the "…" ellipsis) on the correct visual side for RTL/LTR text */
}

.ucp-slide-date {
	font-size: clamp(11px, 0.6vw + 8px, 13px);
	font-weight: 400;
	margin: 0;
	margin-top: var(--ucp-gap-excerpt);
}

/* ---------------------------------------------------------------------
 * Pagination dots — sits in NORMAL FLOW below the content items (never
 * absolutely overlapping the date), rendered once and only ever
 * updated in place (class/aria toggling) by JS — it never reloads.
 * align-self resolves against .ucp-content-frame's own text direction
 * (set via the dir="rtl|ltr" attribute in the markup), so it lands on
 * the reading "start" side automatically: right for RTL, left for LTR.
 * ------------------------------------------------------------------- */
.ucp-pagination {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--ucp-pagination-gap);
	align-self: flex-start;
}

.ucp-dot {
	appearance: none;
	border: none;
	cursor: pointer;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 0;
	transition: width 0.3s ease, background-color 0.3s ease;
}

.ucp-dot:hover,
.ucp-dot:focus-visible {
	background-color: rgba(255, 255, 255, 0.8);
}

.ucp-dot.is-active {
	width: 26px;
	background-color: #ffffff;
}

/* ---------------------------------------------------------------------
 * Image frame — FIXED box, fixed size/position, never moves. Only the
 * image inside cross-fades (with a subtle right-to-left slide-in) to
 * the next post's featured image. The frame's crop/centering never
 * varies between slides.
 * ------------------------------------------------------------------- */
.ucp-image-frame {
	position: relative;
	flex: 0 0 50%;
	max-width: 50%;
	height: 100%;
	overflow: hidden;
	background: #e9e9e9;
}

.ucp-image-item {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.ucp-image-item.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease;
	z-index: 1;
}

.ucp-image-item a {
	position: absolute;
	inset: 0;
	display: block;
}

.ucp-image-item img,
.ucp-slide-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center; /* always dead-center, regardless of the source image's own dimensions */
	pointer-events: none; /* dragging shouldn't trigger native browser image-drag ghosting */
	-webkit-user-drag: none;
}

.ucp-no-image {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #cfd8dc, #b0bec5);
}

/* ---------------------------------------------------------------------
 * RTL (Persian / Arabic) — content on the left, image on the right.
 * This is the base/default layout described in the design.
 * ------------------------------------------------------------------- */
.ucp-carousel.ucp-dir-rtl {
	flex-direction: row; /* content (1st child) left, image (2nd child) right */
}
.ucp-carousel.ucp-dir-rtl .ucp-content-item {
	text-align: right;
}

/* ---------------------------------------------------------------------
 * LTR (English / other LTR languages) — mirrored: image on the left,
 * content on the right, so reading direction feels natural via WPML.
 * ------------------------------------------------------------------- */
.ucp-carousel.ucp-dir-ltr {
	flex-direction: row-reverse; /* content pushed to the right, image to the left */
}
.ucp-carousel.ucp-dir-ltr .ucp-content-item {
	text-align: left;
}

/* =======================================================================
 * RESPONSIVE BREAKPOINTS
 * Mobile-first stacking: image on top, content below, for every screen
 * narrower than 768px (portrait & landscape phones).
 *
 * IMPORTANT: on mobile the configured "Height" (Mobile device, Elementor
 * panel) is a MINIMUM, not a hard cap — the box is never allowed to crop
 * content. The image portion keeps its own fixed height
 * (--ucp-mobile-image-height); the content portion's real height is
 * measured in JS (see updateMobileHeight() in ucp-carousel.js) from the
 * tallest slide's actual title/excerpt/date, so long content always
 * grows the box instead of being cut off. Per-side padding for every
 * breakpoint is handled by Elementor's own responsive Dimensions
 * control (see the widget class).
 * ===================================================================== */
@media (max-width: 767px) {
	.ucp-carousel {
		height: auto;
		min-height: var(--ucp-height);
	}
}

/* --- Mobile portrait: <= 479px ----------------------------------------- */
@media (max-width: 479px) {
	.ucp-carousel {
		flex-direction: column !important;
	}
	.ucp-image-frame {
		order: 1;
		flex: 0 0 var(--ucp-mobile-image-height);
		max-width: 100%;
		width: 100%;
	}
	.ucp-content-frame {
		order: 2;
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
	}
	.ucp-slide-title {
		font-size: clamp(14px, 4.2vw, var(--ucp-title-size));
	}
	.ucp-slide-excerpt {
		font-size: clamp(12px, 3.4vw, var(--ucp-excerpt-size));
		margin-top: calc(var(--ucp-gap-title) * 0.5);
	}
	.ucp-slide-date {
		margin-top: calc(var(--ucp-gap-excerpt) * 0.5);
	}
}

/* --- Mobile landscape: 480px - 767px ------------------------------------ */
@media (min-width: 480px) and (max-width: 767px) {
	.ucp-carousel {
		flex-direction: column !important;
	}
	.ucp-image-frame {
		order: 1;
		flex: 0 0 calc(var(--ucp-mobile-image-height) + 40px);
		max-width: 100%;
		width: 100%;
	}
	.ucp-content-frame {
		order: 2;
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
	}
	.ucp-slide-title {
		font-size: clamp(15px, 2.6vw, var(--ucp-title-size));
	}
	.ucp-slide-excerpt {
		font-size: clamp(13px, 2vw, var(--ucp-excerpt-size));
	}
}

/* --- Tablet: 768px - 1023px ----------------------------------------------
 * Height comes from the "Tablet" value of the Elementor responsive
 * Height control (applied inline, scoped by widget id — see
 * UCP_Render::build_markup()). Only typography is adjusted here. */
@media (min-width: 768px) and (max-width: 1023px) {
	.ucp-slide-title {
		font-size: clamp(15px, 1.8vw, var(--ucp-title-size));
	}
	.ucp-slide-excerpt {
		font-size: clamp(12px, 1.3vw, var(--ucp-excerpt-size));
		margin-top: calc(var(--ucp-gap-title) * 0.7);
	}
	.ucp-slide-date {
		margin-top: calc(var(--ucp-gap-excerpt) * 0.7);
	}
}

/* --- Laptop: 1024px - 1365px ----------------------------------------------
 * Uses the base (desktop) --ucp-height value; only typography is refined. */
@media (min-width: 1024px) and (max-width: 1365px) {
	.ucp-slide-title {
		font-size: clamp(16px, 1.1vw, var(--ucp-title-size));
	}
	.ucp-slide-excerpt {
		font-size: clamp(13px, 0.9vw, var(--ucp-excerpt-size));
	}
}

/* --- Desktop: 1366px - 1919px (default, uses base --ucp-height as-is) --- */

/* --- Widescreen: >= 1920px ------------------------------------------------ */
@media (min-width: 1920px) {
	.ucp-carousel {
		height: calc(var(--ucp-height) * 1.15);
	}
	.ucp-slide-title {
		font-size: var(--ucp-title-size);
	}
	.ucp-slide-excerpt {
		font-size: var(--ucp-excerpt-size);
	}
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.ucp-content-item,
	.ucp-image-item,
	.ucp-slide-title,
	.ucp-slide-excerpt,
	.ucp-slide-date,
	.ucp-dot {
		transition-duration: 0.01ms !important;
	}
}