/*
 * «عملاؤنا» — /clients/ (revision 12): the sector filter and one card per
 * client. Light and calm: the logo in the logo's navy on white, the name
 * under it; the big clients first. A client without a logo yet shows the
 * brand's open diamond.
 *
 * Revision 13 (assets/js/pages/clients/filter.js): the navy pill that slides
 * to the pressed sector, the line that counts to the sector's number, the
 * cards that rise in and glide when a sector is chosen. All of it only
 * exists once the script has run; the page without it is the plain list.
 */

.gb-clients-dir {
	--gb-client-mark-h: clamp(2.6rem, 2.2rem + 1.2vw, 3.4rem);

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

/* ---------- The filter (shown by filter.js) ---------- */

.gb-clients-dir__filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gb-space-2xs);
	margin-block-end: var(--gb-space-l);
}

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

/* The script's pill sits behind the chips and slides to the pressed one. */
.gb-clients-dir__filter.has-pill {
	position: relative;
	isolation: isolate;
}

.gb-clients-dir__pill {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-color-logo-navy);
	box-shadow: 0 8px 18px -10px rgb(0 72 136 / 0.7);
	transition:
		transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
		width 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
		height 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none;
}

.gb-clients-dir__filter.has-pill .gb-clients-dir__chip[aria-pressed="true"] {
	border-color: transparent;
	background-color: transparent;
}

.gb-clients-dir__chip {
	min-block-size: 2.75rem;
	padding-inline: var(--gb-space-s);
	border: 1.5px solid var(--gb-border);
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-bg);
	color: var(--gb-text);
	font-family: var(--gb-font-sans);
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
	cursor: pointer;
	transition: border-color var(--gb-duration-fast) linear, background-color var(--gb-duration-fast) linear, color var(--gb-duration-fast) linear;
}

.gb-clients-dir__chip:hover {
	border-color: var(--gb-color-logo-navy);
}

.gb-clients-dir__chip[aria-pressed="true"] {
	border-color: var(--gb-color-logo-navy);
	background-color: var(--gb-color-logo-navy);
	color: var(--gb-scene-text);
}

.gb-clients-dir__chip:focus-visible {
	outline: 3px solid var(--gb-focus-halo);
	outline-offset: 2px;
}

/* ---------- The cards ---------- */

.gb-clients-dir__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
	gap: var(--gb-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * A card (the <li>, moved by filter.js) holds a two-sided card that turns
 * over under the mouse or with a tap (revision 15, flip-card.js): the front
 * is the logo and the name, the back is navy with the name and the sector —
 * like the home page's wall (pages/home/clients.css).
 */
.gb-client-card {
	display: grid;
	min-block-size: 10.5rem;
	perspective: 1000px;
	transition: translate var(--gb-duration-base) var(--gb-ease-out);
	-webkit-tap-highlight-color: transparent;
}

.gb-client-card__inner {
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	transform-style: preserve-3d;
	transition: transform 640ms var(--gb-ease-out);
}

.gb-client-card__face {
	grid-area: 1 / 1;
	display: grid;
	justify-items: center;
	align-items: center;
	gap: var(--gb-space-xs);
	padding: var(--gb-space-m) var(--gb-space-s);
	border: 1px solid var(--gb-border);
	border-radius: var(--gb-radius-l);
	text-align: center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.gb-client-card__face--front {
	grid-template-rows: 1fr auto;
	background-color: var(--gb-bg);
	transition: border-color var(--gb-duration-base) linear;
}

.gb-client-card__face--back {
	align-content: center;
	gap: 0.4rem;
	border-color: transparent;
	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.8rem 1.6rem -1rem var(--gb-color-navy-a60);
	color: #fff;
	transform: rotateY(180deg);
}

.gb-client-card__back-name {
	font-size: var(--gb-step-0);
	font-weight: var(--gb-weight-bold);
	line-height: 1.45;
	text-wrap: balance;
}

.gb-client-card__back-sector {
	font-size: var(--gb-step--1);
	line-height: 1.4;
	color: var(--gb-color-turquoise);
}

@media (hover: hover) {
	.gb-client-card:hover .gb-client-card__inner {
		transform: rotateY(180deg);
	}
}

.gb-client-card.is-flipped .gb-client-card__inner {
	transform: rotateY(180deg);
}

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

/* A card stepping out during a filter change: lifted out of the grid (filter.js places it). */
.gb-client-card.is-leaving {
	position: absolute;
	z-index: 0;
	margin: 0;
	pointer-events: none;
}

/* The cards rise in, one after another (filter.js adds .is-staged, then .is-in per card). */
.gb-clients-dir__grid.is-staged .gb-client-card {
	transition:
		opacity 520ms var(--gb-ease-out),
		translate 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
		scale 620ms cubic-bezier(0.2, 0.8, 0.2, 1),
		border-color var(--gb-duration-base) linear;
}

.gb-clients-dir__grid.is-staged .gb-client-card:not(.is-in) {
	opacity: 0;
	translate: 0 1.5rem;
	scale: 0.96;
}

/* ---------- The band above the cards: a chosen sector (filter.js) ---------- */

.gb-clients-dir__now {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--gb-space-2xs) var(--gb-space-m);
	margin-block-end: var(--gb-space-m);
	padding: var(--gb-space-s) var(--gb-space-m);
	border-radius: var(--gb-radius-l);
	background-color: var(--gb-surface);
}

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

/* Revision 14: the band names the chosen sector (no numbers). */
.gb-clients-dir__title {
	margin: 0;
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-2);
	font-weight: var(--gb-weight-bold);
	line-height: 1.3;
	color: var(--gb-color-logo-navy);
}

