/*
 * Video facade card + shared player dialog (components/video-facade/).
 *
 * Cards take the ratio of their video: 9:16 for Shorts, 16:9 for landscape
 * videos (.gb-video--wide). The player dialog (obsolete since Stage 2B, kept
 * until the final clean-up) does the same.
 */

/* ---------- Card ---------- */

.gb-video {
	position: relative;
	display: grid;
	gap: var(--gb-space-xs);
	align-content: start;
}

.gb-video__poster {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border: 1px solid var(--gb-color-turquoise-a20);
	border-radius: var(--gb-radius-l);
	/* Static glows; the variant only moves them so the posters are not identical. */
	background-color: var(--gb-color-navy);
	background-image:
		radial-gradient(70% 45% at var(--gb-video-glow-x, 30%) var(--gb-video-glow-y, 25%), var(--gb-color-turquoise-a35), transparent 70%),
		radial-gradient(50% 30% at 80% 90%, var(--gb-color-orange-a35), transparent 70%);
	transition: border-color var(--gb-duration-base) linear;
}

.gb-video--v2 .gb-video__poster {
	--gb-video-glow-x: 75%;
	--gb-video-glow-y: 40%;
}

.gb-video--v3 .gb-video__poster {
	--gb-video-glow-x: 45%;
	--gb-video-glow-y: 70%;
}

.gb-video__image,
.gb-video__art {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/*
 * A real frame of the video (owner, 2026-10-05): a soft navy veil from the
 * bottom keeps the play button and the card's edge readable on any picture,
 * and ties every frame to the site's palette.
 */
.gb-video--photo .gb-video__poster::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgb(12 35 66 / 0.6), transparent 55%),
		radial-gradient(60% 50% at 50% 50%, rgb(12 35 66 / 0.25), transparent 75%);
	pointer-events: none;
}

.gb-video--photo .gb-video__play {
	z-index: 1;
}

.gb-video__frame {
	fill: none;
	stroke: var(--gb-color-turquoise-a60);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke var(--gb-duration-base) linear;
}

.gb-video:hover .gb-video__frame {
	stroke: var(--gb-primary);
}

.gb-video__dot {
	fill: var(--gb-seed);
}

/* Play button: turquoise disc, dark triangle (contrast on turquoise). */
.gb-video__play {
	--gb-icon-size: 1.4rem;

	position: relative;
	display: grid;
	place-items: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: 50%;
	background-color: var(--gb-primary);
	color: var(--gb-primary-contrast);
	box-shadow: 0 0 0 0.5rem var(--gb-color-turquoise-a20);
	/* A picture of a button: the click goes through it to the card's link (revision 8 — it swallowed the click). */
	pointer-events: none;
	transition:
		scale var(--gb-duration-base) var(--gb-ease-out),
		box-shadow var(--gb-duration-base) var(--gb-ease-out);
}

/* The triangle points right in both directions: a play symbol is not text. */
.gb-video__play .gb-icon {
	translate: 0.1rem 0;
}

.gb-video:hover .gb-video__poster {
	border-color: var(--gb-primary);
}

.gb-video:hover .gb-video__play {
	scale: 1.08;
	box-shadow: 0 0 0 0.8rem var(--gb-color-turquoise-a20);
}

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

.gb-video__format {
	font-size: var(--gb-step--1);
	color: var(--gb-primary);
}

.gb-video__title {
	font-family: var(--gb-font-sans);
	font-size: var(--gb-step-0);
	line-height: 1.5;
}

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

/* Stretched link: the whole card is the target. */
.gb-video__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--gb-radius-l);
}

/* Keyboard focus outlines the whole card, not just the title text. */
.gb-video__link:focus-visible {
	outline: none;
	box-shadow: none;
}

.gb-video__link:focus-visible::after {
	outline: 3px solid var(--gb-focus);
	outline-offset: 4px;
}

/* Review-only badge for videos still waiting for a permission. */
.gb-video__pending {
	position: absolute;
	inset-block-start: var(--gb-space-2xs);
	inset-inline-start: var(--gb-space-2xs);
	padding-block: 0.2em;
	padding-inline: 0.7em;
	border-radius: var(--gb-radius-pill);
	background-color: var(--gb-accent);
	color: var(--gb-color-neutral-900);
	font-size: var(--gb-step--1);
	font-weight: var(--gb-weight-bold);
	pointer-events: none;
}

/* ---------- Player dialog ---------- */

