/*
 * A screen of «شاشات الرياض» (components/screen/, Stage 7).
 *
 * A lit screen on the night scene: the cover (or its silent clip) behind
 * glass — a dark bezel, a turquoise glow, a soft reflection across the
 * top — the platform's badge in a corner, the title below. The whole screen
 * is the link (stretched from the title).
 *
 * Shapes: landscape 16:9, portrait 9:16, tall 4:5 (Instagram, TikTok covers),
 * square 1:1.
 */

.gb-screen {
	--gb-screen-radius: 0.6rem;
	--gb-screen-glow: var(--gb-color-turquoise-a35);

	position: relative;
	display: grid;
	gap: var(--gb-space-2xs);
	align-content: start;
	color: var(--gb-scene-text);
}

.gb-screen__panel {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--gb-screen-radius);
	background-color: #050D18;
	box-shadow:
		0 0 0 1px rgb(255 255 255 / 0.1),
		0 0 0 0.3rem #081627,
		0 0 2.2rem -0.4rem var(--gb-screen-glow);
	transition: box-shadow var(--gb-duration-base) linear;
}

.gb-screen--portrait .gb-screen__panel {
	aspect-ratio: 9 / 16;
}

.gb-screen--tall .gb-screen__panel {
	aspect-ratio: 4 / 5;
}

.gb-screen--square .gb-screen__panel {
	aspect-ratio: 1;
}

.gb-screen__cover,
.gb-screen__clip {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: scale var(--gb-duration-slow) var(--gb-ease-out);
}

/* The clip fades in over the cover once it has pictures (never a black frame). */
.gb-screen__clip {
	opacity: 0;
	transition: opacity 0.6s linear;
}

.gb-screen__clip[data-gb-ready] {
	opacity: 1;
}

/* The glass: a soft reflection across the top, the bottom a little darker for the badge. */
.gb-screen__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgb(255 255 255 / 0.13), transparent 32%),
		linear-gradient(to top, rgb(5 13 24 / 0.45), transparent 38%);
	pointer-events: none;
}

.gb-screen__badge {
	--gb-icon-size: 0.95em;

	position: absolute;
	z-index: 1;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	max-inline-size: calc(100% - 1rem);
	padding-block: 0.25em;
	padding-inline: 0.6em 0.75em;
	border-radius: var(--gb-radius-pill);
	background-color: rgb(5 13 24 / 0.72);
	color: var(--gb-scene-text);
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gb-screen__badge .gb-icon {
	flex: none;
	color: var(--gb-primary);
}

/* A post with a clip, in the list: a small play mark. */
.gb-screen__flag {
	--gb-icon-size: 0.85rem;

	position: absolute;
	z-index: 1;
	inset-block-end: 0.5rem;
	inset-inline-end: 0.5rem;
	display: grid;
	place-items: center;
	inline-size: 1.9rem;
	block-size: 1.9rem;
	border-radius: 50%;
	background-color: var(--gb-primary);
	color: var(--gb-primary-contrast);
}

.gb-screen__text {
	display: grid;
	gap: var(--gb-space-3xs);
}

.gb-screen__title {
	margin: 0;
	font-family: var(--gb-font-sans);
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
	line-height: 1.55;
}

.gb-screen__link {
	color: inherit;
	text-decoration: none;
}

/* Stretched: the whole screen is the target. */
.gb-screen__link::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	border-radius: var(--gb-screen-radius);
}

.gb-screen__link:focus-visible {
	outline: none;
	box-shadow: none;
}

.gb-screen__link:focus-visible::after {
	outline: 3px solid var(--gb-focus-inverse);
	outline-offset: 5px;
}

/* One short line under the title; two lines at most on narrow screens (the whole line is on the post). */
.gb-screen__caption {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	font-size: var(--gb-step--1);
	color: var(--gb-scene-text-muted);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.gb-screen:hover .gb-screen__panel {
	--gb-screen-glow: var(--gb-color-turquoise-a60);
}

.gb-screen:hover .gb-screen__cover {
	scale: 1.04;
}

.gb-screen__text > .gb-review-mark {
	justify-self: start;
}