/**
 * Kuppe's Landscape Services – Reviews Carousel
 * Matches the existing Elementor Testimonial carousel exactly:
 *   dark section bg  |  gray side cards  |  lime-green active center card
 */

/* ── Variables ─────────────────────────────────────────────── */
.kl-reviews-wrap {
	--kl-lime:       #b5cc3c;
	--kl-lime-dark:  #8fa52a;
	--kl-card-side:  #5c6358;
	--kl-white:      #ffffff;
	--kl-dark:       #1c2118;
	--kl-muted:      rgba(255,255,255,0.58);
	--kl-gap:        16px;
	--kl-radius:     4px;
	--kl-ease:       0.28s ease;

	/* Arrow dimensions — change these to resize arrows globally */
	--kl-arrow-size: 48px;
	--kl-arrow-icon: 18px;
}

/* ── Outer wrapper ──────────────────────────────────────────── */
.kl-reviews-wrap {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;

	/* FIX: give horizontal room for the arrows so nothing is clipped */
	padding-left: calc(var(--kl-arrow-size) / 2 + 8px);   /* 32px */
	padding-right: calc(var(--kl-arrow-size) / 2 + 8px);
	overflow: visible;
}

/* FIX: prevent Elementor parent wrappers from clipping the arrows */
.kl-reviews-wrap,
.kl-reviews-wrap .elementor-widget-container,
.elementor-element:has(.kl-reviews-wrap),
.elementor-element:has(.kl-reviews-wrap) > .elementor-widget-container {
	overflow: visible !important;
}

/* ── 3-card row ─────────────────────────────────────────────── */
.kl-reviews-cards {
	display: flex;
	gap: var(--kl-gap);
	width: 100%;
}

/* ── Individual card ────────────────────────────────────────── */
.kl-reviews-card {
	flex: 1;
	min-width: 0;                /* prevent flex items from overflowing */
	padding: 20px 24px 18px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 25px;
	border-radius: var(--kl-radius);
}

.kl-reviews-card--side { background: var( --e-global-color-4aa56d9 ); }

/* Active card: more padding + stretch to be taller than the side cards */
.kl-reviews-card--active {
	background: var( --e-global-color-secondary );
	padding: 30px 24px 28px;
	align-self: stretch;
}

/* ── Review text ────────────────────────────────────────────── */
.kl-reviews-text {
	font-size: clamp(1.15rem, 2.5vw, 2rem);
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	margin: 0;
	flex: 1;
	color: var(--e-global-color-f072b14);
}

.kl-reviews-card--active .kl-reviews-text {
	color: var( --e-global-color-dark );
}

/* ── Read more / less — plain inline text link ──────────────── */
.kl-reviews-read-more {
	display: inline !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	line-height: inherit !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	cursor: pointer;
	vertical-align: baseline;
	color: var(--kl-white) !important;
	opacity: 0.75;
	transition: opacity var(--kl-ease);
}

.kl-reviews-card--active .kl-reviews-read-more {
	color: var(--kl-dark) !important;
	opacity: 0.65;
}

.kl-reviews-read-more:hover,
.kl-reviews-read-more:focus {
	opacity: 1;
	outline: none;
}

/* ── Author byline ──────────────────────────────────────────── */
.kl-reviews-byline {
	margin-top: auto;
}

.kl-reviews-name {
	display: block;
	font-size: clamp(1.15rem, 2.5vw, 1.6rem);
	font-weight: 700;
	line-height: 1.3;
	color: var( --e-global-color-f072b14 );
}

.kl-reviews-card--active .kl-reviews-name {
	color: var( --e-global-color-f072b14 );
}

/* ── Arrow circles ───────────────────────────────────────────── */
/* FIX: larger arrows, repositioned to overlap the outer edges of
   the card row (matching the original Elementor widget behaviour).
   They sit inside the wrapper padding so Elementor's overflow:hidden
   on parent elements no longer clips them. */
.kl-reviews-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--kl-arrow-size);
	height: var(--kl-arrow-size);
	border-radius: 50%;
	background: #B3B3B3;
	border: 1.5px solid rgba(255,255,255,0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--kl-ease), border-color var(--kl-ease);
	user-select: none;
	z-index: 5;
}

/* FIX: position arrows so they overlap the side cards by half,
   sitting within the wrapper's padding zone */
.kl-reviews-prev {
	left: 0;
}
.kl-reviews-next {
	right: 0;
}

/* ── Inner owl button — strip all default button styles ─────── */
.kl-reviews-arrow .owl-prev,
.kl-reviews-arrow .owl-next {
	all: unset;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	line-height: 1;
}

.kl-reviews-arrow button:hover {
	background: #B3B3B3;
	color: unset;
}
/* ── Font Awesome icon — larger to match original ────────────── */
.kl-reviews-arrow .owl-prev i,
.kl-reviews-arrow .owl-next i {
	font-size: var(--kl-arrow-icon);
	display: block;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
	.kl-reviews-wrap {
		padding-left: 0;
		padding-right: 0;
	}
	.kl-reviews-card--side   { display: none; }
	.kl-reviews-card--active { flex: 0 0 100%; align-self: auto; }
	.kl-reviews-prev { left: 4px; }
	.kl-reviews-next { right: 4px; }
}