/**
 * Preluence Genesis — 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%));
	/* Ten rows of --pn-mega-row, plus slack for a font that rounds taller.
	   Derived, so the per-density value declared further down is what counts. */
	--pn-mega-maxh: calc(10 * var(--pn-mega-row, 2.2rem) + 0.75rem);
}

/*
 * One row, measured rather than assumed.
 *
 * A row is the item's own padding (--pn-mega-item-pad, twice), its line box
 * (1.35 x the item font-size, 0.9375rem) and the grid's row gap (0.15rem):
 * 0.7 + 1.2656 + 0.15 = 2.1156rem, so 2.2rem is the honest ceiling.
 *
 * The budget must cover ten of those, or the last row is cut off and the panel
 * scrolls inside itself - which is what a 2rem budget did to a 36px row.
 *
 * These tokens live on the panel's own class, not on the panel selector below,
 * because a density preset is `.pn-menu-density-* .pn-mega`: two classes against
 * the panel selector's three, so anything declared down there could never be
 * overridden by a density.
 */
.pn-mega {
	--pn-mega-row: 2.2rem;
	--pn-mega-item-pad: 0.35rem;
	--pn-mega-item-pad-x: 0.5rem;
}

/*
 * The generic desktop dropdown rule in header.css paints every submenu with a
 * translucent slice of the PAGE background. A mega panel owns a coordinated
 * surface token (set by the header engine or a menu style), so restore that
 * token here at a specificity that wins - otherwise a dark panel would keep its
 * light ink on a light, page-tinted background.
 */
.pn-primary-nav .pn-menu > li > .sub-menu.pn-mega {
	background: var(--pn-menu-panel-bg, var(--pn-bg));
	color: var(--pn-menu-panel-ink, var(--pn-text));
}

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

/*
 * header.css styles every `.sub-menu li` and `.sub-menu a`, and it out-specifies
 * the panel's own rules - which is the wrong way round inside a mega panel.
 *
 * Two of its rules reached in here: `align-items: center` on the body (a menu
 * item is centred in its row; a panel body is not), which floated the featured
 * side down beside the columns; and the item's link padding, larger than the
 * row budget assumes, which pushed ten rows past the height cap so the last row
 * was cut and the panel scrolled inside itself. Both are restated here, at a
 * specificity that wins, from the panel's own tokens.
 */
.pn-primary-nav .sub-menu li.pn-mega__body {
	align-items: flex-start;
}

.pn-primary-nav .sub-menu .pn-mega__item > a {
	padding: var(--pn-mega-item-pad, 0.35rem) var(--pn-mega-item-pad-x, 0.5rem);
}

/* Height budget + contained featured (owner request, 4 Oct 2026): the panel
   never exceeds ten sub-menu rows. Columns and the featured side each scroll
   inside that same budget, so a long list or a long featured query can never
   stretch the panel past the limit. */
.pn-mega__cols,
.pn-mega__side {
	max-height: var(--pn-mega-maxh, 20rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/*
 * Compact featured list. The lead story used to be a full-width 16:9 card that
 * grew the panel; every card is now a thumbnail-beside-text row, so the side
 * stays inside the same ten-row budget and the images scale with the column
 * (clamp + %) instead of a fixed pixel value. Mosaic keeps its own layout.
 */
.pn-mega--has-featured:not(.pn-mega--img-mosaic) .pn-mega__side {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.pn-mega--has-featured:not(.pn-mega--img-mosaic) .pn-mega__side .pn-mega-card {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.pn-mega--has-featured:not(.pn-mega--img-mosaic) .pn-mega__side .pn-mega-card__media {
	flex: 0 0 auto;
	width: clamp(3.5rem, 30%, 4.75rem);
	max-width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
}

.pn-mega--has-featured:not(.pn-mega--img-mosaic) .pn-mega__side .pn-mega-card__body {
	flex: 1 1 auto;
	min-width: 0;
	padding-block-start: 0;
}

.pn-mega__side .pn-mega-card__title {
	font-size: 0.85rem;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pn-mega__side .pn-mega-card__body {
	padding-block-start: 0.3rem;
}


/* Widths */
.pn-mega--w-content {
	/* Hug the columns, with a readable floor so a one-column list is not a
	   sliver. --pn-mega-width already includes the featured side. */
	width: min(max(var(--pn-mega-width, 40rem), 18rem), 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;
}

/*
 * The placement the engine computed (menu-engine.js).
 *
 * A panel anchored to its item hangs off the screen when the item sits near an
 * edge, and flipping it only moves the overhang to the other side. So the engine
 * measures the room the viewport has and sets --pn-mega-shift: the panel is
 * centred on its item where that fits and pushed inwards where it does not.
 *
 * Declared after the flip/edge fallbacks and scoped to the automatic alignment,
 * so it wins for the case it is for and never overrides an alignment or a
 * full-width panel that someone chose.
 */
.pn-primary-nav .sub-menu.pn-mega.is-placed.pn-mega--align-auto {
	inset-inline-start: var(--pn-mega-shift, 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;
}

/* Hover/current must stay legible on the panel surface. Tinting with the
   panel's OWN ink and keeping the text as that ink guarantees contrast in both
   light and dark panels; the brand accent is added as a stripe, so a light
   accent (e.g. gold) is never painted as low-contrast text on a light panel. */
.pn-mega__item > a:hover,
.pn-mega__item > a:focus-visible {
	background: color-mix(in srgb, var(--pn-menu-panel-ink, currentColor) 12%, transparent);
	/* The panel's own ink — never the menu-bar hover colour, which is tuned to
	   the bar surface and could vanish on the panel. */
	color: var(--pn-menu-panel-ink, var(--pn-text));
	box-shadow: inset 3px 0 0 var(--pn-menu-accent, var(--pn-accent));
}

/* 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;
	/*
	 * Smart accent: the label keeps its brand hue but is pulled toward the
	 * panel's OWN ink, so it darkens on a light panel and lightens on a dark
	 * one. A light accent (e.g. gold) is no longer faint gold-on-white.
	 */
	color: color-mix(in srgb, var(--pn-menu-accent, var(--pn-accent)) 55%, var(--pn-menu-panel-ink, var(--pn-text)));
}

.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;
}

/* -------------------------------------------------------------------------
   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;
	/* Shorter rows, so a ten-row budget is smaller too - otherwise the cap
	   would leave the panel taller than its content. */
	--pn-mega-item-pad: 0.2rem;
	--pn-mega-row: 1.85rem;
}

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

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

.pn-menu-density-spacious .pn-mega {
	/* Taller rows need a taller budget, or ten of them overflow the cap. */
	--pn-mega-item-pad: 0.5rem;
	--pn-mega-row: 2.5rem;
}

.pn-menu-density-spacious .pn-mega__body {
	padding: 1.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;
	}

}

@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;
	}
}