/* «Про що ця історія» — Figma «About The Show» 3110:3516 (1440×1110) /
   4255:14917 (390×798). tz-ua.md §4.4(4).

   Only 390 and 1440 frames exist for the performance page
   (global-constraints.md's node table, inventory.md). As in
   performance-hero.css, the mobile layout stays fluid up to 1440 rather
   than inventing an unmeasured tablet layout, and the 1440 layout then
   holds through 1920 (content capped at the frame's own 1328 / 1207 and
   centred). Type sizes still step at 768 and 1920 — those steps are the
   .fig's own variable modes, carried by tokens.css.

   The section background is the .fig's own paper texture (image fill
   c785242b…, 4096×2731, used by 123 nodes incl. Show Facts), exported
   from the local .fig and re-encoded to 1920px q45 (333 KB) — the source
   is an 8.4 MB photo. */

.performance-about {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80px 16px;
	overflow: hidden;

	/* The page's own step between sections, declared once on `main`
	   (`--podil-section-gap`, performance-hero.css): 120 at 390 (the page frame
	   4372:22987 is a VERTICAL auto-layout with `itemSpacing: 120`), 180 at 1440
	   (3106:1887 measures 181 from «Show Schedule» to this frame — the same step,
	   rounded). Nothing declared it here before, so the section sat flush against
	   the schedule above it on a page that has both. */
	margin-top: var(--podil-section-gap);
}

/* The texture is an image fill at **40 %** over a frame with no colour of its
   own (3110:3516 / 4255:14917: `scaleMode: FILL, opacity: 0.4`), so it is a
   layer over the page background rather than the section's own background. */
.performance-about::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background-image: url(../../img/paper-texture__3110-3516.jpg);
	background-position: center;
	background-size: cover;
	opacity: 0.4;
	pointer-events: none;
}

.performance-about__inner {
	z-index: 1;
}

.performance-about__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 1328px;
	gap: 24px;
}

.performance-about__synopsis {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 40px;
}

.performance-about__header {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.performance-about__title {
	margin: 0;
	font-family: var(--font-title);
	font-size: var(--fs-h2-s);

	/* The .fig's H2/H2 S at the 390 mode is 38/40 (103 nodes, incl.
	   4255:14920), while tokens.css derives --lh-h2-s from the font size
	   (38). Reported as NEEDS_CONTEXT — tokens/ is nobody's file during
	   parallel work — so the 2px it costs the mobile title's height stays
	   a residual here instead of a raw px override. */
	font-weight: 400;
	line-height: var(--lh-h2-s);
	letter-spacing: var(--ls-h2-s);

	/* leadingTrim CAP_HEIGHT on the title node (3222:13103 / 4255:14920).
	   Kilok is not licensed yet, so the site runs Exo 2 under its name
	   (fonts.css): Figma trims to Kilok's 0.70 em cap, the substitute's is
	   0.659 em, and the 0.041 em is added back as bottom padding — the same
	   remedy visit.css uses for its own cap-trimmed title. */
	padding-bottom: 0.041em;
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
	color: var(--color-neutral-800);
}

.performance-about__description {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* «Play Theme Statement» 3110:3522 — «Menu,button» 600, upper, no trim. */
.performance-about__lead {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-menu-button);
	font-weight: 600;
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	text-transform: uppercase;
	color: var(--color-neutral-800);
}

/* «Director Quote» 3110:3524 — «M/M text», leadingTrim CAP_HEIGHT. */
.performance-about__text {
	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);
	color: var(--color-neutral-800);
}

/* Every Figma text layer is trimmed on its own, so the trim belongs on the
   paragraphs and not on the container: «Director Quote» 3110:3524 has
   leadingTrim CAP_HEIGHT, the play quote under it (3110:3528) does not. */
.performance-about__text > p {
	margin: 20px 0 0;
	text-box: trim-both cap alphabetic;
}

.performance-about__text > :first-child {
	margin-top: 0;
}

.performance-about__text > :last-child {
	margin-bottom: 0;
}

/* «Quote» → «Paragraph» 3110:3528 — the play quote (tz-ua.md §4.4(4)):
   «S/S text (Italic)», no trim, and its own 20px above, the gap the .fig
   puts between «Play Description» and «Quote». */
