/**
 * Preluence News — Main Hero composition.
 *
 * Arranges 1–4 column sliders (from the slider engine) into a template. The
 * slider engine owns every column's internals; this file owns the grid.
 */

.pn-hero-engine {
	--pn-hero-gap: 16px;
	position: relative;
	margin-inline: auto;
}

.pn-hero-engine__grid {
	display: grid;
	gap: var(--pn-hero-gap);
}

.pn-hero-engine__col {
	min-width: 0;
	position: relative;
}

/* ---------- Templates ---------- */

/* 1-column cinematic family */
.pn-hero-engine--tpl-cinematic .pn-hero-engine__grid,
.pn-hero-engine--tpl-coverflow .pn-hero-engine__grid,
.pn-hero-engine--tpl-depth .pn-hero-engine__grid,
.pn-hero-engine--tpl-neon .pn-hero-engine__grid {
	grid-template-columns: minmax(0, 1fr);
}

/* Feature + 2 */
.pn-hero-engine--tpl-feature-two .pn-hero-engine__grid {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"primary stack-top"
		"primary stack-bottom";
}

/* Four card grid */
.pn-hero-engine--tpl-four-grid .pn-hero-engine__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-areas: "c1 c2 c3 c4";
}

/* Asymmetric mosaic */
.pn-hero-engine--tpl-asymmetric-mosaic .pn-hero-engine__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(3, minmax(0, 1fr));
	grid-template-areas:
		"primary primary s1"
		"primary primary s2"
		"s3 s4 s5";
}

/* Split feature */
.pn-hero-engine--tpl-split-feature .pn-hero-engine__grid {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-areas: "primary side";
}

/* Glass cards */
.pn-hero-engine--tpl-glass .pn-hero-engine__grid {
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: "c1 c2 c3";
}

/* Editorial pair */
.pn-hero-engine--tpl-editorial .pn-hero-engine__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas: "primary side";
}

/* Panorama / vertical / immersive */
.pn-hero-engine--tpl-panoramic .pn-hero-engine__grid,
.pn-hero-engine--tpl-vertical-stories .pn-hero-engine__grid,
.pn-hero-engine--tpl-immersive .pn-hero-engine__grid {
	grid-template-columns: minmax(0, 1fr);
}

/* Feature + 3 */
.pn-hero-engine--tpl-feature-three .pn-hero-engine__grid {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-rows: repeat(3, minmax(0, 1fr));
	grid-template-areas:
		"primary t1"
		"primary t2"
		"primary t3";
}

/* Two by two */
.pn-hero-engine--tpl-two-two .pn-hero-engine__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		"c1 c2"
		"c3 c4";
}

/* Story wall */
.pn-hero-engine--tpl-story-wall .pn-hero-engine__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		"c1 c2 c3"
		"c4 c5 c6";
}

/* Split screen */
.pn-hero-engine--tpl-split-screen .pn-hero-engine__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas: "primary side";
}

/* News agency */
.pn-hero-engine--tpl-news-agency .pn-hero-engine__grid {
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: "c1 c2 c3";
}

/* Magazine grid */
.pn-hero-engine--tpl-magazine-grid .pn-hero-engine__grid {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		"primary primary s1"
		"s2 s3 s4";
}

/* Feature + 4 stack */
.pn-hero-engine--tpl-feature-four-stack .pn-hero-engine__grid {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-rows: repeat(4, minmax(0, 1fr));
	grid-template-areas:
		"primary t1"
		"primary t2"
		"primary t3"
		"primary t4";
}

/* Split 70 / 30 */
.pn-hero-engine--tpl-split-70-30 .pn-hero-engine__grid {
	grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
	grid-template-areas: "primary side";
}

/* Triptych */
.pn-hero-engine--tpl-triptych .pn-hero-engine__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-areas: "c1 c2 c3";
}

/* Mosaic 2 × 3 */
.pn-hero-engine--tpl-mosaic-2x3 .pn-hero-engine__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(3, minmax(0, 1fr));
	grid-template-areas:
		"c1 c2"
		"c3 c4"
		"c5 c6";
}

/* Mosaic 3 × 3 */
.pn-hero-engine--tpl-mosaic-3x3 .pn-hero-engine__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(3, minmax(0, 1fr));
	grid-template-areas:
		"c1 c2 c3"
		"c4 c5 c6"
		"c7 c8 c9";
}

/* Headline strip / centre stage */
.pn-hero-engine--tpl-headline-strip .pn-hero-engine__grid,
.pn-hero-engine--tpl-centre-stage .pn-hero-engine__grid {
	grid-template-columns: minmax(0, 1fr);
}

/* Spotlight */
.pn-hero-engine--tpl-spotlight .pn-hero-engine__grid {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-areas: "primary side";
}

/* Duet */
.pn-hero-engine--tpl-duet .pn-hero-engine__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas: "primary side";
}

