/**
 * NPC Events Slider — Press Room Hero
 * Brand: navy #00316B, orange #EB8800
 */

.nes-slider {
	--nes-navy: #00316B;
	--nes-navy-deep: #001E44;
	--nes-orange: #EB8800;
	--nes-orange-hot: #FF9D1F;

	position: relative;
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	background: var(--nes-navy-deep);
	font-family: inherit;
	box-sizing: border-box;
}

/* ===== Height presets ===== */
.nes-slider.is-height-compact   { height: clamp(540px, 72vh, 720px); }
.nes-slider.is-height-standard  { height: clamp(620px, 82vh, 860px); }
.nes-slider.is-height-tall      { height: clamp(720px, 90vh, 960px); }
.nes-slider.is-height-xtall     { height: clamp(820px, 95vh, 1060px); }

.nes-slider *,
.nes-slider *::before,
.nes-slider *::after { box-sizing: border-box; }

/* ===== Layout modifiers ===== */

.nes-slider.is-layout-fullwidth,
.nes-slider.is-layout-fullscreen {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	border-radius: 0;
}

.nes-slider.is-layout-fullscreen {
	height: 100vh;
	height: 100dvh;
	min-height: 720px;
}

.nes-empty {
	height: auto;
	padding: 48px;
	text-align: center;
	color: #fff;
}

/* ===== Slides ===== */
.nes-slides {
	position: absolute;
	inset: 0;
}

.nes-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease, visibility 0s linear .8s;
}

.nes-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .8s ease, visibility 0s linear 0s;
}

.nes-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 30%; /* bias slightly upward — better for face-heavy event photos */
	animation: nes-kenburns 20s ease-in-out infinite alternate;
	will-change: transform;
}

.nes-slide:not(.is-active) .nes-bg { animation: none; }

@keyframes nes-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

.nes-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(0,30,68,0) 25%, rgba(0,30,68,0.88) 75%, rgba(0,30,68,0.98) 100%),
		linear-gradient(90deg, rgba(0,30,68,0.78) 0%, rgba(0,30,68,0.15) 65%);
}

/* ===== Fallback (no featured image) ===== */
.nes-bg-fallback {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 30% 20%, rgba(235,136,0,0.25) 0%, transparent 55%),
		radial-gradient(ellipse at 80% 80%, rgba(235,136,0,0.15) 0%, transparent 50%),
		linear-gradient(135deg, var(--nes-navy) 0%, var(--nes-navy-deep) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px;
	overflow: hidden;
}

.nes-bg-fallback::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(45deg, transparent 0, transparent 40px, rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 41px);
	pointer-events: none;
}

.nes-fallback-title {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(48px, 8vw, 120px);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.04em;
	color: rgba(255,255,255,0.08);
	text-align: center;
	user-select: none;
	pointer-events: none;
	max-width: 90%;
	font-style: italic;
}

/* ===== Content ===== */
.nes-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 56px 64px 64px;
	color: #fff;
	max-width: 1040px;
}

/* Right-stack variant: make room on the right for the vertical thumbnail stack */
.nes-slider.has-right-stack .nes-content {
	padding-right: 188px; /* 112px thumb + 32px right offset + ~44px breathing room */
}

/* When countdown is active, push the content down so the headline doesn't collide */
.nes-slider.has-countdown .nes-content {
	padding-top: 180px;
}

.nes-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--nes-orange-hot);
	margin-bottom: 20px;
}

.nes-kicker::before {
	content: '';
	width: 32px;
	height: 1px;
	background: var(--nes-orange-hot);
}

.nes-headline {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 500;
	font-size: clamp(36px, 5.5vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.03em;
	margin: 0 0 24px;
	color: #fff;
}

.nes-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	font-size: 14px;
	margin-bottom: 32px;
	font-weight: 500;
	color: rgba(255,255,255,0.85);
}

.nes-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.nes-meta-item svg { opacity: 0.7; flex-shrink: 0; }

/* ===== Buttons ===== */
.nes-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.nes-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: 8px;
	cursor: pointer;
	border: none;
	transition: all .3s ease;
	text-decoration: none;
	line-height: 1;
}

.nes-btn:focus-visible {
	outline: 2px solid var(--nes-orange-hot);
	outline-offset: 3px;
}

.nes-btn-primary {
	background: var(--nes-orange);
	color: #fff;
}

.nes-btn-primary:hover,
.nes-btn-primary:focus-visible {
	background: var(--nes-orange-hot);
	transform: translateY(-2px);
	color: #fff;
}

.nes-btn-ghost {
	background: rgba(255,255,255,0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.3);
}

.nes-btn-ghost:hover,
.nes-btn-ghost:focus-visible {
	background: rgba(255,255,255,0.2);
	color: #fff;
}

