/*
 * HUP - Reseñas de Google — CSS del shortcode [huprg_resenas]
 *
 * Todo vive bajo .huprg-resenas: sin selectores globales ni !important.
 * Personalizable con variables CSS, definidas donde quieras (:root, una sección de
 * Bricks/Elementor o el propio .huprg-resenas). El plugin NO las define: solo las lee
 * con un valor de respaldo, así cualquier definición tuya gana sin pelear especificidad.
 *
 *   --huprg-star         color de las estrellas llenas      (#fbbc04)
 *   --huprg-star-empty   color de las estrellas vacías      (#dadce0)
 *   --huprg-star-size    tamaño de las estrellas            (18px)
 *   --huprg-star-size-summary  estrellas de la cabecera    (22px)
 *   --huprg-card-bg      fondo de cada reseña               (#fff)
 *   --huprg-card-border  borde de cada reseña               (#e5e7eb)
 *   --huprg-radius       radio de las tarjetas              (8px)
 *   --huprg-gap          separación entre tarjetas          (16px)
 *   --huprg-card-width   ancho de cada tarjeta en carrusel  (320px)
 *   --huprg-columns      columnas en grid (lo fija el atributo `columns`)
 */

.huprg-resenas {
	box-sizing: border-box;
	font-family: inherit;
	color: inherit;
}

.huprg-resenas *,
.huprg-resenas *::before,
.huprg-resenas *::after {
	box-sizing: inherit;
}

/* ── Cabecera: promedio, estrellas, total ────────────────────────────── */
.huprg-resenas__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-bottom: var(--huprg-gap, 16px);
}

.huprg-resenas__rating {
	font-size: 2em;
	font-weight: 700;
	line-height: 1;
}

.huprg-resenas__header .huprg-resenas__stars svg {
	width: var(--huprg-star-size-summary, 22px);
	height: var(--huprg-star-size-summary, 22px);
}

.huprg-resenas__count {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── Estrellas (SVG inline: fila vacía + fila llena recortada) ───────── */
.huprg-resenas__stars {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
	vertical-align: middle;
}

.huprg-resenas__stars-empty,
.huprg-resenas__stars-fill {
	display: inline-flex;
	gap: 2px;
}

.huprg-resenas__stars-empty { color: var(--huprg-star-empty, #dadce0); }

.huprg-resenas__stars-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--huprg-star, #fbbc04);
}

.huprg-resenas__stars svg {
	flex-shrink: 0;
	width: var(--huprg-star-size, 18px);
	height: var(--huprg-star-size, 18px);
	fill: currentColor;
}

/* ── Lista ───────────────────────────────────────────────────────────── */
.huprg-resenas__list {
	margin: 0;
	padding: 0;
	list-style: none;
	gap: var(--huprg-gap, 16px);
}

.huprg-resenas--grid .huprg-resenas__list {
	display: grid;
	grid-template-columns: repeat(var(--huprg-columns, 3), minmax(0, 1fr));
}

.huprg-resenas--list .huprg-resenas__list {
	display: flex;
	flex-direction: column;
}

/* Carrusel solo con CSS: scroll horizontal con scroll-snap, sin JavaScript */
.huprg-resenas--carrusel .huprg-resenas__list {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0;
	padding-bottom: 8px;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.huprg-resenas--carrusel .huprg-resenas__item {
	flex: 0 0 min(85%, var(--huprg-card-width, 320px));
	scroll-snap-align: start;
}

.huprg-resenas--carrusel .huprg-resenas__list:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* ── Tarjeta ─────────────────────────────────────────────────────────── */
.huprg-resenas__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 20px;
	background: var(--huprg-card-bg, #fff);
	border: 1px solid var(--huprg-card-border, #e5e7eb);
	border-radius: var(--huprg-radius, 8px);
}

.huprg-resenas__author {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}

a.huprg-resenas__author:hover .huprg-resenas__name { text-decoration: underline; }

.huprg-resenas__avatar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.huprg-resenas__avatar--empty { background: var(--huprg-star-empty, #dadce0); }

.huprg-resenas__name {
	font-weight: 600;
	line-height: 1.3;
}

.huprg-resenas__date {
	font-size: .875em;
	opacity: .7;
}

.huprg-resenas__text {
	margin: 0;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/* Empuja el enlace al fondo de la tarjeta para alinear las de una misma fila */
.huprg-resenas__link {
	margin-top: auto;
	padding-top: 4px;
	font-size: .875em;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.huprg-resenas__empty { margin: 0; }

/* ── Pie: botón de escribir reseña + atribución ──────────────────────── */
.huprg-resenas__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: var(--huprg-gap, 16px);
}

.huprg-resenas__write {
	display: inline-block;
	padding: .6em 1.2em;
	border: 1px solid currentColor;
	border-radius: var(--huprg-radius, 8px);
	color: inherit;
	text-decoration: none;
	line-height: 1.2;
}

.huprg-resenas__write:hover { text-decoration: underline; }

/*
 * Logo de Google Maps según la política de atribución: alto entre 16 y 19 px, sin
 * deformar, con espacio libre de 10px a los lados y arriba y 5px abajo.
 */
.huprg-resenas__attribution {
	margin-left: auto;
	padding: 10px 10px 5px;
	line-height: 0;
}

.huprg-resenas__attribution img {
	display: block;
	width: auto;
	height: 18px;
	max-width: none;
}

/* ── Estado de error ─────────────────────────────────────────────────── */
.huprg-resenas--error {
	padding: 16px 20px;
	border: 1px dashed var(--huprg-card-border, #e5e7eb);
	border-radius: var(--huprg-radius, 8px);
}

.huprg-resenas__error { margin: 0; }

.huprg-resenas__error-hint {
	margin: 8px 0 0;
	font-size: .875em;
	opacity: .8;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.huprg-resenas--cols-3 .huprg-resenas__list,
	.huprg-resenas--cols-4 .huprg-resenas__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.huprg-resenas--grid .huprg-resenas__list {
		grid-template-columns: minmax(0, 1fr);
	}
}