/* ==========================================================================
   Easter 2026 Hero — Premium Theme
   ========================================================================== */

:root {
	--eh-primary: #26291c;
	--eh-accent: #e05b37;
	--eh-min-height: 92vh;
	--eh-text: #ece8de;
	--eh-text-soft: #b1bbe0;
	--eh-card-opacity: 0.09;
	--eh-panel-blur: 16px;
	--eh-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--eh-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.easter-hero,
.easter-hero * {
	box-sizing: border-box;
}

.easter-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--eh-min-height);
	overflow: hidden;
	font-family: var(--eh-font-body);
	color: var(--eh-text);
	transition: opacity 0.7s ease, max-height 0.7s ease;
}

.easter-hero.easter-hero--hidden {
	opacity: 0;
	max-height: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.easter-hero__bg-gradient,
.easter-hero__bg-image,
.easter-hero__bg-video-wrap,
.easter-hero__overlay,
.easter-hero__grain,
.easter-hero__halo,
.easter-hero__glow {
	position: absolute;
	inset: 0;
}

.easter-hero__bg-gradient {
	z-index: 0;
	background:
		radial-gradient(75% 60% at 50% 18%, rgba(var(--eh-accent-rgb), 0.24) 0%, transparent 70%),
		linear-gradient(155deg, rgba(var(--eh-primary-rgb), 0.96) 0%, #1d2116 52%, #141710 100%);
}

.easter-hero__bg-image {
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.easter-hero__bg-video-wrap {
	z-index: 0;
	overflow: hidden;
}

.easter-hero__bg-video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transform: scale(1.01);
	backface-visibility: hidden;
	opacity: var(--eh-video-opacity, 0.82);
}

.easter-hero--bg-image .easter-hero__bg-gradient {
	display: none;
}

.easter-hero--bg-both .easter-hero__bg-image {
	opacity: 0.36;
}

.easter-hero--bg-video .easter-hero__bg-gradient {
	display: none;
}

.easter-hero--bg-video-both .easter-hero__bg-video {
	opacity: var(--eh-video-opacity-soft, 0.68);
}

.easter-hero__overlay {
	z-index: 1;
	background: linear-gradient(180deg, rgba(18, 20, 14, 0.2) 0%, rgba(18, 20, 14, 0.74) 100%);
}

.easter-hero--bg-gradient .easter-hero__overlay {
	background: linear-gradient(180deg, rgba(18, 20, 14, 0.15) 0%, rgba(18, 20, 14, 0.58) 100%);
}

.easter-hero__grain {
	z-index: 2;
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 0.35px, transparent 0.35px);
	background-size: 3px 3px;
	opacity: 0.13;
	pointer-events: none;
}

.easter-hero__halo {
	z-index: 2;
	inset: auto;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(980px, 100vw);
	height: 560px;
	border-radius: 50%;
	filter: blur(6px);
	background: radial-gradient(
		circle at 50% 22%,
		rgba(var(--eh-accent-rgb), 0.30) 0%,
		rgba(var(--eh-accent-rgb), 0.12) 34%,
		rgba(var(--eh-accent-rgb), 0.03) 60%,
		transparent 78%
	);
	pointer-events: none;
}

.easter-hero__glow {
	z-index: 2;
	inset: auto;
	left: 50%;
	bottom: -160px;
	transform: translateX(-50%);
	width: min(860px, 100vw);
	height: 420px;
	background: radial-gradient(ellipse, rgba(var(--eh-accent-rgb), 0.16) 0%, transparent 72%);
	pointer-events: none;
}

.easter-hero__content {
	position: relative;
	z-index: 10;
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 80px 24px;
	align-items: stretch;
}

.easter-hero__intro {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
}

.easter-hero__intro-panel {
	display: inline-flex;
	flex-direction: column;
	gap: 8px;
	align-self: center;
	padding: 11px 14px;
	border-radius: 999px;
	background: rgba(5, 12, 27, 0.5);
	border: 1px solid rgba(var(--eh-accent-rgb), 0.35);
	backdrop-filter: blur(calc(var(--eh-panel-blur) * 0.55));
	-webkit-backdrop-filter: blur(calc(var(--eh-panel-blur) * 0.55));
	margin-bottom: 24px;
}

.easter-hero__eyebrow {
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(var(--eh-accent-rgb), 0.95);
}

.easter-hero__next-up {
	font-size: 0.77rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: #b1bbe0;
}

.easter-hero__heading {
	font-family: var(--eh-font-heading);
	font-size: clamp(3.05rem, 6.9vw, 6rem);
	line-height: 0.95;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0 0 18px;
	text-wrap: balance;
}

.easter-hero__subtitle {
	margin: 0;
	max-width: 700px;
	font-size: clamp(1rem, 1.8vw, 1.27rem);
	line-height: 1.62;
	color: var(--eh-text-soft);
}

.easter-hero__verse {
	margin-top: 22px;
	max-width: 700px;
	padding-left: 0;
	border-left: 0;
	font-family: var(--eh-font-heading);
	font-size: 1.02rem;
	font-style: italic;
	line-height: 1.55;
	color: #ece8de;
}

.easter-hero__schedule {
	display: grid;
	gap: 16px;
	max-width: 1100px;
	margin: 0 auto;
	width: 100%;
}

.easter-hero__events {
	display: grid;
	gap: 16px;
}

.easter-hero--cards-layout-horizontal .easter-hero__events {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.easter-hero__card {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: rgba(255, 255, 255, var(--eh-card-opacity));
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(var(--eh-panel-blur));
	-webkit-backdrop-filter: blur(var(--eh-panel-blur));
	transition: transform 0.3s ease, border-color 0.3s ease, opacity 0.55s ease;
	animation: ehFadeInUp 0.55s ease both;
}

.easter-hero__card:hover {
	transform: translateY(-4px);
		border-color: rgba(var(--eh-accent-rgb), 0.58);
}

.easter-hero__card--past {
	opacity: 0;
	transform: translateY(10px) scale(0.98);
	pointer-events: none;
}

.easter-hero__card-accent {
	height: 2px;
	background: linear-gradient(90deg, rgba(var(--eh-accent-rgb), 0.14), rgba(var(--eh-accent-rgb), 0.98), rgba(var(--eh-accent-rgb), 0.14));
}

.easter-hero__card-inner {
	padding: 20px 20px 18px;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		'icon title'
		'icon tagline'
		'meta meta'
		'countdown countdown';
	column-gap: 12px;
	row-gap: 3px;
}

.easter-hero--cards-align-left .easter-hero__card-inner {
	text-align: left;
}

.easter-hero--cards-align-left .easter-hero__card-icon {
	justify-self: start;
}

.easter-hero--cards-align-left .easter-hero__card-meta {
	justify-content: flex-start;
}

.easter-hero--cards-align-center .easter-hero__card-inner,
.easter-hero--cards-align-right .easter-hero__card-inner {
	grid-template-columns: 1fr;
	grid-template-areas:
		'icon'
		'title'
		'tagline'
		'meta'
		'countdown';
}

.easter-hero--cards-align-center .easter-hero__card-inner {
	text-align: center;
}

.easter-hero--cards-align-center .easter-hero__card-icon {
	justify-self: center;
}

.easter-hero--cards-align-center .easter-hero__card-meta {
	justify-content: center;
}

.easter-hero--cards-align-right .easter-hero__card-inner {
	text-align: right;
}

.easter-hero--cards-align-right .easter-hero__card-icon {
	justify-self: end;
}

.easter-hero--cards-align-right .easter-hero__card-meta {
	justify-content: flex-end;
}

.easter-hero__card-icon {
	grid-area: icon;
	width: 42px;
	height: 42px;
	color: rgba(var(--eh-accent-rgb), 0.95);
}

.easter-hero__icon-svg {
	width: 100%;
	height: 100%;
}

.easter-hero__icon-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.easter-hero__card-title {
	grid-area: title;
	margin: 0;
	font-family: var(--eh-font-heading);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.08;
}

.easter-hero__card-tagline {
	grid-area: tagline;
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: rgba(var(--eh-accent-rgb), 0.9);
}

.easter-hero__card-date,
.easter-hero__card-time,
.easter-hero__card-tz {
	margin: 0;
	font-size: 0.92rem;
	color: #b1bbe0;
}

.easter-hero__card-time {
	font-size: 1.02rem;
	font-weight: 700;
	color: #ffffff;
}

.easter-hero__card-tz {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #a8b9d8;
}

.easter-hero__card-meta {
	grid-area: meta;
	display: flex;
	gap: 10px;
	align-items: baseline;
	margin-top: 8px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.easter-hero__countdown {
	grid-area: countdown;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.easter-hero__countdown-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 4px;
	border-radius: 11px;
	background: rgba(3, 8, 20, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.easter-hero__countdown-value {
	font-size: 1.16rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.easter-hero__countdown-label {
	margin-top: 2px;
	font-size: 0.58rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #b1bbe0;
}

.easter-hero__countdown--live {
	grid-template-columns: 1fr;
}

.easter-hero__countdown--live .easter-hero__countdown-unit {
	background: rgba(var(--eh-accent-rgb), 0.2);
	border-color: rgba(var(--eh-accent-rgb), 0.45);
}

.easter-hero__countdown--live .easter-hero__countdown-value {
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ece8de;
}

.easter-hero__cta {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-top: 24px;
	padding: 15px 30px;
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #26291c;
	background: linear-gradient(135deg, #e05b37 0%, #7d181d 100%);
	box-shadow: 0 12px 28px rgba(var(--eh-accent-rgb), 0.32);
	transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease;
}

.easter-hero__cta:hover,
.easter-hero__cta:focus {
	color: #26291c;
	text-decoration: none;
	filter: brightness(1.07);
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(var(--eh-accent-rgb), 0.42);
}

@keyframes ehFadeInUp {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 1080px) {
	.easter-hero__content {
		grid-template-columns: 1fr;
		gap: 30px;
		padding: 68px 22px 72px;
	}

	.easter-hero__intro {
		text-align: center;
		align-items: center;
	}

	.easter-hero__intro-panel {
		align-self: center;
	}

	.easter-hero__subtitle,
	.easter-hero__verse {
		max-width: 700px;
	}

	.easter-hero__verse {
		border-left: 0;
		padding-left: 0;
	}

	.easter-hero__schedule {
		max-width: 760px;
		margin: 0 auto;
		width: 100%;
	}

	.easter-hero--cards-layout-horizontal .easter-hero__events {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.easter-hero__content {
		padding: 58px 16px 60px;
	}

	.easter-hero__heading {
		font-size: clamp(2.5rem, 13vw, 4.2rem);
	}

	.easter-hero__events {
		gap: 14px;
	}

	.easter-hero--cards-layout-horizontal .easter-hero__events {
		grid-template-columns: 1fr;
	}

	.easter-hero__card-inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			'icon'
			'title'
			'tagline'
			'meta'
			'countdown';
		row-gap: 6px;
		padding: 20px 16px 16px;
	}

	.easter-hero__card-icon {
		margin-bottom: 2px;
	}

	.easter-hero__card-meta {
		margin-top: 4px;
		margin-bottom: 10px;
		gap: 8px;
	}

	.easter-hero__countdown-value {
		font-size: 1.05rem;
	}

}

@media (max-width: 420px) {
	.easter-hero__countdown {
		gap: 5px;
	}

	.easter-hero__countdown-unit {
		padding: 7px 2px;
	}

	.easter-hero__countdown-label {
		font-size: 0.53rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.easter-hero,
	.easter-hero * {
		animation: none !important;
		transition: none !important;
	}
}