/* Компонент [elm_testimonials] — вантажиться лише на сторінках із шорткодом.
   Десктоп: 2 колонки фото зліва + плашка цитати справа.
   Мобільний (≤767px): карусель — фото зверху, плашка знизу, риски + стрілки. */

.elm-testimonials {
	display: flex;
	gap: 32px;
	align-items: stretch;
}
.elm-testimonials__grid {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	gap: 16px;
	height: 540px;
}
.elm-testimonials__col {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.elm-testimonials__photo {
	position: relative;
	flex: 1 1 0;
	min-height: 0;
	border: 0;
	padding: 0;
	cursor: pointer;
	border-radius: 4px;
	overflow: hidden;
	background: var(--elm-bg-alt, #F6F7F9);
	text-align: left;
	transition: flex-grow .35s ease;
}
.elm-testimonials__photo.is-active { flex-grow: 1.6; }
.elm-testimonials__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Неактивні фото — чорне накладення 40%; активне — без накладення. */
.elm-testimonials__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .4);
	transition: opacity .35s ease;
	pointer-events: none;
}
.elm-testimonials__photo.is-active::after { opacity: 0; }
.elm-testimonials__caption {
	position: absolute;
	left: 14px;
	bottom: 12px;
	right: 40px;
	z-index: 1;
	color: #fff;
	font-size: 14px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Іконка plus.svg 16px; на активному фото повертається у хрестик. */
.elm-testimonials__toggle {
	position: absolute;
	right: 14px;
	bottom: 12px;
	z-index: 1;
	color: #fff;
	line-height: 0;
	transition: transform .3s ease;
}
.elm-testimonials__toggle svg { width: 16px; height: 16px; display: block; }
.elm-testimonials__photo.is-active .elm-testimonials__toggle { transform: rotate(45deg); }
.elm-testimonials__initial {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	color: var(--elm-primary);
}

/* Плашка цитати */
.elm-testimonials__panels {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
}
.elm-testimonials__panel {
	display: none;
	width: 100%;
	background: var(--elm-light, #fff);
	border-radius: var(--elm-radius, 12px);
	padding: 40px;
	box-sizing: border-box;
	flex-direction: column;
}
.elm-testimonials__panel.is-active { display: flex; }
/* Апостроф (apostrof.svg, 35×30) кольору accent; після нього 40px до тексту. */
.elm-testimonials__quote {
	display: block;
	color: var(--elm-accent);
	line-height: 0;
	margin-bottom: 40px;
}
.elm-testimonials__quote svg { display: block; }
.elm-testimonials__text { flex: 1; min-height: 0; }
.elm-testimonials__footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	border-top: 1px solid rgba(0, 0, 0, .08);
	padding-top: 20px;
	margin-top: 24px;
}
.elm-testimonials__name { color: var(--elm-primary); font-weight: 600; }
.elm-testimonials__meta { color: var(--elm-muted); font-size: 14px; margin-top: 2px; }
.elm-testimonials__rating {
	color: var(--elm-accent);
	letter-spacing: 3px;
	font-size: 16px;
	white-space: nowrap;
}

/* Мобільна карусель: на десктопі схована */
.elm-testimonials__slider { display: none; }

/* 768–1024: та сама двоколонкова розкладка, що на десктопі,
   лише трохи компактніша. Карусель — тільки з 767px і нижче. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elm-testimonials { gap: 20px; }
	.elm-testimonials__grid { height: 480px; gap: 12px; }
	.elm-testimonials__col { gap: 12px; }
	.elm-testimonials__panel { padding: 28px; }
	.elm-testimonials__quote { margin-bottom: 24px; }
}

@media (max-width: 767px) {
	/* Ховаємо десктопний варіант, показуємо карусель */
	.elm-testimonials__grid,
	.elm-testimonials__panels { display: none; }

	.elm-testimonials { display: block; }
	.elm-testimonials__slider { display: block; }

	.elm-testimonials__track {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.elm-testimonials__track::-webkit-scrollbar { display: none; }

	.elm-testimonials__slide {
		flex: 0 0 calc(100% - 28px);
		scroll-snap-align: start;
		background: var(--elm-light, #fff);
		border-radius: var(--elm-radius, 12px);
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	.elm-testimonials__slide-photo {
		position: relative;
		height: 240px;
		background: var(--elm-bg-alt, #F6F7F9);
	}
	.elm-testimonials__slide-photo img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	/* У слайдера плашка завжди видима, без власного радіуса, паддінг 24px */
	.elm-testimonials__slide .elm-testimonials__panel {
		display: flex;
		border-radius: 0;
		padding: 24px;
		flex: 1;
	}
	.elm-testimonials__slide .elm-testimonials__quote { margin-bottom: 24px; }
	.elm-testimonials__slide .elm-testimonials__quote svg { width: 26px; height: 22px; }

	/* Риски-прогрес */
	.elm-testimonials__dashes {
		display: flex;
		gap: 6px;
		margin: 20px 2px 16px;
	}
	.elm-testimonials__dash {
		flex: 1;
		height: 2px;
		background: rgba(0, 0, 0, .15);
		transition: background .2s ease;
	}
	.elm-testimonials__dash.is-active { background: var(--elm-primary); }

	/* Стрілки: попередня — контурна, наступна — акцентна */
	.elm-testimonials__nav {
		display: flex;
		gap: 12px;
	}
	.elm-testimonials__prev,
	.elm-testimonials__next {
		flex: 1;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--elm-radius-btn, 8px);
		cursor: pointer;
		transition: opacity .15s ease;
	}
	.elm-testimonials__prev {
		background: transparent;
		border: 1px solid var(--elm-primary);
		color: var(--elm-primary);
	}
	.elm-testimonials__prev svg { transform: rotate(180deg); }
	.elm-testimonials__next {
		background: var(--elm-accent);
		border: 0;
		color: var(--elm-light, #fff);
	}
	.elm-testimonials__prev:disabled,
	.elm-testimonials__next:disabled { opacity: .4; cursor: default; }
}