/**
 * Education program additional info — navy fact cards.
 *
 * 1 column on small screens, 2 from 40rem.
 * Tablet only (48rem–63.9375rem): 3-column setting stays one row; 4-column setting is two per row.
 * Desktop: 3 columns from 64rem. Four columns from 75rem.
 */

.program-info {
	--program-info-pad-block: 3.75rem; /* 60px */
	--program-info-gap: 1.1875rem; /* 19px */
	--program-info-card-pad-block: clamp(1.75rem, 4vw, 3.75rem); /* → 60px */
	--program-info-card-pad-inline: clamp(1.25rem, 3vw, 2.1875rem); /* → 35px */
	--program-info-card-min-h: 12.125rem; /* 194px */
	--program-info-card-radius: 0.75rem; /* 12px */
	--program-info-copy-gap: 1.125rem; /* 18px */
	--program-info-title-size: 1.375rem; /* 22px */
	--program-info-cols: 3;

	padding-block: var(--program-info-pad-block);
	color: var(--color-white);
	background-color: var(--color-white);
}

.program-info--cols-4 {
	--program-info-cols: 4;
}

.program-info__inner {
	width: 100%;
	max-width: calc(var(--container-narrow-max) + (2 * var(--container-gutter)));
	margin-inline: auto;
	padding-inline: var(--container-gutter);
	box-sizing: border-box;
}

.program-info__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--program-info-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.program-info__item {
	display: flex;
	min-width: 0;
	min-height: var(--program-info-card-min-h);
	padding: var(--program-info-card-pad-block) var(--program-info-card-pad-inline);
	background-color: var(--color-navy);
	border-radius: var(--program-info-card-radius);
	box-sizing: border-box;
}

.program-info__copy {
	display: flex;
	flex-direction: column;
	gap: var(--program-info-copy-gap);
	width: 100%;
	min-width: 0;
}

.program-info__title {
	margin: 0;
	font-family: var(--font-family-display);
	font-size: var(--program-info-title-size);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--color-white);
	overflow-wrap: break-word;
}

.program-info__rule {
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--color-light-outline);
}

.program-info__text {
	margin: 0;
	font-family: var(--font-family-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-white);
	overflow-wrap: break-word;
}

@media (min-width: 40rem) {
	.program-info__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
	.program-info--cols-3 .program-info__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.program-info--cols-4 .program-info__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.program-info__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.program-info--cols-4 .program-info__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 75rem) {
	.program-info--cols-4 .program-info__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.program-info--cols-4 .program-info__item {
		--program-info-card-pad-inline: clamp(1rem, 1.5vw, 1.5rem);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.program-info__item {
		opacity: 0;
		transform: translateY(2.5rem);
		will-change: opacity, transform;
		transition:
			opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
			transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.program-info__item:nth-child(1) {
		transition-delay: 0.08s;
	}

	.program-info__item:nth-child(2) {
		transition-delay: 0.2s;
	}

	.program-info__item:nth-child(3) {
		transition-delay: 0.32s;
	}

	.program-info__item:nth-child(n + 4) {
		transition-delay: 0.44s;
	}

	.program-info.is-inview .program-info__item {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}