/* ==========================================================================
   ALQIMA — Fullscreen editorial navigation (desktop, tablet, mobile)

   Layers: dark canvas → architectural image (very low opacity) → shade →
   content (large editorial list | hover preview | supporting details).
   Motion is driven by menu.js (GSAP clip-path reveal + staggered mask
   reveal). Without GSAP or with reduced motion it simply fades.
   ========================================================================== */

.fs-menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-menu, 95);
	background: var(--c-canvas);
	color: var(--c-text);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s var(--ease-soft), visibility 0s linear 0.4s;
}

.fs-menu.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s var(--ease-soft), visibility 0s;
}

/* Reduced motion: no transition at all (not even the global 0.01ms one),
   so the menu is fully visible in the very first frame after opening —
   under CPU load a near-zero transition could still paint one frame at
   opacity 0 (v1.3 QA). */
@media (prefers-reduced-motion: reduce) {
	.fs-menu,
	.fs-menu.is-open {
		transition: none !important;
	}
}

/* GSAP drives the reveal; CSS transition would fight it. */
.fs-menu.is-animated {
	transition: none;
}

/* ------------------------------------------------------------ Background */
.fs-menu__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.fs-menu__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.2;
	filter: saturate(0.85);
}

[dir="rtl"] .fs-menu__bg-img {
	transform: scaleX(-1);
}

.fs-menu__bg-shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgb(var(--rgb-ink) / 0.75) 0%, rgb(var(--rgb-ink) / 0.35) 30%, rgb(var(--rgb-ink) / 0.55) 70%, var(--color-navy) 100%),
		radial-gradient(120% 90% at 70% 40%, rgb(var(--rgb-ink) / 0) 0%, rgb(var(--rgb-ink) / 0.6) 100%);
}

/* ---------------------------------------------------------------- Layout */
/* v1.3 — the scroller clears the header controls *and* the notch / Dynamic
   Island (--safe-t) and the home indicator (--safe-b). Its top and bottom
   edges are feathered with a mask, so on short phones the list slides
   softly out under the header controls instead of colliding with the
   logo (the header glass is hidden while the menu is open). */
.fs-menu__inner {
	--menu-top: calc(var(--header-h) + var(--safe-t));
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
	grid-template-rows: 1fr auto;
	column-gap: var(--gutter);
	height: 100%;
	padding-block: calc(var(--menu-top) + var(--s-3)) calc(var(--s-6) + var(--safe-b));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--menu-top) - 0.5rem), #000 calc(var(--menu-top) + 1.25rem), #000 calc(100% - 1.5rem - var(--safe-b)), transparent calc(100% - var(--safe-b)));
	mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--menu-top) - 0.5rem), #000 calc(var(--menu-top) + 1.25rem), #000 calc(100% - 1.5rem - var(--safe-b)), transparent calc(100% - var(--safe-b)));
}

.fs-menu__inner::-webkit-scrollbar {
	display: none;
}

.fs-menu__nav {
	grid-column: 1 / -1;
	align-self: center;
	padding-block: var(--s-6);
}

/* ---------------------------------------------------------------- List */
/* Type scale (one variable feeds the label, and the index / arrow cells
   that are sized to the label's first line):
     --lbl  label size          --lh  label line-height
   The index and arrow sit in fixed-width columns and are centred on the
   FIRST line of the label, so they stay put when a long title (Events &
   Exhibitions, Process & Capabilities) wraps to a second line. */