/* Lead + row */
.pn-hero-engine--tpl-lead-row .pn-hero-engine__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		"primary primary primary"
		"c1 c2 c3";
}

/* ---------- Story hierarchy ---------- */

.pn-hero-engine__col--primary .preluence-slider__title {
	font-size: clamp(1.5rem, 2.6vw, 2.35rem);
}

.pn-hero-engine__col--secondary .preluence-slider__title {
	font-size: clamp(1rem, 1.4vw, 1.25rem);
}

.pn-hero-engine__col--secondary .preluence-slider__excerpt {
	display: none;
}

.pn-hero-engine__col--primary .preluence-slider {
	box-shadow: 0 24px 50px -30px rgb(11 16 32 / 55%);
}

/* ---------- Hero-level navigation ---------- */

.pn-hero-engine__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-block-start: 14px;
}

.pn-hero-engine__dot {
	width: 26px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--pn-border, rgb(100 116 139 / 35%));
	cursor: pointer;
	transition: width 0.2s var(--pn-ease, ease), background-color 0.2s var(--pn-ease, ease);
}

.pn-hero-engine__dot.is-active {
	width: 44px;
	background: var(--pn-primary, #6d28d9);
}

.pn-hero-engine__empty {
	padding: 24px;
	border: 1px dashed var(--pn-border, #cbd5e1);
	border-radius: var(--pn-radius, 8px);
	text-align: center;
	color: var(--pn-text-muted, #64748b);
}

/* ---------- Finishes ---------- */

.pn-hero-engine__grid {
	position: relative;
	z-index: 1;
}

.pn-hero-engine--finish-editorial .pn-hero-engine__col {
	border-radius: var(--pn-radius, 8px);
	box-shadow: 0 12px 30px -22px rgb(11 16 32 / 45%);
}

.pn-hero-engine--finish-cinematic .pn-hero-engine__col {
	border-radius: var(--pn-radius, 8px);
	box-shadow: 0 30px 60px -34px rgb(11 16 32 / 72%);
}

.pn-hero-engine--finish-neon .pn-hero-engine__col {
	border-radius: var(--pn-radius, 8px);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--pn-primary, #6d28d9) 55%, transparent),
		0 0 34px -8px color-mix(in srgb, var(--pn-primary, #6d28d9) 70%, transparent);
}

.pn-hero-engine--finish-aurora::before {
	content: "";
	position: absolute;
	inset: -6% -4%;
	z-index: 0;
	border-radius: 24px;
	background:
		radial-gradient(40% 60% at 15% 20%, color-mix(in srgb, var(--pn-primary, #6d28d9) 55%, transparent), transparent 70%),
		radial-gradient(45% 65% at 85% 30%, color-mix(in srgb, var(--pn-accent, #0891b2) 50%, transparent), transparent 70%),
		radial-gradient(50% 70% at 50% 100%, color-mix(in srgb, var(--pn-primary, #6d28d9) 40%, transparent), transparent 70%);
	filter: blur(28px);
	opacity: 0.55;
	pointer-events: none;
	animation: pn-hero-aurora 18s ease-in-out infinite alternate;
}

@keyframes pn-hero-aurora {

	from {
		transform: translate3d(-2%, -1%, 0) scale(1);
	}

	to {
		transform: translate3d(2%, 1%, 0) scale(1.06);
	}
}

.pn-hero-engine--finish-glass .pn-hero-engine__col {
	padding: 6px;
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: 16px;
	background: rgb(255 255 255 / 6%);
	backdrop-filter: blur(10px);
	box-shadow: 0 20px 50px -30px rgb(11 16 32 / 60%);
}

.pn-hero-engine--finish-holographic .pn-hero-engine__col {
	padding: 1px;
	border-radius: 16px;
	background: linear-gradient(135deg, #22d3ee, #a855f7, #f472b6, #22d3ee);
	background-size: 300% 300%;
	animation: pn-hero-holo 10s linear infinite;
}

.pn-hero-engine--finish-holographic .preluence-slider {
	border-radius: 15px;
}

@keyframes pn-hero-holo {

	from {
		background-position: 0% 50%;
	}

	to {
		background-position: 100% 50%;
	}
}

.pn-hero-engine--finish-digital::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 16px;
	background-image:
		linear-gradient(rgb(148 163 184 / 18%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(148 163 184 / 18%) 1px, transparent 1px);
	background-size: 34px 34px;
	opacity: 0.5;
	pointer-events: none;
}

.pn-hero-engine--finish-digital .pn-hero-engine__col {
	border: 1px solid color-mix(in srgb, var(--pn-primary, #6d28d9) 40%, transparent);
	border-radius: 10px;
}

.pn-hero-engine--finish-spatial .pn-hero-engine__col {
	border-radius: var(--pn-radius, 8px);
	box-shadow: 0 40px 70px -40px rgb(11 16 32 / 82%);
}

.pn-hero-engine--finish-spatial .pn-hero-engine__col--primary {
	transform: translateY(-6px) scale(1.01);
}

.pn-hero-engine--finish-minimal .pn-hero-engine__col {
	border: 1px solid var(--pn-border, rgb(100 116 139 / 25%));
	border-radius: 10px;
}

/* ---------- Text tone ---------- */

.pn-hero-engine--tone-light .preluence-slider__shade {
	background: linear-gradient(to top, rgb(6 8 14 / 88%), rgb(6 8 14 / 35%) 55%, transparent);
}

/* Dark text: switch the slide's contrast tokens so the shade and the local
   scrim behind the headline become a light veil. */
.pn-hero-engine--tone-dark .preluence-slider__slide {
	--fg: #0b0d10;
	--fg-muted: rgb(11 13 16 / 84%);
	--fg-soft: rgb(11 13 16 / 72%);
	--scrim-rgb: 250 251 253;
}

.pn-hero-engine--tone-dark .preluence-slider__shade {
	background: linear-gradient(to top, rgb(255 255 255 / 90%), rgb(255 255 255 / 45%) 55%, rgb(255 255 255 / 10%));
}

.pn-hero-engine--tone-dark .preluence-slider__title,
.pn-hero-engine--tone-dark .preluence-slider__title a,
.pn-hero-engine--tone-dark .preluence-slider__content,
.pn-hero-engine--tone-dark .preluence-slider__excerpt,
.pn-hero-engine--tone-dark .preluence-slider__meta,
.pn-hero-engine--tone-dark .preluence-slider__author,
.pn-hero-engine--tone-dark .preluence-slider__badge {
	color: #0b0d10;
}

/* ---------- 3D pointer tilt ---------- */

.pn-hero-engine.has-tilt .preluence-slider__image-wrap {
	transform: perspective(900px) rotateX(var(--pn-tilt-x, 0deg)) rotateY(var(--pn-tilt-y, 0deg));
	transform-style: preserve-3d;
	transition: transform 0.25s var(--pn-ease, ease);
}

.pn-archive-hero {
	margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
}

/* ---------- Responsive recomposition ---------- */

@media (max-width: 1023px) {

	.pn-hero-engine--tpl-asymmetric-mosaic .pn-hero-engine__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"primary primary"
			"s1 s2"
			"s3 s4";
	}

	.pn-hero-engine__col[data-area="s5"] {
		display: none;
	}
}

@media (max-width: 899px) {

	.pn-hero-engine .pn-hero-engine__grid,
	.pn-hero-engine--tpl-feature-two .pn-hero-engine__grid,
	.pn-hero-engine--tpl-four-grid .pn-hero-engine__grid,
	.pn-hero-engine--tpl-asymmetric-mosaic .pn-hero-engine__grid,
	.pn-hero-engine--tpl-split-feature .pn-hero-engine__grid,
	.pn-hero-engine--tpl-glass .pn-hero-engine__grid,
	.pn-hero-engine--tpl-editorial .pn-hero-engine__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas: none;
	}

	.pn-hero-engine .pn-hero-engine__col {
		grid-area: auto !important;
	}

	.pn-hero-engine__col[data-area="s5"] {
		display: block;
	}

	.pn-hero-engine__col--primary .preluence-slider__title {
		font-size: clamp(1.35rem, 6vw, 1.9rem);
	}
}

/* ---------- Admin preview diagrams ---------- */

.pn-hero-tpls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 8px 0;
}

.pn-hero-tpl {
	display: block;
	width: 100%;
	padding: 6px;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	text-align: start;
}

.pn-hero-tpl.is-active {
	border-color: #6d28d9;
	box-shadow: 0 0 0 1px #6d28d9;
}

.pn-hero-tpl__preview svg {
	display: block;
	width: 100%;
	height: auto;
}

.pn-hero-tpl__label {
	display: block;
	margin-block-start: 4px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
}

.pn-hero-tpl__hint {
	display: block;
	color: #646970;
	font-size: 10px;
	line-height: 1.3;
}

.pn-hero-tpl__bg {
	fill: #e2e8f0;
}

.pn-hero-tpl__box {
	fill: #94a3b8;
	opacity: 0.6;
}

.pn-hero-tpl__box.is-primary {
	fill: #6d28d9;
	opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {

	.pn-hero-engine__dot {
		transition: none;
	}

	.pn-hero-engine.has-tilt .preluence-slider__image-wrap {
		transform: none;
		transition: none;
	}

	.pn-hero-engine--finish-aurora::before,
	.pn-hero-engine--finish-holographic .pn-hero-engine__col {
		animation: none;
	}

	.pn-hero-engine--finish-spatial .pn-hero-engine__col--primary {
		transform: none;
	}
}

@media (hover: none) {

	.pn-hero-engine.has-tilt .preluence-slider__image-wrap {
		transform: none;
	}
}