/* Performance page hero + buy card — Figma «Show Detail Hero»
   3076:2406 (1440) / «Frame 1437255316» 4372:22988 within
   4234:26099 (390); buy card «Ticket Purchase» 3076:2406
   (available), 3834:13999 (sold out), 3834:13093 (archive).
   tz-ua.md §4.4(1).

   Only 390 and 1440 hero frames exist (global-constraints.md's
   node table); no 768/1024 hero is drawn. Per tz-ua.md §8
   ("контрольні точки мінімум 768 і 1024… решта — письмовими
   правилами"), the mobile (stacked) layout below simply stays
   fluid up to 1440 — a single control point — rather than
   inventing an unmeasured intermediate layout; 1440's fixed
   three-column spec then holds through 1920 (no wider hero node
   either).

   The buy card only exists in the 1440 hero (the 390 hero has no
   "Ticket Purchase" — that width's purchase entry point is the
   sticky bar, a separate task/slot per controller ruling R3), so
   `.buy-card` stays hidden below 1440. */

/* ---------------------------------------------------- section rhythm (page) */

/* The performance page's own vertical rhythm, one declaration for the whole
   stack: the 390 page frame (4372:22987) is a VERTICAL auto-layout with
   `itemSpacing: 120`, and in the 1440 frame (3106:1887) every consecutive pair
   of sections measures 180 apart (hero→schedule 180, schedule→about 181 —
   a rounding of the same step — and 180 for all twelve pairs below it). It is
   a page-level gap, not part of any section's frame, so it is declared here,
   on the page's own `main`, and every section reads it
   (performance-sections.css, performance-t14.css, performance-about.css)
   instead of repeating the pair of numbers per section. «Quick Navigation Bar»
   3099:2411 keeps its own 85/45, which is not this step. */
#content {
	--podil-section-gap: 120px;
}

@media (min-width: 1440px) {

	#content {
		--podil-section-gap: 180px;
	}
}

.performance-hero {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 16px;
}

/* Fix round 2 (R12): breadcrumbs is the first element in the DOM at every
   width (reading order breadcrumbs -> poster -> title). At <1440 that is
   also the visual order via plain block/flex stacking, so
   .performance-hero__crumbs needs no positioning rule here — only the
   1440 override below moves it into the title column, and only via
   grid-column/grid-row, never `order`. */

.performance-hero__poster {
	position: relative;
	overflow: hidden;
	aspect-ratio: 358 / 479;
	background: var(--color-neutral-100);
}

.performance-hero__poster-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Client fix ПР-4: was a plain rectangle (its own position/height/
   padding/colour/type, no slant) — now the shared slanted band
   (poster-band.css), same component the repertoire and afisha cards
   already use for this exact marker. Only the two custom properties
   belong here; shape, colour, type and the flex centering come from
   `.c-poster-band` itself. */
.performance-hero__age {
	--c-poster-band-height: 64px;
}

.performance-hero__body {
	display: flex;
	flex-direction: column;

	/* Gap from the poster above it: 16px (.performance-hero's own flex gap,
	   shared with crumbs->poster) + 8px here = 24px, matching Figma's
	   Rating-Container-to-Frame1437255305 gap at 390. Overridden at 1440
	   (grid row-gap takes over; see below). */
	margin-top: 8px;
	gap: 32px;
}

.performance-hero__title-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.performance-hero__tagline {
	margin: 0;

	/* Figma's Subtitle colour (--color-primary-500, #12AD99) on the page's
	   own --color-neutral-50 (#FAFAFA) background is 2.7:1 — fails WCAG AA
	   (min. 4.5:1 for this size). Same defect already documented for this
	   token elsewhere (designer-questions.md); replaced with
	   --color-primary-700 (5.26:1), the same substitution used there. */
	color: var(--color-primary-700);
	font-family: var(--font-body);
	font-size: var(--fs-menu-button);
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	font-weight: 600;
	text-transform: uppercase;
}