.fs-menu__list {
	--lbl: clamp(1.75rem, 1.05rem + 3.2vw, 2.375rem);
	--lh: 1.08;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fs-menu__item {
	border-block-end: 1px solid var(--c-hairline);
}

.fs-menu__item:first-child {
	border-block-start: 1px solid var(--c-hairline);
}

.fs-menu__link {
	position: relative;
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem;
	align-items: start;
	column-gap: var(--s-3);
	padding-block: clamp(0.75rem, 1.5vh, 1.125rem);
	transition: opacity 0.6s var(--ease-soft);
}

.fs-menu__index,
.fs-menu__arrow {
	display: flex;
	align-items: center;
	height: calc(var(--lbl) * var(--lh));
}

.fs-menu__index {
	font-family: var(--f-latin);
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.14em;
	line-height: 1;
	color: var(--c-text-3);
	transition: color 0.4s var(--ease-soft);
}

.fs-menu__item.is-current .fs-menu__index {
	color: var(--c-accent);
}

.fs-menu__label-mask {
	display: block;
	overflow: hidden;
	padding-block: 0.08em 0.12em;
	margin-block: -0.08em -0.12em;
}

.fs-menu__label {
	display: block;
	font-size: var(--lbl);
	font-weight: var(--fw-medium);
	letter-spacing: -0.03em;
	line-height: var(--lh);
	text-wrap: balance;
	transition: transform 0.8s var(--ease-out);
	will-change: transform;
}

.fs-menu__arrow {
	justify-content: flex-end;
	font-size: 1rem;
	color: var(--c-text-2);
	opacity: 0.55;
	transition: opacity 0.5s var(--ease-soft), transform 0.7s var(--ease-out);
}

/* (The arrow already mirrors in RTL — components.css: ↗ becomes ↖.) */

.fs-menu__link:focus-visible {
	outline-offset: -2px;
}

/* --------------------------------------------------------------- Details */
/* Phone: tagline → contact row → social row, left-aligned to the labels'
   start edge. Tablet / desktop: one line under a hairline — tagline |
   contact … social at the reading end. */
.fs-menu__details {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: clamp(1.5rem, 4vw, 4rem);
	row-gap: var(--s-4);
	padding-block-start: var(--s-5);
	font-size: var(--fs-small);
	color: var(--c-text-2);
}

.fs-menu__tagline {
	flex-basis: 100%;
	font-size: var(--fs-label);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--c-text-3);
}

.fs-menu__contact {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.5rem;
	row-gap: 0;
	font-style: normal;
}

.fs-menu__contact > * {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.fs-menu__contact a {
	transition: color var(--dur-2) var(--ease-soft);
}

@media (hover: hover) {
	.fs-menu__contact a:hover {
		color: var(--c-text);
	}
}

.fs-menu__social {
	flex-basis: 100%;
}

/* Footer: one text link to the other language (no list — v1.3). */
.lang-links__item {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	transition: color var(--dur-2) var(--ease-soft);
}

.lang-links__item[lang="ar"] {
	font-family: var(--f-arabic);
}

.lang-links__item[lang="en"] {
	font-family: var(--f-latin);
}

@media (hover: hover) {
	a.lang-links__item:hover {
		color: var(--c-text);
	}
}

/* -------------------------------------------------------------- Preview */
.fs-menu__preview {
	display: none;
}

/* ============================================================ Tablet 768+ */
@media (min-width: 48em) {
	/* Height-aware: --n (number of items, set inline by the template) caps
	   the label so the whole list + details fit the viewport — a 9th item
	   or a short laptop screen shrinks the type instead of pushing the
	   details off-screen. */
	.fs-menu__list {
		--lbl: min(clamp(2.75rem, 1rem + 4.6vw, 4rem), calc((100svh - 20rem - var(--n, 8) * 1.5rem) / (var(--n, 8) * 1.04)));
		--lh: 1.04;
	}

	.fs-menu__link {
		grid-template-columns: 3rem minmax(0, 1fr) 1.5rem;
		column-gap: var(--s-4);
	}

	.fs-menu__details {
		border-block-start: 1px solid var(--c-hairline);
	}

	.fs-menu__tagline {
		flex-basis: auto;
	}

	.social.fs-menu__social {
		flex-basis: auto;
		margin-inline-start: auto;   /* .social (sections.css) resets margin */
	}

	.fs-menu__arrow {
		opacity: 0;
		transform: translate(-8px, 8px);
	}

	[dir="rtl"] .fs-menu__arrow {
		transform: translate(8px, 8px);
	}
}

/* Touch tablets (no hover): keep the arrows visible — they are the only
   affordance that a row is a link. */
@media (min-width: 48em) and (hover: none) {
	.fs-menu__arrow,
	[dir="rtl"] .fs-menu__arrow {
		opacity: 0.55;
		transform: none;
	}
}

/* ========================================================= Desktop 1200+ */
@media (min-width: 75em) {
	.fs-menu__nav {
		grid-column: 1 / span 8;
	}

	.fs-menu__item,
	.fs-menu__item:first-child {
		border: 0;
	}

	.fs-menu__list {
		--lbl: min(clamp(3.25rem, 0.4rem + 4vw, 5.25rem), calc((100svh - 19.5rem - var(--n, 8) * 0.5rem) / (var(--n, 8) * 1.02)));
		--lh: 1.02;
	}

	.fs-menu__link {
		display: flex;
		align-items: center;
		width: fit-content;
		max-width: 100%;
		padding-block: 0.25rem;
	}

	.fs-menu__index {
		flex: none;
		width: 3rem;
	}

	.fs-menu__label {
		white-space: nowrap;
		letter-spacing: -0.045em;
	}

	.fs-menu__arrow {
		flex: none;
		width: auto;
		margin-inline-start: var(--s-4);
	}

	/* Hover preview column */
	.fs-menu__preview {
		position: relative;
		display: block;
		grid-column: 10 / span 3;
		align-self: center;
		width: 100%;
		max-width: 24rem;
		justify-self: end;
	}

	.fs-menu__preview-frame {
		position: relative;
		aspect-ratio: 4 / 5;
		overflow: hidden;
		border-radius: var(--r-xs);
		background: var(--c-surface-1);
		border: 1px solid var(--c-hairline);
	}

	.fs-menu__preview-img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0;
		transform: scale(1.06);
		transition: opacity 0.8s var(--ease-soft), transform 1.6s var(--ease-out);
	}

	.fs-menu__preview-img.is-active {
		opacity: 1;
		transform: none;
	}

	.fs-menu__preview-index {
		position: absolute;
		inset-block-start: calc(100% + 0.75rem);
		inset-inline-start: 0;
		font-family: var(--f-latin);
		font-size: var(--fs-micro);
		letter-spacing: 0.2em;
		color: var(--c-text-3);
	}

	/* Hover / focus: the active item steps forward, others recede. */
	.fs-menu__list.has-active .fs-menu__link:not(.is-active) {
		opacity: 0.32;
	}

	.fs-menu__link.is-active .fs-menu__label {
		transform: translateX(0.18em);
	}

	[dir="rtl"] .fs-menu__link.is-active .fs-menu__label {
		transform: translateX(-0.18em);
	}

	.fs-menu__link.is-active .fs-menu__arrow {
		opacity: 1;
		transform: none;
	}
}

