/*
 * Hamo Expanding Cards Carousel — structural CSS only.
 * All colors, gradients, typography, borders, paddings and gaps come
 * from Elementor Style-tab controls (inline CSS on {{WRAPPER}}, an
 * ancestor of .hamo-ecc), which write custom properties consumed below
 * via var(--x, fallback). This file must never declare its own value
 * for those same custom properties directly on .hamo-ecc (or any
 * descendant) — a value declared directly on an element always wins
 * over one inherited from an ancestor, no matter the source order or
 * specificity, which would silently make the Style-tab controls dead.
 */

.hamo-ecc__top-title {
	margin: 0 0 12px;
}

.hamo-ecc__progress-wrap {
	display: flex;
	justify-content: flex-start;
	width: 100%;
}

.hamo-ecc__progress {
	position: relative;
	width: 100%;
	height: 4px;
	overflow: hidden;
}

.hamo-ecc__progress-fill {
	display: block;
	height: 100%;
	width: 0;
	transition: width var(--hamo-ecc-speed, 400ms) ease-in-out;
}

.hamo-ecc__viewport {
	position: relative;
	overflow: hidden;
}

.hamo-ecc__track {
	display: flex;
	align-items: stretch;
}

.hamo-ecc__card {
	position: relative;
	display: flex;
	align-items: flex-end;
	flex-shrink: 0;
	width: var(--hamo-ecc-card-w, 300px);
	height: var(--hamo-ecc-card-h, 400px);
	margin-inline-end: var(--hamo-ecc-gap, 16px);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: width var(--hamo-ecc-speed, 400ms) ease-in-out;
}

.hamo-ecc__card:last-child {
	margin-inline-end: 0;
}

/* Once Swiper takes over it manages the gap via `spaceBetween`, so the CSS
   fallback margin is removed to avoid double spacing and position drift.
   The margin above only applies when Swiper is unavailable. */
.hamo-ecc__viewport.swiper-initialized .hamo-ecc__card {
	margin-inline-end: 0;
}

/* Expanded width is clamped to the carousel's visible width (--hamo-ecc-vw,
   kept up to date by JS) so the active card can never overflow and get cut
   off at the edge of the viewport. */
.hamo-ecc__card.is-active {
	width: min(var(--hamo-ecc-card-expanded-w, 500px), var(--hamo-ecc-vw, 100vw));
}

.hamo-ecc__card-image {
	position: absolute;
	inset: 0;
}

.hamo-ecc__card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Always-on readability gradient, independent from the user-configurable
   overlay below, so text stays legible even with no overlay color set. */
.hamo-ecc__card::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85));
}

.hamo-ecc__card-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Collapsed: the whole text block (title + description) sits below the card's
   visible area — fully hidden by default (--hamo-ecc-peek: 0). A positive peek
   value reveals that many px of the title at the base of the card. */
.hamo-ecc__card-body {
	position: relative;
	z-index: 1;
	width: 100%;
	transform: translateY(calc(100% - var(--hamo-ecc-peek, 0px)));
	transition: transform var(--hamo-ecc-speed, 400ms) ease-in-out;
}

.hamo-ecc__card.is-active .hamo-ecc__card-body {
	transform: translateY(0);
}

.hamo-ecc__card-title {
	position: relative;
}

.hamo-ecc__card-desc,
.hamo-ecc__card-btn {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity var(--hamo-ecc-speed, 400ms) ease-in-out, transform var(--hamo-ecc-speed, 400ms) ease-in-out;
	transition-delay: calc(var(--hamo-ecc-speed, 400ms) * 0.5);
}

.hamo-ecc__card.is-active .hamo-ecc__card-desc,
.hamo-ecc__card.is-active .hamo-ecc__card-btn {
	opacity: 1;
	transform: translateY(0);
}

.hamo-ecc__card-btn {
	display: inline-block;
	width: fit-content;
}

.hamo-ecc__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
}

.hamo-ecc__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block-start: 16px;
}

.hamo-ecc__dot {
	display: block;
	cursor: pointer;
	border-radius: 50%;
}

.hamo-ecc-dots--round .hamo-ecc__dot {
	border-radius: 50%;
}

.hamo-ecc-dots--square .hamo-ecc__dot {
	border-radius: 0;
}

.hamo-ecc-dots--line .hamo-ecc__dot {
	border-radius: 2px;
	width: 24px !important;
}