/* ============================================================
 * Plantilla — Participación Ciudadana (template-participacion.php)
 * Maqueta: Figma 323:4716 (frame 1440; contenido de 1120).
 *
 * Este archivo solo aporta el andamiaje de la página y las piezas que no son
 * componentes: el título y el contenido del editor. Las pestañas son un
 * componente global y traen su propia hoja (`components/content-tabs.css`).
 *
 * Ojo con base.css (el Base Kit de Siigsa): `main p` fija color, tamaño y un
 * `font-weight: 400 !important`, y `h1` fuerza familia y peso. Donde hace
 * falta !important para ganarle está anotado.
 * ============================================================ */

.mbn-participacion {
	padding-block: var(--mbn-space-page-top, 24px) var(--mbn-space-section, 36px);
	background: var(--mbn-surface-white, #FFFFFF);
}

.mbn-participacion__container {
	display: flex;
	flex-direction: column;
	/* 24 + los 12 de padding propio de las migas = los 36 (spacing-l) que
	   separan la fila de migas del contenido, igual que en «Ministerio». */
	gap: 24px;
}

/* base.css: `h1 { font-weight: 700 !important; font-family: Roboto Slab
   !important }`. La familia coincide con la maqueta (Heading/Slab/Large); el
   peso 500 necesita !important para ganarle. */
.mbn-participacion__title {
	margin: 0;
	font-family: var(--mbn-roboto-slab-large-font-family, "Roboto Slab", serif) !important;
	font-weight: var(--mbn-roboto-slab-large-font-weight, 500) !important;
	font-size: calc(28px * var(--mbn-text-scale, 1));
	line-height: 1.5;
	color: var(--mbn-text-primary, #333333);
}

.mbn-participacion__content p,
.mbn-participacion__content li {
	font-family: var(--mbn-roboto-body-small-font-family, "Roboto", sans-serif);
	font-size: var(--mbn-roboto-body-small-font-size, 16px);
	line-height: 1.5;
	color: var(--mbn-text-primary, #333333);
}

.mbn-participacion__content p {
	margin-bottom: 16px;
}

.mbn-participacion__content > :first-child {
	margin-top: 0;
}

.mbn-participacion__content > :last-child {
	margin-bottom: 0;
}

.mbn-participacion__content ul,
.mbn-participacion__content ol {
	margin: 0 0 16px;
	padding-left: 24px;
}

.mbn-participacion__content a {
	color: var(--mbn-link-default, #1D70B8);
	text-decoration: underline;
}

.mbn-participacion__content a:hover,
.mbn-participacion__content a:focus-visible {
	color: var(--mbn-brand-blue-dark, #00268D);
}

.mbn-participacion__content img {
	max-width: 100%;
	height: auto;
}

/* ---------- md ≥ 768px (canvas 834 del Figma) ---------- */

@media (min-width: 768px) {
	.mbn-participacion__title {
		font-size: calc(32px * var(--mbn-text-scale, 1));
	}
}

/* ---------- xl ≥ 1200px (canvas 1440 del Figma) ---------- */

@media (min-width: 1200px) {
	.mbn-participacion__title {
		font-size: var(--mbn-roboto-slab-large-font-size, 36px);
	}
}