/**
 * Velaro Storytelling — front-end.
 * Layout alternado texto/imagen, replicando la sección "media with text"
 * de xclusive.pe (referencia en /reference).
 */

.velaro-storytelling {
	--vst-gap: 1.25rem;
	--vst-pad-block: 2.5rem;
	--vst-pad-inline: 2rem;
	--vst-bg: #f5f5f5;
	--vst-color: #1a1a1a;
	--vst-radius: 0px;
	--vst-title-size: 2rem;
	--vst-title-space: 1rem;
	--vst-text-space: 1.25rem;
	--vst-subtitle-size: 1rem;
	--vst-text-size: 1rem;
	/* `inherit` dentro de var() invalidaba la declaración y el bloque acababa con la fuente del tema. */
	--vst-heading-font: "Jost", sans-serif;

	display: grid;
	gap: var(--vst-gap);
	margin-block: 3rem;
}

/* Los tres escalones de la referencia: móvil, tablet/desktop y desktop ancho. */
@media screen and (min-width: 1000px) {
	.velaro-storytelling {
		--vst-gap: 1.5rem;
		--vst-pad-block: 3rem;
		--vst-pad-inline: 3rem;
		--vst-title-size: 2.5rem;
		--vst-title-space: 1.5rem;
		--vst-text-space: 1.5rem;
	}
}

@media screen and (min-width: 1400px) {
	.velaro-storytelling {
		--vst-pad-block: 5rem;
		--vst-pad-inline: 5rem;
		--vst-title-size: 3rem;
		--vst-text-space: 2rem;
	}
}

/* ---------- Item ---------- */

.velaro-storytelling__item {
	display: grid;
	gap: var(--vst-gap);
	/* Móvil: imagen arriba, texto abajo. */
	grid-template: "media" "content" / minmax(0, 1fr);
}

@media screen and (min-width: 1000px) {
	/* Impares: texto izquierda / imagen derecha. */
	.velaro-storytelling__item {
		grid-template: "content media" / minmax(0, 1fr) minmax(0, 1fr);
	}

	/* Pares: imagen izquierda / texto derecha. */
	.velaro-storytelling__item:nth-child(even) {
		grid-template: "media content" / minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* Item sin imagen o sin texto ocupa todo el ancho. */
.velaro-storytelling__item--no-media,
.velaro-storytelling__item--no-content {
	grid-template: "content" / minmax(0, 1fr);
}

.velaro-storytelling__item--no-content {
	grid-template: "media" / minmax(0, 1fr);
}

@media screen and (min-width: 1000px) {
	.velaro-storytelling__item--no-media,
	.velaro-storytelling__item--no-media:nth-child(even) {
		grid-template: "content" / minmax(0, 1fr);
	}

	.velaro-storytelling__item--no-content,
	.velaro-storytelling__item--no-content:nth-child(even) {
		grid-template: "media" / minmax(0, 1fr);
	}
}

/* ---------- Media ---------- */

.velaro-storytelling__media {
	grid-area: media;
	position: relative;
	overflow: hidden;
	border-radius: var(--vst-radius);
	/* Marca la altura de la fila. Si el texto es más largo, la imagen crece
	   y se recorta con object-fit en vez de dejar huecos. */
	aspect-ratio: var(--vst-media-ratio, 1 / 1);
}

.velaro-storytelling__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
}

/* ---------- Contenido ---------- */

.velaro-storytelling__content {
	grid-area: content;
	display: grid;
	align-content: center;
	justify-items: start;
	text-align: start;
	padding: var(--vst-pad-block) var(--vst-pad-inline);
	background: var(--vst-bg);
	color: var(--vst-color);
	border-radius: var(--vst-radius);
	font-family: var(--vst-heading-font);
	overflow-wrap: anywhere;
}

.velaro-storytelling__subtitle {
	margin: 0;
	font-size: var(--vst-subtitle-size);
	font-weight: 700;
	line-height: 1.6;
	color: inherit;
}

.velaro-storytelling__title {
	margin: 0;
	font-family: var(--vst-heading-font);
	font-size: var(--vst-title-size);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: inherit;
}

.velaro-storytelling__subtitle + .velaro-storytelling__title {
	margin-block-start: var(--vst-title-space);
}

.velaro-storytelling__text {
	margin-block-start: var(--vst-text-space);
	font-size: var(--vst-text-size);
	font-weight: 300;
	line-height: 1.6;
	color: inherit;
}

.velaro-storytelling__text > :first-child {
	margin-block-start: 0;
}

.velaro-storytelling__text > :last-child {
	margin-block-end: 0;
}

.velaro-storytelling__text p {
	margin-block: 0.75rem 0;
}

.velaro-storytelling__text p:first-child {
	margin-block-start: 0;
}

/* Sin subtítulo ni título, el texto no necesita separación extra. */
.velaro-storytelling__content > .velaro-storytelling__text:first-child {
	margin-block-start: 0;
}

/* ---------- Reveal on scroll ---------- */

.velaro-storytelling--reveal .velaro-storytelling__media,
.velaro-storytelling--reveal .velaro-storytelling__content {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.velaro-storytelling--reveal .is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.velaro-storytelling--reveal .velaro-storytelling__media,
	.velaro-storytelling--reveal .velaro-storytelling__content {
		opacity: 1;
		transform: none;
		transition: none;
	}
}