/* ============================================================
   CORPORACION MUNICIPAL — pagina /ayuntamiento/corporacion-municipal/
   ID: 19

   Renderiza el listado del Pleno (mandato vigente + historico) como
   una rejilla de tarjetas con foto cuadrada, nombre, cargo y badge
   de partido. Las tarjetas son bloques nativos de Gutenberg con las
   clases `nava-card`, `nava-card--corporacion` y, cuando no hay foto,
   `nava-card--sin-foto`. El grid usa `nava-corporacion__grid`.

   Este archivo:
     - Rompe el limite de lectura 70ch de .nava-single__content para
       que la rejilla respire (4 columnas en escritorio).
     - Da a las tarjetas un look editorial: foto cuadrada arriba,
       sombra suave, hover ligero y badge anclado al fondo.
     - Las tarjetas sin foto se presentan con un gradiente calido y
       un chip discreto "foto pendiente" para que la ausencia sea
       intencional y no parezca un error de carga.
     - Resaltado superior por color de partido via `:has()` sobre el
       color inline del badge (PP / PSOE / SomosX). En navegadores
       sin soporte de :has, la tarjeta sigue siendo legible.
   ============================================================ */

/* --- Parrafo de introduccion de cada bloque (lead) --- */
.nava-corporacion__lead {
	font-size: var(--nava-fs-md);
	color: color-mix(in srgb, var(--nava-color-neutral-dark) 82%, transparent);
	line-height: var(--nava-lh-relaxed);
	max-width: 70ch;
	margin: 0 0 var(--nava-space-30);
}

/* --- Grid: salimos del ancho de lectura del .nava-single__content
   (70ch) para que las tarjetas tengan espacio comodo. Mismo patron
   que .nava-osm.alignwide / .nava-contact-block--wide. --- */
.nava-single__content .nava-corporacion__grid.wp-block-group,
.nava-single__content .nava-corporacion__grid {
	max-width: none;
	width: min(
		1100px,
		calc(100vw - 2 * var(--nava-container-padding) - 24px)
	);
	margin: var(--nava-space-40) 0 var(--nava-space-50);
}

.nava-corporacion__grid.wp-block-group,
.nava-corporacion__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--nava-space-30);
	padding: 0;
}

/* --- Tarjeta individual ---
   Sobrescribimos puntualmente las reglas heredadas de .nava-card del
   components.css (texto a la izquierda, aspect-ratio 16/9 de la imagen)
   porque esta seccion necesita una composicion tipo "ficha de persona":
   centrada y con foto cuadrada (1:1). --- */
.nava-corporacion__grid .nava-card.wp-block-group,
.nava-corporacion__grid .nava-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--nava-color-white);
	border: 1px solid color-mix(in srgb, var(--nava-color-neutral-dark) 10%, transparent);
	border-radius: var(--nava-radius-md);
	overflow: hidden;
	text-align: center;
	padding: 0;
	margin: 0;
	height: 100%;
	box-shadow: var(--nava-shadow-sm);
	transition:
		transform var(--nava-transition-normal),
		box-shadow var(--nava-transition-normal),
		border-color var(--nava-transition-normal);
}

.nava-corporacion__grid .nava-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--nava-shadow-md);
	border-color: color-mix(in srgb, var(--nava-color-accent-dark) 35%, transparent);
}

/* Acento superior por partido — usamos :has() sobre el color inline
   del badge para no tener que tocar el contenido (los bloques siguen
   editables como tarjetas estandar de Gutenberg). */
.nava-corporacion__grid .nava-card::before {
	content: "";
	display: block;
	height: 4px;
	width: 100%;
	background: color-mix(in srgb, var(--nava-color-neutral-dark) 18%, transparent);
	transition: background var(--nava-transition-fast);
}
.nava-corporacion__grid .nava-card:has(.nava-card__badge[style*="#2b6cb0"])::before {
	background: #2b6cb0; /* PP */
}
.nava-corporacion__grid .nava-card:has(.nava-card__badge[style*="#e85a4f"])::before {
	background: #e85a4f; /* PSOE */
}
.nava-corporacion__grid .nava-card:has(.nava-card__badge[style*="#2f8f5b"])::before {
	background: #2f8f5b; /* SomosX */
}

