/**
 * Preluence News — Menu & Mega Menu Engine.
 *
 * Balanced columns, featured/image/video panels, visual presets, depth and
 * opening animations. The classic dropdown stays exactly as it was; these rules
 * only touch `.pn-mega` panels and the engine's state classes.
 */

/* -------------------------------------------------------------------------
   Panel shell
   ---------------------------------------------------------------------- */

.pn-primary-nav .sub-menu.pn-mega {
	display: block;
	width: min(var(--pn-mega-width, 40rem), calc(100vw - 2rem));
	max-inline-size: calc(100vw - 2rem);
	padding: 0;
	overflow: hidden;
	border-radius: var(--pn-menu-radius, var(--pn-radius, 6px));
	background: var(--pn-menu-panel-bg, var(--pn-bg));
	color: var(--pn-menu-panel-ink, var(--pn-text));
	border: 1px solid var(--pn-menu-panel-border, var(--pn-border));
	box-shadow: var(--pn-menu-panel-shadow, 0 24px 60px -28px rgb(11 16 32 / 45%));
}

.pn-mega__body {
	display: flex;
	gap: var(--pn-menu-col-gap, 1.25rem);
	margin: 0;
	padding: 1rem;
}

/* Widths */
.pn-mega--w-content {
	width: min(var(--pn-mega-width, 40rem), calc(100vw - 2rem));
	inset-inline-start: 0;
	inset-inline-end: auto;
}

.pn-mega--w-container {
	width: min(100%, calc(100vw - 2rem));
}

.pn-mega--w-full {
	width: 100vw;
	max-inline-size: 100vw;
	inset-inline-start: 50%;
	margin-inline-start: -50vw;
}

/* Alignment */
.pn-mega--align-left {
	inset-inline-start: 0;
	inset-inline-end: auto;
}

.pn-mega--align-center {
	inset-inline: 0;
	margin-inline: auto;
}

.pn-mega--align-right {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

/* The script flips panels that would leave the viewport. */
.pn-primary-nav .sub-menu.pn-mega.is-flip {
	inset-inline-start: auto;
	inset-inline-end: 0;
	margin-inline: 0;
}

.pn-primary-nav .sub-menu.pn-mega.is-edge-left {
	inset-inline-start: 0;
	inset-inline-end: auto;
	margin-inline: 0;
}

/* -------------------------------------------------------------------------
   Columns
   ---------------------------------------------------------------------- */

.pn-mega__cols {
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-rows: repeat(var(--pn-mega-rows, 6), auto);
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	column-gap: var(--pn-menu-col-gap, 1.25rem);
	row-gap: 0.15rem;
}

.pn-mega__cols--groups {
	grid-template-rows: none;
	grid-template-columns: repeat(var(--pn-mega-cols, 2), minmax(0, 1fr));
	grid-auto-flow: row;
	row-gap: 1rem;
}

.pn-mega__cols--groups > .pn-col-1 {
	grid-column: 1;
}

.pn-mega__cols--groups > .pn-col-2 {
	grid-column: 2;
}

.pn-mega__cols--groups > .pn-col-3 {
	grid-column: 3;
}

.pn-mega__cols--groups > .pn-col-4 {
	grid-column: 4;
}

.pn-mega__cols--groups > .pn-col-5 {
	grid-column: 5;
}

.pn-mega__cols--groups > .pn-col-6 {
	grid-column: 6;
}

/* Item typography: wrap long labels instead of truncating them. */
.pn-mega__item {
	display: block;
	min-width: 0;
}

.pn-mega__item > a {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.5rem;
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.35;
}

.pn-mega__item > a:hover,
.pn-mega__item > a:focus-visible {
	background: color-mix(in srgb, var(--pn-menu-panel-ink, currentColor) 8%, transparent);
	color: var(--pn-menu-accent, var(--pn-link));
}

/* Hierarchy: a group is a column with a heading. */
.pn-mega__group > a {
	font-family: var(--pn-font-ui, sans-serif);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--pn-menu-panel-ink, var(--pn-text));
}

.pn-mega__group > .sub-menu {
	position: static;
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	padding-inline-start: 0.35rem;
	opacity: 1;
	visibility: visible;
	transform: none;
	border: 0;
	background: none;
	box-shadow: none;
}

.pn-mega__group > .sub-menu > .pn-mega__item > a {
	padding-inline-start: 0.6rem;
	font-size: 0.95em;
	opacity: 0.92;
}

