/**
 * Tarjeta de reseña individual (WC Reviews Showcase).
 * Reutilizada por el carrusel del modal y por los layouts grid/list de la
 * sección global (Fase 8). Prefijo .wcrs-card en todo.
 *
 * Tamaño uniforme controlado por --wcrs-card-width/--wcrs-card-height
 * (impresas por WCRS_Modal::build_css_vars_block()); el contenido interno
 * se adapta a ese tamaño fijo sin desbordar.
 */

.wcrs-card {
	list-style: none;
	margin: 0;
	box-sizing: border-box;
	width: var(--wcrs-card-width, 220px);
	min-width: var(--wcrs-card-width, 220px);
	height: var(--wcrs-card-height, 280px);
	display: flex;
	flex-direction: column;
	background: var(--wcrs-card-bg, #ffffff);
	border: 1px solid var(--wcrs-card-border, rgba(0, 0, 0, 0.08));
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	scroll-snap-align: start;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------
 * MEDIA — imágenes de cliente en cualquier proporción (vertical, horizontal,
 * cuadrada), NUNCA deformadas: siempre object-fit:contain sobre un
 * contenedor de alto fijo. El espacio sobrante se resuelve con:
 *   - blurred:   la misma imagen de fondo, desenfocada y recortada (cover).
 *   - dominant:  color promedio calculado en cliente (ver public/js/media.js).
 *   - fixed:     color fijo configurado por el administrador.
 *   - none:      sin relleno (fondo transparente/blanco).
 * ------------------------------------------------------------------- */
.wcrs-card__media {
	position: relative;
	width: 100%;
	height: var(--wcrs-card-media-h, 130px);
	flex-shrink: 0;
	overflow: hidden;
	background-color: var(--wcrs-card-media-bg, #f3f4f6);
}

.wcrs-card__media-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(18px) saturate(1.1) brightness(0.95);
	transform: scale(1.15); /* evita ver el borde nítido del blur */
	opacity: 0.9;
}

.wcrs-card__media[data-bg-mode="none"] {
	background-color: transparent;
}

.wcrs-card__media-fg {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* ---------------------------------------------------------------------
 * BODY
 * ------------------------------------------------------------------- */
.wcrs-card__body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px 14px;
}

.wcrs-card__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wcrs-card__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
}

.wcrs-card__avatar--initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
}

.wcrs-card__identity {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 1px;
}

.wcrs-card__name {
	font-size: 13px;
	font-weight: 600;
	color: var(--wcrs-card-name, #1f2430);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wcrs-card__verified {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 10.5px;
	color: var(--wcrs-card-verified, #2563eb);
	white-space: nowrap;
}
.wcrs-card__verified svg {
	width: 11px;
	height: 11px;
	flex-shrink: 0;
}

.wcrs-card__stars {
	font-size: 13px;
	line-height: 1;
	color: var(--wcrs-card-stars, #f5a623);
	letter-spacing: 1px;
}

.wcrs-card__text {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--wcrs-card-text, #40454f);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1 1 auto;
}

.wcrs-card__date {
	font-size: 10.5px;
	color: var(--wcrs-card-date, #9aa0ab);
	margin-top: auto;
}