/*
 * Home: Videos (pages/home/videos.php).
 *
 * Back to the navy scene after the light services section.
 * Baseline (no JS): each group is a heading + a horizontal swipe strip with
 * scroll-snap (the strip scrolls, never the page).
 * Enhanced (videos.js → data-gb-videos="stage"): a tab bar picks the group;
 * the group's cards become a coverflow stage.
 */

.gb-videos {
	/* Dark scene. */
	--gb-focus: var(--gb-focus-inverse);
	--gb-section-text: var(--gb-scene-text);
	--gb-section-muted: var(--gb-scene-text-muted);
	--gb-section-eyebrow: var(--gb-primary);

	padding-block: var(--gb-space-3xl);
	background-color: var(--gb-scene-bg);
	/* Static glow from the reading-start top corner area, centred so it needs no RTL variant. */
	background-image: radial-gradient(60% 50% at 50% 0%, var(--gb-color-turquoise-a10), transparent 70%);
	color: var(--gb-scene-text);
}

/* ---------- Groups (baseline: stacked, each with its heading) ---------- */

.gb-videos__group + .gb-videos__group {
	margin-block-start: var(--gb-space-xl);
}

.gb-videos__group-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gb-space-2xs) var(--gb-space-s);
	margin-block-end: var(--gb-space-s);
}

.gb-videos__group-title {
	font-size: var(--gb-step-1);
	color: var(--gb-scene-text);
}

.gb-videos__more {
	font-size: var(--gb-step--1);
	color: var(--gb-primary);
	text-underline-offset: 0.3em;
}

.gb-videos__list {
	display: grid;
	grid-auto-flow: column;
	/* Each card keeps its own width (Shorts narrow, landscape wide); the strip scrolls. */
	grid-auto-columns: max-content;
	align-items: start;
	gap: var(--gb-space-s);
	margin: 0;
	/* Room for the focus ring and the hover glow inside the scroll box. */
	padding-block: var(--gb-space-2xs) var(--gb-space-s);
	padding-inline: 0.5rem;
	margin-inline: -0.5rem;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	scroll-padding-inline: 0.5rem;
	scrollbar-width: thin;
	scrollbar-color: var(--gb-color-turquoise-a35) transparent;
}

.gb-videos__item {
	/*
	 * Fade only (no rise): a translated card would briefly overflow the
	 * scroll box and flash a vertical scrollbar while it settles.
	 */
	--gb-appear-shift: 0px;

	inline-size: 13rem;
	scroll-snap-align: start;
}

.gb-videos__item:has(.gb-video--wide) {
	inline-size: 23rem;
}

/* ---------- Tab bar (shown by videos.js) ---------- */

.gb-videos__tabs {
	display: flex;
	justify-content: center;
	gap: var(--gb-space-2xs);
	margin-block-end: var(--gb-space-m);
	/* Narrow screens: one swipeable row instead of wrapping into a block. */
	overflow-x: auto;
	scrollbar-width: none;
	padding: 0.25rem;
}

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

@media (max-width: 40rem) {
	.gb-videos__tabs {
		justify-content: flex-start;
		margin-inline: calc(var(--gb-gutter) * -1);
		padding-inline: var(--gb-gutter);
	}
}

.gb-videos__tab {
	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-turquoise-a35);
	border-radius: var(--gb-radius-pill);
	background-color: transparent;
	color: var(--gb-scene-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-videos__tab:hover {
	border-color: var(--gb-primary);
}

.gb-videos__tab[aria-selected="true"] {
	border-color: var(--gb-primary);
	background-color: var(--gb-primary);
	color: var(--gb-primary-contrast);
}

.gb-videos__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;
	line-height: 1;
}

.gb-videos__tab[aria-selected="true"] .gb-videos__count {
	background-color: rgb(255 255 255 / 0.35);
}

/* ---------- Channel link ---------- */

.gb-videos__channel {
	display: flex;
	justify-content: center;
	margin-block-start: var(--gb-space-m);
}

.gb-videos__channel-link {
	--gb-icon-size: 1.4rem;

	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	min-block-size: 2.75rem;
	padding-block: 0.5em;
	padding-inline: 1.2em;
	border: 1px solid var(--gb-color-turquoise-a35);
	border-radius: var(--gb-radius-pill);
	color: var(--gb-scene-text);
	text-decoration: none;
	transition: border-color var(--gb-duration-fast) linear, background-color var(--gb-duration-fast) linear;
}

.gb-videos__channel-link:hover {
	border-color: var(--gb-primary);
	background-color: var(--gb-color-turquoise-a10);
}

.gb-videos__channel-link .gb-icon {
	color: var(--gb-primary);
}

/* ---------- Video stage (enhanced by videos.js: data-gb-videos="stage") ---------- */

