/* Desktop mega menu: wide panel under the category row, page dimmed below.
   State is class-driven (.is-open / .is-active) so it can fade both in and out. */
.mega {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	display: none; /* desktop only */
	opacity: 0;
	visibility: hidden;
	translate: 0 -0.5rem;
	transition: opacity 0.28s var(--ease), translate 0.32s var(--ease), visibility 0s 0.32s;
}
@media (min-width: 64rem) { .mega { display: grid; /* panels stack in one cell and crossfade */ } }
.mega.is-open { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }

.mega__panel {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s var(--ease), visibility 0s 0.25s;
	/* Same size for every category; the bottom 20% of the screen stays free (dimmed page). --mega-top is set by mega.js */
	block-size: max(26rem, calc(80dvh - var(--mega-top, 10rem)));
	background: var(--surface);
	border-block-start: 1px solid var(--hairline);
	box-shadow: var(--shadow-float);
}
.mega__panel.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.mega__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 26rem;
	gap: 4rem;
	block-size: 100%;
	padding-block: 2.5rem;
}

.mega__main { display: flex; flex-direction: column; gap: 1.5rem; min-block-size: 0; }
.mega__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block-end: 1rem;
	border-block-end: 1px solid var(--hairline);
}
.mega__title { color: var(--ink); font-size: 1.625rem; font-weight: 700; letter-spacing: -0.015em; }
.mega__all { color: var(--teal-ink); font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
.mega__all:hover { text-decoration: underline; }

.mega__list {
	flex: 1 1 0;
	min-block-size: 0;
	overflow-y: auto; /* only the tiles scroll; head and help stay put */
	padding: 1px; /* room for tile borders */
	align-content: start;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 0.75rem;
}
.mega__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	block-size: 4.5rem; /* every tile the same size */
	padding: 0.5rem 1rem 0.5rem 0.5rem;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	color: var(--ink);
	opacity: 0;
	translate: 0 0.5rem;
	transition: opacity 0.28s var(--ease), translate 0.32s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.mega__panel.is-active .mega__link {
	opacity: 1;
	translate: 0 0;
	transition-delay: calc(40ms + var(--i, 0) * 30ms), calc(40ms + var(--i, 0) * 30ms), 0s, 0s; /* tiles rise one after another */
}
.mega__link:hover { background: var(--surface-soft); border-color: var(--control-border); }
.mega__thumb {
	flex: none;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	overflow: hidden;
	border-radius: 50%;
	background: var(--surface-mint);
}
.mega__thumb img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.mega__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.3;
}

.mega__help {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	flex: none;
	align-self: flex-start;
	padding: 0.625rem 1rem;
	border: 1px solid var(--control-border);
	border-radius: var(--radius-pill);
	color: var(--ink);
	font-size: 0.9375rem;
	font-weight: 500;
}
.mega__help:hover { background: var(--surface-soft); }

.mega__feature {
	display: flex;
	flex-direction: column;
	min-block-size: 0;
	overflow: hidden; /* fills the panel height: same size for every category */
	border-radius: var(--radius-lg);
	background: var(--surface-mint);
	color: var(--ink);
	opacity: 0;
	transition: opacity 0.3s var(--ease), transform 0.2s var(--ease);
}
.mega__panel.is-active .mega__feature { opacity: 1; transition-delay: 0.08s, 0s; }
.mega__feature:active { transform: scale(0.98); }
.mega__img { display: block; inline-size: 100%; flex: 1 1 0; min-block-size: 0; object-fit: cover; }
.mega__feature-text { flex: none; }
.mega__feature-text { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.25rem 1.5rem 1.5rem; }
.mega__label { color: var(--teal-ink); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.mega__feature-name { font-size: 1.25rem; font-weight: 600; }

.mega__scrim {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	block-size: 100dvh;
	background: var(--scrim);
	z-index: -1;
	opacity: 0;
	transition: opacity 0.28s linear;
}
.mega.is-open .mega__scrim { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.mega, .mega__panel, .mega__link, .mega__feature, .mega__scrim { transition-duration: 0.01s; transition-delay: 0s; translate: 0 0; }
}