/*
 * Works page — /works/ (archive-gb_case_study.php): the section frames.
 * Cards: components/work-card.css; gallery cards: video-facade.css +
 * work-media.css; clients / partners: pages/home/clients.css (shared).
 *
 * Rhythm: dark hero → light «أبرز الإنجازات» → soft grey «معرض الأعمال»
 * (the dark video cards stand out on it) → the dark client wall →
 * partnerships → the turquoise CTA.
 */

/* ---------- «أبرز الإنجازات» ---------- */

.gb-works-featured {
	padding-block: var(--gb-space-2xl) var(--gb-space-3xl);
	background-color: var(--gb-bg);
	color: var(--gb-text);
}

/* ---------- «معرض الأعمال» ---------- */

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

/* The video cards were made for dark sections: on this light one their small label turns dark. */
.gb-works-gallery .gb-video__format {
	color: var(--gb-text-muted);
}

.gb-works-gallery .gb-video:hover .gb-video__title {
	color: var(--gb-color-navy);
}

/* Filter: one pill per kind of work (shown by gallery.js). */
.gb-works-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gb-space-2xs);
	margin-block: calc(var(--gb-space-m) * -1) var(--gb-space-l);
}

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

/* Phones: one swipeable row instead of a block of pills. */
@media (max-width: 40rem) {
	.gb-works-filter {
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin-inline: calc(var(--gb-gutter) * -1);
		padding-inline: var(--gb-gutter);
		padding-block: 0.25rem;
		overflow-x: auto;
		scrollbar-width: none;
	}
}

.gb-works-filter__button {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.5em;
	min-block-size: 2.75rem;
	padding-block: 0.4em;
	padding-inline: 1.1em;
	border: 1px solid var(--gb-color-neutral-300);
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-bg);
	color: var(--gb-text);
	font: inherit;
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-medium);
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--gb-duration-fast) linear,
		border-color var(--gb-duration-fast) linear,
		color var(--gb-duration-fast) linear;
}

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

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

.gb-works-filter__count {
	display: inline-grid;
	place-items: center;
	min-inline-size: 1.6em;
	block-size: 1.6em;
	padding-inline: 0.3em;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-color-turquoise-a20);
	font-size: 0.85em;
}

.gb-works-filter__button[aria-pressed="true"] .gb-works-filter__count {
	background-color: var(--gb-primary);
	color: var(--gb-primary-contrast);
}