/**
 * Alumni Spotlights Widget
 *
 * @package TAMUK_Foundation
 * @since   1.0.0
 */

/* ===========================
   Wrapper
   =========================== */

.tas-wrap {
	background-color: var(--tamuk-gray-50, #F9FAFB);
}

.tas-wrap:not(.tas-wrap--has-banner) {
	padding-top: var(--space-16, 4rem);
}

.tas-wrap--has-banner .tas-inner {
	padding-top: var(--space-10, 2.5rem);
}

.tas-inner {
	max-width: var(--container-xl, 1280px);
	margin: 0 auto;
	padding: 0 var(--gutter, 1.5rem) var(--space-16, 4rem);
}

/* ===========================
   Banner
   =========================== */

.tas-banner {
	position: relative;
	width: 100%;
	height: 380px;
	overflow: hidden;
	background: linear-gradient(145deg, var(--tamuk-blue, #003399) 0%, #001a4d 100%);
}

img.tas-banner-img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
}

/* Bottom fade into page background */
.tas-banner::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100px;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(249, 250, 251, 0.35) 35%,
		rgba(249, 250, 251, 0.8) 70%,
		var(--tamuk-gray-50, #F9FAFB) 100%
	);
	pointer-events: none;
	z-index: 2;
}

/* Subtle top inset shadow */
.tas-banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
	z-index: 3;
	pointer-events: none;
}

/* --- Overlay mode: text over the banner image --- */

.tas-banner--overlay::after {
	height: 100%;
	background: linear-gradient(
		135deg,
		rgba(0, 20, 60, 0.85) 0%,
		rgba(0, 30, 80, 0.6) 45%,
		rgba(0, 20, 60, 0.35) 100%
	);
}

.tas-banner-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.tas-banner-content {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: left;
	padding: var(--space-12, 3rem) var(--space-12, 3rem);
	max-width: var(--container-xl, 1280px);
	margin: 0 auto;
}

