/**
 * 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);
	cursor: pointer;
}

/* Ícono de lupa al pasar el mouse: pista visual de que la foto se puede
   ver en tamaño completo (ver public/js/lightbox.js). SVG embebido en el
   propio CSS (data URI) para no depender de un archivo de ícono aparte. */
.wcrs-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.28)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")
		center / 28px no-repeat;
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}
.wcrs-card__media:hover::after,
.wcrs-card__media:focus-visible::after {
	opacity: 1;
}

.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%;
	/* CORRECCIÓN (causa raíz de "las imágenes se ven recortadas/pierden
	   contenido"): esta regla había quedado en "cover", que RECORTA la
	   imagen para llenar el recuadro. Eso contradice tanto el comentario
	   original de este archivo (línea ~30, "siempre object-fit:contain")
	   como el requisito explícito de que ninguna foto de reseña pierda
	   contenido importante ni se deforme. Además, con "cover" la imagen
	   SIEMPRE ocupa el 100% del recuadro, así que la capa de fondo
	   (.wcrs-card__media-bg) queda oculta y el ajuste "Fondo detrás de
	   la foto" (blurred/dominant/fixed/none, ver Ajustes > Carrusel)
	   se vuelve inútil: nunca hay espacio sobrante donde notarlo.
	   Con "contain" la imagen se ve SIEMPRE completa y nítida
	   (vertical, horizontal o cuadrada), y el espacio que sobra a los
	   costados o arriba/abajo lo llena la capa de fondo configurada. */
	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;
}

/* ---------------------------------------------------------------------
 * TARJETA DE CARRUSEL — imagen al costado (izquierda) en vez de arriba,
 * ancho completo de la tarjeta; el resto del contenido (avatar, nombre,
 * estrellas, texto, fecha) ocupa el costado derecho. Solo aplica dentro de
 * ".wcrs-carousel" (modal y carrusel de la sección global); el layout
 * "grid" de la sección global sigue con la imagen arriba; el layout
 * "list" ya tenía su propia versión equivalente de esto mismo (ver
 * public/css/global-section.css, ".wcrs-reviews-grid--list .wcrs-card").
 * ------------------------------------------------------------------- */
.wcrs-carousel .wcrs-card {
	/* Más ancha que la tarjeta vertical original: al costado, la imagen y
	   el texto comparten el mismo ancho total, así que ese ancho tiene que
	   ser mayor para que el nombre/insignia/comentario no queden apretados
	   contra el borde. Escala junto con --wcrs-card-width (el ajuste del
	   panel), no es un valor fijo aparte. */
	width: calc(var(--wcrs-card-width, 220px) * 1.6);
	min-width: calc(var(--wcrs-card-width, 220px) * 1.6);
	flex-direction: row;
	/* CORRECCIÓN (causa raíz de "la tarjeta aparece demasiado grande o con
	   espacios vacíos excesivos"): la tarjeta vertical usa una altura fija
	   (--wcrs-card-height, pensada para el layout imagen-arriba de la
	   grilla, donde hace falta espacio para imagen+cuerpo apilados). Esta
	   variante horizontal de carrusel reutilizaba esa MISMA altura fija,
	   así que con una reseña de texto corto quedaba una tarjeta enorme con
	   un hueco vacío entre el texto y la fecha. Acá la altura pasa a
	   depender del contenido (auto + min/max), como corresponde a una
	   tarjeta "compacta de carrusel": crece solo lo necesario para el
	   nombre + estrellas + comentario (ya limitado a 6 líneas más abajo) +
	   fecha, con un techo razonable para reseñas largas. */
	height: auto;
	min-height: 132px;
	max-height: 208px;
}
.wcrs-carousel .wcrs-card__media {
	width: 42%;
	height: auto;
	align-self: stretch;
}
.wcrs-carousel .wcrs-card__body {
	min-width: 0;
	padding: 10px 12px 11px;
	gap: 4px;
}
.wcrs-carousel .wcrs-card__name {
	/* Con más ancho ya casi nunca hace falta, pero si un nombre es
	   realmente largo, mejor que pase a una segunda línea a que se corte
	   con "..." contra el borde de la tarjeta. */
	white-space: normal;
	overflow-wrap: break-word;
}
.wcrs-carousel .wcrs-card__verified {
	white-space: normal;
}
.wcrs-carousel .wcrs-card__text {
	-webkit-line-clamp: 4;
	font-size: 12px;
	line-height: 1.4;
}
.wcrs-carousel .wcrs-card__date {
	/* En la variante compacta no reservamos una franja completa al pie
	   como en la vertical (margin-top:auto empujaba la fecha lejos del
	   texto y agrandaba el hueco vacío reportado); acá va pegada al
	   párrafo, como en la tarjeta de referencia (hora junto al mensaje). */
	margin-top: 2px;
}