/*
 * Home: «عملاؤنا» (pages/home/clients.php) + Partnerships (pages/home/partners.php).
 *
 * «عملاؤنا» — the big clients' logos in their OWN colours (revision 14),
 * free on a light band, in up to three rows. Revision 15 (owner 2026-10-07
 * 14:25 «تتحرك عادي بس اللي جوه تتقلب بالماوس»):
 * 1. Baseline (no JS, STATIC, reduced motion, «إيقاف الحركة»): the rows stand
 *    still, centred, wrapping on small screens. Everything visible.
 * 2. [data-gb-marquee="on"] (clients.js): each row is one line, its logos
 *    repeated to fill the width (copies [data-gb-copy], aria-hidden), sliding
 *    by itself — the middle row the other way. The script moves only
 *    `transform` (compositor only); a row stops under the mouse.
 * 3. Every logo is a card that turns over under the mouse (or a tap:
 *    .is-flipped): its back is navy, with the client's name and its sector.
 *    Reduced motion: no turning, the back simply shows.
 */

.gb-clients {
	/* The logo's height in its cell (the square emblems a little taller: components/client-mark). */
	--gb-client-mark-h: clamp(2.6rem, 2rem + 1.7vw, 3.9rem);
	--gb-clients-cell: clamp(7rem, 4.6rem + 6.5vw, 11.5rem);
	--gb-clients-cell-h: clamp(4.6rem, 3.4rem + 3vw, 7rem);
	--gb-clients-gap-x: clamp(1.25rem, 0.5rem + 2.6vw, 3.5rem);
	--gb-clients-gap-y: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);

	padding-block: var(--gb-space-2xl) var(--gb-space-3xl);
	overflow: hidden;
	background-color: var(--gb-bg);
	color: var(--gb-text);
}

.gb-clients__rows {
	display: grid;
	gap: var(--gb-clients-gap-y);
	margin-block-start: var(--gb-space-l);
}

/* ---------- Still wall (baseline) ---------- */

.gb-clients__track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--gb-clients-gap-y) var(--gb-clients-gap-x);
	margin: 0;
	padding: 0;
	padding-inline: var(--gb-gutter);
	list-style: none;
}

/* The script's copies exist only for the moving rows. */
.gb-clients__track[data-gb-copy] {
	display: none;
}

/* Until the rows move, the lane the script wraps around a row is invisible. */
.gb-clients__lane {
	display: contents;
}

/* Tablets and up: a grid with even lines (column counts from pages/home/clients.php). */
@media (min-width: 44em) {
	.gb-clients__track {
		display: grid;
		grid-template-columns: repeat(var(--gb-clients-cols-md, 4), var(--gb-clients-cell));
		justify-content: center;
		justify-items: center;
	}
}

@media (min-width: 80em) {
	.gb-clients__track {
		--gb-clients-cell: 10rem;

		grid-template-columns: repeat(var(--gb-clients-cols, 7), var(--gb-clients-cell));
		column-gap: 2.5rem;
	}
}

/* ---------- One cell: a card that turns over ---------- */

.gb-clients__logo {
	flex: none;
	inline-size: var(--gb-clients-cell);
	block-size: var(--gb-clients-cell-h);
	perspective: 900px;
	cursor: default;
	-webkit-tap-highlight-color: transparent;
}

.gb-clients__card {
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	inline-size: 100%;
	block-size: 100%;
	transform-style: preserve-3d;
	transition: transform 640ms var(--gb-ease-out);
}

