/**
 * El muro.
 *
 * Dos cosas mandan sobre el resto:
 *
 * 1. Tiene que distinguirse de las reseñas del propio sitio. Cuando las dos
 *    listas caen en la misma página no pueden parecer la misma cosa, y eso lo
 *    piden las condiciones de Maps, no el gusto de nadie. De ahí el borde, el
 *    fondo propio y el aire alrededor.
 * 2. Los colores salen de donde caiga. Si el tema del sitio declara sus tokens
 *    se usan; si no, se hereda el color del texto de la sección. Así el muro
 *    funciona igual sobre una banda clara que sobre una oscura, sin saber cuál.
 */

.owari-places {
	--owari-places-linea: color-mix(in srgb, currentColor 18%, transparent);
	--owari-places-suave: color-mix(in srgb, currentColor 65%, transparent);
	--owari-places-fondo: color-mix(in srgb, currentColor 4%, transparent);

	border: 1px solid var(--owari-places-linea);
	border-radius: var(--mdb-border-radius, 0.5rem);
	background: var(--owari-places-fondo);
	padding: clamp(1rem, 3vw, 1.75rem);
	margin-block: 2rem;
}

/* ── La cabecera ── */

.owari-places__cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-bottom: 1.25rem;
}

.owari-places__quien-es {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

/* El nombre del local manda: es lo que distingue un muro de otro. */
.owari-places__local {
	margin: 0;
	font-weight: 700;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

/*
 * Y la atribución debajo, pequeña pero presente. Cuando no hay nombre de local
 * es lo único que hay arriba, así que recupera el peso.
 */
.owari-places__marca {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--owari-places-suave);
}

.owari-places__quien-es:first-child > .owari-places__marca:only-child {
	font-size: 1rem;
	font-weight: 700;
	color: inherit;
}

.owari-places__nota {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0;
}

.owari-places__cifra {
	font-weight: 700;
}

.owari-places__cuantas {
	color: var(--owari-places-suave);
	font-size: 0.875rem;
}

/*
 * Las estrellas no se tiñen del color de marca a propósito: son de Google y
 * teñirlas las haría parecer una valoración del sitio.
 */
.owari-places__estrellas {
	color: #f2b01e;
	letter-spacing: 0.08em;
}

/* ── Las reseñas ── */

.owari-places__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: 1.25rem;
}

.owari-places__resena {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding-top: 1rem;
	border-top: 1px solid var(--owari-places-linea);
}

.owari-places__quien {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.owari-places__cara {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.owari-places__firma {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.owari-places__nombre {
	font-weight: 600;
	line-height: 1.3;
}

.owari-places__nombre a {
	color: inherit;
	text-decoration: none;
}

.owari-places__nombre a:hover {
	text-decoration: underline;
}

.owari-places__cuando {
	font-size: 0.8125rem;
	color: var(--owari-places-suave);
}

/*
 * El texto va tal cual llegó. Sin comillas decorativas ni recortes con puntos
 * suspensivos: cortar lo que escribió alguien es modificarlo.
 */
.owari-places__texto {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	line-height: 1.6;
	white-space: pre-line;
}

.owari-places__origen {
	font-size: 0.8125rem;
	color: var(--owari-places-suave);
	margin-top: auto;
}

/* ── El pie ── */

.owari-places__pie {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--owari-places-linea);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
}

/*
 * El botón lleva `wp-element-button`, así que en un tema de bloques lo viste el
 * tema: su fondo y su color de texto, que vienen emparejados de fábrica. Aquí
 * solo va la forma.
 *
 * Adivinar los colores fue el error de la primera versión. Se puso el primario
 * de fondo y un token del tema para el texto, y donde ese token no existía el
 * texto se quedaba con el color de enlace: marca sobre marca, y subrayado.
 */
.owari-places__boton {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.75rem 1.5rem;
	white-space: nowrap;
	font-weight: 700;
}

/*
 * Y el respaldo, para un tema que no vista sus botones.
 *
 * Va en `:where()`, que no puntúa: cualquier regla del tema le gana, y esto solo
 * sale cuando no hay ninguna. Es de contorno y no relleno a propósito. Un
 * relleno hay que adivinarlo y se equivoca la mitad de las veces; el contorno
 * hereda el color del texto de la sección, así que se lee sobre claro y sobre
 * oscuro sin saber cuál de los dos es.
 */
:where(.owari-places__boton) {
	background: transparent;
	color: inherit;
	border: 2px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
}

:where(.owari-places__boton:hover, .owari-places__boton:focus) {
	background: color-mix(in srgb, currentColor 12%, transparent);
	color: inherit;
}

.owari-places__letra {
	margin: 0;
	flex: 1 1 18rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--owari-places-suave);
}

.owari-places__aviso {
	border: 1px dashed var(--owari-places-linea, currentColor);
	border-radius: 0.5rem;
	padding: 1rem;
	font-size: 0.875rem;
}