/* --- Foto / avatar (figura 1:1) --- */
.nava-corporacion__grid .nava-card__media,
.nava-corporacion__grid figure.nava-card__media {
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--nava-color-neutral-light);
	flex-shrink: 0;
	border-radius: 0;
	line-height: 0;
}

.nava-corporacion__grid .nava-card__media img,
.nava-corporacion__grid .nava-card__media .nava-card__img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top; /* favorece encuadre de retratos */
	display: block;
	border-radius: 0;
	transition: transform var(--nava-transition-normal);
}
.nava-corporacion__grid .nava-card:hover .nava-card__media img {
	transform: scale(1.03);
}

/* --- Avatar pendiente: que la ausencia de foto parezca intencional.
   Anadimos un gradiente calido detras y un chip discreto "foto
   pendiente" abajo a la derecha de la figura, en lugar del huevo
   grisaceo a pelo. --- */
.nava-corporacion__grid .nava-card--sin-foto .nava-card__media {
	position: relative;
	background:
		radial-gradient(
			120% 80% at 50% 20%,
			color-mix(in srgb, var(--nava-color-accent) 18%, var(--nava-color-neutral-light)) 0%,
			var(--nava-color-neutral-light) 70%
		);
}
.nava-corporacion__grid .nava-card--sin-foto .nava-card__media img {
	mix-blend-mode: multiply;
	opacity: 0.72;
}
.nava-corporacion__grid .nava-card--sin-foto .nava-card__media::after {
	content: "";
	position: absolute;
	right: 0.55rem;
	bottom: 0.55rem;
	font-family: var(--nava-font-body);
	font-size: 0.62rem;
	font-weight: var(--nava-fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--nava-color-neutral-dark) 70%, transparent);
	background: rgba(255, 255, 255, 0.88);
	padding: 0.2rem 0.55rem;
	border-radius: var(--nava-radius-pill);
	box-shadow: 0 1px 2px rgba(43, 31, 26, 0.08);
	pointer-events: none;
}

/* --- Texto: nombre y cargo --- */
.nava-corporacion__grid .nava-card__title.wp-block-heading,
.nava-corporacion__grid .nava-card__title {
	font-family: var(--nava-font-display);
	font-weight: var(--nava-fw-semibold);
	font-size: 1.0625rem;
	line-height: 1.25;
	color: var(--nava-color-neutral-dark);
	margin: var(--nava-space-30) var(--nava-space-30) 0.35rem;
	letter-spacing: -0.005em;
	text-align: center;
}

.nava-corporacion__grid .nava-card__role {
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--nava-color-neutral-dark) 68%, transparent);
	line-height: 1.35;
	margin: 0 var(--nava-space-30) var(--nava-space-30);
	text-align: center;
}

/* --- Badge de partido anclado al fondo (todas las tarjetas alinean) --- */
.nava-corporacion__grid .nava-card__badge-wrap {
	margin: auto var(--nava-space-30) var(--nava-space-30);
	padding-top: var(--nava-space-20);
	display: flex;
	gap: 0.4rem;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.nava-corporacion__grid .nava-card__badge {
	display: inline-block;
	padding: 0.32rem 0.95rem;
	font-family: var(--nava-font-body);
	font-size: 0.72rem;
	font-weight: var(--nava-fw-semibold);
	letter-spacing: 0.05em;
	border-radius: var(--nava-radius-pill);
	color: #fff;
	line-height: 1.4;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
	text-transform: none;
}

/* --- Responsive --- */
@media (max-width: 720px) {
	.nava-corporacion__grid.wp-block-group,
	.nava-corporacion__grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: var(--nava-space-20);
	}
	.nava-corporacion__grid .nava-card__title {
		font-size: 0.95rem;
		margin: var(--nava-space-20) 0.75rem 0.25rem;
	}
	.nava-corporacion__grid .nava-card__role {
		font-size: 0.8rem;
		margin: 0 0.75rem var(--nava-space-20);
	}
	.nava-corporacion__grid .nava-card__badge-wrap {
		margin: auto 0.75rem var(--nava-space-20);
	}
	.nava-corporacion__grid .nava-card--sin-foto .nava-card__media::after {
		font-size: 0.55rem;
		padding: 0.15rem 0.45rem;
	}
}

@media (max-width: 380px) {
	.nava-corporacion__grid.wp-block-group,
	.nava-corporacion__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}