/**
 * Section Hero Widget
 *
 * Full-width banner with heading, description, optional background image
 * with overlay. Uses theme design tokens from variables.css.
 *
 * @package TAMUK_Foundation
 * @since   1.0.0
 */

/* ===========================
   Banner Container
   =========================== */
.tamuk-section-hero {
	position: relative;
	background-color: var(--tamuk-blue);
	padding: var(--space-16) var(--space-8);
	overflow: hidden;
	border-bottom: var(--border-width-4) solid var(--tamuk-gold);
}

.tamuk-section-hero--has-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ===========================
   Image Overlay
   =========================== */
.tamuk-section-hero__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--tamuk-blue);
	opacity: 0.85;
}

/* ===========================
   Content Wrapper
   =========================== */
.tamuk-section-hero__content {
	position: relative;
	z-index: var(--z-above);
	max-width: var(--container-xl);
	margin: 0 auto;
	text-align: center;
}

/* ===========================
   Heading
   =========================== */
.tamuk-section-hero__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-4xl);
	color: var(--tamuk-white);
	letter-spacing: var(--tracking-wider);
	line-height: var(--leading-tight);
	margin: 0 0 var(--space-4);
	position: relative;
	display: inline-block;
	padding-bottom: var(--space-4);
}

.tamuk-section-hero__heading::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 4rem;
	height: 3px;
	background: var(--tamuk-gold);
	border-radius: var(--radius-full);
}

/* ===========================
   Description
   =========================== */
.tamuk-section-hero__desc {
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: var(--text-base);
	color: var(--tamuk-blue-lightest);
	line-height: var(--leading-relaxed);
	max-width: 750px;
	margin: var(--space-6) auto 0;
}

.tamuk-section-hero__desc p {
	margin: 0 0 var(--space-4);
}

.tamuk-section-hero__desc p:last-child {
	margin-bottom: 0;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 768px) {
	.tamuk-section-hero {
		padding: var(--space-10) var(--space-6);
	}

	.tamuk-section-hero__heading {
		font-size: var(--text-3xl);
	}
}

@media (max-width: 480px) {
	.tamuk-section-hero {
		padding: var(--space-8) var(--space-4);
	}

	.tamuk-section-hero__heading {
		font-size: var(--text-2xl);
	}

	.tamuk-section-hero__desc {
		font-size: var(--text-sm);
	}
}