/**
 * municipio.css — Estilos para single-municipio.php
 * Ficha individual del CPT 'municipio'.
 */

/* ── HERO ─────────────────────────────────────────────────────────────────── */

.municipio-hero {
	padding: var(--space-10) 0 var(--space-12);
	background: linear-gradient(135deg, #f8f6ff 0%, var(--color-crema) 60%, #fff 100%);
	overflow: hidden;
}

.municipio-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-12);
	align-items: center;
}

/* Texto */
.municipio-hero__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.municipio-hero__title {
	font-family: var(--font-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	color: var(--color-azul-institucional);
	line-height: 1.15;
	margin: 0;
}

.municipio-hero__title em {
	color: var(--color-oro);
	font-style: normal;
}

.municipio-hero__desc {
	font-size: var(--text-base);
	color: rgba(13, 13, 13, 0.7);
	line-height: 1.7;
	margin: 0;
	max-width: 52ch;
}

.municipio-hero__badge-row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
	margin-top: var(--space-2);
}

/* Stats */
.municipio-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
	margin-top: var(--space-2);
}

.municipio-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.municipio-stat__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgba(3, 10, 140, 0.07);
	border-radius: var(--radius-md);
	color: var(--color-azul-institucional);
	margin-bottom: var(--space-1);
}

.municipio-stat__icon svg {
	fill: var(--color-azul-institucional);
}

.municipio-stat__number {
	font-family: var(--font-serif);
	font-size: var(--text-3xl);
	font-weight: 700;
	color: var(--color-azul-institucional);
	line-height: 1;
}

.municipio-stat__label {
	font-size: var(--text-sm);
	color: rgba(13, 13, 13, 0.6);
	line-height: 1.3;
}

/* Badge municipio */
.municipio-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--color-azul-institucional);
	color: #fff;
	font-size: var(--text-sm);
	font-weight: 500;
	padding: 6px var(--space-3);
	border-radius: var(--radius-full);
}

/* ── COLLAGE DE IMÁGENES ─────────────────────────────────────────────────── */

.municipio-hero__media {
	position: relative;
}

.municipio-hero__collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	gap: var(--space-3);
	border-radius: var(--radius-card);
	overflow: hidden;
	position: relative;
}

.municipio-hero__img-main {
	grid-column: 1;
	grid-row: 1 / 3;
	border-radius: var(--radius-card) 0 0 var(--radius-card);
	overflow: hidden;
}

.municipio-hero__img-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.municipio-hero__img-col {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.municipio-hero__img-sm {
	overflow: hidden;
	border-radius: 0;
	flex: 1;
}

.municipio-hero__img-sm:last-child {
	border-radius: 0 0 var(--radius-card) 0;
}

.municipio-hero__img-sm:first-child {
	border-radius: 0 var(--radius-card) 0 0;
}

.municipio-hero__img-sm img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.municipio-hero__escudo {
	position: absolute;
	bottom: var(--space-4);
	right: var(--space-4);
	width: 60px;
	height: 60px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-md);
	padding: var(--space-2);
}

.municipio-hero__escudo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Placeholder */
.municipio-hero__collage--placeholder {
	aspect-ratio: 4/3;
	background: linear-gradient(135deg, var(--color-azul-institucional) 0%, var(--color-azul-petroleo) 100%);
	border-radius: var(--radius-card);
	display: flex;
	align-items: center;
	justify-content: center;
}

.municipio-hero__placeholder-inner {
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
}

.municipio-hero__placeholder-inner p {
	margin: var(--space-3) 0 0;
	font-size: var(--text-sm);
}


/* ── EL FLAMENCO EN {MUNICIPIO} ─────────────────────────────────────────── */

.municipio-flamenco-layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: var(--space-12);
	align-items: start;
}

.municipio-flamenco__content {}

.municipio-flamenco__text {
	color: rgba(13, 13, 13, 0.7);
	line-height: 1.8;
	margin-bottom: var(--space-6);
}

/* Grid de elementos del municipio (puntos del mapa) */
.municipio-elements-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

.municipio-element {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
	background: var(--color-crema);
	border-radius: var(--radius-card);
	border: 1px solid rgba(3, 10, 140, 0.06);
}

.municipio-element__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: var(--color-azul-institucional);
	color: #fff;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
}

.municipio-element__icon svg {
	fill: #fff;
}

.municipio-element__name {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-azul-institucional);
	margin: 0 0 2px;
	line-height: 1.3;
}

.municipio-element__description {
	font-size: 12px;
	color: rgba(13, 13, 13, 0.55);
	margin: 0;
	line-height: 1.4;
}


/* ── MINI MAPA ───────────────────────────────────────────────────────────── */

.municipio-mini-mapa__wrap {
	position: relative;
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

.municipio-mini-mapa {
	width: 100%;
	height: 320px;
	background: var(--color-crema);
	border-radius: var(--radius-card);
	/* z-index contenido para que no tape el header */
	position: relative;
	z-index: 1;
	isolation: isolate;
}

.municipio-mini-mapa--no-coords {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(13, 13, 13, 0.4);
	font-size: var(--text-sm);
}

.municipio-mini-mapa__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: var(--color-azul-institucional);
	color: #fff;
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s;
}

