/**
 * GTHL Blocks — global design tokens + shared patterns.
 * Change colors / type / spacing / shared UI here once; block CSS stays layout-only.
 */

 :root {
	/* Colors — inherit Site Branding (--gen-*) when set by the theme */
	--gthl-color-navy: var(--gen-primary, var(--gen-navy, #003a80));
	--gthl-color-navy-hover: var(--gen-primary, var(--gen-navy, #003a80));
	--gthl-color-navy-soft: var(--gen-primary, var(--gen-navy, #003a80));
	--gthl-color-navy-mid: var(--gen-primary, var(--gen-navy, #003a80));
	--gthl-color-white: var(--gen-white, #ffffff);
	--gthl-color-black: var(--gen-body-color, var(--gen-black, #000000));
	--gthl-color-caption: var(--gen-gray-card, #f4f4f4);
	--gthl-color-muted: #e5e7eb;
	--gthl-color-border: #9aa8bc;
	--gthl-color-border-soft: #d9dee6;
	--gthl-color-text-muted: #334155;
	--gthl-color-surface: var(--gen-gray-light, #ededed);
	--gthl-color-card-bg: var(--gen-gray-card, #f4f4f4);
	--gthl-color-date: var(--gen-primary, var(--gen-navy, #003a80));
	--gthl-color-red: var(--gen-secondary, var(--gen-red, #e02826));
	--gthl-color-red-hover: var(--gen-button-bg-hover, #c42420);
	--gthl-color-primary: var(--gen-primary, var(--gen-navy, #003a80));
	--gthl-color-link: var(--gen-link-color, var(--gen-primary, #003a80));
	--gthl-color-link-hover: var(--gen-link-hover, var(--gen-primary, #003a80));
	--gthl-color-dot: #c5cdd8;
	--gthl-color-nav-icon: #4b5563;

	--gthl-font-family: var(--gen-font, "Roboto", sans-serif);

	/* Body copy — maps to theme style guide */
	--gthl-font-size-body: var(--gen-body, 16px);
	--gthl-font-size-body-secondary: var(--gen-body-secondary, 15px);
	--gthl-font-size-body-small: var(--gen-body-small, 14px);

	/* Typography — maps to theme style guide (H1–H6) */
	--gthl-font-size-h1: var(--gen-h1, 36px);
	--gthl-font-size-h2: var(--gen-h2, 28px);
	--gthl-font-size-h3: var(--gen-h3, 18px);
	--gthl-font-size-h4: var(--gen-h4, 17px);
	--gthl-font-size-h5: var(--gen-h5, 16px);
	--gthl-font-size-h6: var(--gen-h6, 14px);
	--gthl-font-size-xs: 0.6875rem; /* 11px — UI only */
	--gthl-font-size-sm: 0.8125rem; /* 13px — UI only */
	--gthl-font-size-md: var(--gthl-font-size-body-secondary);
	--gthl-font-size-base: var(--gthl-font-size-body-secondary);
	--gthl-font-size-base1: var(--gthl-font-size-body);
	--gthl-font-size-lg: var(--gthl-font-size-h3);
	--gthl-font-size-xl: 1.25rem; /* 20px — legacy */
	--gthl-font-size-2xl: 1.375rem; /* 22px — legacy */
	--gthl-font-size-3xl: var(--gthl-font-size-h1);
	--gthl-font-size-4xl: var(--gthl-font-size-h2);
	--gthl-font-size-heading: var(--gthl-font-size-h2);
	--gthl-font-size-heading-4rem: var(--gthl-font-size-h2);
	--gthl-font-size-section: var(--gthl-font-size-h2);
	--gthl-font-weight-light: 300;
	--gthl-font-weight-regular: 400;
	--gthl-font-weight-medium: 500;
	--gthl-font-weight-medium-1: 600;
	--gthl-font-weight-bold: 700;
	--gthl-letter-spacing-tight: 0.02em;
	--gthl-letter-spacing-wide: 0.04em;
	--gthl-letter-spacing-wider: 0.06em;
	--gthl-line-height-tight: 1.15;
	--gthl-line-height-snug: 1.25;
	--gthl-line-height-normal: 1.5;

	/* Spacing */
	--gthl-space-xs: 0.25rem;
	--gthl-space-sm: 0.5rem;
	--gthl-space-md: 0.875rem;
	--gthl-space-lg: 1.25rem;
	--gthl-space-xl: 1.5rem;
	--gthl-space-2xl: 2rem;
	--gthl-space-3xl: 3rem;

	/* Layout */
	--gthl-radius-sm: 3px;
	--gthl-radius-md: 4px;
	--gthl-radius-lg: 14px;
	--gthl-radius-card: 16px;
	--gthl-radius-pill: 999px;
	--gthl-shadow-card: 0 10px 28px rgba(0, 32, 91, 0.12);
	--gthl-shadow-card-soft: 0 4px 16px rgba(0, 32, 91, 0.08);
	--gthl-shadow-card-hover: 0 4px 4px rgba(0, 32, 91, 0.08);
	--gthl-shadow-nav: 0 4px 14px rgba(0, 0, 0, 0.18);
	--gthl-ad-width: 300px;
	--gthl-ad-medium-height: 250px;
	--gthl-media-ratio: 21 / 8;
	--gthl-media-card-ratio: 16 / 9;

	/* Buttons / CTAs */
	--gthl-btn-min-height: 2.75rem;
	--gthl-btn-padding-y: 0.7rem;
	--gthl-btn-padding-x: 1.45rem;
	--gthl-cta-bar-min-height: 4.75rem;
	--gthl-cta-label-size: var(--gthl-font-size-h4);
	--gthl-cta-title-size: var(--gthl-font-size-h3);
}

/* Shared base for every GTHL block root */
.gthl-events-carousel,
.gthl-program-updates,
.gthl-partners,
.gthl-news,
.gthl-news-grid,
.gthl-teams-grid,
.gthl-about-us,
.gthl-board-directors,
.gthl-alumni {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	font-family: var(--gthl-font-family);
	color: var(--gthl-color-navy);
}

.gthl-events-carousel *,
.gthl-events-carousel *::before,
.gthl-events-carousel *::after,
.gthl-program-updates *,
.gthl-program-updates *::before,
.gthl-program-updates *::after,
.gthl-partners *,
.gthl-partners *::before,
.gthl-partners *::after,
.gthl-news *,
.gthl-news *::before,
.gthl-news *::after,
.gthl-news-grid *,
.gthl-news-grid *::before,
.gthl-news-grid *::after,
.gthl-teams-grid *,
.gthl-teams-grid *::before,
.gthl-teams-grid *::after,
.gthl-about-us *,
.gthl-about-us *::before,
.gthl-about-us *::after,
.gthl-board-directors *,
.gthl-board-directors *::before,
.gthl-board-directors *::after,
.gthl-alumni *,
.gthl-alumni *::before,
.gthl-alumni *::after {
	box-sizing: border-box;
}

/* Shared empty / editor placeholder */
.gthl-events-carousel__empty,
.gthl-program-updates__empty,
.gthl-partners__empty,
.gthl-news__empty,
.gthl-news-grid__empty,
.gthl-about-us__empty,
.gthl-board-directors__empty,
.gthl-alumni__empty {
	padding: var(--gthl-space-xl) var(--gthl-space-lg);
	border: 1px dashed var(--gthl-color-border);
	background: var(--gthl-color-surface);
	color: var(--gthl-color-navy);
	font-size: var(--gthl-font-size-body-secondary);
	text-align: center;
}

.gthl-events-carousel__empty p,
.gthl-program-updates__empty p,
.gthl-partners__empty p,
.gthl-news__empty p,
.gthl-news-grid__empty p,
.gthl-about-us__empty p,
.gthl-board-directors__empty p,
.gthl-alumni__empty p {
	margin: 0 0 var(--gthl-space-sm);
}

.gthl-events-carousel__empty p:last-child,
.gthl-program-updates__empty p:last-child,
.gthl-partners__empty p:last-child,
.gthl-news__empty p:last-child,
.gthl-news-grid__empty p:last-child,
.gthl-about-us__empty p:last-child,
.gthl-board-directors__empty p:last-child,
.gthl-alumni__empty p:last-child {
	margin-bottom: 0;
}

/* Shared section heading (CALLOUTS, PARTNERS, NEWS, BOD, ALUMNI, etc.) */
.gthl-section-heading,
.gthl-program-updates__heading,
.gthl-partners__heading,
.gthl-news__heading,
.gthl-board-directors__heading,
.gthl-alumni__heading {
	margin: 0 0 var(--gthl-space-xl);
	padding: 0;
	font-family: var(--gthl-font-family);
	font-size: var(--gen-h2, var(--gthl-font-size-h2));
	font-weight: var(--gthl-font-weight-bold);
	line-height: var(--gthl-line-height-tight);
	text-transform: uppercase;
	color: var(--gen-heading-color, var(--gthl-color-navy));
}

/* Shared person cards (Board of Directors + Alumni) */
.gthl-board-directors__card,
.gthl-alumni__card {
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 0;
	width: 100%;
	background: var(--gthl-color-white);
	border: 1px solid var(--gthl-color-border-soft);
	border-radius: var(--gthl-radius-lg);
	box-shadow: none;
	overflow: hidden;
	text-align: center;
	transition: box-shadow 0.2s ease;
}

.gthl-board-directors__card:hover,
.gthl-alumni__card:hover {
	box-shadow: var(--gthl-shadow-card-hover);
}

.gthl-board-directors__photo,
.gthl-alumni__photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	margin: 0;
	background: var(--gthl-color-surface);
	overflow: hidden;
}

.gthl-board-directors__photo img,
.gthl-alumni__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gthl-board-directors__photo--dummy,
.gthl-alumni__photo--dummy {
	display: none;
}

.gthl-board-directors__body,
.gthl-alumni__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 auto;
	padding: 1.35rem 1.25rem 1.75rem;
	gap: 0;
}

.gthl-board-directors__card--no-photo .gthl-board-directors__body,
.gthl-alumni__card--no-photo .gthl-alumni__body {
	padding: var(--gthl-space-2xl) var(--gthl-space-lg);
}

.gthl-board-directors__name,
.gthl-alumni__name {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	margin: 0;
	padding: 0 0 1rem;
	width: 100%;
	font-family: var(--gthl-font-family);
	line-height: 1.1;
	letter-spacing: var(--gthl-letter-spacing-wide);
	text-transform: uppercase;
	color: var(--gen-heading-color, var(--gthl-color-navy));
}

.gthl-board-directors__first,
.gthl-board-directors__last,
.gthl-alumni__first,
.gthl-alumni__last {
	display: block;
	width: 100%;
	text-align: center;
	font-size: var(--gthl-font-size-h3);
	font-weight: var(--gthl-font-weight-medium);
}

/* Shared red pill pagination (BOD / Alumni) */
.gthl-board-directors__pagination,
.gthl-alumni__pagination {
	display: flex;
	justify-content: center;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid var(--gthl-color-border-soft);
}

.gthl-board-directors__pagination-bar,
.gthl-alumni__pagination-bar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.15rem 0.85rem;
	min-height: 2.35rem;
	padding: 0.45rem 1.35rem;
	border-radius: var(--gthl-radius-pill);
	background: var(--gthl-color-red);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--gthl-color-red) 25%, transparent);
}

.gthl-board-directors__pagination-bar .page-numbers,
.gthl-alumni__pagination-bar .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.1rem;
	padding: 0.15rem 0.1rem;
	font-family: var(--gthl-font-family);
	font-size: 0.95rem;
	font-weight: var(--gthl-font-weight-bold);
	line-height: 1;
	color: var(--gthl-color-white);
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.gthl-board-directors__pagination-bar a.page-numbers:hover,
.gthl-board-directors__pagination-bar a.page-numbers:focus-visible,
.gthl-alumni__pagination-bar a.page-numbers:hover,
.gthl-alumni__pagination-bar a.page-numbers:focus-visible {
	opacity: 1;
	transform: scale(1.08);
	outline: none;
	color: var(--gthl-color-white);
}

.gthl-board-directors__pagination-bar .page-numbers.current,
.gthl-alumni__pagination-bar .page-numbers.current {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Shared primary button look */
.gthl-events-carousel__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--gthl-space-3xl);
	padding: var(--gthl-space-lg) var(--gthl-space-2xl);
	border: none;
	border-radius: var(--gthl-radius-md);
	background: var(--gen-button-bg, var(--gthl-color-navy));
	color: var(--gen-button-text, var(--gthl-color-white));
	font-family: var(--gthl-font-family);
	font-size: var(--gthl-font-size-body);
	font-weight: var(--gthl-font-weight-bold);
	letter-spacing: var(--gthl-letter-spacing-wider);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.gthl-events-carousel__cta:hover,
.gthl-events-carousel__cta:focus-visible {
	background: var(--gen-button-bg-hover, var(--gthl-color-navy-hover));
	color: var(--gen-button-text-hover, var(--gthl-color-white));
	outline: none;
}

/* Shared card media frame */
.gthl-news__media,
.gthl-news-grid__media {
	position: relative;
	width: 100%;
	aspect-ratio: var(--gthl-media-card-ratio);
	overflow: hidden;
	background: var(--gthl-color-muted);
}

.gthl-news__media img,
.gthl-news-grid__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.gthl-events-carousel__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Shared navy media placeholder */
.gthl-news__placeholder,
.gthl-news-grid__placeholder,
.gthl-events-carousel__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(
		135deg,
		var(--gthl-color-navy) 0%,
		var(--gthl-color-navy-mid) 55%,
		var(--gthl-color-navy) 100%
	);
}

/* Shared card date + title type */
.gthl-news__date,
.gthl-news-grid__date {
	margin: 0;
	font-family: var(--gthl-font-family);
	font-size: var(--gthl-font-size-body);
	font-weight: var(--gthl-font-weight-medium);
	line-height: var(--gthl-line-height-snug);
	color: var(--gthl-color-date);
}

.gthl-news__title,
.gthl-news-grid__title {
	margin: 0;
	font-family: var(--gthl-font-family);
	font-size: var(--gthl-font-size-h3);
	font-weight: var(--gthl-font-weight-bold);
	line-height: var(--gthl-line-height-snug);
	color: var(--gthl-color-navy);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 782px) {
	.gthl-section-heading,
	.gthl-program-updates__heading,
	.gthl-partners__heading,
	.gthl-news__heading,
	.gthl-news-grid__heading,
	.gthl-teams-grid__heading,
	.gthl-board-directors__heading,
	.gthl-alumni__heading {
		font-size: var(--gen-h2, var(--gthl-font-size-h2));
	}
}

@media (max-width: 600px) {
	.gthl-board-directors__body,
	.gthl-alumni__body {
		padding: 1rem 0.75rem 1.25rem;
	}

	.gthl-board-directors__first,
	.gthl-board-directors__last,
	.gthl-alumni__first,
	.gthl-alumni__last {
		font-size: var(--gthl-font-size-h5);
	}
}

@media (max-width: 480px) {
	.gthl-news__media,
	.gthl-news-grid__media {
		aspect-ratio: 16 / 11;
	}
}