/**
 * Sección global de reseñas ([product_reviews_section]). Prefijo
 * .wcrs-reviews-section / .wcrs-reviews-grid.
 */

.wcrs-reviews-section {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
	scroll-margin-top: 24px; /* deja aire al hacer scroll-into-view desde "Ver todos". */
}

/*
 * CORRECCIÓN ("responsivo de la sección manual"): las reglas @media de
 * abajo reaccionan al ancho de la VENTANA del navegador, no al ancho real
 * del contenedor donde vive la sección. Eso funciona bien cuando la
 * sección ocupa todo el ancho de la página (inserción automática), pero
 * cuando se coloca a mano dentro de un contenedor angosto (por ejemplo,
 * una columna de Elementor al 33% en un layout de varias columnas), ese
 * contenedor puede ser angosto en un escritorio grande — y ningún @media
 * de "móvil" se activa ahí porque la ventana sigue siendo ancha. El
 * resultado es exactamente lo reportado: se ve mal en esa ubicación
 * manual aunque en la Home a ancho completo se vea bien.
 *
 * Container queries resuelve esto: reacciona al ancho real del propio
 * <section>, sin importar el ancho de la ventana ni dónde esté anidado.
 * Se declara como mejora progresiva (@supports) y las reglas @media que
 * siguen más abajo se mantienen intactas como respaldo para navegadores
 * que todavía no soportan container queries.
 */
@supports (container-type: inline-size) {
	.wcrs-reviews-section {
		container-type: inline-size;
		container-name: wcrs-reviews-section;
	}
}

.wcrs-reviews-section__empty {
	text-align: center;
	color: #6b7280;
	font-size: 14px;
	padding: 24px 12px;
}

/* El carrusel de la sección global reutiliza .wcrs-carousel tal cual;
   aquí solo se le da un poco más de aire alrededor que dentro del modal. */
.wcrs-reviews-section--carousel .wcrs-carousel {
	padding: 8px 36px;
}
@media (max-width: 600px) {
	.wcrs-reviews-section--carousel .wcrs-carousel {
		padding: 8px 4px;
	}
}
@container wcrs-reviews-section (max-width: 600px) {
	.wcrs-reviews-section--carousel .wcrs-carousel {
		padding: 8px 4px;
	}
}

/* ---------------------------------------------------------------------
 * GRID — tarjetas horizontales (foto a la izquierda, texto a la derecha,
 * mismo estilo que el carrusel del modal), en una grilla de columnas fijas
 * en vez de scroll horizontal. Cantidad de columnas y alto de tarjeta son
 * responsive por dispositivo (Ajustes > Sección global): --wcrs-gs-cols y
 * --wcrs-gs-card-h, declaradas por WCRS_Modal::build_css_vars_block() y
 * scopeadas a "#<ancla-de-la-sección>" (ver templates/reviews-section.php).
 * ------------------------------------------------------------------- */
