/*
 * Cimentia — override del bloque CORE "Media & Text" (.wp-block-media-text).
 * Hace que el bloque nativo de WordPress herede el layout y la tipografía del
 * export de Figma "img-texto". No se crea un bloque nuevo: solo se sobreescribe
 * el CSS del core, en front y dentro del iframe del editor (add_editor_style).
 *
 * Clave: el core coloca las columnas con CSS grid (`grid-column` en los hijos)
 * y su `.wp-block-media-text { display:grid }` tiene la MISMA especificidad
 * (0-1-0) que un override normal, así que ganaría quien cargue el último. Para
 * ganar SIEMPRE sin !important y sin depender del orden de carga, se dobla la
 * clase: `.wp-block-media-text.wp-block-media-text` (0-2-0).
 *
 * Se usa flexbox + `order`. El botón "imagen a izquierda / derecha" de la barra
 * del bloque alterna la clase `.has-media-on-the-right`; con `order` invertimos
 * la posición, por lo que ese botón sigue funcionando. (Con grid del core se
 * rompería porque forzamos flex y su `grid-column` queda inerte.)
 */

/* ---- Contenedor: banda centrada con media + columna de texto ---- */
.wp-block-media-text.wp-block-media-text {
	display: flex;
	align-items: center; /* columna de texto centrada respecto a la imagen */
	width: 100%;
	max-width: var(--cmt-container-max); /* 1440px */
	margin-inline: auto;
	box-sizing: border-box;
}

/* ---- Media (imagen/vídeo): 544px del export ---- */
.wp-block-media-text.wp-block-media-text > .wp-block-media-text__media {
	align-self: stretch;
}

.wp-block-media-text.wp-block-media-text > .wp-block-media-text__media img,
.wp-block-media-text.wp-block-media-text > .wp-block-media-text__media video {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ---- Columna de texto: 432px del export ---- */
.wp-block-media-text.wp-block-media-text > .wp-block-media-text__content {
	order: 1; /* por defecto a la derecha */
	flex: 0 1 432px;
	display: flex;
	flex-direction: column;
	padding: 0; /* anula el "0 8%" que mete el core */
	color: var(--cmt-color-text);
	font-family: var(--cmt-font-base);
	word-break: normal;
}

/* Botón de la barra: "imagen a la derecha" -> intercambia el orden.
   Va DESPUÉS de las reglas base para ganar el empate de especificidad. */
.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
	order: 1;
}

.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
	order: 0;
}

/* ---- Ritmo vertical del contenido (imita los "frames" del export) ---- */
.wp-block-media-text .wp-block-media-text__content > * {
	margin-top: 0;
	margin-bottom: 0;
}

.wp-block-media-text .wp-block-media-text__content > * + * {
	margin-top: var(--cmt-space-md); /* 24px por defecto */
}

.wp-block-media-text .wp-block-media-text__content p:not(:first-child) + :is(h1, h2, h3, h4, h5, h6) {
	margin-top: var(--cmt-space-sm); /* 16px entre grupos sub-título + texto */
}

.wp-block-media-text .wp-block-media-text__content :is(h1, h2, h3, h4, h5, h6) + p {
	margin-top: var(--cmt-space-xs); /* 8px entre sub-título y su párrafo */
}

/* ---- Tipografía heredada del export ---- */

/* Cuerpo: párrafos normales */
.wp-block-media-text .wp-block-media-text__content p {
	font-size: var(--cmt-fs-body); /* 16px */
	font-weight: var(--cmt-fw-light); /* 300 */
	line-height: 24px;
}

/* Sub-títulos: encabezados */
.wp-block-media-text .wp-block-media-text__content :is(h1, h2, h3, h4, h5, h6) {
	font-size: var(--cmt-fs-body); /* 16px */
	font-weight: var(--cmt-fw-medium); /* 500 */
	line-height: 24px;
}

/* Sub-títulos alternativos: negrita dentro de un párrafo */
.wp-block-media-text .wp-block-media-text__content strong {
	font-weight: var(--cmt-fw-medium); /* 500 */
}

/* El párrafo "lead" destacado ya NO es automático: se aplica con el estilo de
   bloque "Título media texto" (is-style-titulo-media-texto). Ver
   inc/block-styles.php. */