.municipio-mini-mapa__link:hover {
	background: var(--color-azul-electrico);
}

.municipio-mini-mapa__link svg {
	fill: #fff;
}


/* ── AGENDA ──────────────────────────────────────────────────────────────── */

.municipio-agenda-tabs {
	margin-bottom: var(--space-6);
	flex-wrap: wrap;
}

.municipio-agenda-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}

.municipio-agenda-item {
	display: flex;
	flex-direction: column;
}

.municipio-agenda-item .event-card--grid {
	flex: 1;
}

/* Ocultar items filtrados por categoría */
.municipio-agenda-item[data-hidden="true"] {
	display: none;
}


/* ── ESPACIOS GRID ───────────────────────────────────────────────────────── */

.espacios-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}

.espacio-card {
	border-radius: var(--radius-card);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.2s, transform 0.2s;
}

.espacio-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.espacio-card__image {
	position: relative;
	aspect-ratio: 4/3;
	background: linear-gradient(135deg, var(--color-azul-institucional) 0%, var(--color-azul-petroleo) 100%);
	overflow: hidden;
}

.espacio-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Colores de fondo por tipo */
.espacio-card__image--pena-flamenca    { background: linear-gradient(135deg, #b37d1c, #F2AC29); }
.espacio-card__image--tablao           { background: linear-gradient(135deg, #020773, #030A8C); }
.espacio-card__image--teatro           { background: linear-gradient(135deg, #044d39, #065f46); }
.espacio-card__image--centro-cultural  { background: linear-gradient(135deg, #0408c7, #0511F2); }
.espacio-card__image--ayuntamiento     { background: linear-gradient(135deg, #012f57, #023E73); }
.espacio-card__image--festival         { background: linear-gradient(135deg, #a33f07, #D4500A); }
.espacio-card__image--patrimonio       { background: linear-gradient(135deg, #6b310c, #92400E); }
.espacio-card__image--espacio-formativo{ background: linear-gradient(135deg, #10812e, #16A34A); }

.espacio-card__badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
}

.espacio-card__body {
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.espacio-card__title {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-azul-institucional);
	margin: 0;
	line-height: 1.4;
}

.espacio-card__location {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: rgba(13, 13, 13, 0.55);
	margin: 0;
}

.espacio-card__location svg {
	flex-shrink: 0;
	fill: currentColor;
}


/* ── DIFUSIÓN ────────────────────────────────────────────────────────────── */

.municipio-difusion-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-12);
}

/* article-row__title links */
.article-row__title a {
	color: var(--color-azul-institucional);
	text-decoration: none;
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.4;
}

.article-row__title a:hover {
	color: var(--color-azul-electrico);
}


/* ── NOTICIAS ────────────────────────────────────────────────────────────── */

.noticias-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
}

.noticia-card {
	border-radius: var(--radius-card);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.2s, transform 0.2s;
}

.noticia-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.noticia-card__img-wrap {
	display: block;
	aspect-ratio: 16/9;
	overflow: hidden;
}

.noticia-card__img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}

.noticia-card:hover .noticia-card__img-wrap img {
	transform: scale(1.04);
}

.noticia-card__img-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--color-azul-institucional) 0%, var(--color-azul-petroleo) 100%);
}

.noticia-card__body {
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.noticia-card__title {
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-azul-institucional);
	margin: 0;
	line-height: 1.4;
}

.noticia-card__title a {
	color: inherit;
	text-decoration: none;
}

.noticia-card__title a:hover {
	color: var(--color-azul-electrico);
}


/* ── RED DE MUNICIPIOS ───────────────────────────────────────────────────── */

.municipios-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
}

.municipios-bar__item {
	display: inline-block;
	padding: 6px var(--space-4);
	background: var(--color-crema);
	border: 1px solid rgba(3, 10, 140, 0.12);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	color: var(--color-azul-institucional);
	text-decoration: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.municipios-bar__item:hover {
	background: var(--color-azul-institucional);
	color: #fff;
	border-color: var(--color-azul-institucional);
}


/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
	.municipio-agenda-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1100px) {
	.espacios-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.municipio-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.municipio-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.municipio-hero__media {
		order: -1;
	}

	.municipio-hero__collage {
		max-height: 280px;
	}

	.municipio-flamenco-layout {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}

	.municipio-mini-mapa__wrap {
		order: -1;
	}

	.municipio-mini-mapa {
		height: 260px;
	}

	.municipio-elements-grid {
		grid-template-columns: 1fr;
	}

	.municipio-difusion-grid {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}

@media (max-width: 640px) {
	.municipio-hero {
		padding: var(--space-8) 0 var(--space-10);
	}

	.municipio-hero__title {
		font-size: 1.75rem;
	}

	.municipio-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}

	.espacios-grid {
		grid-template-columns: 1fr 1fr;
	}

	.municipio-agenda-grid {
		grid-template-columns: 1fr;
	}
}