/*
 * Works page: «أحدث ما نشرناه» (pages/works/social.php).
 *
 * A night band between the gallery and the clients: the newest posts from
 * our platforms as lit screens (components/screen), one row height for all
 * shapes (a justified wall, as on «شاشات الرياض»), then the way to all of
 * them.
 */

.gb-works-social {
	--gb-section-text: var(--gb-scene-text);
	--gb-section-muted: var(--gb-scene-text-muted);
	--gb-section-eyebrow: var(--gb-primary);
	--gb-focus: var(--gb-focus-inverse);

	padding-block: var(--gb-space-2xl);
	background:
		radial-gradient(60% 50% at 50% 100%, var(--gb-color-turquoise-a10), transparent 70%),
		var(--gb-scene-bg);
	color: var(--gb-scene-text);
}

.gb-works-social__grid {
	--gb-row: clamp(10rem, 15vw, 13rem);

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--gb-space-l) var(--gb-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gb-works-social__item {
	inline-size: calc(var(--gb-row) * 9 / 16);
}

.gb-works-social__item--tall {
	inline-size: calc(var(--gb-row) * 4 / 5);
}

.gb-works-social__item--square {
	inline-size: var(--gb-row);
}

.gb-works-social__item--landscape {
	inline-size: min(100%, calc(var(--gb-row) * 16 / 9));
}

/* Phones: two columns, a landscape screen across both; "dense" lets a later
   tall screen fill the place beside a lone one, so no row is left half empty. */
@media (max-width: 30rem) {
	.gb-works-social__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: row dense;
		gap: var(--gb-space-l) var(--gb-space-s);
	}

	.gb-works-social__item,
	.gb-works-social__item--tall,
	.gb-works-social__item--square,
	.gb-works-social__item--landscape {
		inline-size: auto;
	}

	.gb-works-social__item--landscape {
		grid-column: 1 / -1;
	}
}

.gb-works-social__all {
	display: flex;
	justify-content: center;
	margin-block-start: var(--gb-space-xl);
}

.gb-works-social .gb-button--outline {
	border-color: var(--gb-color-turquoise-a35);
	color: var(--gb-scene-text);
}

.gb-works-social .gb-button--outline:hover {
	border-color: var(--gb-primary);
	background-color: var(--gb-color-turquoise-a10);
}