/* Descriptions */
.pn-menu-desc {
	display: block;
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.3;
	opacity: 0.68;
}

.pn-mega__item > a > .pn-menu-desc {
	flex-basis: 100%;
}

/* Icons */
.pn-menu-icon {
	display: inline-flex;
	align-items: center;
	opacity: 0.9;
}

.pn-menu-icon svg {
	width: 1em;
	height: 1em;
}

/* Thumbnails beside links */
.pn-mega__thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 32px;
	overflow: hidden;
	border-radius: 3px;
}

.pn-mega__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -------------------------------------------------------------------------
   Featured / video side panel
   ---------------------------------------------------------------------- */

.pn-mega__side {
	flex: 0 0 clamp(14rem, 34%, 20rem);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
	padding-inline-start: var(--pn-menu-col-gap, 1.25rem);
	border-inline-start: 1px solid color-mix(in srgb, var(--pn-menu-panel-ink, currentColor) 12%, transparent);
}

.pn-mega__side-title {
	margin: 0 0 0.25rem;
	font-family: var(--pn-font-ui, sans-serif);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	opacity: 0.62;
}

.pn-mega-card {
	display: block;
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

.pn-mega-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 16 / 9;
	background: var(--pn-surface);
}

.pn-mega-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--pn-ease, ease);
}

.pn-mega-card:hover .pn-mega-card__media img,
.pn-mega-card:focus-visible .pn-mega-card__media img {
	transform: scale(1.04);
}

.pn-mega-card__play {
	position: absolute;
	inset-block-end: 0.4rem;
	inset-inline-start: 0.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--pn-primary) 82%, transparent);
	color: #fff;
}

.pn-mega-card__play svg {
	width: 14px;
	height: 14px;
}

.pn-mega-card__body {
	display: block;
	padding-block-start: 0.35rem;
}

.pn-mega-card__cat {
	display: block;
	font-family: var(--pn-font-ui, sans-serif);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pn-menu-accent, var(--pn-accent));
}

