/* Compatibility styles from the existing MAPA theme. Only loaded on inner pages. */
/*
 * Centre Mèdic MAPA — estilos del prototipo editorial interior v2 (F25).
 *
 * Encolado en TODAS las páginas EXCEPTO la portada (functions.php,
 * ! is_front_page()), simétrico a home.css. Solo contiene reglas
 * .mapa-interior-v2*: no afecta a ninguna página que no inserte el
 * patrón «MAPA — El centre editorial v2» ni a la HOME.
 *
 * Lenguaje HOME trasladado (F23/F25):
 *  - ancho de COMPOSICIÓN (~76rem) separado del ancho de LECTURA (~42rem);
 *  - asimetría por columnas desiguales (7fr/5fr, 4fr/8fr) y desfases;
 *  - reglas horizontales en color de marca como recurso estructural;
 *  - UNA banda tint (CTA) como único bloque de color de cierre;
 *  - ritmo con padding asimétrico y clamps fluidos.
 *
 * Contenedor: el ancho de composición se activa con :has() cuando la
 * página contiene el patrón v2 — sin depender de page-id y sin tocar
 * las páginas publicadas. Soporte :has(): Chrome/Edge 105+, Safari 15.4+,
 * Firefox 121+. Sin soporte, la página se muestra en la columna estrecha
 * (degradación aceptable para un prototipo).
 *
 * Breakpoint (F25-04): la composición editorial v2 se activa a 64rem
 * (1024px), el mismo breakpoint de contenido de la HOME. Por debajo:
 * una columna natural.
 *
 * Accesibilidad: sin position absoluto para contenido, sin alturas fijas
 * de texto, sin nowrap, sin dependencia de hover; jerarquía H2 → H3
 * intacta (el H1 lo imprime page.php); decoración solo como reglas/bordes.
 */

/* ---------- Hero interior ---------- */

.mapa-interior-v2-hero {
	padding-block: clamp(2rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem);
}