.gb-clients__face {
	display: grid;
	grid-area: 1 / 1;
	place-items: center;
	min-inline-size: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Front: the logo as it is, centred, kept inside the cell. */
.gb-clients__face--front .gb-client-mark {
	max-block-size: 100%;
	max-inline-size: 100%;
}

.gb-clients__face--front img.gb-client-mark {
	object-fit: contain;
}

/* Back: navy, the client's name and its sector (read in the page's direction). */
.gb-clients__face--back {
	direction: var(--gb-page-dir, rtl);
	align-content: center;
	gap: 0.3rem;
	padding: 0.55rem 0.7rem;
	border-radius: var(--gb-radius-m);
	background-color: var(--gb-color-navy);
	background-image: radial-gradient(120% 90% at 50% 0%, var(--gb-color-turquoise-a20), transparent 70%);
	box-shadow: 0 0.6rem 1.4rem -0.8rem var(--gb-color-navy-a60);
	color: #fff;
	text-align: center;
	transform: rotateY(180deg);
}

.gb-clients__name {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-family: var(--gb-font-sans);
	font-size: clamp(0.78rem, 0.7rem + 0.25vw, 0.92rem);
	font-weight: var(--gb-weight-bold);
	line-height: 1.35;
	text-wrap: balance;
}

.gb-clients__sector {
	font-size: clamp(0.68rem, 0.64rem + 0.15vw, 0.76rem);
	line-height: 1.3;
	color: var(--gb-color-turquoise);
}

[dir="ltr"] .gb-clients {
	--gb-page-dir: ltr;
}

/* Turned: under the mouse, or tapped (clients.js). */
@media (hover: hover) {
	.gb-clients__logo:hover .gb-clients__card {
		transform: rotateY(180deg);
	}
}

.gb-clients__logo.is-flipped .gb-clients__card {
	transform: rotateY(180deg);
}

/* Reduced motion / motion off: nothing turns — the back simply shows. */
@media (prefers-reduced-motion: reduce) {
	.gb-clients__card {
		transition: none;
		transform: none !important;
	}

	.gb-clients__face--back {
		transform: none;
		opacity: 0;
	}

	.gb-clients__logo:hover .gb-clients__face--back,
	.gb-clients__logo.is-flipped .gb-clients__face--back {
		opacity: 1;
	}

	.gb-clients__logo:hover .gb-clients__face--front,
	.gb-clients__logo.is-flipped .gb-clients__face--front {
		opacity: 0;
	}
}

:root[data-gb-motion="off"] .gb-clients__card {
	transition: none;
	transform: none !important;
}

:root[data-gb-motion="off"] .gb-clients__face--back {
	transform: none;
	opacity: 0;
}

:root[data-gb-motion="off"] .gb-clients__logo:hover .gb-clients__face--back,
:root[data-gb-motion="off"] .gb-clients__logo.is-flipped .gb-clients__face--back {
	opacity: 1;
}

:root[data-gb-motion="off"] .gb-clients__logo:hover .gb-clients__face--front,
:root[data-gb-motion="off"] .gb-clients__logo.is-flipped .gb-clients__face--front {
	opacity: 0;
}

/* The way to every client, and the button that stops the rows. */
.gb-clients__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--gb-space-s);
	margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.gb-clients__all-arrow {
	inline-size: 1.1em;
	block-size: 1.1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The arrow points the way of reading. */
[dir="ltr"] .gb-clients__all-arrow {
	scale: -1 1;
}

.gb-clients__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-block-size: 2.75rem;
	padding: 0.5em 1.1em;
	border: 1px solid var(--gb-border);
	border-radius: var(--gb-radius-pill);
	background: transparent;
	color: var(--gb-text-muted);
	font: inherit;
	font-size: var(--gb-step--1);
	cursor: pointer;
	transition: border-color var(--gb-duration-base) linear, color var(--gb-duration-base) linear;
}

.gb-clients__toggle[hidden] {
	display: none;
}

.gb-clients__toggle:hover {
	border-color: var(--gb-primary);
	color: var(--gb-text);
}

.gb-clients__toggle-icon {
	inline-size: 1.05em;
	block-size: 1.05em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gb-clients__toggle-play {
	display: none;
	fill: currentColor;
	stroke: none;
}

.gb-clients__toggle[data-paused] .gb-clients__toggle-pause {
	display: none;
}

.gb-clients__toggle[data-paused] .gb-clients__toggle-play {
	display: inline;
}

/* ---------- Rows that slide by themselves (enhanced) ---------- */

[data-gb-marquee="on"] .gb-clients__row {
	/*
	 * Laid out left to right whatever the page's direction: the lane starts at
	 * the row's left edge and the script moves it in pixels. Logos only — the
	 * cards' backs set their own reading direction.
	 */
	direction: ltr;
	overflow: hidden;
	/* Soft edges: logos fade in and out instead of being cut. */
	mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
	/* Room for a turned card's shadow. */
	padding-block: 0.6rem;
	margin-block: -0.6rem;
}

[data-gb-marquee="on"] .gb-clients__lane {
	display: flex;
	gap: var(--gb-clients-gap-x);
	inline-size: max-content;
	will-change: transform;
}

[data-gb-marquee="on"] .gb-clients__track {
	--gb-clients-cell: clamp(7rem, 4.6rem + 6.5vw, 11.5rem);

	display: flex;
	flex-wrap: nowrap;
	padding-inline: 0;
	gap: var(--gb-clients-gap-x);
}

/* ---------- Partnerships ---------- */

.gb-partners {
	padding-block: var(--gb-space-3xl);
	background-color: var(--gb-surface);
	color: var(--gb-text);
}

.gb-partners__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--gb-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gb-partner {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: var(--gb-space-s);
	min-block-size: 11rem;
	padding: var(--gb-space-m);
	border: 1px solid var(--gb-border);
	border-radius: var(--gb-radius-l);
	background-color: var(--gb-bg);
	text-align: center;
	transition: border-color var(--gb-duration-base) linear;
}

.gb-partner:hover {
	border-color: var(--gb-primary);
}

/*
 * Revision 14 (owner 2026-10-07 11:07 «خلي دي بالوانهم وشكلهم الطبيعيه»):
 * each partner's logo as it is, in its own colours, on the card — no navy
 * frame, no white artwork (replaces revision 13b's frames).
 */
.gb-partner__logo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	place-items: center;
	inline-size: min(100%, 14rem);
	aspect-ratio: 16 / 9;
	padding: 0.5rem;
}

.gb-partner__logo img {
	inline-size: auto;
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: 4.2rem;
	object-fit: contain;
}

/* Placeholder emblem until an approved logo exists: the logo's open diamond. */
.gb-partner__emblem {
	inline-size: 3.25rem;
	block-size: 3.25rem;
	fill: none;
	stroke: var(--gb-primary);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gb-partner__emblem circle {
	fill: var(--gb-seed);
	stroke: none;
}

.gb-partner__name {
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-2);
	font-weight: var(--gb-weight-bold);
	color: var(--gb-color-navy);
}