.performance-about__text blockquote {
	margin: 20px 0 0;
	padding: 0;
	font-size: var(--fs-s-text);
	font-style: italic;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

.performance-about__text blockquote p {
	margin: 0;
}

.performance-about__text blockquote cite {
	display: block;
	font-style: normal;
}

/* Trailer slider. 3126:3585 «Trailer Video Player» — 1207 wide, centred;
   caption 20px under the video (12px at 390). */
.performance-about__trailers {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 1207px;

	--c-slider-caption-gap: 12px;
}

.performance-about__trailers .c-slider,
.performance-about__trailers .c-slider__viewport,
.performance-about__trailers .c-slider__track,
.performance-about__trailers .c-slider__slide,
.performance-about__trailers .c-slider__figure {
	width: 100%;
}

/* The video box itself is the shared component (components/video.css,
   «Trailer Video Player» 3126:3585 / 4255:14929): the same box, scrim, play
   button and running-time plate the rest of the site uses. Only the slide's
   own width belongs here. */
.performance-about__trailers .c-video__frame {
	width: 100%;
}

/* «Inspiration CTA Label» 4255:14938 (390) / 3170:2411 (1440) —
   decoration, `aria-hidden` in the markup. Positioned against the
   content box, not the viewport, so it keeps the same relation to the
   text at 1920 where the .fig has no frame: at 1440 the .fig puts it 59px
   left of the content's left edge (x=-3 with a 56px gutter). */
.performance-about__sticker {
	position: absolute;
	top: -29px;
	left: 226px;
	display: block;
	width: 140.231px;
	height: 84.389px;
}

.performance-about__sticker-text {
	position: absolute;
	top: 51.88px;
	left: 14.286px;
	width: 124.4px;
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	font-weight: 700;
	line-height: 14.232px;
	text-transform: uppercase;

	/* The .fig rotates the words; the REST dump carries no transform, so the
	   angle is solved from the node's own rotated bounding box (214.528 ×
	   104.259 around a two-line 209.5px box → 16°, confirmed by measuring the
	   rendered box back against those numbers) and the direction is the one
	   the frame render shows. Exact transform requested in
	   designer-questions.md. The 390 sticker is not the 1440 one scaled: its
	   own bounding boxes solve to 22.2° at 0.594 scale (the arrow vector's
	   8.518 × 20.863 box gives the angle directly, tan θ = w/h). */
	transform: rotate(-22.2deg);
	transform-origin: left top;

	/* #0C9586 is 3.7:1 on the section's paper ground, under 4.5:1 for
	   text → --color-primary-700 (5.5:1), the substitution
	   designer-questions.md already records for this colour on light. */
	color: var(--color-primary-700);
}

/* «Arrow 3» 3286:10975 / 4255:14941 — the hand-drawn arrow under the
   words, with «Arrow 1»/«Arrow 2» overlapping inside its box. The span is
   the layer's own box (what spec-diff measures); the image inside is the
   three layers composited at their render bounds, which the noise texture
   makes larger than the box, so it is allowed to overflow. */
.performance-about__sticker-arrow {
	position: absolute;
	top: 32.595px;
	left: 0.076px;
	display: block;
	width: 126.822px;
	height: 51.779px;
}

.performance-about__sticker-arrow-img {
	position: absolute;
	top: -36.016px;
	left: -7.128px;
	width: 140.04px;
	height: 97.37px;
	max-width: none;
}

@media (min-width: 1440px) {

	.performance-about {
		padding: 100px 56px;
	}

	.performance-about__inner {
		gap: 80px;
	}

	.performance-about__synopsis {
		flex-direction: row;
		gap: 24px;
	}

	.performance-about__header {
		width: 539px;
		flex: 0 0 auto;
	}

	.performance-about__description {
		width: 760px;
		flex: 0 0 auto;
	}

	.performance-about__trailers {
		--c-slider-caption-gap: 20px;
	}

	.performance-about__sticker {
		top: 135px;
		left: -59px;
		width: 238.585px;
		height: 121.172px;
	}

	.performance-about__sticker-text {
		top: 57.75px;
		left: 20.916px;
		width: 209.5px;
		font-size: var(--fs-m-text);
		line-height: var(--lh-m-text);
		transform: rotate(-16deg);
		transform-origin: left top;
	}

	.performance-about__sticker-arrow {
		top: 57px;
		left: 16.599px;
		width: 221.919px;
		height: 64.133px;
	}

	.performance-about__sticker-arrow-img {
		top: -18.745px;
		left: -33.634px;
		width: 265.604px;
		height: 101.016px;
	}
}