/**
 * Zone Hero Widget
 *
 * Overrides and additions for the Zone Hero Elementor widget.
 * The base .hero, .hero-slides, .hero-slide, .hero-overlay,
 * .hero-content, and Ken Burns keyframes live in layouts.css.
 *
 * @package TAMUK_Foundation
 * @since   1.0.0
 */

/* ===========================
   Container Override
   =========================== */
.tamuk-zone-hero {
	min-height: 500px;
}

/* Remove the landing page's full-viewport default */
.tamuk-zone-hero.hero {
	min-height: 500px;
}

/* ===========================
   Overlay — the widget's inline rgba() handles the base
   blue tint. We layer a second coat via ::before and add
   a blur so the slideshow reads as texture, not detail.
   =========================== */
.tamuk-zone-hero .hero-overlay {
	/* Keep global blur off; we'll apply a radial blur layer in ::after
	   so edges stay sharper and the center remains readable. */
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.tamuk-zone-hero .hero-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 30, 100, 0.55);
	pointer-events: none;
}

.tamuk-zone-hero .hero-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Center-focused blur/tint around text area */
	background: radial-gradient(
		ellipse 58% 52% at 50% 48%,
		rgba(0, 30, 95, 0.28) 0%,
		rgba(0, 30, 95, 0.16) 45%,
		rgba(0, 30, 95, 0) 100%
	);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	mask-image: radial-gradient(
		ellipse 60% 55% at 50% 48%,
		black 0%,
		rgba(0, 0, 0, 0.75) 45%,
		transparent 100%
	);
	-webkit-mask-image: radial-gradient(
		ellipse 60% 55% at 50% 48%,
		black 0%,
		rgba(0, 0, 0, 0.75) 45%,
		transparent 100%
	);
	pointer-events: none;
}

/* ===========================
   Content
   =========================== */
.tamuk-zone-hero__content {
	max-width: var(--container-xl);
	margin: 0 auto;
	padding: var(--space-12) var(--gutter);
}

/* ===========================
   Heading
   =========================== */
.tamuk-zone-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);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.tamuk-zone-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);
}

/* ===========================
   Subtitle
   =========================== */
.tamuk-zone-hero__subtitle {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	font-weight: var(--weight-regular);
	color: rgba(255, 255, 255, 0.93);
	line-height: var(--leading-relaxed);
	max-width: 650px;
	margin: var(--space-4) auto var(--space-8);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* ===========================
   CTA Buttons Row
   =========================== */
.tamuk-zone-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

.tamuk-zone-hero__buttons .btn {
	text-decoration: none;
}

/* White outline button for dark hero backgrounds */
.tamuk-zone-hero__buttons .btn-outline-white {
	color: var(--tamuk-white);
	border: var(--border-width-2) solid rgba(255, 255, 255, 0.6);
	background: transparent;
	padding: var(--space-2) var(--space-6);
	border-radius: var(--radius-full);
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	transition: background var(--transition-fast), border-color var(--transition-fast);
}

.tamuk-zone-hero__buttons .btn-outline-white:hover,
.tamuk-zone-hero__buttons .btn-outline-white:focus {
	background: rgba(255, 255, 255, 0.15);
	border-color: var(--tamuk-white);
	color: var(--tamuk-white);
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 768px) {
	.tamuk-zone-hero__heading {
		font-size: var(--text-3xl);
	}

	.tamuk-zone-hero__subtitle {
		font-size: var(--text-base);
	}

	.tamuk-zone-hero__content {
		padding: var(--space-10) var(--gutter);
	}
}

@media (max-width: 480px) {
	.tamuk-zone-hero__heading {
		font-size: var(--text-2xl);
	}

	.tamuk-zone-hero__subtitle {
		font-size: var(--text-sm);
	}

	.tamuk-zone-hero__buttons {
		flex-direction: column;
		align-items: center;
	}
}