/**
 * GTHL Callouts — layout only.
 * Class names keep gthl-program-updates for existing page CSS.
 * Tokens / heading / empty: assets/css/gthl-blocks-global.css
 */

.gthl-program-updates {
	padding: 0;
}

.gthl-program-updates__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gthl-space-lg);
	align-items: start;
}

.gthl-program-updates--with-ad .gthl-program-updates__layout {
	/* Ad column = 300px unit + 10px frame padding each side + 1px border each side (same as post pages). */
	grid-template-columns: minmax(0, 1fr) calc(var(--gthl-ad-width) + 22px);
	column-gap: var(--gthl-space-xl);
	row-gap: var(--gthl-space-lg);
	margin-top: var(--gthl-space-lg);
}

.gthl-program-updates__list {
	display: flex;
	flex-direction: column;
	gap: var(--gthl-space-lg);
	min-width: 0;
}

.gthl-program-updates__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	gap: var(--gthl-space-sm);
	width: 100%;
	min-height: var(--gthl-cta-bar-min-height);
	padding: var(--gthl-space-lg) var(--gthl-space-xl);
	border: none;
	border-radius: var(--gthl-radius-lg);
	background: var(--gthl-color-navy);
	color: var(--gthl-color-white);
	text-align: center;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.gthl-program-updates__item:hover,
.gthl-program-updates__item:focus-visible {
	opacity: 0.85;
	color: var(--gthl-color-white);
	outline: none;
}

.gthl-program-updates__label {
	display: block;
	margin: 0;
	font-family: var(--gthl-font-family);
	font-size: var(--gthl-cta-label-size);
	font-weight: var(--gthl-font-weight-medium);
	letter-spacing: var(--gthl-letter-spacing-wider);
	line-height: var(--gthl-line-height-snug);
	text-transform: uppercase;
	color: var(--gthl-color-white);
}

.gthl-program-updates__title {
	display: block;
	margin: 0;
	font-family: var(--gthl-font-family);
	font-size: var(--gthl-cta-title-size);
	font-weight: var(--gthl-font-weight-bold);
	letter-spacing: var(--gthl-letter-spacing-tight);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--gthl-color-white);
}

.gthl-program-updates__ad {
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 0;
	justify-self: stretch;
	align-self: start;
	overflow: visible;
	box-sizing: border-box;
}

.gthl-program-updates__ad .gthl-ad-slot,
.gthl-program-updates__ad .gthl-ad-slot__unit {
	width: 100%;
	height: var(--gthl-ad-medium-height, 250px);
}

.gthl-program-updates__ad-link {
	display: block;
	width: 100%;
	height: auto;
	line-height: 0;
}

.gthl-program-updates__ad img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}

.gthl-program-updates__google-ad {
	width: 100%;
	height: 100%;
	min-height: 0;
	background: var(--gthl-color-caption);
}

.gthl-program-updates__ad-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gthl-space-xs);
	width: 100%;
	height: 100%;
	padding: var(--gthl-space-md);
	border: 1px dashed var(--gthl-color-border);
	color: var(--gthl-color-navy);
	text-align: center;
	font-weight: var(--gthl-font-weight-bold);
	font-size: var(--gthl-font-size-md);
	box-sizing: border-box;
}

.gthl-program-updates__ad-placeholder small {
	display: block;
	font-size: var(--gthl-font-size-xs);
	font-weight: var(--gthl-font-weight-regular);
	word-break: break-all;
	opacity: 0.75;
}

@media (max-width: 1024px) {
	.gthl-program-updates--with-ad .gthl-program-updates__layout {
		column-gap: var(--gthl-space-lg);
	}
}

@media (max-width: 782px) {
	.gthl-program-updates--with-ad .gthl-program-updates__layout {
		grid-template-columns: 1fr;
	}

	.gthl-program-updates__heading {
		margin-bottom: var(--gthl-space-md);
	}

	.gthl-program-updates__ad {
		width: min(calc(var(--gthl-ad-width) + 22px), 100%);
		max-width: calc(var(--gthl-ad-width) + 22px);
		height: auto;
		aspect-ratio: auto;
		justify-self: center;
	}
}

@media (max-width: 480px) {
	.gthl-program-updates__item {
		padding: var(--gthl-space-md);
		border-radius: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gthl-program-updates__item {
		transition: none;
	}
}