/* Groups are tab panels now: the tab names them, so the heading is read, not shown. */
.gb-videos[data-gb-videos="stage"] .gb-videos__group + .gb-videos__group {
	margin-block-start: 0;
}

.gb-videos[data-gb-videos="stage"] .gb-videos__group-head {
	justify-content: center;
	margin-block-end: 0;
}

.gb-videos[data-gb-videos="stage"] .gb-videos__group-title {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Cards are absolutely placed around the centre; videos.js writes each card's
 * offset as custom properties (--gb-x, --gb-scale, --gb-opacity, --gb-z).
 * Only translate / scale / opacity transition (compositor-friendly).
 *
 * The width is NOT transitioned (revision 6, «الفيديوهات بتعلق»): a landscape
 * card grows when it plays, and a width animation re-measured the YouTube
 * player inside it on every frame while it was loading, and let videos.js
 * place the neighbours by the old width (they slid under the playing card).
 * The width now changes at once and videos.js hides the jump with scale
 * (reshape() there), so the grow still looks smooth.
 */
.gb-videos[data-gb-videos="stage"] .gb-videos__viewport {
	/* Side cards may extend past the container: clip them here, never the page. */
	overflow: clip;
	margin-inline: calc(var(--gb-gutter) * -1);
	padding-block: var(--gb-space-s);
}

.gb-videos[data-gb-videos="stage"] .gb-videos__list {
	--gb-stage-duration: 600ms;

	position: relative;
	display: block;
	block-size: var(--gb-stage-height, 34rem);
	margin: 0;
	padding: 0;
	overflow: visible;
	scroll-snap-type: none;
}

@media (prefers-reduced-motion: reduce) {
	.gb-videos[data-gb-videos="stage"] .gb-videos__list {
		--gb-stage-duration: 0ms;
	}
}

.gb-videos[data-gb-videos="stage"] .gb-videos__item {
	--gb-card-w: clamp(12.5rem, 8rem + 12vw, 17.5rem);

	position: absolute;
	inset-block-start: 0;
	/* Centred on the stage in both directions. */
	inset-inline-start: 50%;
	inline-size: var(--gb-card-w);
	margin-inline-start: calc(var(--gb-card-w) / -2);
	z-index: var(--gb-z, 1);
	opacity: var(--gb-opacity, 1);
	translate: var(--gb-x, 0) var(--gb-y, 0);
	scale: var(--gb-scale, 1);
	transform-origin: 50% 40%;
	transition:
		translate var(--gb-stage-duration) var(--gb-ease-out),
		scale var(--gb-stage-duration) var(--gb-ease-out),
		opacity var(--gb-stage-duration) linear;
}

/* Landscape videos have a wider card… */
.gb-videos[data-gb-videos="stage"] .gb-videos__item:has(.gb-video--wide) {
	--gb-card-w: min(100% - var(--gb-gutter) * 2, clamp(18rem, 10rem + 30vw, 37rem));
}

/* …and grow a little more while they play at the front. */
.gb-videos[data-gb-videos="stage"] .gb-videos__item:has([data-gb-wide]) {
	--gb-card-w: min(100% - var(--gb-gutter) * 2, 46rem);
}

/* Only the front card shows its title; the others are pictures to choose from. */
.gb-videos[data-gb-videos="stage"] .gb-videos__item:not([data-gb-front]) .gb-video__meta,
.gb-videos[data-gb-videos="stage"] .gb-videos__item:not([data-gb-front]) .gb-video__pending {
	opacity: 0;
}

.gb-videos[data-gb-videos="stage"] .gb-video__meta {
	transition: opacity var(--gb-stage-duration) linear;
}

/* The front card gets a turquoise frame and a stronger glow. */
.gb-videos[data-gb-videos="stage"] .gb-videos__item[data-gb-front] .gb-video__poster {
	border-color: var(--gb-primary);
	box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.55), 0 0 0 1px var(--gb-primary);
}

.gb-videos__controls {
	display: flex;
	justify-content: center;
	gap: var(--gb-space-s);
	margin-block-start: var(--gb-space-s);
}

/* The class sets display, so `hidden` must be re-asserted explicitly. */
.gb-videos__controls[hidden] {
	display: none;
}

.gb-videos__step {
	display: grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	padding: 0;
	border: 1px solid var(--gb-color-turquoise-a35);
	border-radius: 50%;
	background-color: transparent;
	color: var(--gb-scene-text);
	cursor: pointer;
	transition: background-color var(--gb-duration-fast) linear, border-color var(--gb-duration-fast) linear;
}

.gb-videos__step:hover {
	border-color: var(--gb-primary);
	background-color: var(--gb-color-turquoise-a20);
}

.gb-videos__step svg {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The chevrons are drawn for RTL (previous points right); mirror them in LTR. */
[dir="ltr"] .gb-videos__step svg {
	scale: -1 1;
}