/* ===== Counter ===== */
.nes-counter {
	position: absolute;
	top: 32px;
	right: 32px;
	z-index: 3;
	color: #fff;
	font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
	font-size: 13px;
	letter-spacing: 0.1em;
	font-weight: 500;
}

.nes-current {
	font-size: 20px;
	color: var(--nes-orange-hot);
}

.nes-sep {
	margin: 0 8px;
	opacity: 0.4;
}

/* ===== Countdown (top-left) ===== */
.nes-countdown {
	position: absolute;
	top: 48px;
	left: 64px;
	z-index: 3;
	color: #fff;
	animation: nes-countdown-in .7s ease .1s both;
}

@keyframes nes-countdown-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.nes-countdown-label {
	font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--nes-orange-hot);
	margin-bottom: 10px;
	opacity: 0.9;
}

.nes-countdown-units {
	display: flex;
	gap: 10px;
}

.nes-countdown-unit {
	background: rgba(255,255,255,0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 8px;
	padding: 10px 14px 8px;
	text-align: center;
	min-width: 64px;
}

.nes-countdown-num {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.nes-countdown-sub {
	font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--nes-orange-hot);
	margin-top: 5px;
	font-weight: 500;
}

/* Hide countdown once event has started / timestamp passed */
.nes-countdown.is-ended {
	display: none;
}

/* ===== Thumbnail strip — right-side vertical square stack (v1.4 default) ===== */
.nes-strip {
	position: absolute;
	right: 32px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 3;
	max-height: calc(100% - 64px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 2px;  /* keep focus ring from being clipped by overflow */
}
.nes-strip::-webkit-scrollbar { display: none; }

.nes-thumb {
	flex: 0 0 auto;
	width: 112px;
	height: 112px;           /* square 1:1 */
	background-color: rgba(255,255,255,0.06);
	background-size: cover;
	background-position: center;
	border: 2px solid rgba(255,255,255,0.15);
	border-radius: 10px;
	cursor: pointer;
	transition: opacity .35s ease, transform .35s ease, border-color .35s ease, box-shadow .35s ease, filter .35s ease;
	overflow: hidden;
	position: relative;
	opacity: 0.55;
	filter: saturate(0.8);
	padding: 0;
	font-family: inherit;
}

.nes-thumb:hover,
.nes-thumb:focus-visible {
	opacity: 0.9;
	transform: translateX(-4px);
	border-color: rgba(255,255,255,0.35);
	outline: none;
	filter: saturate(0.95);
}

.nes-thumb.is-active {
	opacity: 1;
	filter: saturate(1);
	border-color: var(--nes-orange);
	transform: translateX(-6px) scale(1.04);
	box-shadow: 0 14px 28px -10px rgba(0,0,0,0.55);
}

/* Subtle gradient overlay on all thumbs — gives images a slight darkening so the
   orange border and active state read clearly, matches the slider's dark feel. */
.nes-thumb-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,30,68,0.05) 0%, rgba(0,30,68,0.35) 100%);
	pointer-events: none;
	transition: opacity .3s ease;
}

.nes-thumb.is-active .nes-thumb-overlay {
	opacity: 0;
}

/* Fallback (no featured image) — branded gradient, no text */
.nes-thumb.no-image {
	background-image:
		radial-gradient(circle at 30% 25%, rgba(235,136,0,0.28) 0%, transparent 60%),
		radial-gradient(circle at 80% 80%, rgba(235,136,0,0.12) 0%, transparent 50%),
		linear-gradient(135deg, var(--nes-navy) 0%, var(--nes-navy-deep) 100%);
}

/* Progress bar along the bottom of the active thumb */
.nes-thumb-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--nes-orange);
	width: 0;
	z-index: 2;
}

.nes-thumb.is-active .nes-thumb-progress {
	animation: nes-progress var(--nes-delay, 6s) linear forwards;
}

@keyframes nes-progress {
	from { width: 0; }
	to   { width: 100%; }
}

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

/* Large tablet — right stack still works but tighter */
@media (max-width: 1180px) {
	.nes-slider.has-right-stack .nes-content { padding-right: 160px; }
	.nes-slider.has-countdown .nes-content { padding-top: 170px; }
	.nes-strip { right: 20px; }
	.nes-thumb { width: 96px; height: 96px; }
	.nes-countdown { top: 32px; left: 48px; }
}

/* Medium tablet — collapse right stack to bottom horizontal strip */
@media (max-width: 1024px) {
	.nes-slider.has-right-stack .nes-strip {
		right: 20px;
		left: 20px;
		top: auto;
		bottom: 20px;
		transform: none;
		flex-direction: row;
		max-height: none;
		overflow-y: visible;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 10px;
	}
	.nes-slider.has-right-stack .nes-thumb {
		width: 104px; height: 104px;
		scroll-snap-align: start;
	}
	.nes-slider.has-right-stack .nes-thumb:hover,
	.nes-slider.has-right-stack .nes-thumb:focus-visible {
		transform: translateY(-3px);
	}
	.nes-slider.has-right-stack .nes-thumb.is-active {
		transform: translateY(-4px) scale(1.02);
	}
	/* Content padding flips: remove right padding, add bottom for thumbs */
	.nes-slider.has-right-stack .nes-content {
		padding: 48px 40px 150px;
	}
	.nes-slider.has-countdown .nes-content { padding-top: 160px; }
}