.tas-banner-eyebrow {
	display: inline-block;
	font-family: var(--font-body, 'Source Sans 3', sans-serif);
	font-size: var(--text-xs, 0.8125rem);
	font-weight: var(--weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest, 0.1em);
	color: var(--tamuk-gold, #FCC10F);
	margin-bottom: var(--space-3, 0.75rem);
}

.tas-banner-title {
	font-family: var(--font-heading, 'Cinzel', Georgia, serif);
	font-size: clamp(var(--text-2xl, 1.875rem), 4.5vw, var(--text-5xl, 3.75rem));
	font-weight: var(--weight-bold, 700);
	color: var(--tamuk-white, #fff);
	line-height: var(--leading-tight, 1.15);
	letter-spacing: var(--tracking-wide, 0.025em);
	margin: 0;
	max-width: 700px;
}

.tas-banner-title::after {
	content: '';
	display: block;
	width: 60px;
	height: 4px;
	background: var(--tamuk-gold, #FCC10F);
	border-radius: 2px;
	margin-top: var(--space-4, 1rem);
}

.tas-banner-subtitle {
	font-family: var(--font-body, 'Source Sans 3', sans-serif);
	font-size: var(--text-base, 1.0625rem);
	line-height: var(--leading-relaxed, 1.75);
	color: rgba(255, 255, 255, 0.82);
	max-width: 520px;
	margin: var(--space-4, 1rem) 0 0;
}

/* ===========================
   Introduction (standalone, no banner overlay)
   =========================== */

.tas-intro {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--space-12, 3rem);
}

.tas-accent {
	display: block;
	width: 60px;
	height: 4px;
	background: var(--tamuk-gold, #FCC10F);
	border-radius: 2px;
	margin: 0 auto var(--space-5, 1.25rem);
}

.tas-heading {
	font-family: var(--font-heading);
	font-size: clamp(var(--text-2xl, 1.875rem), 3.5vw, var(--text-4xl, 3rem));
	font-weight: var(--weight-bold, 700);
	color: var(--tamuk-blue, #003399);
	letter-spacing: var(--tracking-wide, 0.025em);
	line-height: var(--leading-tight, 1.2);
	margin: 0 0 var(--space-4, 1rem);
}

.tas-subheading {
	font-family: var(--font-body);
	font-size: var(--text-md, 1.1875rem);
	line-height: var(--leading-relaxed, 1.75);
	color: var(--tamuk-gray-600, #4B5563);
	margin: 0;
}

/* ===========================
   Hero Card (Lead Spotlight)
   =========================== */

.tas-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--tamuk-white, #fff);
	border-radius: var(--radius-lg, 0.75rem);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
	margin-bottom: var(--space-10, 2.5rem);
}

.tas-hero:hover {
	box-shadow: var(--shadow-xl);
	transform: translateY(-2px);
}

/* Image side */
.tas-hero-image {
	position: relative;
	overflow: hidden;
	min-height: 360px;
}

.tas-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
	transition: transform 0.6s ease;
}

.tas-hero:hover .tas-hero-bg {
	transform: scale(1.04);
}

.tas-hero-bg--placeholder {
	background: linear-gradient(135deg, var(--tamuk-gray-100) 0%, var(--tamuk-gray-200) 100%);
}

/* Portrait hero: show the img tag properly */
.tas-hero--portrait .tas-hero-image {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, var(--tamuk-blue, #003399) 0%, #001a4d 100%);
	padding: var(--space-8, 2rem);
}

.tas-hero-img {
	display: block;
	max-height: 420px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	border-radius: var(--radius-md, 0.5rem);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.tas-hero--portrait:hover .tas-hero-img {
	/* No scale on portrait — looks off with contained images */
}

/* Category badge on image */
.tas-hero-cat {
	position: absolute;
	top: var(--space-4, 1rem);
	left: var(--space-4, 1rem);
	display: inline-block;
	padding: 5px 14px;
	background: var(--tamuk-gold, #FCC10F);
	color: var(--tamuk-blue-dark, #002266);
	font-family: var(--font-body);
	font-size: var(--text-xs, 0.8125rem);
	font-weight: var(--weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider, 0.05em);
	border-radius: var(--radius-full, 9999px);
	line-height: 1.3;
	z-index: 2;
}

/* Text side */
.tas-hero-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-10, 2.5rem) var(--space-8, 2rem);
}

.tas-hero-date {
	display: block;
	font-size: var(--text-xs, 0.8125rem);
	font-weight: var(--weight-semibold, 600);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider, 0.05em);
	color: var(--tamuk-gray-400, #9CA3AF);
	margin-bottom: var(--space-3, 0.75rem);
}

.tas-hero-title {
	font-family: var(--font-heading);
	font-size: clamp(var(--text-xl, 1.5rem), 2.5vw, var(--text-2xl, 1.875rem));
	font-weight: var(--weight-bold, 700);
	color: var(--tamuk-blue, #003399);
	line-height: var(--leading-tight, 1.2);
	margin: 0 0 var(--space-4, 1rem);
}

.tas-hero-excerpt {
	font-size: var(--text-base, 1.0625rem);
	line-height: var(--leading-relaxed, 1.75);
	color: var(--tamuk-gray-600, #4B5563);
	margin: 0 0 var(--space-6, 1.5rem);
}

.tas-hero-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: var(--text-sm, 0.9375rem);
	font-weight: var(--weight-bold, 700);
	color: var(--tamuk-gold-dark, #C89B00);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider, 0.05em);
	transition: color var(--transition-fast), gap var(--transition-fast);
}

.tas-hero:hover .tas-hero-link {
	color: var(--tamuk-blue, #003399);
	gap: 10px;
}

/* ===========================
   Supporting Grid
   =========================== */

.tas-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6, 1.5rem);
}

/* ===========================
   Grid Card
   =========================== */

.tas-card {
	display: flex;
	flex-direction: column;
	background: var(--tamuk-white, #fff);
	border-radius: var(--radius-lg, 0.75rem);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.tas-card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}

/* Card image */
.tas-card-image {
	position: relative;
	overflow: hidden;
	height: 220px;
}

.tas-card-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
	transition: transform 0.5s ease;
}

.tas-card:hover .tas-card-bg {
	transform: scale(1.04);
}

.tas-card-bg--placeholder {
	background: linear-gradient(135deg, var(--tamuk-gray-100) 0%, var(--tamuk-gray-200) 100%);
}

/* Portrait grid card */
.tas-card--portrait .tas-card-image {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, var(--tamuk-blue) 0%, #001a4d 100%);
	padding: var(--space-4, 1rem);
	height: 260px;
}

.tas-card-img {
	display: block;
	max-height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	border-radius: var(--radius-sm, 0.25rem);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.tas-card-cat {
	position: absolute;
	top: var(--space-3, 0.75rem);
	left: var(--space-3, 0.75rem);
	display: inline-block;
	padding: 4px 10px;
	background: var(--tamuk-gold, #FCC10F);
	color: var(--tamuk-blue-dark, #002266);
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: var(--weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider, 0.05em);
	border-radius: var(--radius-full, 9999px);
	line-height: 1.3;
	z-index: 2;
}

/* Card body */
.tas-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-5, 1.25rem) var(--space-5, 1.25rem) var(--space-6, 1.5rem);
}

.tas-card-date {
	display: block;
	font-size: 0.7rem;
	font-weight: var(--weight-semibold, 600);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider, 0.05em);
	color: var(--tamuk-gray-400, #9CA3AF);
	margin-bottom: var(--space-2, 0.5rem);
}

.tas-card-title {
	font-family: var(--font-heading);
	font-size: var(--text-base, 1.0625rem);
	font-weight: var(--weight-bold, 700);
	color: var(--tamuk-blue, #003399);
	line-height: var(--leading-snug, 1.35);
	margin: 0 0 var(--space-2, 0.5rem);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tas-card-excerpt {
	font-size: var(--text-sm, 0.9375rem);
	line-height: var(--leading-relaxed, 1.75);
	color: var(--tamuk-gray-600, #4B5563);
	margin: 0 0 auto;
	padding-bottom: var(--space-4, 1rem);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tas-card-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--text-xs, 0.8125rem);
	font-weight: var(--weight-bold, 700);
	color: var(--tamuk-gold-dark, #C89B00);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider, 0.05em);
	transition: color var(--transition-fast), gap var(--transition-fast);
}

.tas-card:hover .tas-card-link {
	color: var(--tamuk-blue, #003399);
	gap: 8px;
}

/* ===========================
   Pagination
   =========================== */

.tas-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-2, 0.5rem);
	margin-top: var(--space-12, 3rem);
	flex-wrap: wrap;
}

.tas-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 var(--space-3, 0.75rem);
	border-radius: var(--radius-full, 9999px);
	font-family: var(--font-body);
	font-size: var(--text-sm, 0.9375rem);
	font-weight: var(--weight-semibold, 600);
	text-decoration: none;
	color: var(--tamuk-gray-600, #4B5563);
	background: var(--tamuk-white, #fff);
	border: 1px solid var(--tamuk-gray-200, #E5E7EB);
	transition: all var(--transition-fast);
}

.tas-pagination a.page-numbers:hover {
	color: var(--tamuk-blue, #003399);
	border-color: var(--tamuk-blue, #003399);
	background: var(--tamuk-blue-lightest, #e6edf7);
}

.tas-pagination .page-numbers.current {
	background: var(--tamuk-blue, #003399);
	color: var(--tamuk-white, #fff);
	border-color: var(--tamuk-blue, #003399);
}

.tas-pagination .prev,
.tas-pagination .next {
	gap: 4px;
	font-weight: var(--weight-bold, 700);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider, 0.05em);
	font-size: var(--text-xs, 0.8125rem);
	padding: 0 var(--space-4, 1rem);
}

.tas-pagination .prev svg,
.tas-pagination .next svg {
	stroke: currentColor;
}

.tas-pagination .dots {
	border: none;
	background: none;
	color: var(--tamuk-gray-400, #9CA3AF);
	min-width: auto;
	padding: 0;
}

/* ===========================
   Empty State
   =========================== */

.tas-empty {
	text-align: center;
	color: var(--tamuk-gray-400, #9CA3AF);
	font-size: var(--text-base, 1rem);
	padding: var(--space-8, 2rem) 0;
}

/* ===========================
   Responsive
   =========================== */

@media (max-width: 960px) {
	.tas-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	/* Banner: override Elementor inline height, let image dictate size */
	.tas-banner {
		height: auto !important;
	}

	.tas-banner-img {
		position: relative !important;
		height: auto !important;
		width: 100%;
		max-height: none;
		object-fit: contain !important;
	}

	/* Remove decorative gradients on mobile */
	.tas-banner::after,
	.tas-banner::before {
		display: none !important;
	}

	.tas-banner-overlay {
		display: none;
	}

	/* Move overlay text below the image on mobile */
	.tas-banner--overlay {
		display: flex;
		flex-direction: column;
	}

	.tas-banner--overlay::after {
		display: none !important;
	}

	.tas-banner-content {
		position: relative;
		padding: var(--space-6, 1.5rem) var(--gutter, 1.5rem);
		background: var(--tamuk-gray-50, #F9FAFB);
		text-align: center;
		align-items: center;
	}

	.tas-banner-eyebrow {
		margin-bottom: var(--space-2, 0.5rem);
	}

	.tas-banner-title {
		font-size: var(--text-xl, 1.5rem);
		color: var(--tamuk-blue, #003399);
	}

	.tas-banner-title::after {
		margin: 0.5rem auto 0;
	}

	.tas-banner-subtitle {
		font-size: var(--text-sm, 0.9375rem);
		color: var(--tamuk-gray-600, #4B5563);
	}

	/* Reduce top spacing when banner is present */
	.tas-wrap--has-banner .tas-inner {
		padding-top: var(--space-6, 1.5rem);
	}

	/* Hero card */
	.tas-hero {
		grid-template-columns: 1fr;
	}

	.tas-hero-image {
		min-height: 280px;
	}

	.tas-hero--portrait .tas-hero-image {
		min-height: 0;
		padding: var(--space-6, 1.5rem);
	}

	.tas-hero-img {
		max-height: 320px;
	}

	.tas-hero-body {
		padding: var(--space-6, 1.5rem);
	}

	.tas-grid {
		grid-template-columns: 1fr;
	}
}

/* ===========================
   Elementor Editor
   =========================== */

.elementor-editor-active .tas-hero-image {
	min-height: 280px;
}

.elementor-editor-active .tas-card-image {
	min-height: 180px;
}