.gb-clients-dir__line {
	grid-column: 1;
	margin: 0;
	color: var(--gb-text-muted);
	font-size: var(--gb-step-0);
}

.gb-clients-dir__line[hidden],
.gb-clients-dir__go[hidden] {
	display: none;
}

.gb-clients-dir__go {
	grid-column: 2;
	grid-row: 1 / span 2;
	color: var(--gb-color-navy);
}

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

[dir="ltr"] .gb-clients-dir__go-arrow {
	scale: -1 1;
}

@media (max-width: 40rem) {
	.gb-clients-dir__now {
		grid-template-columns: minmax(0, 1fr);
	}

	.gb-clients-dir__go {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
	}
}

.gb-client-card:hover {
	translate: 0 -2px;
}

.gb-client-card:hover .gb-client-card__face--front {
	border-color: var(--gb-color-turquoise-a60);
}

.gb-client-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	max-inline-size: 11rem;
}

/* Until a logo exists: the logo's open diamond, small, above the name. */
.gb-client-card__emblem {
	inline-size: 2.4rem;
	block-size: 2.4rem;
	fill: none;
	stroke: var(--gb-primary);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

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

.gb-client-card__name {
	margin: 0;
	color: var(--gb-text-muted);
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
	line-height: 1.5;
	text-wrap: balance;
}

/* A name without a logo is the card's main line. */
.gb-client-card--name .gb-client-card__name {
	color: var(--gb-color-navy);
	font-size: var(--gb-step-0);
}

@media (prefers-reduced-motion: reduce) {
	.gb-client-card,
	.gb-clients-dir__chip,
	.gb-clients-dir__pill {
		transition: none;
	}

	.gb-client-card:hover {
		translate: none;
	}
}

/* Reduced motion / «إيقاف الحركة»: nothing turns — the back simply shows. */
@media (prefers-reduced-motion: reduce) {
	.gb-client-card__inner {
		transition: none;
		transform: none !important;
	}

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

	.gb-client-card:hover .gb-client-card__face--back,
	.gb-client-card.is-flipped .gb-client-card__face--back {
		opacity: 1;
	}

	.gb-client-card:hover .gb-client-card__face--front,
	.gb-client-card.is-flipped .gb-client-card__face--front {
		opacity: 0;
	}
}

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

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

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

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