/*
 * Work media (components/work-media/) — extends the video card
 * (video-facade.css) with: a video file of the site, a picture, and the
 * «بانتظار الملف» card; plus the grids that hold them (the /works/ gallery
 * and a case study's «من العمل»): landscape and vertical in their own rows.
 */

/* ---------- Grids ---------- */

.gb-works-grid {
	display: grid;
	align-items: start;
	gap: var(--gb-space-m) var(--gb-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gb-works-grid--wide {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.gb-works-grid--tall {
	grid-template-columns: repeat(auto-fill, minmax(min(46%, 11.5rem), 1fr));
}

/* One landscape video: a comfortable size, centred. */
.gb-works-grid--wide[data-count="1"] {
	grid-template-columns: minmax(0, 46rem);
	justify-content: center;
}

.gb-works-grid--tall[data-count="1"] {
	grid-template-columns: minmax(0, 18rem);
	justify-content: center;
}

.gb-works-grid + .gb-works-grid {
	margin-block-start: var(--gb-space-l);
}

.gb-works-grid__item[hidden],
.gb-works-grid[hidden] {
	display: none;
}

/* ---------- A video file of the site ---------- */

.gb-video__file {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	background-color: var(--gb-color-navy);
}

/* Playing: the whole picture, never cropped. */
.gb-video[data-gb-playing] .gb-video__file {
	object-fit: contain;
}

/*
 * The site's play button over the poster (added by work-media.js). A real
 * button, so it takes the click: the YouTube cards' play disc lets clicks
 * through to their link (video-facade.css, revision 8), and that rule had
 * reached this button too — the <video> under it got the click and nothing
 * played (owner 2026-10-07 16:15 «الزرار بتاع التشغيل مش شغال»). Revision 15.
 */
.gb-video__play--file {
	z-index: 1;
	border: 0;
	padding: 0;
	cursor: pointer;
	pointer-events: auto;
}

/* The whole picture plays it too (work-media.js), until the controls are shown. */
.gb-video--file[data-gb-ready]:not([data-gb-playing]) .gb-video__file {
	cursor: pointer;
}

.gb-video[data-gb-playing] .gb-video__play--file {
	display: none;
}

/* Without the script the browser's own controls are used: no veil over them. */
.gb-video--file:not([data-gb-ready]) .gb-video__poster::after {
	content: none;
}

/* ---------- A picture ---------- */

/*
 * 16:9 like the landscape videos beside it (revision 10, owner 12:42: the
 * agreement picture «اظبط المقاس يكون زي الباقيين» — at 3:2 it stood taller
 * than its row). The picture is cut from the middle.
 */
.gb-video--image .gb-video__poster {
	aspect-ratio: 16 / 9;
}

/* ---------- No file yet (Local / Staging) ---------- */

.gb-video__missing {
	position: absolute;
	inset-block-end: var(--gb-space-s);
	inset-inline: var(--gb-space-s);
	justify-self: center;
	inline-size: fit-content;
	margin-inline: auto;
	padding-block: 0.2em;
	padding-inline: 0.8em;
	border: 1px dashed #D9A21B;
	border-radius: var(--gb-radius-pill);
	background-color: #FFF6DC;
	color: #6B4D00;
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
}

/* The review mark under a card. */
.gb-video > .gb-review-mark {
	margin-block-start: var(--gb-space-3xs);
}