/* ---- Responsive: apilado en una columna (patrón 768px del proyecto) ---- */
@media (max-width: 768px) {
	.wp-block-media-text.wp-block-media-text {
		flex-direction: column;
		align-items: stretch;
		gap: var(--cmt-space-lg); /* 40px */
		padding: 0 var(--cmt-container-pad) var(--cmt-space-xl); /* 0 24px 64px */
	}

	.wp-block-media-text.wp-block-media-text > .wp-block-media-text__media,
	.wp-block-media-text.wp-block-media-text > .wp-block-media-text__content {
		flex-basis: auto;
		width: 100%; /* se eliminan los anchos fijos 544/432 */
	}
}

/* =====================================================================
 * Variante de estilo: "Imagen sin borde lateral"
 * (is-style-imagen-sin-borde-lateral). Registrada en inc/block-styles.php.
 * La imagen llega al borde (sin padding lateral en su lado) y crece para
 * llenar el espacio; el texto queda en columna fija de 544px con título 32px.
 * Doble clase (.wp-block-media-text.wp-block-media-text.is-style-…) para ganar
 * a la base sin !important.
 * ===================================================================== */
.wp-block-media-text.wp-block-media-text.is-style-imagen-sin-borde-lateral {
	gap: 80px;
	max-width: none;
}

/* Media a la derecha: el lado sin borde pasa a ser el derecho. */
.wp-block-media-text.wp-block-media-text.is-style-imagen-sin-borde-lateral.has-media-on-the-right {
	padding: 80px 0 var(--cmt-space-lg) 168px;
}

/* La imagen crece para llenar el espacio y tiene alto fijo del export. */
.wp-block-media-text.wp-block-media-text.is-style-imagen-sin-borde-lateral > .wp-block-media-text__media {
	flex: 1 1 0;
}

.wp-block-media-text.wp-block-media-text.is-style-imagen-sin-borde-lateral > .wp-block-media-text__media img {
	width: 100%;
	aspect-ratio: 544 / 400; /* misma proporción que img-texto-3: caja fija, no depende de la foto subida */
	object-fit: cover;
}

/* Texto: columna fija de 544px. */
.wp-block-media-text.wp-block-media-text.is-style-imagen-sin-borde-lateral > .wp-block-media-text__content {
	flex: 0 1 544px;
}

/* Ritmo del contenido: 40px entre título y cuerpo. */
.wp-block-media-text.wp-block-media-text.is-style-imagen-sin-borde-lateral > .wp-block-media-text__content > * + * {
	margin-top: var(--cmt-space-lg); /* 40px */
}

/* Título (primer elemento del contenido): 32px / 300 / 40. */
.wp-block-media-text.wp-block-media-text.is-style-imagen-sin-borde-lateral > .wp-block-media-text__content > *:first-child {
	font-size: var(--cmt-fs-h3); /* 32px */
	font-weight: var(--cmt-fw-light); /* 300 */
	line-height: 40px;
}

/* Tablet: mantiene la imagen a borde pero reduce el gran padding de texto
   (168 -> container-pad) para que las columnas no se ahoguen. */
@media (max-width: 1024px) {
	.wp-block-media-text.wp-block-media-text.is-style-imagen-sin-borde-lateral {
		gap: var(--cmt-space-xl);
		padding-right: var(--cmt-container-pad);
	}

	.wp-block-media-text.wp-block-media-text.is-style-imagen-sin-borde-lateral.has-media-on-the-right {
		padding-left: var(--cmt-container-pad);
	}
}

/* Responsive: recupera padding lateral, apila (hereda del base) e img fluida. */
@media (max-width: 768px) {
	.wp-block-media-text.wp-block-media-text.is-style-imagen-sin-borde-lateral,
	.wp-block-media-text.wp-block-media-text.is-style-imagen-sin-borde-lateral.has-media-on-the-right {
		padding: 0 var(--cmt-container-pad) var(--cmt-space-xl);
		gap: var(--cmt-space-lg);
	}

	/* Reset de las columnas: las reglas de la variante (flex-basis 544 / flex 1)
	   viven fuera de media query y ganan a las del base por especificidad; hay
	   que apilar aquí explícitamente o el contenido se queda a 544px en móvil. */
	.wp-block-media-text.wp-block-media-text.is-style-imagen-sin-borde-lateral > .wp-block-media-text__media,
	.wp-block-media-text.wp-block-media-text.is-style-imagen-sin-borde-lateral > .wp-block-media-text__content {
		flex: 0 1 auto;
		width: 100%;
	}

	.wp-block-media-text.wp-block-media-text.is-style-imagen-sin-borde-lateral > .wp-block-media-text__media img {
		height: auto;
	}
}