/*
 * Tarjetas de programas: foto de fondo con degradado de color abajo y texto en blanco.
 *
 *   Contenedor sección   → programs
 *     Título             → programs__title
 *     Contenedor tarjetas→ programs__grid
 *       Contenedor tarjeta (con enlace) → programs__card programs__card--red|green|ink  anim anim--fade-up anim--d1..d3
 *         Imagen         → programs__photo
 *         Contenedor texto → programs__copy
 *           Título (H3)  → programs__name
 *           Texto        → programs__text
 *
 * El color del degradado lo define el modificador (--red, --green, --ink).
 */

.programs {
	display: block;
	padding: clamp(36px, 4.5vw, 64px) var(--wrap-gutter);
}

.programs__title { padding-bottom: clamp(24px, 3vw, 40px); }
.programs__title .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(30px, 3.6vw, 50px);
	letter-spacing: -.04em;
	line-height: 1.04;
	color: var(--color-ink);
}

.programs__grid {
	--row-gap: 12px;
	--column-gap: 16px;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.programs__card {
	--card-gradient: rgba(41, 33, 31, .92);

	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 4.3;
	overflow: hidden;
	border-radius: 26px;
	background: #D8CFC9;
	color: #fff;
	text-decoration: none;
}
.programs__card--red { --card-gradient: rgba(199, 32, 26, .92); }
.programs__card--green { --card-gradient: rgba(8, 122, 61, .92); }
.programs__card--ink { --card-gradient: rgba(41, 33, 31, .92); }

/* Degradado de color sobre la foto. */
.programs__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg, var(--card-gradient) 0%, var(--card-gradient) 24%, rgba(0, 0, 0, 0) 66%);
}

/* La foto llena la tarjeta. Se apunta al <img> interno del widget Imagen. */
.programs__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}
.programs__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.programs__copy {
	--row-gap: 8px;

	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0 22px 24px;
}

.programs__name .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(17px, 1.6vw, 22px);
	letter-spacing: .04em;
	line-height: 1.15;
	text-transform: uppercase;
	color: #fff;
}
.programs__text { font-size: 15px; font-weight: 500; line-height: 1.45; color: rgba(255, 255, 255, .94); }
.programs__text p { margin: 0; }

/* Se usa la propiedad translate (no transform): .anim.is-in fija transform: none y anularía el hover. */
.programs__card { transition: translate .5s var(--ease-out), opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.programs__card:hover { translate: 0 -6px; }

@media (min-width: 768px) {
	.programs__card { aspect-ratio: 16 / 8; }
}

@media (min-width: 1025px) {
	.programs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); --row-gap: 16px; }
	.programs__card { aspect-ratio: 4 / 5; }
}

@media (prefers-reduced-motion: reduce) {
	.programs__card:hover { translate: none; }
}