.performance-hero__title {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h1-s);
	line-height: var(--lh-h1-s);
	letter-spacing: var(--ls-h1-s);
	font-weight: 400;
	text-transform: uppercase;

	/* Figma: leadingTrim CAP_HEIGHT on "Show Title" (3419:10953) — the
	   line box is trimmed to the cap/baseline, not the font's full
	   line-height. Progressive enhancement, same pattern as every other
	   title in the theme (event-card.css, mobile-menu.css, afisha.css,
	   visit.css): supporting engines trim to match; without it the box
	   stays at the full line-height, still correct text, just measured
	   taller than the spec's trimmed box. */
	text-box: trim-both cap alphabetic;

	/* At 320 px with the widget's 150 % step (and again with the dyslexia
	   face, which is wider still) a single Ukrainian word of this heading is
	   longer than the column, and an unbreakable word is clipped by its own
	   box — `element-overflow.js` on the three real performances reported it
	   at 320/360/390. The theme's established remedy, used by the repertoire
	   and afisha titles for exactly this case: let the word break rather than
	   cut it or widen the page. Nothing changes at the design's own sizes,
	   where no word reaches the edge. */
	overflow-wrap: anywhere;
}

.performance-hero__quote {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	font-weight: 400;
}

.performance-hero__quote q {
	quotes: "«" "»";
}

.performance-hero__specs {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.performance-hero__spec {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.performance-hero__spec-label {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	font-weight: 400;
}

.performance-hero__spec-label svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.performance-hero__spec-value {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	font-weight: 600;
}

.performance-hero__duration-note {
	margin-left: 2px;
	color: var(--color-neutral-500);
	font-weight: 400;
}

/* Accordion — accessibility-ua.md §3.5: button with
   aria-expanded/aria-controls. */

.performance-hero__accordion {
	padding-top: 24px;
	padding-bottom: 24px;
	border-top: 1px solid var(--color-neutral-300);
}

.performance-hero__accordion-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
}

.performance-hero__accordion-icon {
	position: relative;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.performance-hero__accordion-icon::before,
.performance-hero__accordion-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--color-primary-500);
	transform: translate(-50%, -50%);
}

.performance-hero__accordion-icon::before {
	width: 18px;
	height: 4px;
}

.performance-hero__accordion-icon::after {
	width: 4px;
	height: 18px;
	transition: transform 0.2s ease;
}

/* Open = a minus (vertical bar collapses) — confirmed against the
   390 frame, which is captured mid-interaction with this
   accordion already expanded (4372:22988: only the horizontal
   "Divider" rectangle remains, no vertical one). */
.performance-hero__accordion-toggle[aria-expanded="true"]
.performance-hero__accordion-icon::after {
	transform: translate(-50%, -50%) scaleY(0);
}

html[data-motion="reduced"] .performance-hero__accordion-icon::after {
	transition-duration: 0.01ms;
}

.performance-hero__accordion-panel {
	padding-top: 20px;
}

.performance-hero__accordion-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
}

.performance-hero__accordion-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.performance-hero__accordion-row dt {
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	font-weight: 400;
}

.performance-hero__accordion-row dd {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	font-weight: 600;
}

/* Buy card — hidden below 1440 (see file-level note above the buy card gets a
   dedicated three-column slot inside .performance-hero). */

.buy-card {
	display: none;
	flex-direction: column;
	gap: 11px;
}

.buy-card__specs {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 20px;
	background: var(--color-neutral-50);
}

.buy-card__group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.buy-card__group--tight {
	gap: 4px;
}

.buy-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	padding: 4px 8px;
	color: var(--color-neutral-700);
	background: var(--color-neutral-100);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	font-weight: 400;
}

.buy-card__badge--available {
	color: var(--color-primary-800);
	background: var(--color-primary-100);
}

.buy-card__badge--few {
	color: var(--color-attention-700);
	background: var(--color-attention-100);
}

/* Explicit, not just a coincidental fallthrough to the base colour (fix
   round 1, Minor: sold_out and archive share this same neutral tone). */
.buy-card__badge--sold_out {
	color: var(--color-neutral-700);
	background: var(--color-neutral-100);
}

.buy-card__price {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-menu-button);
	line-height: var(--lh-menu-button);
	font-weight: 600;
	text-transform: uppercase;
}

.buy-card .c-ticket {
	width: 100%;
}

.buy-card__date-label {
	margin: 0;
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	font-weight: 400;
}

.buy-card__date-value {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	font-weight: 600;
}

.buy-card__empty {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	font-weight: 400;
}