.pn-mega-card__title {
	display: block;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.pn-mega-card--lead .pn-mega-card__title {
	font-size: 1.02em;
}

.pn-mega-card__meta {
	display: block;
	font-size: 0.74rem;
	opacity: 0.62;
}

.pn-mega-card--inline {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.pn-mega-card--inline .pn-mega-card__media {
	width: 56px;
	min-width: 56px;
	aspect-ratio: 4 / 3;
}

.pn-mega-card--inline .pn-mega-card__body {
	padding-block-start: 0;
}

/* Image modes */
.pn-mega--img-thumb .pn-mega__item > a {
	align-items: flex-start;
}

.pn-mega--img-mosaic .pn-mega__side {
	flex-basis: clamp(16rem, 42%, 24rem);
}

.pn-mega--img-mosaic .pn-mega-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.pn-mega--img-mosaic .pn-mega-card__media {
	aspect-ratio: 4 / 3;
}

.pn-mega--img-background .pn-mega__item > a {
	background-size: cover;
	background-position: center;
	min-height: 3rem;
	align-items: flex-end;
}

/* Search inside a panel */
.pn-mega__side--search {
	border-inline-start: 0;
	padding-inline-start: 0;
}

.pn-mega__side--search .pn-menu-search {
	width: 100%;
}

/* -------------------------------------------------------------------------
   Visual presets
   ---------------------------------------------------------------------- */

.pn-menu-style-glass .pn-mega,
.pn-mega.pn-menu--fx-glass {
	background: color-mix(in srgb, var(--pn-menu-panel-bg, var(--pn-bg)) 72%, transparent);
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	backdrop-filter: blur(18px) saturate(1.25);
}

.pn-menu-style-3d .pn-mega,
.pn-mega.pn-menu--fx-depth {
	transform-style: preserve-3d;
	box-shadow: 0 30px 70px -34px rgb(11 16 32 / 70%), 0 1px 0 rgb(255 255 255 / 8%) inset;
}

.pn-menu-style-3d .pn-mega__item > a:hover {
	transform: translateZ(6px);
}

.pn-menu-style-editorial .pn-mega {
	--pn-menu-col-gap: 2.25rem;
	--pn-menu-radius: 0;
}

.pn-menu-style-editorial .pn-mega__item > a,
.pn-menu-style-editorial .pn-mega__group > a {
	font-size: 1.06em;
	padding-block: 0.5rem;
}

.pn-menu-style-agency .pn-mega {
	--pn-menu-col-gap: 1rem;
	--pn-menu-radius: 0;
}

.pn-menu-style-agency .pn-mega__item > a {
	font-size: 0.92em;
	padding-block: 0.22rem;
	text-transform: none;
}

.pn-menu-style-magazine .pn-mega,
.pn-mega.pn-menu--fx-mosaic {
	--pn-menu-radius: 2px;
}

.pn-menu-style-cinematic .pn-mega,
.pn-mega.pn-menu--fx-cinematic {
	--pn-menu-panel-bg: #0b0d10;
	--pn-menu-panel-ink: #e7eaee;
	--pn-menu-panel-border: rgb(255 255 255 / 10%);
	--pn-menu-panel-shadow: 0 40px 90px -40px rgb(0 0 0 / 80%);
}

.pn-menu-style-cinematic .pn-mega-card__media {
	aspect-ratio: 21 / 9;
}

.pn-menu-style-holo .pn-mega,
.pn-mega.pn-menu--fx-holo {
	background: linear-gradient(135deg, rgb(255 255 255 / 82%), rgb(232 240 255 / 62%));
	--pn-menu-panel-ink: #0b1020;
	--pn-menu-panel-border: rgb(34 211 238 / 35%);
}

.pn-menu-style-minimal .pn-mega,
.pn-mega.pn-menu--fx-minimal {
	--pn-menu-panel-border: color-mix(in srgb, currentColor 12%, transparent);
	--pn-menu-panel-shadow: 0 12px 30px -22px rgb(11 16 32 / 35%);
}

.pn-menu-style-dark .pn-mega,
.pn-mega.pn-menu--fx-dark {
	--pn-menu-panel-bg: #0b1020;
	--pn-menu-panel-ink: #e7eaee;
	--pn-menu-panel-border: rgb(255 255 255 / 12%);
	--pn-menu-panel-shadow: 0 40px 90px -40px rgb(0 0 0 / 78%);
}

.pn-menu-style-dark .pn-mega,
.pn-mega.pn-menu--fx-dark,
.pn-menu-style-cinematic .pn-mega,
.pn-mega.pn-menu--fx-cinematic {
	color: var(--pn-menu-panel-ink, #e7eaee);
}

.pn-menu-style-dark .pn-mega__group > a,
.pn-menu-style-cinematic .pn-mega__group > a {
	color: var(--pn-menu-panel-ink, #e7eaee);
}

.pn-menu-style-dark .pn-menu-desc,
.pn-menu-style-cinematic .pn-menu-desc {
	opacity: 0.7;
}

/* Dark mode keeps light panels readable. */
:root[data-color-scheme="dark"] .pn-menu-style-holo .pn-mega {
	background: linear-gradient(135deg, rgb(17 24 39 / 88%), rgb(11 16 32 / 82%));
	--pn-menu-panel-ink: #e7eaee;
}

/* -------------------------------------------------------------------------
   Density
   ---------------------------------------------------------------------- */

.pn-menu-density-compact .pn-mega {
	--pn-menu-col-gap: 0.85rem;
}

.pn-menu-density-compact .pn-mega__body {
	padding: 0.75rem;
}

.pn-menu-density-compact .pn-mega__item > a {
	padding-block: 0.2rem;
	font-size: 0.92em;
}

.pn-menu-density-spacious .pn-mega__body {
	padding: 1.5rem;
}

.pn-menu-density-spacious .pn-mega__item > a {
	padding-block: 0.5rem;
}

/* -------------------------------------------------------------------------
   Opening animations
   ---------------------------------------------------------------------- */

.pn-primary-nav li.is-open > .sub-menu.pn-mega,
.pn-primary-nav li:hover > .sub-menu.pn-mega {
	animation-duration: var(--pn-menu-dur, 200ms);
	animation-delay: var(--pn-menu-delay, 0ms);
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.pn-anim--fade {
	animation-name: pn-menu-fade;
}

.pn-anim--fade-up,
.pn-anim--slide {
	animation-name: pn-menu-fade-up;
}

.pn-anim--scale {
	animation-name: pn-menu-scale;
}

.pn-anim--glass {
	animation-name: pn-menu-glass;
}

.pn-anim--blur {
	animation-name: pn-menu-blur;
}

.pn-anim--3d {
	animation-name: pn-menu-3d;
	transform-origin: top center;
}

.pn-anim--perspective {
	animation-name: pn-menu-perspective;
	transform-origin: top center;
}

.pn-anim--cinematic {
	animation-name: pn-menu-cinematic;
}

.pn-anim--float {
	animation-name: pn-menu-float;
}

.pn-anim--none {
	animation: none;
}

@keyframes pn-menu-fade {

	from {
		opacity: 0;
	}
}

@keyframes pn-menu-fade-up {

	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@keyframes pn-menu-scale {

	from {
		opacity: 0;
		transform: scale(0.97);
	}
}

@keyframes pn-menu-glass {

	from {
		opacity: 0;
		transform: translateY(-6px);
		backdrop-filter: blur(0);
	}
}

@keyframes pn-menu-blur {

	from {
		opacity: 0;
		filter: blur(10px);
	}
}

@keyframes pn-menu-3d {

	from {
		opacity: 0;
		transform: perspective(1000px) rotateX(-12deg) translateY(-10px);
	}
}

@keyframes pn-menu-perspective {

	from {
		opacity: 0;
		transform: perspective(1400px) rotateX(-8deg) scale(0.98);
	}
}

@keyframes pn-menu-cinematic {

	from {
		opacity: 0;
		transform: translateY(-14px) scale(1.01);
	}
}

@keyframes pn-menu-float {

	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* Opening behaviour: hover, click or hybrid. */
.pn-menu-open-click .pn-primary-nav li:hover > .sub-menu,
.pn-menu-open-click .pn-primary-nav li:focus-within > .sub-menu,
.pn-menu-open-hybrid .pn-primary-nav li:hover > .sub-menu,
.pn-menu-open-hybrid .pn-primary-nav li:focus-within > .sub-menu {
	opacity: 0;
	visibility: hidden;
}

.pn-menu-open-click .pn-primary-nav li.is-open > .sub-menu,
.pn-menu-open-hybrid .pn-primary-nav li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
}

/* While a hover-intent delay is pending, do not reveal the panel yet. */
.pn-primary-nav.is-intent-hold > li:hover > .sub-menu {
	opacity: 0;
	visibility: hidden;
}

/* -------------------------------------------------------------------------
   Sticky header, badges, debug
   ---------------------------------------------------------------------- */

.pn-menu-compact-sticky .pn-header.is-hdr-stuck .pn-primary-nav .pn-menu > li > a {
	padding-block: 0.35rem;
	font-size: 0.94em;
}

.pn-menu-tag--pulse {
	animation: pn-badge-pulse 1.8s ease-in-out infinite;
}

.pn-menu-tag--glow {
	box-shadow: 0 0 12px color-mix(in srgb, var(--pn-tag, currentColor) 70%, transparent);
}

.pn-menu-tag--blink {
	animation: pn-badge-blink 1.4s steps(2, start) infinite;
}

@keyframes pn-badge-pulse {

	50% {
		transform: scale(1.08);
	}
}

@keyframes pn-badge-blink {

	50% {
		opacity: 0.35;
	}
}

.pn-menu-debug .pn-mega {
	outline: 2px dashed color-mix(in srgb, var(--pn-accent) 70%, transparent);
	outline-offset: 2px;
}

.pn-menu-debug .pn-mega__cols > * {
	outline: 1px dotted color-mix(in srgb, var(--pn-link) 60%, transparent);
}

/* -------------------------------------------------------------------------
   Responsive transformation (§24, §10) — fewer columns, then the mobile menu
   ---------------------------------------------------------------------- */

@media (max-width: 1280px) {

	/* Fewer, narrower columns and a scrollable body instead of clipping. */
	.pn-mega__cols {
		grid-template-rows: none;
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	}

	.pn-mega__cols--groups {
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	}

	.pn-mega__cols--groups > .pn-mega__group,
	.pn-mega__cols--groups > .pn-mega__item {
		grid-column: auto;
	}

	.pn-mega__body {
		max-height: min(70vh, 32rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

@media (max-width: 1023px) {

	/* Panels are replaced by the dedicated mobile navigation. */
	.pn-primary-nav .sub-menu.pn-mega {
		display: none !important;
	}
}

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

	.pn-primary-nav li.is-open > .sub-menu.pn-mega,
	.pn-primary-nav li:hover > .sub-menu.pn-mega,
	.pn-menu-tag--pulse,
	.pn-menu-tag--blink {
		animation: none !important;
	}

	.pn-menu-style-3d .pn-mega__item > a:hover {
		transform: none;
	}
}