.wcrs-reviews-grid {
	display: grid;
	grid-template-columns: repeat(var(--wcrs-grid-cols, var(--wcrs-gs-cols, 2)), minmax(0, 1fr));
	/* CORRECCIÓN ("Leer más" no debe afectar a las demás tarjetas): por
	   defecto CSS Grid estira (stretch) los ítems de una misma fila a la
	   altura del más alto. Con "Leer más" una tarjeta puede crecer más que
	   sus vecinas de fila (ver .wcrs-card--expanded en public/css/card.css)
	   y "stretch" las agrandaría también a ellas aunque su contenido no lo
	   necesite. "start" hace que cada tarjeta mida su propio alto. */
	align-items: start;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.wcrs-reviews-grid--grid .wcrs-card {
	box-sizing: border-box;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	flex-direction: row !important;
	/* Igual criterio que .wcrs-carousel .wcrs-card (ver public/css/card.css,
	   punto 11 de la corrección anterior): alto configurable por el
	   administrador como un mínimo/objetivo, no un alto rígido, para que
	   una reseña corta no deje un hueco vacío ni una larga se corte fea.
	   !important en width/flex-direction/height (acá y en .wcrs-card__media
	   / .wcrs-card__media-fg más abajo): temas y page builders suelen traer
	   un reset genérico de imágenes ("img{height:auto}", a veces con su
	   propio !important) que, al chocar con las reglas normales de esta
	   tarjeta, hacía que la imagen recuperara su alto natural (una foto
	   vertical de celular podía medir el doble o el triple de alto que la
	   tarjeta) y "empujara" toda la tarjeta a verse gigante con la imagen
	   arriba en vez de compacta con la imagen al costado. Al ganarle a ese
	   tipo de reset externo, la tarjeta de la grilla queda con el mismo
	   aspecto horizontal y compacto que ya tenía la del carrusel, sin
	   depender de qué tema esté activo. */
	height: auto !important;
	min-height: var(--wcrs-gs-card-h, 150px);
	/* +14px respecto al cálculo anterior (+70px): mismo motivo que en
	   public/css/card.css (.wcrs-carousel .wcrs-card) — la fecha ahora
	   ocupa dos líneas (fecha corta + hora) en vez de una sola. */
	max-height: calc(var(--wcrs-gs-card-h, 150px) + 84px) !important;
	overflow: hidden !important;
}
.wcrs-reviews-grid--grid .wcrs-card__media {
	width: 42% !important;
	max-width: 42% !important;
	height: auto !important;
	align-self: stretch;
	flex-shrink: 0 !important;
	overflow: hidden;
}
/* La imagen real dentro del recuadro (foto de cliente): sin este
   !important, un reset de tema tipo "img{height:auto}" gana por sobre el
   width/height:100% normal de public/css/card.css y la imagen deja de
   llenar el recuadro de forma proporcional para tomar su alto natural. */
.wcrs-reviews-grid--grid .wcrs-card__media-fg,
.wcrs-reviews-grid--grid .wcrs-card__media-bg {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
}
.wcrs-reviews-grid--grid .wcrs-card__body {
	min-width: 0;
	padding: 10px 12px 11px;
	gap: 4px;
}
.wcrs-reviews-grid--grid .wcrs-card__name,
.wcrs-reviews-grid--grid .wcrs-card__verified {
	white-space: normal;
	overflow-wrap: break-word;
}
.wcrs-reviews-grid--grid .wcrs-card__text {
	/* Mismo criterio que .wcrs-carousel .wcrs-card__text (public/css/card.css):
	   altura máxima en vez de recorte con "…"; más allá de esto, scroll
	   interno propio del párrafo (ver .wcrs-card__text). */
	--wcrs-card-text-max-h: 84px;
	font-size: 12px;
	line-height: 1.4;
}
.wcrs-reviews-grid--grid .wcrs-card__date {
	margin-top: 2px;
}
/* "Leer más" dentro del grid de la sección global: esta tarjeta puntual
   deja de topar su alto máximo para poder mostrar el comentario completo.
   Selector con una clase más que ".wcrs-reviews-grid--grid .wcrs-card",
   así gana siempre pese a que ambas reglas usan "!important". */
.wcrs-reviews-grid--grid .wcrs-card.wcrs-card--expanded {
	max-height: none !important;
	overflow: visible !important;
}

/* ---------------------------------------------------------------------
 * LIST — tarjetas horizontales de ancho completo, una debajo de otra.
 * ------------------------------------------------------------------- */
.wcrs-reviews-grid--list {
	grid-template-columns: 1fr;
}
.wcrs-reviews-grid--list .wcrs-card {
	width: 100%;
	height: auto;
	flex-direction: row;
	align-items: stretch;
}
.wcrs-reviews-grid--list .wcrs-card__media {
	width: 130px;
	height: auto;
	flex-shrink: 0;
}
.wcrs-reviews-grid--list .wcrs-card__body {
	flex: 1 1 auto;
}
.wcrs-reviews-grid--list .wcrs-card__text {
	/* La tarjeta "list" no tenía tope de alto (height:auto sin min/max), así
	   que un comentario largo antes no se cortaba, pero sí hacía crecer la
	   tarjeta entera de forma exagerada ("no debe aumentar exageradamente la
	   altura de las tarjetas"). Con un tope + scroll interno queda compacta
	   igual que las variantes carousel/grid. */
	--wcrs-card-text-max-h: 66px;
}

@media (max-width: 560px) {
	.wcrs-reviews-grid--list .wcrs-card {
		flex-direction: column;
	}
	.wcrs-reviews-grid--list .wcrs-card__media {
		width: 100%;
		height: var(--wcrs-card-media-h, 130px);
	}
}
@container wcrs-reviews-section (max-width: 560px) {
	.wcrs-reviews-grid--list .wcrs-card {
		flex-direction: column;
	}
	.wcrs-reviews-grid--list .wcrs-card__media {
		width: 100%;
		height: var(--wcrs-card-media-h, 130px);
	}
}

/* ---------------------------------------------------------------------
 * CARGAR MÁS
 * ------------------------------------------------------------------- */
.wcrs-reviews-section__load-more {
	display: flex;
	justify-content: center;
	margin-top: 22px;
}
.wcrs-reviews-section__load-more .wcrs-btn {
	padding: 10px 24px;
	border-radius: 999px;
}

/* ---------------------------------------------------------------------
 * CTA "Dejar tu testimonio" — testimonio general, sin producto asociado.
 * Siempre visible debajo del carrusel/grid/list, incluso sin reseñas
 * todavía (es la forma de conseguir la primera).
 * ------------------------------------------------------------------- */
.wcrs-reviews-section__general-cta {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}
.wcrs-reviews-section__general-cta .wcrs-btn {
	padding: 10px 24px;
	border-radius: 999px;
}
.wcrs-reviews-section__general-cta .wcrs-btn--outline {
	/* Color propio (Ajustes > Sección global > "Color del botón 'Dejar tu
	   testimonio'"), independiente del botón "Ver todos los comentarios"
	   del modal aunque ambos compartan la misma clase base .wcrs-btn--outline. */
	color: var(--wcrs-cta-btn-color, var(--wcrs-view-all-border, #ec4899)) !important;
	border-color: var(--wcrs-cta-btn-color, var(--wcrs-view-all-border, #ec4899)) !important;
}
.wcrs-reviews-section__general-cta .wcrs-btn--outline:hover {
	background: var(--wcrs-cta-btn-color, var(--wcrs-view-all-border, #ec4899)) !important;
	color: #ffffff !important;
}