.gb-video-dialog {
	--gb-focus: var(--gb-focus-inverse);

	inline-size: min(92vw, var(--gb-video-max, 64rem));
	max-inline-size: none;
	max-block-size: none;
	margin: auto;
	padding: 0;
	border: 0;
	background-color: transparent;
	color: var(--gb-scene-text);
	overflow: visible;
}

.gb-video-dialog::backdrop {
	background-color: rgb(12 35 66 / 0.92);
}

/* Width follows the video's ratio so the player fits inside the viewport height. */
.gb-video-dialog[data-gb-video-format="short"] {
	--gb-video-max: calc((100svh - 7rem) * 9 / 16);
}

.gb-video-dialog[data-gb-video-format="video"] {
	--gb-video-max: min(64rem, calc((100svh - 7rem) * 16 / 9));
}

.gb-video-dialog__inner {
	display: grid;
	gap: var(--gb-space-xs);
}

.gb-video-dialog__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gb-space-s);
}

.gb-video-dialog__title {
	font-size: var(--gb-step--1);
	color: var(--gb-scene-text-muted);
}

.gb-video-dialog__close {
	--gb-icon-size: 1.1rem;

	display: grid;
	flex: none;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid var(--gb-scene-text-muted);
	border-radius: 50%;
	background-color: transparent;
	color: var(--gb-scene-text);
	cursor: pointer;
}

.gb-video-dialog__close:hover {
	border-color: var(--gb-scene-text);
}

.gb-video-dialog__frame {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--gb-radius-l);
	background-color: #000;
}

.gb-video-dialog[data-gb-video-format="short"] .gb-video-dialog__frame {
	aspect-ratio: 9 / 16;
}

.gb-video-dialog__frame iframe {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

html:has(.gb-video-dialog[open]) {
	overflow: hidden;
}

/* ---------- Playing in place (video-facade.js) ---------- */

.gb-video__player {
	position: absolute;
	inset: 0;
	z-index: 2;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	background-color: #000;
	transition: opacity var(--gb-duration-base) linear;
}

/*
 * While YouTube's player loads (video-facade.js, data-gb-loading) it is not
 * shown: the poster stays with a turning ring, so the card never sits black
 * and looks frozen (revision 6). The player fades in once loaded.
 */
.gb-video[data-gb-loading] .gb-video__player {
	opacity: 0;
}

/* While playing, the poster art steps back and the stretched link must not cover the player. */
.gb-video[data-gb-playing] .gb-video__play,
.gb-video[data-gb-playing]:not([data-gb-loading]) .gb-video__art,
.gb-video[data-gb-playing]:not([data-gb-loading]) .gb-video__image {
	visibility: hidden;
}

/*
 * Loading: a ring where the play button was — YouTube's player loading, or a
 * video file of the site waiting for its first pictures (work-media.js).
 */
.gb-video[data-gb-loading] .gb-video__poster::before {
	content: "";
	position: absolute;
	z-index: 3;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	margin-block-start: -1.75rem;
	margin-inline-start: -1.75rem;
	border: 3px solid var(--gb-color-turquoise-a35);
	border-block-start-color: var(--gb-primary);
	border-radius: 50%;
	/* A dark disc so the ring reads on a bright frame too. */
	background-color: rgb(12 35 66 / 0.55);
	pointer-events: none;
	animation: gb-video-turn 0.9s linear infinite;
}

@keyframes gb-video-turn {
	to {
		rotate: 1turn;
	}
}

/* Still feedback without motion: the ring turns slowly. */
@media (prefers-reduced-motion: reduce) {
	.gb-video[data-gb-loading] .gb-video__poster::before {
		animation-duration: 3s;
	}
}

/* …and the veil goes too, so it never darkens the player. */
.gb-video[data-gb-playing] .gb-video__poster::after {
	content: none;
}

.gb-video[data-gb-playing] .gb-video__link::after {
	content: none;
}

/*
 * The video that was playing before a reload (place-memory.js, revision 9):
 * framed in turquoise until it plays again, so the eye finds it.
 */
.gb-video[data-gb-resume] .gb-video__poster {
	outline: 3px solid var(--gb-primary);
	outline-offset: 4px;
}

/* Landscape videos: a 16:9 card from the start, and a 16:9 screen while playing. */
.gb-video--wide .gb-video__poster,
.gb-video[data-gb-wide] .gb-video__poster {
	aspect-ratio: 16 / 9;
}