/* Video — Figma «Trailer Video Player» `3126:3585` (1440) / `4255:14929` (390).

   This is the only video player the design draws: a poster under a 50 % scrim,
   a round play button, the running time in a plate at the bottom right, and a
   caption under the box. «video» `3759:7501` on the people page, despite its
   name, is a still photograph with two headings — not a player.

   Numbers from the two nodes:

   | | 390 | 1440 |
   |---|---|---|
   | box | 358×177 | 1207×600 |
   | box → caption | 12 | 20 |
   | play button | 56×56, glyph 24 | 100×100, glyph 32 |
   | duration plate | pad 7/12, radius 2 | the same, right 24, bottom 25 |

   Nothing is requested from YouTube or Vimeo until the reader presses play —
   not even a thumbnail: the poster is the theatre's own image. The `<iframe>`
   is created by that press (`@podil/lite-video`).

   Animation: none. `interactions` is empty on `3126:3585` and its whole
   subtree, so the preview is replaced without a transition.

   The performance page's trailer slider renders this same part
   (`podil_about_trailer_html()`), so there is one box, one play button and one
   module in the project; `performance-about.css` keeps only what is the
   SECTION's (the 1207 column, the slider's own widths). */

.c-video {
	display: flex;
	flex-direction: column;

	/* «Container» 4255:14930 itemSpacing. */
	gap: 12px;
	margin: 0;
}

/* The box. 1px inside stroke #D7D5D2: not a token (designer-questions.md),
   nearest is --color-neutral-300 (#D0D5DC). An inside stroke is a
   `box-shadow: inset` per the project's convention, so it costs no layout. */
.c-video__frame {
	position: relative;
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 358 / 177;
	overflow: hidden;
	background: var(--color-neutral-200);
	box-shadow: inset 0 0 0 1px var(--color-neutral-300);
}

.c-video__poster,
.c-video__frame iframe,
.c-video__file {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* A file plays in the browser's own player: it must show the whole frame, not
   a crop, because its controls sit inside it — so `contain` on its own ground
   rather than the poster's `cover`. */
.c-video__file {
	object-fit: contain;
	background: var(--color-neutral-950);
}

/* «Rectangle 6043» 3126:3600 — rgba(0,0,0,0.5) over the poster. The node is
   the box's full height and 1px narrower, offset from the left edge; the
   inside stroke here is a `box-shadow`, which costs no layout, so `inset`
   already measures the whole box. */
.c-video__scrim {
	position: absolute;
	inset: 0 0 0 1px;
	background: rgb(0 0 0 / 50%);
}

/* «Section / Premiere» 4128:11611 — a 56×56 circle at 390 (100×100 at 1440),
   rgba(255,255,255,0.1) over a 32px backdrop blur. */
.c-video__play {
	position: relative;
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 43.5px; /* the node's own radius; it rounds a 56×56 box fully. */
	background: rgb(255 255 255 / 10%);
	backdrop-filter: blur(32px);
	cursor: pointer;

	/* The .fig's own auto-layout gap on this one-child frame. */
	gap: 10px;
}

/* «Icon/PlayFilled» 4127:11609 — a 22×24 glyph in a 32×32 box (16.5×18 in
   24×24 at 390), white per the node's own fill. */
.c-video__play svg {
	display: block;
	width: 24px;
	height: 24px;
	color: var(--color-base-white);
}

/* «Text» 3126:3593 — «M/M text» white on #272B30, 7/12 padding, radius 2,
   24 from the right and 25 from the bottom of the box. */
.c-video__duration {
	position: absolute;
	right: 24px;
	bottom: 25px;
	margin: 0;
	padding: 7px 12px;
	border-radius: 2px;
	background: var(--color-neutral-800);
	color: var(--color-base-white);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	font-weight: 400;
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
	text-box: trim-both cap alphabetic;
}

/* «Трейлер вистави …» 3126:3596 / 4255:14937 — «M/M text», leadingTrim
   CAP_HEIGHT (checked in file.json: a single line is 14 tall at 20/24, two are
   31 at 16/20). */
.c-video__caption {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	font-weight: 400;
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
	text-box: trim-both cap alphabetic;
}

/* Under forced-colors the plate's background and the button's translucent
   fill are both flattened, so the play button loses its edge entirely. */
@media (forced-colors: active) {

	.c-video__play {
		outline: 1px solid ButtonText;
		outline-offset: -1px;
	}
}

/* ================================================================= 1440+ */

@media (min-width: 1440px) {

	.c-video {
		gap: 20px;
	}

	.c-video__frame {
		aspect-ratio: 1207 / 600;
	}

	.c-video__play {
		width: 100px;
		height: 100px;
		border-radius: 100px; /* 4128:11611's own radius. */
	}

	.c-video__play svg {
		width: 32px;
		height: 32px;
	}
}