/*
 * Jiyo Testimonials. Every widget setting lands on .jt as a custom property;
 * the layout presets swap grid areas so one markup serves desktop and mobile.
 * Fonts are loaded by the site, not by this plugin.
 */
.jt {
	--jt-image-w: 28%;
	--jt-ratio: 3 / 4;
	--jt-col-gap: 100px;
	--jt-text-max: 680px;
	--jt-text-offset: 40px;
	--jt-placeholder: #e0e0de;
	--jt-speed: 600ms;

	--jt-thumb-size: 132px;
	--jt-thumb-gap: 8px;
	--jt-thumb-radius: 0;
	--jt-thumb-opacity: 0.5;
	--jt-thumb-hover-opacity: 0.8;
	--jt-thumb-active-opacity: 1;

	--jt-quote-color: #673c30;
	--jt-name-color: #673c30;
	--jt-name-gap: 36px;

	--jt-dot-color: #673c30;
	--jt-dot-size: 6px;
	--jt-dot-gap: 10px;
	--jt-dots-offset: 64px;

	/* "side" preset; the widget writes these per breakpoint. */
	--jt-cols: var(--jt-image-w) minmax(0, 1fr);
	--jt-rows: auto 1fr auto auto;
	--jt-areas: "image thumbs" "image ." "image text" "image dots";
	--jt-thumbs-dir: row;
	--jt-thumbs-wrap: wrap;
	--jt-thumbs-h: auto;
	--jt-thumbs-minh: 0;
	--jt-text-align: end;

	display: grid;
	grid-template-columns: var(--jt-cols);
	grid-template-rows: var(--jt-rows);
	grid-template-areas: var(--jt-areas);
	column-gap: var(--jt-col-gap);
	row-gap: 0;
}

/* Fallback "stacked" preset for when the Elementor CSS file hasn't been generated. */
@media (max-width: 767px) {
	.jt {
		--jt-col-gap: 24px;
		--jt-thumb-size: 64px;
		--jt-text-offset: 32px;
		--jt-name-gap: 14px;
		--jt-dots-offset: 30px;
		--jt-cols: var(--jt-thumb-size) minmax(0, 1fr);
		--jt-rows: auto auto auto;
		--jt-areas: "thumbs image" "text text" "dots dots";
		--jt-thumbs-dir: column;
		--jt-thumbs-wrap: nowrap;
		--jt-thumbs-h: 0;
		--jt-thumbs-minh: 100%;
		--jt-thumbs-justify-stacked: flex-start;
		--jt-text-align: start;
	}
}

/* Main image ---------------------------------------------------------- */

.jt__media {
	grid-area: image;
	align-self: start;
	position: relative;
	aspect-ratio: var(--jt-ratio);
	overflow: hidden;
	background: var(--jt-placeholder);
	touch-action: pan-y;
}

.jt__image {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--jt-speed) ease, visibility 0s linear var(--jt-speed);
}

.jt__image.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--jt-speed) ease, visibility 0s;
}

.jt__image img,
.jt__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
	-webkit-user-drag: none;
	user-select: none;
}

/* Thumbnails ---------------------------------------------------------- */

.jt__thumbs {
	grid-area: thumbs;
	display: flex;
	flex-direction: var(--jt-thumbs-dir);
	flex-wrap: var(--jt-thumbs-wrap);
	justify-content: var(--jt-thumbs-justify-stacked, var(--jt-thumbs-justify, flex-end));
	gap: var(--jt-thumb-gap);
	/* In the stacked preset the strip takes the image's height and scrolls past it. */
	height: var(--jt-thumbs-h);
	min-height: var(--jt-thumbs-minh);
	overflow: auto;
	scrollbar-width: none;
}

.jt__thumbs::-webkit-scrollbar {
	display: none;
}

.jt .jt__thumb,
.jt .jt__thumb:hover,
.jt .jt__thumb:focus {
	flex: 0 0 auto;
	width: var(--jt-thumb-size);
	height: var(--jt-thumb-size);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--jt-thumb-radius);
	overflow: hidden;
	background: var(--jt-placeholder);
	box-shadow: none;
	cursor: pointer;
	opacity: var(--jt-thumb-opacity);
	transition: opacity 0.3s ease;
}

.jt .jt__thumb:hover {
	opacity: var(--jt-thumb-hover-opacity);
}

.jt .jt__thumb.is-active {
	opacity: var(--jt-thumb-active-opacity);
	cursor: default;
}

/* Text ---------------------------------------------------------------- */

.jt__text {
	grid-area: text;
	display: grid;
	align-items: var(--jt-text-align);
	max-width: var(--jt-text-max);
	margin-top: var(--jt-text-offset);
}

/* All slides share one cell, so the block keeps the tallest quote's height. */
.jt__item {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--jt-speed) ease, visibility 0s linear var(--jt-speed);
}

.jt__item.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--jt-speed) ease, visibility 0s;
}

.jt .jt__quote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
}

/* :where() keeps these defaults below Elementor's typography controls. */
:where(.jt) .jt__quote {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 28px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.25;
	color: var(--jt-quote-color);
}

.jt .jt__quote::before,
.jt .jt__quote::after {
	content: none;
}

.jt .jt__name {
	margin: var(--jt-name-gap) 0 0;
}

:where(.jt) .jt__name {
	font-family: "Inter", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: var(--jt-name-color);
}

@media (max-width: 767px) {
	:where(.jt) .jt__quote {
		font-size: 20px;
		line-height: 1.2;
	}

	:where(.jt) .jt__name {
		font-size: 12px;
	}
}

/* Dots ---------------------------------------------------------------- */

.jt__dots {
	grid-area: dots;
	display: flex;
	flex-wrap: wrap;
	gap: var(--jt-dot-gap);
	margin-top: var(--jt-dots-offset);
}

.jt .jt__dot,
.jt .jt__dot:hover,
.jt .jt__dot:focus {
	position: relative;
	width: var(--jt-dot-size);
	height: var(--jt-dot-size);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--jt-dot-color);
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

/* Bigger hit area than the 6px dot. */
.jt .jt__dot::after {
	content: "";
	position: absolute;
	inset: -8px;
}

.jt .jt__dot.is-active {
	background: var(--jt-dot-color);
}

.jt .jt__thumb:focus-visible,
.jt .jt__dot:focus-visible {
	outline: 2px solid var(--jt-dot-color);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.jt {
		--jt-speed: 0ms;
	}
}

.jt-empty {
	padding: 1em;
	border: 1px dashed currentColor;
	opacity: 0.6;
}