/* ============================================================== Mobile */
@media (max-width: 47.99em) {
	.fs-menu__nav {
		align-self: start;
		padding-block: var(--s-3) var(--s-5);
	}
}

/* Short landscape tablets / laptops. */
@media (max-height: 40em) and (min-width: 48em) {
	.fs-menu__list {
		--lbl: min(3rem, 8.5vh);
	}
}

/* ============================================================== Arabic */
/* IBM Plex Sans Arabic has tall ascenders and deep descenders: the menu
   gets its own line-height (no clipping inside the reveal mask), a
   slightly smaller size than the Latin scale (Arabic words read larger),
   no negative tracking, and the numbers stay Latin (01–08) like the rest
   of the site's indices. */
[dir="rtl"] .fs-menu__list {
	--lbl: clamp(1.625rem, 1rem + 3vw, 2.25rem);
	--lh: 1.3;
}

[dir="rtl"] .fs-menu__label {
	letter-spacing: 0;
	font-weight: var(--fw-medium);
}

[dir="rtl"] .fs-menu__label-mask {
	padding-block: 0.02em 0.1em;
}

[dir="rtl"] .fs-menu__tagline {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.875rem;
}

@media (min-width: 48em) {
	[dir="rtl"] .fs-menu__list {
		--lbl: min(clamp(2.5rem, 1rem + 4vw, 3.5rem), calc((100svh - 20rem - var(--n, 8) * 1.5rem) / (var(--n, 8) * 1.26)));
		--lh: 1.26;
	}
}

@media (min-width: 75em) {
	[dir="rtl"] .fs-menu__list {
		--lbl: min(clamp(3rem, 0.6rem + 3.6vw, 4.5rem), calc((100svh - 19.5rem - var(--n, 8) * 0.5rem) / (var(--n, 8) * 1.24)));
		--lh: 1.24;
	}

	[dir="rtl"] .fs-menu__label {
		letter-spacing: 0;
	}
}

@media (max-height: 40em) and (min-width: 48em) {
	[dir="rtl"] .fs-menu__list {
		--lbl: min(2.5rem, 7vh);
	}
}

/* Background lock while the menu is open. */
.is-menu-open,
.is-menu-open body {
	overflow: hidden;
}