/*! BaseBlue — Home · 10 La demanda. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* El hero termina con una lámina de tinta que es el fondo de esta sección:
   continúa la superficie, así que arriba lleva la unión de iguales y abajo
   el relleno de siempre. */
.demand {
	margin-top: 0;
	padding-top: var(--sec-join);
	padding-bottom: var(--sec-pad);
}

/* Maqueta partida: el titular en 1–7 y el cuerpo con su enlace en 9–12,
   apoyados en la base del titular (con Outfit, a estos cuerpos, alinear el
   borde inferior de las cajas alinea las líneas base). */
.demand__grid {
	grid-template-rows: auto auto;
	align-items: end;
}
.demand__eyebrow { grid-column: 1 / span 7; grid-row: 1; }
.demand__title {
	grid-column: 1 / span 7;
	grid-row: 2;
	margin-top: var(--head-gap);
	/* Cada frase en su línea: la segunda responde a la primera. */
	max-width: none;
}
/* Cuerpo y enlace en una columna que se apoya en la base del titular. */
.demand__side {
	grid-column: 9 / -1;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--head-gap);
}

/* Apaisado estrecho (iPad en horizontal): el cuerpo necesita una columna más
   para no partirse en líneas de cuatro palabras. */
@media (orientation: landscape) and (max-width: 1199px) {
	.demand__eyebrow, .demand__title { grid-column: 1 / span 7; }
	.demand__side { grid-column: 8 / -1; }
}

@media (orientation: portrait), (max-width: 899px) {
	.demand__grid { grid-template-rows: none; }
	.demand__eyebrow, .demand__title, .demand__side { grid-column: 1 / -1; grid-row: auto; }
	.demand__side { margin-top: var(--head-gap); }
}