.mapa-interior-v2-hero > h2 {
	color: var(--wp--preset--color--primary-dark, #0c3834);
	font-family: var(--wp--preset--font-family--display, Georgia, 'Times New Roman', serif);
	font-size: clamp(1.875rem, 1.1rem + 3.2vw, 3rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.1;
	margin: 0;
	max-width: 30rem;
}

/* Columna secundaria desfasada: regla superior en color de marca +
   intro a medida de lectura + enlace editorial. */
.mapa-interior-v2-hero__aside {
	border-top: 2px solid var(--wp--preset--color--primary, #14524d);
	margin-top: 2rem;
	padding-top: 1.5rem;
}

.mapa-interior-v2-hero__aside p {
	color: var(--wp--preset--color--text, #20313a);
	line-height: 1.65;
	margin: 0 0 1.25rem;
	max-width: 34rem;
}

.mapa-interior-v2-hero__aside a {
	font-weight: 600;
}

/* ---------- Sección editorial (Un centre d'atenció…) ---------- */

.mapa-interior-v2-section {
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.mapa-interior-v2-section > h2 {
	color: var(--wp--preset--color--primary-dark, #0c3834);
	font-family: var(--wp--preset--font-family--display, Georgia, 'Times New Roman', serif);
	font-size: clamp(1.75rem, 1.1rem + 2.5vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0;
	max-width: 36rem;
}

.mapa-interior-v2-section > p {
	color: var(--wp--preset--color--text, #20313a);
	line-height: 1.65;
	margin: 1.5rem 0 0;
	max-width: 36rem;
}

/* ---------- Sub-bloque (Atenció presencial i online) ---------- */

/* Composición secundaria: regla superior fina + indentación profunda
   (jerarquía H3 bajo el H2 de la sección anterior). */
.mapa-interior-v2-sub {
	border-top: 1px solid var(--wp--preset--color--border, #d9d5cd);
	padding-block: clamp(1.5rem, 3vw, 2rem) clamp(2rem, 4.5vw, 3rem);
}

.mapa-interior-v2-sub > h3 {
	color: var(--wp--preset--color--primary-dark, #0c3834);
	font-family: var(--wp--preset--font-family--display, Georgia, 'Times New Roman', serif);
	font-size: clamp(1.375rem, 1.05rem + 1.4vw, 1.75rem);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 0.75rem;
}

.mapa-interior-v2-sub > p {
	color: var(--wp--preset--color--text, #20313a);
	line-height: 1.65;
	margin: 0;
	max-width: 34rem;
}

/* ---------- Related (Coneix el nostre equip) ---------- */

/* Transición editorial SIN caja: regla superior en color de marca y
   composición a dos columnas (título | texto+enlace) en escritorio. */
.mapa-interior-v2-related {
	border-top: 2px solid var(--wp--preset--color--primary, #14524d);
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.mapa-interior-v2-related > h2 {
	color: var(--wp--preset--color--primary-dark, #0c3834);
	font-family: var(--wp--preset--font-family--display, Georgia, 'Times New Roman', serif);
	font-size: clamp(1.875rem, 1.2rem + 2.8vw, 2.75rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0 0 0.75rem;
}

.mapa-interior-v2-related > p {
	color: var(--wp--preset--color--text, #20313a);
	line-height: 1.65;
	margin: 0 0 1.5rem;
	max-width: 34rem;
}

/* ---------- CTA final (Demanar visita) ---------- */

/* ÚNICA banda tint de la página: cierre visual, más ancho que la columna
   de lectura, con composición asimétrica (H2 grande | texto+botón). */
.mapa-interior-v2-cta {
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
}

.mapa-interior-v2-cta > h2 {
	color: var(--wp--preset--color--primary-dark, #0c3834);
	font-family: var(--wp--preset--font-family--display, Georgia, 'Times New Roman', serif);
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.1;
	margin: 0 0 1rem;
}

.mapa-interior-v2-cta > p {
	color: var(--wp--preset--color--text, #20313a);
	line-height: 1.65;
	margin: 0 0 2rem;
	max-width: 36rem;
}

.mapa-interior-v2-cta .wp-block-buttons {
	margin: 0;
}

/* ---------- Escritorio (F25-04: ≥64rem / 1024px) ---------- */

/*
 * Composición editorial v2 completa a partir de 1024px (mismo breakpoint
 * de contenido que la HOME). Incluye:
 *  - el ensanchamiento del contenedor (:has, activado solo en páginas
 *    que contengan el patrón v2);
 *  - hero 7fr/5fr con columna secundaria desfasada;
 *  - sección 4fr/8fr (H2 | los dos párrafos);
 *  - related 7fr/5fr (H2 | texto+botón);
 *  - CTA 5fr/7fr (H2 | texto+botón).
 * Por debajo de 64rem: una columna natural.
 */
@media (min-width: 64rem) {

	.container-narrow:has(.mapa-interior-v2) {
		max-width: 76rem;
	}

	.entry-content:has(.mapa-interior-v2) > * {
		max-width: none;
	}

	.mapa-interior-v2-hero {
		align-items: start;
		column-gap: clamp(3rem, 6vw, 6rem);
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		padding-block: 3.25rem 2.5rem;
	}

	.mapa-interior-v2-hero > h2 {
		grid-column: 1;
		grid-row: 1;
	}

	/* Desfase: la columna secundaria arranca más abajo (recurso HOME). */
	.mapa-interior-v2-hero__aside {
		grid-column: 2;
		grid-row: 1;
		margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
	}

	/*
	 * Hero sense titular propi: l'H1 l'imprimeix la plantilla.
	 * El text introductori conserva una amplària de lectura i s'alinea a la dreta.
	 */
	.entry-content > .mapa-interior-v2-hero:first-child {
		display: block;
		padding-block: 1.5rem 2.5rem;
	}

	.entry-content > .mapa-interior-v2-hero:first-child .mapa-interior-v2-hero__aside {
		margin: 0 0 0 auto;
		max-width: 34rem;
	}

	/* Sección B: composición desplazada 5fr/7fr (H2 | texto). */
	.mapa-interior-v2-section {
		align-items: start;
		column-gap: clamp(3rem, 6vw, 6rem);
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		padding-block: 2.5rem;
		row-gap: 1.5rem;
	}

	.mapa-interior-v2-section > h2 {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.mapa-interior-v2-section > p {
		grid-column: 2;
		margin: 0;
	}

	/* Compactación escritorio (F25-07): sub-bloque con menos aire vertical. */
	.mapa-interior-v2-sub {
		padding-block: 1.5rem 2.25rem;
	}

	/* Related: composición a dos columnas (título | texto+botón). */
	.mapa-interior-v2-related {
		align-items: start;
		column-gap: clamp(3rem, 6vw, 6rem);
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		padding: 3rem 0 1.75rem;
	}

	.mapa-interior-v2-related > h2 {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	.mapa-interior-v2-related > p,
	.mapa-interior-v2-related .wp-block-buttons {
		grid-column: 2;
	}

	/* Compactación escritorio (F25-07): texto y botón de equipo más cercanos. */
	.mapa-interior-v2-related > p {
		margin-bottom: 1rem;
	}

	/* CTA: banda tint con composición asimétrica (H2 | texto+botón). */
	.mapa-interior-v2-cta {
		align-items: start;
		column-gap: clamp(3rem, 6vw, 6rem);
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		padding: clamp(3rem, 7vw, 5rem) clamp(2rem, 5vw, 4rem);
		/* Sobrescriu només el padding vertical (F25-08): es conserva l'horitzontal. */
		padding-block: 3.5rem;
	}

	.mapa-interior-v2-cta > h2 {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.mapa-interior-v2-cta > p {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}

	.mapa-interior-v2-cta .wp-block-buttons {
		grid-column: 2;
		grid-row: 2;
		margin: 0;
	}
}