/* =============================================================================
   Отзывы: acf/reviews (.reviews > article.reviews__item.columns-N).
   Внутри: .reviews__image (тема жёстко ставит 150px) + .reviews__content.
   Переводим на сетку карточек с круглым аватаром и кавычкой.
   ========================================================================== */

.reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(.75rem, 1.5vw, 1rem);
	margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
}

.reviews__item,
.reviews__item.col,
.reviews__item.columns-1,
.reviews__item.columns-2,
.reviews__item.columns-3,
.reviews__item.columns-4 {
	width: auto;
	margin: 0;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 1rem;
	position: relative;
	overflow: hidden;
	background: var(--ms-surface-2);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	padding: 1.25rem;
	transition: border-color var(--ms-dur) var(--ms-ease),
	            transform var(--ms-dur) var(--ms-ease);
}

.reviews__item:hover {
	border-color: var(--ms-accent-line);
	transform: translateY(-2px);
}

/* кавычка-подложка */
.reviews__item::before {
	content: "\201C";
	position: absolute;
	right: .75rem;
	top: -.35rem;
	font-size: 4.5rem;
	line-height: 1;
	color: var(--ms-accent);
	opacity: .13;
	pointer-events: none;
}

/* если аватар не задан, тема всё равно выводит пустой .reviews__image -
   пустой кружок с рамкой выглядит как сломанная картинка */
.reviews__image:not(:has(img)) { display: none; }

.reviews__image {
	flex: 0 0 auto;
	min-width: 0;
	width: 56px;
	max-width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--ms-border-2);
}

.reviews__image img,
.reviews__image .get-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.reviews__content {
	margin: 0;
	text-align: left;
	min-width: 0;
}

.reviews__title {
	margin: 0 0 .35rem;
	text-align: left;
	font-size: 1.02rem;
	font-weight: 600;
	color: #fff;
}

.reviews__text {
	margin: 0;
	color: var(--ms-muted);
	font-size: .97rem;
	line-height: 1.65;
}
