/* ─────────────────────────────────────────
   Next Digital — Card stack slider (shared)
   Used by the home + single service templates to display the services
   carousel. Identical CSS, identical markup, identical JS (card-stack.js).
───────────────────────────────────────── */

.nd-services-slider-header {
	max-width: 980px;
	margin: 0 auto 48px;
	padding: 0 16px 56px;
	text-align: center;
}
.nd-services-slider-header .nd-s-title {
	font-size: clamp(40px, 5.5vw, 72px);
	font-weight: 400;
	letter-spacing: -2px;
	line-height: 1.05;
}
.nd-services-slider-header .nd-s-sub {
	font-size: 15px; font-weight: 300;
	color: oklch(55% 0.05 210);
	max-width: 520px;
	margin: 22px auto 0;
	line-height: 1.65;
}

.nd-card-stack-wrap {
	width: 100%;
	overflow: visible;
	padding-bottom: 16px;
}

.nd-stack-stage {
	position: relative;
	height: 510px;
	perspective: 1300px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	transform-style: preserve-3d;
}

.nd-stack-card {
	position: absolute;
	bottom: 0;
	width: 620px;
	height: 400px;
	border-radius: 22px;
	overflow: hidden;
	cursor: pointer;
	will-change: transform;
	transition: transform 0.95s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.55s;
	border: 1px solid oklch(100% 0 0 / 0.10);
	transform-style: preserve-3d;
	user-select: none;
}

/* Beam on hover — active (central) card only */
.nd-stack-card.nd-stack-card-active::after {
	content: '';
	position: absolute; inset: 0;
	border-radius: inherit; padding: 1px;
	background: conic-gradient(
		from var(--nd-beam-a),
		transparent 0%, transparent 62%,
		oklch(85% 0.14 192 / 0.5) 76%,
		oklch(97% 0.03 200 / 1)   82%,
		oklch(85% 0.14 192 / 0.5) 88%,
		transparent 100%
	);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	animation: nd-beam-spin 2.2s linear infinite paused;
	pointer-events: none; z-index: 3;
	transition: opacity 0.3s;
}
.nd-stack-card.nd-stack-card-active:hover::after {
	opacity: 0.9;
	animation-play-state: running;
}

.nd-stack-card:not(.nd-stack-card-active):hover {
	filter: brightness(1.18);
}

.nd-stack-card-see-more {
	display: flex; align-items: center; gap: 5px;
	font-size: 10.5px; font-weight: 400;
	color: var(--nd-accent);
	font-family: 'DM Mono', monospace;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	margin-top: 10px;
	opacity: 0;
	transform: translateY(5px);
	transition: opacity 0.25s, transform 0.25s;
}
.nd-stack-card.nd-stack-card-active:hover .nd-stack-card-see-more {
	opacity: 1;
	transform: translateY(0);
}

.nd-stack-card-img {
	position: absolute; inset: 0;
}
.nd-stack-card-img img {
	width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
}
.nd-stack-card-img-ph {
	width: 100%; height: 100%;
	background: oklch(14% 0.06 210);
	display: flex; align-items: center; justify-content: center;
}
.nd-stack-card-img-ph svg {
	width: 38%; height: auto;
	color: var(--nd-accent); opacity: 0.15;
}

.nd-stack-card-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(to top, oklch(5% 0.03 210 / 0.88) 0%, transparent 55%);
}

.nd-stack-card-body {
	position: absolute; bottom: 0; left: 0; right: 0;
	padding: 28px 34px; z-index: 1;
}
.nd-stack-card-body h3 {
	font-size: 19px; font-weight: 500;
	color: oklch(95% 0.004 215);
	margin: 0 0 8px; font-family: 'DM Sans', sans-serif; line-height: 1.3;
}
.nd-stack-card-body p {
	font-size: 13.5px; color: oklch(68% 0.02 215);
	margin: 0; font-family: 'DM Sans', sans-serif; line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 2;
	-webkit-box-orient: vertical; overflow: hidden;
}

.nd-stack-nav {
	display: flex; justify-content: center; align-items: center;
	gap: 20px; margin-top: 28px; flex-wrap: wrap;
}
.nd-stack-dots { display: flex; gap: 8px; align-items: center; }
.nd-stack-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: oklch(100% 0 0 / 0.22);
	border: none; cursor: pointer; padding: 0;
	transition: background 0.2s, transform 0.2s;
}
.nd-stack-dot.nd-dot-active {
	background: oklch(88% 0.006 215);
	transform: scale(1.35);
}

@media (max-width: 768px) {
	.nd-services-slider-header { padding: 0 8px 36px; }
	.nd-services-slider-header .nd-s-title { font-size: clamp(34px, 9vw, 56px); letter-spacing: -1px; }
	.nd-services-slider-header .nd-s-sub { font-size: 14px; margin-top: 16px; }

	.nd-card-stack-wrap { overflow: hidden; }
	.nd-stack-stage { height: 320px; perspective: 800px; }
	.nd-stack-card  { width: min(78vw, 360px); height: 240px; border-radius: 16px; }
	.nd-stack-card-body { padding: 18px 20px; }
	.nd-stack-card-body h3 { font-size: 16px; margin-bottom: 6px; }
	.nd-stack-card-body p  { font-size: 12px; -webkit-line-clamp: 2; }
	.nd-stack-nav { margin-top: 20px; gap: 14px; }
}

@media (max-width: 480px) {
	.nd-stack-stage { height: 280px; }
	.nd-stack-card  { height: 210px; width: min(82vw, 300px); border-radius: 14px; }
	.nd-stack-card-body { padding: 14px 16px; }
	.nd-stack-card-body h3 { font-size: 15px; }
	.nd-stack-card-body p  { font-size: 11.5px; }
}