@media (min-width: 1440px) {

	/* R12 (fix round 2): CSS Grid, not flex + `order` — breadcrumbs stays
	   first in the DOM (reading order breadcrumbs -> poster -> title) but
	   is placed into the title column visually, via grid-column/grid-row
	   on .performance-hero__crumbs below. Two explicit "gap" columns (67px,
	   24px) stand in for the poster<->details and details<->buy-card gaps,
	   since they differ (a uniform `column-gap` can't express both); two
	   rows (crumbs / body) with an explicit `row-gap` give the 32px
	   breadcrumbs-to-title gap without a manual margin on
	   `.performance-hero__body`. `align-items: start` keeps poster/buy-card
	   (each spanning both rows,
	   since they're one continuous element next to the two-row title
	   column) from stretching to fill any extra row height.

	   Client fix ПР-4: `margin-top: 22px` — the grid (and with it crumbs/
	   poster/buy-card, all measured from its own top) rendered flush under
	   the header (0px gap) instead of the frame's own header-bottom(136) to
	   poster-top(160)/crumbs-top(158) gap (figma-spec.py on 3076:2406). Also
	   row-gap corrected 40 → 32: the 40 here was an unverified estimate:
	   Title Block's own y (214) minus crumbs' y (158) minus row 1's 24px is
	   32, not 40 — the 40px figure belongs to Show Details' *other* internal
	   gap (Event Details → Additional Info Accordion, unaffected by this
	   row-gap). */
	.performance-hero {
		display: grid;
		grid-template-columns: 496px 67px 492px 24px 249px;

		/* Row 1 is a fixed 24px (breadcrumbs' own rendered height), not
		   `auto`/`min-content`: intrinsically-sized tracks both grow to
		   help satisfy a spanning item's minimum size (poster/buy-card
		   span both rows) — verified empirically, contrary to the spec
		   text's apparent implication that only `auto` tracks do —
		   inflating row 1 and pushing row 2 (body) down by however much
		   extra height poster/buy-card need. A fixed-length track can't
		   grow at all, so 100% of that extra need lands in row 2 alone,
		   which is exactly the effect wanted: row 1 stays crumbs' own
		   height, row 2 sizes from its own content (or grows to fit
		   poster/buy-card, harmlessly — align-items: start below stops
		   body/crumbs from stretching into that extra space). */
		grid-template-rows: 24px auto;
		column-gap: 0;
		row-gap: 32px;
		align-items: start;
		max-width: 1328px;
		margin: 22px auto 0;
		padding: 0;
	}

	.performance-hero__crumbs {
		grid-column: 3;
		grid-row: 1;
	}

	/* Fix round 1 (Critical): the offset is measured against the breadcrumbs
	   node (Navigation - Хлібні крихти) — breadcrumbs and the poster are
	   both row-1-aligned grid siblings now, so this margin is directly
	   "poster vs. breadcrumbs' own top": Figma poster.y(160) - crumbs.y(158)
	   = +2. */
	.performance-hero__poster {
		grid-column: 1;
		grid-row: 1 / 3;
		width: 496px;
		aspect-ratio: 496 / 664;
		margin-top: 2px;
	}

	.performance-hero__age {
		--c-poster-band-height: 90px;

		padding-left: 26px;
	}

	.performance-hero__body {
		grid-column: 3;
		grid-row: 2;
		margin-top: 0;
		gap: 40px;
	}

	.performance-hero__title-block {
		gap: 20px;

		/* Client fix ПР-4: `.performance-hero__body`'s own 40px gap (above) is
		   right between quote→specs and specs→accordion, but title-block's own
		   gap to whatever follows it (quote when present, specs otherwise) is
		   24px in the frame (Event Details' own gap, 3076:2406) — this margin
		   is the 40-24=16 difference, not a quote-specific number, so it
		   applies here regardless of which sibling follows. */
		margin-bottom: -16px;
	}

	.performance-hero__specs {
		gap: 20px;
	}

	/* Client fix ПР-4 (defect 7): only padding-top scaled up from the base 24px
	   — «Additional Info Accordion» (3076:2406) is pad=32/0/32/0, symmetric. */
	.performance-hero__accordion {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.performance-hero__accordion-list {
		gap: 24px;
	}

	/* Fix round 1 (Critical): buy-card content starts level with the title
	   column, 56px below breadcrumbs' top (Figma: Ticket Purchase's Specs
	   frame y=214 - crumbs.y=158 = +56) — buy-card spans both grid rows
	   (row 1's top is the same breadcrumbs-top reference poster uses). */
	.buy-card {
		display: flex;
		grid-column: 5;
		grid-row: 1 / 3;
		width: 249px;
		margin-top: 56px;
	}
}