/* Small tablet / large phone */
@media (max-width: 768px) {
	.nes-slider.is-height-compact   { height: clamp(460px, 82vh, 700px); }
	.nes-slider.is-height-standard  { height: clamp(520px, 88vh, 760px); }
	.nes-slider.is-height-tall      { height: clamp(580px, 92vh, 820px); }
	.nes-slider.is-height-xtall     { height: clamp(640px, 95vh, 900px); }

	.nes-slider { border-radius: 12px; }
	.nes-slider.is-layout-fullscreen {
		height: 100vh;
		height: 100dvh;
		border-radius: 0;
	}
	.nes-slider.is-layout-fullwidth { border-radius: 0; }

	.nes-content,
	.nes-slider.has-right-stack .nes-content {
		padding: 40px 28px 140px;
	}
	.nes-slider.has-countdown .nes-content { padding-top: 150px; }

	.nes-headline { font-size: clamp(30px, 7vw, 44px); }
	.nes-meta { gap: 10px 20px; font-size: 13px; }
	.nes-meta-item { flex-basis: auto; }
	.nes-counter { top: 20px; right: 20px; font-size: 12px; }
	.nes-current { font-size: 16px; }

	.nes-slider.has-right-stack .nes-strip {
		left: 16px; right: 16px; bottom: 16px;
		gap: 8px;
		padding-bottom: 2px;
	}
	.nes-slider.has-right-stack .nes-thumb {
		width: 92px; height: 92px;
	}

	/* Countdown scales down */
	.nes-countdown { top: 24px; left: 28px; }
	.nes-countdown-label { font-size: 9px; margin-bottom: 8px; letter-spacing: 0.18em; }
	.nes-countdown-unit { padding: 8px 10px 6px; min-width: 52px; }
	.nes-countdown-num { font-size: 22px; }
	.nes-countdown-sub { font-size: 8px; }
	.nes-countdown-units { gap: 8px; }
}

/* Phone */
@media (max-width: 480px) {
	.nes-slider.is-height-compact   { height: clamp(440px, 80vh, 620px); }
	.nes-slider.is-height-standard  { height: clamp(480px, 85vh, 680px); }
	.nes-slider.is-height-tall      { height: clamp(520px, 90vh, 740px); }
	.nes-slider.is-height-xtall     { height: clamp(560px, 94vh, 800px); }

	.nes-content,
	.nes-slider.has-right-stack .nes-content {
		padding: 32px 20px 130px;
	}
	.nes-slider.has-countdown .nes-content { padding-top: 140px; }

	.nes-kicker { font-size: 10px; margin-bottom: 14px; letter-spacing: 0.12em; }
	.nes-kicker::before { width: 22px; }
	.nes-headline { font-size: clamp(26px, 8vw, 36px); line-height: 1.05; margin-bottom: 18px; }
	.nes-meta { font-size: 12px; gap: 8px 16px; margin-bottom: 22px; }
	.nes-meta-item svg { width: 13px; height: 13px; }

	.nes-actions { flex-direction: column; align-items: stretch; gap: 10px; }
	.nes-btn {
		justify-content: center;
		padding: 13px 20px;
		font-size: 13px;
		letter-spacing: 0.05em;
	}

	.nes-slider.has-right-stack .nes-strip {
		left: 12px; right: 12px; bottom: 12px;
		gap: 6px;
	}
	.nes-slider.has-right-stack .nes-thumb {
		width: 76px; height: 76px;
		border-width: 1.5px;
	}

	/* Stronger gradient overlay so headlines stay readable on small screens */
	.nes-overlay {
		background:
			linear-gradient(180deg, rgba(0,30,68,0.1) 15%, rgba(0,30,68,0.9) 60%, rgba(0,30,68,0.98) 100%),
			linear-gradient(90deg, rgba(0,30,68,0.55) 0%, rgba(0,30,68,0.15) 80%);
	}

	.nes-countdown { top: 20px; left: 20px; }
	.nes-countdown-label { font-size: 8px; }
	.nes-countdown-unit { padding: 7px 9px 5px; min-width: 46px; }
	.nes-countdown-num { font-size: 19px; }
	.nes-countdown-units { gap: 6px; }
}

/* ===== Accessibility — respect reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
	.nes-slide,
	.nes-bg,
	.nes-thumb,
	.nes-thumb-progress,
	.nes-btn {
		animation: none !important;
		transition: none !important;
	}
}