/* Inprodi Media + Text — home "About" pattern: full-bleed image + 2-row title. */
.inprodi-mediatext,
.inprodi-mediatext *,
.inprodi-mediatext *::before,
.inprodi-mediatext *::after { box-sizing: border-box; }

.inprodi-mediatext {
	width: 100%;
	background-color: #f8eee7;

	/* La foto va a sangre, pero el texto se alinea con la rejilla del resto de
	   secciones (max-width 80rem + guías 1rem → 1.5rem → 2rem). --mt-edge es la
	   distancia del borde de la pantalla al inicio de esa rejilla: la guía sola
	   mientras la ventana no llega a 80rem, y a partir de ahí el aire que sobra.
	   El 100% se resuelve contra la COLUMNA de texto (media ventana), así que
	   media rejilla son 40rem. Va en % y no en vw a propósito: vw incluye la
	   barra de scroll y desalinearía unos píxeles con las secciones vecinas. */
	--mt-gutter: 1rem;
	--mt-edge: max(var(--mt-gutter), calc(100% - 40rem + var(--mt-gutter)));
	--mt-inner: 1rem; /* separación entre la foto y el texto; crece en desktop */
}

@media (min-width: 640px) {
	.inprodi-mediatext { --mt-gutter: 1.5rem; }
}

@media (min-width: 1024px) {
	.inprodi-mediatext { --mt-gutter: 2rem; }
}

.inprodi-mediatext--white { background: linear-gradient(180deg, #f8eee7 0%, #f2e4d4 100%); }

.inprodi-mediatext__row {
	display: grid;
	grid-template-columns: 1fr;
}

.inprodi-mediatext__media {
	position: relative;
	width: 100%;
	min-height: 300px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #e5e7eb;
}

/* Video variant: the <video> fills the media cell, cover-cropped. */
.inprodi-mediatext__media--video { background-color: #000; }

.inprodi-mediatext__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.inprodi-mediatext__text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	/* 64px es el ritmo vertical estándar de las secciones en móvil. */
	padding: 64px var(--mt-gutter);
}

.inprodi-mediatext__eyebrow {
	color: #cf8a44;
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.inprodi-mediatext__title {
	margin: 0;
	display: flex;
	flex-direction: column;
	color: #3e2618;
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 2rem; /* 32px mobile */
	line-height: 1.15;
}

.inprodi-mediatext__title span { text-transform: none; letter-spacing: normal; }

.inprodi-mediatext__title .inprodi-mediatext__it {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	text-indent: 0;
	-webkit-text-stroke: 0.4px currentColor;
	font-size: 1.15em;
	line-height: 1.25;
	color: #3e2618;
}

.inprodi-mediatext__text p {
	margin: 0;
	max-width: 32rem;
	color: #4b5563;
	font-family: var(--nk-font-sans);
	font-size: 1.0625rem; /* 17px */
	line-height: 1.75;
}

@media (min-width: 900px) {
	.inprodi-mediatext__row {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
		min-height: 660px;
	}
	.inprodi-mediatext__media { min-height: 420px; }
	.inprodi-mediatext { --mt-inner: 4rem; }
	/* 96px = ritmo vertical estándar de sección en desktop. */
	.inprodi-mediatext__text { padding: 96px var(--mt-gutter); justify-content: center; }
	.inprodi-mediatext__title { font-size: 3.25rem; /* 52px */ }
	/* image on the right */
	.inprodi-mediatext--reverse .inprodi-mediatext__media { order: 2; }

	/* El lado que da al borde de la pantalla se alinea con la rejilla de 80rem;
	   el que da a la foto lleva solo el aire de separación. */
	.inprodi-mediatext--reverse .inprodi-mediatext__text {
		padding-left: var(--mt-edge);
		padding-right: var(--mt-inner);
	}

	.inprodi-mediatext:not(.inprodi-mediatext--reverse) .inprodi-mediatext__text {
		padding-left: var(--mt-inner);
		padding-right: var(--mt-edge);
	}
}