/**
 * DESTINO 27: cuadrícula de estados. Cada tarjeta es un escudo y un nombre que enlazan a la
 * encuesta de ese estado.
 *
 * Depende de assets/css/base.css.
 */

.radiowp-states__inner {
	max-width: var(--radiowp-container);
	margin-inline: auto;
	padding: var(--radiowp-section-space) var(--radiowp-gutter);
}

/* Banner encima de la cuadrícula: a todo el ancho, con su proporción propia. El hueco lo
   reservan los width/height del <img>, así que sirve cualquier banner sin recortarlo. */
.radiowp-states__banner {
	margin: 0 0 var(--radiowp-space-md);
}

.radiowp-states__banner a {
	display: block;
	border-radius: var(--radiowp-radius);
}

.radiowp-states .radiowp-states__banner-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radiowp-radius);
}

.radiowp-states__grid {
	display: grid;
	/* Tarjetas de al menos 8.5rem hasta escritorio, donde son ocho columnas fijas. */
	grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
	gap: var(--radiowp-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.radiowp-states__item {
	display: flex;
}

.radiowp-states__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem 0.625rem;
	border: var(--radiowp-border);
	border-radius: var(--radiowp-radius);
	background-color: var(--radiowp-color-surface);
	color: var(--radiowp-color-fg);
	text-align: center;
	text-decoration: none;
	transition: border-color var(--radiowp-transition), box-shadow var(--radiowp-transition), transform var(--radiowp-transition);
}

/* Solo el color en los estados: el tema pone `a:visited` y `a:hover` oscuros. Va aparte
   porque una regla con estado pesa más que las de escritorio y les pisaría el tamaño. */
.radiowp-states__link:visited,
.radiowp-states__link:hover,
.radiowp-states__link:focus,
.radiowp-states__link:active {
	color: var(--radiowp-color-fg);
}

.radiowp-states__link:not(.radiowp-states__link--plain):hover,
.radiowp-states__link:focus-visible {
	border-color: var(--radiowp-color-accent);
	box-shadow: var(--radiowp-shadow);
	transform: translateY(-2px);
}

.radiowp-states__link:focus-visible {
	outline: 2px solid var(--radiowp-color-accent);
	outline-offset: 2px;
}

.radiowp-states__shield {
	display: grid;
	place-items: center;
	block-size: 5rem;
}

/*
 * Topes en longitudes, no `height: 100%`: Elementor impone `.elementor img { height: auto }`
 * con especificidad (0,1,1) y ganaría a una sola clase. Con `max-*` el escudo se encoge
 * solo hasta caber, conserva su proporción y no hace falta object-fit. Ver README.
 */
.radiowp-states .radiowp-states__escudo {
	display: block;
	width: auto;
	height: auto;
	max-width: 4.75rem;
	max-height: 5rem;
}

.radiowp-states__name {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-wrap: balance;
}

/* Escritorio: ocho columnas. 17 estados = dos filas llenas y uno suelto. */
@media (min-width: 64rem) {
	.radiowp-states__grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: var(--radiowp-space-md);
	}
}

/* Móvil: tres por fila, con el escudo algo más contenido. */
@media (max-width: 30rem) {
	.radiowp-states__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.radiowp-states__shield {
		block-size: 3.75rem;
	}

	.radiowp-states .radiowp-states__escudo {
		max-width: 3.5rem;
		max-height: 3.75rem;
	}

	.radiowp-states__name {
		font-size: 0.8125rem;
	}
}