/* Home page («Головна», front-page.php) — plan 06 task 2.

   Figma: 1440 `1159:7335`, 390 `4036:10415`, 768 `4181:18182`,
   1920 `4190:19490`. Every number below is read off those frames
   (figma-spec.py on design/figma/file.json); the two slanted shapes
   (the hero band, the premiere plate) are the shared `c-poster-band`
   (poster-band.css), whose rise was measured on the 1:1 frame renders.

   Section rhythm (frame to frame, top-level layout of each page frame):

   | gap | 390 | 768 | 1440 | 1920 |
   |---|---|---|---|---|
   | hero → notice → premiere | 54 | 56 | 64 | 80 |
   | premiere → afisha → about → actors → news | 120 | 160 | 180 | 240 |

   `--home-gap-tight` / `--home-gap` carry those two steps as `margin-top`
   on whichever section actually prints next, so a section that does not
   render (no active announcement) simply closes the gap. */

:root {
	--home-gap-tight: 54px;
	--home-gap: 120px;

	/* The column is `--page-gutter` (components/container.css): one ladder for
	   the whole site, because the client compares whole pages side by side at
	   1905. This page's own `--home-gutter` was that ladder's first home and
	   carried a fourth copy of it until plan 06's final review (I2). */
}

@media (min-width: 768px) {

	:root {
		--home-gap-tight: 56px;
		--home-gap: 160px;
	}
}

@media (min-width: 1440px) {

	:root {
		--home-gap-tight: 64px;
		--home-gap: 180px;
	}
}

@media (min-width: 1920px) {

	:root {
		--home-gap-tight: 80px;
		--home-gap: 240px;
	}
}

.home-notice,
.home-premiere {
	margin-top: var(--home-gap-tight);
}

.home-afisha,
.home-about,
.home-actors,
.home-news {
	margin-top: var(--home-gap);
}

/* ------------------------------------------------------------------ банер */

/* «Hero» 4124:11541 (390) — «Spotlight Background Image» 1159:7339 +
   «Spotlight Image» 1159:7374 + «Vector 4» 1159:7375 + «Spotlight Info»
   1159:7379 + «View Schedule Link» 3008:71 (1440), the same layers on
   4181:18182 / 4190:19490. The photo and the band are positioned; the
   text and the link flow from the frame's own top offset, so longer copy
   pushes the section down instead of being clipped. */
.home-hero {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 591px;
	padding: 342px var(--page-gutter) 48px;
	overflow: hidden;
	background: var(--color-neutral-100);
}

.home-hero__photo-wrap {
	position: absolute;
	top: 0;
	right: 16px;
	left: 17px;
	height: 356px;
	overflow: hidden;
}

.home-hero__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The theme's own file shows the frame's exact crop — the part of the
   1672×941 photograph each frame render actually shows, found by matching
   the file against the render (client fix ПР-6; the fill's imageTransform
   read earlier put the 1440 crop 63px too high and cut the roof): 768 —
   the file at 0.66 (1103×621) shifted (−200, −14) in the 704 box; 1440 —
   at 1.0 shifted (−172, −25) in the 1328 box; 1920 — at 1.07 (1789×1006)
   shifted (−46, −31) in the 1696 box. Written as a percentage of the box
   and a translate of the image's own size, so the same region shows at
   every width between the frames (the box scales, the crop with it).
   At 390 the fill is FILL (= cover, centred). An editor's own `hero_image`
   (I6) has no such crop and keeps `cover`. */
.home-hero__photo--theme {
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	max-width: none;
	object-fit: fill;
}

/* «Vector 4»: 358×169 at (16,379) of the 390 frame, its top edge dropping
   46px left → right; 768×241 at y=586 dropping 88; 1332×241 at (54,592)
   dropping 118 (1440); 1696×241 at (112,745) dropping 118 (1920). */
.home-hero__band {
	--c-poster-band-height: 169px;
	--c-poster-band-rise: 46px;

	top: 303px;
	right: 16px;
	bottom: auto;
	left: 16px;
}

.home-hero__info {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-self: stretch;
}

.home-hero__kicker {
	margin: 0;

	/* #12AD99 is 2.55:1 on this background — under AA (4.5:1) — so the text
	   lands on --color-primary-700, the same substitution schedule-link.css/
	   visit.css already use (designer-questions.md). */
	color: var(--color-primary-700);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 600;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
	text-transform: uppercase;
}

.home-hero__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.home-hero__title {
	margin: 0;
	padding-bottom: 0.041em; /* Kilok substitute cap-height remedy (visit.css/performance-about.css). */
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h1-s);
	font-weight: 400;
	line-height: var(--lh-h1-s);
	letter-spacing: var(--ls-h1-s);
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
}

.home-hero__description {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	line-height: var(--lh-m-text);
	text-box: trim-both cap alphabetic;
}

.home-hero__link {
	position: relative;
	margin-top: 32px;
}

@media (min-width: 768px) {

	.home-hero {
		min-height: 824px;
		padding: 553px var(--page-gutter) 68px;
	}

	.home-hero__photo-wrap {
		right: var(--page-gutter);
		left: var(--page-gutter);
		height: 608px;
	}

	.home-hero__band {
		--c-poster-band-height: 241px;
		--c-poster-band-rise: 88px;

		top: 510px;
		right: 0;
		left: 0;
	}

	.home-hero__photo--theme {
		width: 156.68%; /* 1103 / 704 */
		transform: translate(-18.13%, -2.25%); /* −200 / 1103, −14 / 621 */
	}

	.home-hero__info {
		gap: 16px;
	}

	.home-hero__text {
		gap: 32px;
	}

	.home-hero__link {
		margin-top: 40px;
	}
}

/* From 1024 up the hero keeps the 1440 frame's composition — the lead at the
   left, «переглянути афішу» on the same row at the right, the 697 box —
   inside whatever column the width gives (32 gutters up to 1439, the frame's
   56 / centred 1328 from 1440): the 768 frame's stacked column would leave a
   960-wide box with the link under the text (client fix ПР-6). */
@media (min-width: 1024px) {

	.home-hero {
		min-height: 697px;
		padding: 500px var(--page-gutter) 50px;
	}

	.home-hero__photo-wrap {
		right: var(--page-gutter);
		left: var(--page-gutter);
		height: 697px;
	}

	/* «Spotlight Image» is 1328×753 from y=79 of the frame, clipped by the
	   header: the top 57px are under it. */
	.home-hero__photo {
		height: 753px;
		margin-top: -57px;
	}

	.home-hero__photo--theme {
		width: 125.9%; /* 1672 / 1328 */
		height: auto; /* not the 753 box above — the file keeps its own 941 */
		margin-top: 0;
		transform: translate(-10.29%, -2.66%); /* −172 / 1672, −25 / 941 */
	}

	.home-hero__band {
		--c-poster-band-rise: 118px;

		top: 456px;
		right: calc(var(--page-gutter) - 2px);
		left: calc(var(--page-gutter) - 2px);
	}

	.home-hero__info {
		align-self: flex-start;
		width: 652px;
	}

	.home-hero__title,
	.home-hero__description {
		max-width: 639px;
	}

	.home-hero__link {
		position: absolute;
		top: 621px;
		right: var(--page-gutter);
		margin: 0;
	}
}

@media (min-width: 1920px) {

	.home-hero {
		min-height: 875px;
		padding: 637px var(--page-gutter) 68px;
	}

	.home-hero__photo-wrap {
		height: 818px;
	}

	.home-hero__photo {
		height: 100%;
		margin-top: 0;
	}

	.home-hero__photo--theme {
		width: 105.48%; /* 1789 / 1696 */
		height: auto;
		transform: translate(-2.57%, -3.08%); /* −46 / 1789, −31 / 1006 */
	}

	.home-hero__band {
		top: 577px;
		right: var(--page-gutter);
		left: var(--page-gutter);
	}

	.home-hero__info {
		width: 1016px;
	}

	.home-hero__title {
		max-width: 643px;
	}

	.home-hero__description {
		max-width: 851px;
	}

	.home-hero__link {
		top: 779px;
	}
}

/* --------------------------------------------------------------- оголошення */

/* «NoticeBar» 1159:7833: 1328×238 at 1440 (pad 56, row, link bottom-
   aligned), 358×291 at 390 (pad 32/20, column, gap 32), 704×298 at 768
   (pad 40/24, gap 40), 1696×253 at 1920. The orange kicker is the design's
   fixed label (podil_home_announcement() does not read it from the post). */
.home-notice {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-right: var(--page-gutter);
	margin-left: var(--page-gutter);
	padding: 32px 20px;
	background: var(--color-attention-50);
}

.home-notice__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.home-notice__kicker {
	margin: 0;

	/* #F47F0D is 2.52:1 on the bar's #FFF8EA — under AA for text at any
	   size drawn here — so the kicker (and the orange link, schedule-link.css)
	   land on --color-attention-700 (5.2:1), the nearest passing step of the
	   same ramp (designer-questions.md). */
	color: var(--color-attention-700);
	font-family: var(--font-body);
	font-size: var(--fs-h6);
	font-weight: 600;
	line-height: var(--lh-h6);
	text-transform: uppercase;
}

.home-notice__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.home-notice__headline {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-h5);
	font-weight: 600;
	line-height: var(--lh-h5);
}

.home-notice__body {
	margin: 0;

	/* #697482 is 4.49:1 on #FFF8EA — a hair under AA — so the body reads in
	   --color-neutral-600 (7.2:1), the same substitution the repertoire hero's
	   breadcrumbs make on their grey (designer-questions.md). */
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	line-height: var(--lh-m-text);
	text-box: trim-both cap alphabetic;
}

.home-notice__link {
	align-self: flex-start;
}

@media (min-width: 768px) {

	.home-notice {
		gap: 40px;
		padding: 40px 24px;
	}

	.home-notice__content {
		gap: 24px;
	}
}

@media (min-width: 1440px) {

	.home-notice {
		flex-direction: row;
		align-items: flex-end;
		gap: 24px;
		padding: 56px;
	}

	.home-notice__content {
		flex: 1 1 auto;
		min-width: 0;
	}

	.home-notice__link {
		flex: none;
		align-self: flex-end;
	}
}

/* ------------------------------------------------------------- прем'єра */

/* «Premiere Section» 1159:7591: photo 652×402 left, 612-wide schedule
   column right (space-between, centred) at 1440; 827 + 829 with a 40 gap
   at 1920; a column (media 359×222 / 704×434 on top, gap 24) at 390/768. */
.home-premiere {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-right: 15px; /* 4036:10415: the 359-wide section sits at 16 → 375. */
	margin-left: var(--page-gutter);
}

.home-premiere__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 222px;
	overflow: hidden;
	background: var(--color-neutral-200);
}

.home-premiere__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* «Media» carries a 20 % black fill over the image. */
.home-premiere__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--color-neutral-800) 20%, transparent);
}

/* «Section / Property 1=Premiere» — the 56×56 play badge centred on the
   photo: white at 10 %, radius 43.5 (a circle), background blur 32. */
.home-premiere__play {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	transform: translate(-50%, -50%);
	border-radius: 43.5px;
	background: rgb(255 255 255 / 10%); /* the node's own rgba(255,255,255,0.1) — no token carries an alpha. */
	backdrop-filter: blur(32px);
}

.home-premiere__play svg {
	width: 24px;
	height: 24px;
	fill: var(--color-base-white);
}

/* «Premiere Info» 1159:7597 — the shared band with the label in it:
   359×55 rising 30 (390), 705×79 rising 37 (768), 653×94 rising 58 (1440,
   the 97-tall vector is clipped by the 402 media), 827×94 rising 45 (1920);
   the label sits in the tall left corner, 12/20/21/24 up from the bottom. */
.home-premiere__plate {
	--c-poster-band-height: 55px;
	--c-poster-band-rise: 30px;

	z-index: 1;
	align-items: flex-end;
	margin: 0;
	padding: 0 0 12px 11px;

	/* Same AA substitution as the hero kicker above. */
	color: var(--color-primary-700);
	font-size: var(--fs-menu-button);
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
}

.home-premiere__body {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.home-premiere__schedule {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.home-premiere__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

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

.home-premiere__title {
	margin: 0;
	padding-bottom: 0.041em;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h2-m);
	font-weight: 400;
	line-height: var(--lh-h2-m);
	letter-spacing: var(--ls-h2-m);
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.home-premiere__description {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.home-premiere__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	-webkit-line-clamp: 3; /* the frame's own line count: three at 390 (4036:10415), two from 768 up — the same clamp event-card.css puts on the same excerpt. */
	-webkit-box-orient: vertical;
}

.home-premiere__facts {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin: 0;
}

.home-premiere__fact {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.home-premiere__fact-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);
}

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

.home-premiere__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-self: flex-start;
	gap: 32px;
}

@media (min-width: 768px) {

	.home-premiere {
		margin-right: var(--page-gutter);
		margin-left: var(--page-gutter);
	}

	.home-premiere__media {
		height: 434px;
	}

	.home-premiere__plate {
		--c-poster-band-height: 79px;
		--c-poster-band-rise: 37px;

		padding: 0 0 20px 20px;
	}

	.home-premiere__body {
		gap: 40px;
	}

	.home-premiere__excerpt {
		-webkit-line-clamp: 2;
	}

	.home-premiere__schedule {
		gap: 32px;
	}

	.home-premiere__content {
		gap: 20px;
	}

	.home-premiere__description {
		gap: 32px;
	}

	.home-premiere__facts {
		flex-direction: row;
		justify-content: space-between;
		gap: 24px;
	}

	.home-premiere__fact {
		gap: 12px;
	}
}

@media (min-width: 1440px) {

	.home-premiere {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 24px;
	}

	.home-premiere__media {
		flex: none;
		width: 652px;
		height: 402px;
	}

	.home-premiere__plate {
		--c-poster-band-height: 94px;
		--c-poster-band-rise: 58px;

		padding: 0 0 21px 19px;
	}

	.home-premiere__body {
		box-sizing: border-box;
		flex: none;
		justify-content: space-between;
		width: 612px;
		min-height: 402px;
		gap: 32px;
	}
}

@media (min-width: 1920px) {

	.home-premiere {
		justify-content: flex-start;
		gap: 40px;
	}

	.home-premiere__media {
		width: 827px;
		height: 510px;
	}

	.home-premiere__plate {
		--c-poster-band-rise: 45px;

		padding: 0 0 24px 24px;
	}

	.home-premiere__body {
		flex: 1 1 auto;
		width: auto;
		min-height: 510px;
	}

	.home-premiere__schedule,
	.home-premiere__description {
		gap: 44px;
	}

	.home-premiere__content {
		gap: 24px;
	}

	.home-premiere__actions {
		gap: 40px;
	}
}

/* ---------------------------------------------- афіша й актори: розкладка */

/* «Afisha Section» 1159:7385 / «Actors Section» 1159:7499 share one
   layout: the section name («Carousel Label» / «Section Label», H2 M) and
   a content column of cards + «View All». 390: the name on top, left,
   44/44, the list 40 under it. 768: the name (80/80) 16px down at the left,
   inside the first column's 176px offset, the grid from the section's own
   top. 1440/1920: the name set −90° down the left edge in an 84/98×820 box,
   the content column at x=151 (1177 wide) / x=144 (1552 wide). */
.home-afisha,
.home-actors {
	position: relative;
	padding: 13px 16px 0;
}

/* «Title» 4181:18182 (the 768 actors section) carries a white fill. */
.home-actors {
	background: var(--color-base-white);
}

.home-afisha__title,
.home-actors__title {
	margin: 0;
	padding-bottom: 0.041em;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h2-m);
	font-weight: 400;
	line-height: var(--lh-h2-m);
	letter-spacing: var(--ls-h2-m);
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
}

/* The shared sticky mode (`c-sticky-title`, section-title.css) only has
   somewhere to hold from 1440 up, where the name becomes a full-height column
   beside the list; at 390 and 768 every frame draws it as a line above the
   list and there is nothing to pin — the ruling the «Зали» FAQ heading
   (`4550:25441`) already carries. The class is in the markup at every width
   because markup cannot know the viewport, so the breakpoint lives here. */
.home-afisha__label,
.home-actors__label {
	position: static;
}

.home-afisha__content,
.home-actors__content {
	display: flex;
	flex-direction: column;
	gap: 48px;
	margin-top: 40px;
}

.home-afisha .repertoire-grid {
	margin-inline: 0;
}

@media (min-width: 768px) {

	.home-afisha,
	.home-actors {
		padding: 0;

		/* The name and the content column share ONE cell, which is what the
		   absolute label they used to be did visually — and what lets the name
		   be sticky at 1440: a `position: absolute` box is not in flow, so
		   `sticky` has no cell to travel in, while this cell is the section's
		   own full height and the travel ends exactly where the section does
		   («рухається далі, коли секція закінчується», `4343:19691` /
		   `4348:19863`). Nothing about either box's own geometry changes. */
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.home-afisha__label,
	.home-actors__label,
	.home-afisha__content,
	.home-actors__content {
		grid-area: 1 / 1;
	}

	/* The 704-wide block of 4181:18182 (two 334 columns) is centred at every
	   width from here up, the name at its left edge — 32 at exactly 768, and
	   the same block with equal gutters on a wider viewport (client fix ПР-2). */
	.home-afisha__label,
	.home-actors__label {
		justify-self: start;
		align-self: start;
		margin: 16px 0 0 var(--page-gutter);
	}

	.home-afisha__content,
	.home-actors__content {
		gap: 60px;
		margin: 0 var(--page-gutter);
	}

	.home-afisha .repertoire-grid,
	.home-actors__grid {
		margin-inline: 0;
	}
}

@media (min-width: 1440px) {

	/* The frame's 1328-wide block (56 → 1384 of 1440), centred with equal
	   gutters at every wider viewport (client fix ПР-2/ПР-3); the name and the
	   content keep their places inside it. */
	.home-afisha,
	.home-actors {
		margin-right: var(--page-gutter);
		margin-left: var(--page-gutter);
		padding: 0;
	}

	/* The rotated name: the 820-long text box turned −90° around its
	   top-left corner and pulled back by its own length, so it runs from
	   the section's top down the left edge, the word centred in it as the
	   node's own `align=center` has it — whatever width the substitute
	   face gives the word. */
	.home-afisha__label,
	.home-actors__label {
		position: sticky;
		margin: 0;
		width: 84px;
		height: 820px;
	}

	.home-afisha__title,
	.home-actors__title {
		position: absolute;
		top: 0;
		left: 0;
		width: 820px;
		text-align: center;
		white-space: nowrap;
		transform: rotate(-90deg) translateX(-100%);
		transform-origin: 0 0;
	}

	/* The row is the page column minus the name's own 151 (144/174 at 1920):
	   it has no width of its own, so it ends where the header's bar ends at
	   every viewport width, and at exactly 1440 that is the frame's own 1177
	   (56 + 151 → 1384), at exactly 1920 the frame's 1552 / 1522 (client fix
	   ПР-20; the residual §8.1 of the report, where the row kept the drawn
	   width and stood 80 px short of the column at 2000, 640 at 2560).

	   The cards inside it are the other half: the grid's three tracks are
	   `minmax(0, 1fr)` rather than the frame's 376 / 486, so the row's extra
	   width goes into the cards — which is what the design itself does on the
	   only step it draws (1440 → 1920: 376 → 486 in a 1328 → 1696 column),
	   and what leaves the staggered grids that DO stay at a drawn width
	   (the collective's 1177, the repertoire page's 1176 — client fixes
	   ПР-2/ПР-3) centred in their own columns, untouched by this file. At
	   1440 and at 1920 the track still computes to the frame's own number,
	   so nothing here moves on either drawn width. */
	.home-afisha__content,
	.home-actors__content {
		gap: 56px;
		margin: 0 0 0 151px;
	}

	/* The 1 px is the frame's own: «Afisha Content» 1159:7388 is 1177 wide
	   and its grid 1159:7389 1176, inset at the left. */
	.home-afisha .repertoire-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: auto;
		margin-inline: 1px 0;
	}
}

@media (min-width: 1920px) {

	/* The afisha's label box is 98 wide at 1920 (the 140px word), the
	   actors' stays 84 (4190:19490 draws both that way). */
	.home-afisha__label {
		width: 98px;
	}

	.home-afisha__content,
	.home-actors__content {
		gap: 80px;
		margin-left: 144px;
	}

	/* «Actors Content» 286,5806 starts 30 further in than the afisha's, whose
	   own row carries «Переглянути всю афішу» out to 144 while its cards stay
	   with the actors' at 174. */
	.home-actors__content {
		margin-left: 174px;
	}

	.home-afisha .repertoire-grid {
		margin-inline: 30px 0;
	}
}

/* --------------------------------------------------------------- актори */

/* «Actor Profiles» — one column 40 apart at 390; two 334-wide columns
   (gutter 36) offset 176 / 0 with a 506 pitch at 768; three 376-wide
   columns (gutter 24) offset 48 / 120 / 0, pitch 572 at 1440; three
   486-wide (gutter 32) offset 48 / 120 / 0, pitch 721 at 1920. The same
   model as repertoire.css's grid: the offset is a transform, the pitch the
   cell's min-height, and the last row hangs from its offset so the block
   ends at the lowest card. */
.home-actors__grid {
	--pitch: 0px;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-actors__item {
	--offset: 0px;

	display: block;
	min-width: 0;
}

@media (min-width: 768px) {

	.home-actors__grid {
		--pitch: 506px;

		grid-template-columns: repeat(2, 334px);
		justify-content: center;
		column-gap: 36px;
		row-gap: 0;
	}

	.home-actors__item {
		box-sizing: border-box;
		min-height: var(--pitch);
		transform: translateY(var(--offset));
	}

	.home-actors__item:nth-child(2n + 1) {
		--offset: 176px;
	}

	.home-actors__item:nth-last-child(-n + 2) {
		min-height: 0;
		margin-top: var(--offset);
		transform: none;
	}
}

@media (min-width: 1440px) {

	/* «Actors Content» 1159:7502 is 1177 and its grid 1159:7503 1176, so the
	   frame leaves 1 px of the row unused at its right end here (the afisha's
	   own px is at the left instead). The 1920 frame leaves none — both boxes
	   are 1522 there — which is why this comes back to `auto` below. */
	.home-actors__grid {
		--pitch: 572px;

		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 24px;
		width: calc(100% - 1px);
	}

	.home-actors__item:nth-child(3n + 1) {
		--offset: 48px;
	}

	.home-actors__item:nth-child(3n + 2) {
		--offset: 120px;
	}

	.home-actors__item:nth-child(3n) {
		--offset: 0px;
	}

	.home-actors__item:nth-last-child(-n + 2) {
		min-height: var(--pitch);
		margin-top: 0;
		transform: translateY(var(--offset));
	}

	.home-actors__item:nth-last-child(-n + 3) {
		min-height: 0;
		margin-top: var(--offset);
		transform: none;
	}
}

@media (min-width: 1920px) {

	.home-actors__grid {
		--pitch: 721px;

		column-gap: 32px;
		width: auto;
		margin-inline: 0;
	}
}

/* ------------------------------------------------- театр / на подолі */

/* «Component 2» 1159:7572 (1440/1920, 1328/1696×969) / «Component 3»
   4036:10415's (390, 390×860) / 4181:18182's (768×820): four photographs
   at fixed points of the box and two text blocks — the display heading
   («Highlight Section») and the two paragraphs with their link («About
   Section»). The photos are positioned; the text flows from the frame's
   own offsets, so longer copy grows the section instead of overlapping. */
.home-about {
	position: relative;
	box-sizing: border-box;
	min-height: 860px;
	padding: 169px 16px 0;
	background: var(--color-base-white);
}

/* The `<video>` of the façade box wears the same class as the three photographs
   (ПР-18): the frame gives it the same box, the same `object-fit: cover` crop
   (`imageScaleMode: FILL` on that paint) and the same place in the collage —
   only the paint moves. Its own class carries nothing about the layout, so
   `.home-about__photo--portrait` below still owns every number. */
.home-about__photo {
	position: absolute;
	display: block;
	object-fit: cover;
}

/* The video is stacked over the still and only shown once it is really
   playing — `template-parts/home/about.php` says why (an unloaded `<video>`
   paints differently per engine, and the poster is an `<img>` here so it can
   stay lazy). No transition: the two pictures are the same frame, and a fade
   would be an animation the design does not draw. It takes no clicks either:
   the frame draws a fill, not a player. */
.home-about__video {
	opacity: 0;
	pointer-events: none;
}

.home-about__video[data-playing] {
	opacity: 1;
}

.home-about__photo--topleft {
	top: 0;
	left: 16px;
	width: 86px;
	height: 80px;
}

.home-about__photo--right {
	top: 50px;
	right: 16px;
	width: 160px;
	height: 128px;
}

.home-about__photo--bottomleft {
	top: 602px;
	left: 16px;
	width: 121px;
	height: 120px;
}

.home-about__photo--portrait,
.home-about__video {
	top: 640px;
	right: 16px;
	width: 170px;
	height: 220px;
}

.home-about__heading {
	position: relative;

	/* The frames stack this heading over the photographs, so it is positioned
	   at every width — which means the shared sticky mode's own `top` would
	   move it at the widths where it is not sticky yet (390/768). Handed back
	   as one token inside the 1440 block below. */
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: fit-content; /* «Highlight Content» hugs its widest line (241 / 394 / 593 / 696). */
	max-width: 100%;
}

.home-about__title {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h2-m);
	font-weight: 400;
	line-height: var(--lh-h2-m);
	letter-spacing: var(--ls-h2-m);
	text-transform: uppercase;
}

.home-about__title-line {
	padding-bottom: 0.041em;
	text-box: trim-both cap alphabetic;

	/* A display line that no longer fits its box breaks rather than spilling
	   out of it — the theme's established remedy for exactly this
	   (`.c-section-title__heading`, repertoire.css, afisha.css,
	   performance-hero.css). It changes nothing at the design's own sizes,
	   where every line fits; it is what the 150 % text scale and the dyslexia
	   face need, and at 1440+ it is the second half of the ceiling below. */
	overflow-wrap: anywhere;
}

.home-about__subtitle {
	margin: 0;

	/* Same AA substitution as the hero kicker above. */
	color: var(--color-primary-700);
	font-family: var(--font-body);
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: var(--lh-h4);
	letter-spacing: var(--ls-h4);
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
}

.home-about__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 321px;
	max-width: 100%;
	margin-top: 40px;
}

.home-about__texts {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

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

.home-about__link {
	align-self: flex-start;
}

@media (min-width: 768px) {

	.home-about {
		min-height: 820px;
		padding: 154px var(--page-gutter) 0 calc(var(--page-gutter) + 155px);
	}

	.home-about__photo--topleft {
		left: var(--page-gutter);
		width: 127px;
		height: 120px;
	}

	.home-about__photo--right {
		top: 48px;
		right: var(--page-gutter);
		width: 180px;
		height: 144px;
	}

	.home-about__photo--bottomleft {
		top: 474px;
		left: var(--page-gutter);
		width: 108px;
		height: 107px;
	}

	.home-about__photo--portrait,
	.home-about__video {
		top: 586px;
		right: var(--page-gutter);
		width: 180px;
		height: 234px;
	}

	.home-about__heading {
		gap: 24px;
	}

	.home-about__body {
		gap: 40px;
		width: 311px;
		margin-top: 170px;
	}

	/* «View Schedule Link» hugs wider than its column (226 / 345 / 407 in
	   the frames) and overflows it to the right, as a hug text does in Figma;
	   the photos start well past where it ends. */
	.home-about__link {
		white-space: nowrap;
	}
}

@media (min-width: 1440px) {

	.home-about {
		min-height: 969px;
		margin-right: var(--page-gutter);
		margin-left: var(--page-gutter);
		padding: 80px 0 0 368px;
	}

	/* This section's note is the one «Sticky effect» of the five on the page
	   with a different final — `4348:19857`, «рухається далі, коли **доходить
	   до тексту**» (its arrow tip sits at y 5526 of the canvas, 39 above
	   «Component 2» 1159:7572 and 141 below the afisha section's own bottom
	   edge; the same sentence stands over the buffet's `3517:12628`, and both
	   sections are the one «Highlight Section» + «About Section» composition —
	   which is what makes the two finals in the .fig two compositions rather
	   than a contradiction).

	   So the heading travels inside a box that ends where the text begins, and
	   that box's height is «About Section»'s own y inside this section: 1159:
	   7584 sits at 681 of 1159:7572, i.e. 601 below the section's 80 padding.
	   It replaces the body's top margin, which said the same thing as a
	   distance from the heading's bottom and therefore depended on how tall the
	   substitute face draws the heading; the frame's own offset does not.
	   `min-height`, so longer copy grows the box instead of running into the
	   text. */
	.home-about__heading-box {
		min-height: 601px;
	}

	.home-about__heading {
		position: sticky;
		top: var(--c-sticky-title-top);
	}

	.home-about__photo--topleft {
		top: 0;
		left: 0;
		width: 201px;
		height: 190px;
	}

	.home-about__photo--right {
		top: 100px;
		right: 0;
		width: 338px;
		height: 270px;
	}

	.home-about__photo--bottomleft {
		top: 563px;
		left: 59px;
		width: 280px;
		height: 279px;
	}

	/* 1159:7572: the portrait's right edge stops 51px short of the block
	   (990 + 287 = 1277 of 1328; 1358 + 287 = 1645 of 1696), so the two right
	   photos share their LEFT edge. */
	.home-about__photo--portrait,
	.home-about__video {
		top: 595px;
		right: 51px;
		width: 287px;
		height: 372px;
	}

	/* «Highlight Content» is `align=end`: «театр для кожного» sits on the
	   column's right edge, «Театр» fills it, «На подолі» is the widest line.

	   ПР-14 — the ceiling. The heading hugs its widest line, and that line's
	   width is the FONT's, not the frame's: Figma sets «НА ПОДОЛІ» in Kilok at
	   595 (`1159:7582`, a HUG text 2px past its own 593 container `1159:7580`),
	   the substitute Exo 2 at 600, a fallback sans at 666 and the widget's
	   150 % step at 905. Only the first two clear the photograph, so a box
	   sized by the glyphs runs into it — which is what the client photographed.

	   So the box is bounded by the frame instead, and by the frame's own
	   sentence rather than by a number copied out of it: the heading ends where
	   the photograph begins. Both right-hand boxes share that left edge (see
	   the portrait's rule above — 990 + 287 = 1277 of 1328, 1358 + 287 = 1645
	   of 1696), and the widest of the two is «theater-large-image-1»'s 338, so
	   the edge is 338 from the section's right. The heading's own box starts at
	   the section's padding, which is what `100%` is here — `.home-about__
	   heading-box` — so the room is that minus those 338. It comes out at the
	   frame's own numbers: 960 − 338 = 622 at 1440 (photo at 990, heading
	   column at 368) and 1196 − 338 = 858 at 1920 (1358 − 500), and it stays
	   true at the widths between the frames, where the column is fluid.

	   The frame's own 27px of air is the budget the wider substitute eats into
	   — 22px of it survives, which is the text-width residual figma-rules.md
	   allows on a substitute face and not a composition change (spec-diff
	   unmoved).

	   `white-space: nowrap` is gone with it: it was what turned «wider than the
	   box» into «over the photograph». Past the ceiling the line now wraps at
	   its own space, and past that `overflow-wrap` (above) breaks the word —
	   the page grows downwards, never sideways into the collage. */
	.home-about__heading {
		align-items: flex-end;
		max-width: calc(100% - 338px);
	}

	.home-about__title {
		align-self: stretch;
	}

	.home-about__title-line:nth-child(2) {
		align-self: flex-start;
	}

	.home-about__body {
		gap: 48px;
		width: 398px;
		margin-top: 0; /* Now the first grid track (above), so the heading can travel through it. */
		margin-left: 195px;
	}


}

@media (min-width: 1920px) {

	.home-about {
		padding: 80px 0 0 500px;
	}

	/* 4190:19490 puts «About Section» at 633 of its own section — 553 below the
	   80 padding, where the 1440 frame has 601. */
	.home-about__heading-box {
		min-height: 553px;
	}

	.home-about__body {
		gap: 60px;
		margin-top: 0;
		margin-left: 298px;
	}
}

/* --------------------------------------------------------------- новини */

/* «News Section» 1159:7623: pad 100/56 at 1440 (gap 54, content gap 56),
   80/16 at 390 (gap 40; cards, nav 24 under them, «View All» 60 lower),
   80/32 at 768 (gap 48 / 60), 120/112 at 1920 (gap 64 / 56). The track
   shows the next card at the page's edge (peek), so the slider window is
   widened by the section's own right padding and the shared `--c-slider-
   peek` is what that edge leaves of the next card plus the gap. */
.home-news {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 80px var(--page-gutter);
	overflow: hidden;
	background: var(--color-neutral-100);
}

.home-news__head {
	display: flex;
	align-items: center;
}

.home-news__title {
	margin: 0;
	padding-bottom: 0.041em;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h2-s);
	font-weight: 400;
	line-height: var(--lh-h2-s);
	letter-spacing: var(--ls-h2-s);
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
}

.home-news__body {
	display: flex;
	flex-direction: column;
}

/* «News Cards Container» is `align=center`: a card with a longer title
   grows both ways and the row keeps one visual centre line. */
.home-news .c-slider__track {
	align-items: center;
}

.home-news__body .c-slider {
	--c-slider-track-gap: 20px;
	--c-slider-peek: 108px;

	margin-right: calc(-1 * var(--page-gutter));
}

.home-news__nav {
	margin-top: 24px;
}

.home-news__nav .c-slider__arrows--detached {
	justify-content: space-between;
	align-items: center;
}

/* «1/3» 4154:17624 — S text, left of the arrow pair, 390 only. */
.home-news__nav .c-slider__counter {
	margin: 0 auto 0 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
}

/* «Arrow Button» pair: a −1 gap, the borders overlap (79 wide for two 40s
   at 390, 127 for two 64s at 1440). */
.home-news__nav .c-slider__arrow + .c-slider__arrow {
	margin-left: -1px;
}

.home-news__view-all {
	margin-top: 60px;
}

@media (min-width: 768px) {

	.home-news {
		padding: 80px 32px;
	}

	.home-news {
		gap: 48px;
		padding: 80px var(--page-gutter);
	}

	.home-news__head {
		min-height: 64px;
	}

	.home-news__body {
		gap: 60px;
	}

	.home-news__nav {
		position: absolute;
		top: 80px;
		right: var(--page-gutter);
		margin: 0;
	}

	.home-news__view-all {
		margin-top: 0;
	}

	.home-news__nav .c-slider__counter {
		display: none;
	}

	.home-news__body .c-slider {
		--c-slider-track-gap: 24px;
		--c-slider-peek: 309px;

		margin-right: calc(-1 * var(--page-gutter));
	}

	/* The 266-wide compact card is the 390 frame's; from 768 up the news
	   row is the 427/553 card with its own body gap. */
	.home-news .c-article-card--compact .c-article-card__body {
		gap: 24px;
	}
}

@media (min-width: 1440px) {

	.home-news {
		padding: 100px var(--page-gutter);
	}

	.home-news {
		gap: 54px;
	}

	.home-news__body {
		gap: 56px;
	}

	.home-news__nav {
		top: 100px;
	}

	.home-news__body .c-slider {
		--c-slider-peek: 55px;
	}
}

@media (min-width: 1920px) {

	.home-news {
		padding: 120px var(--page-gutter);
	}

	.home-news {
		gap: 64px;
	}

	.home-news__head {
		min-height: 84px;
	}

	.home-news__nav {
		top: 120px;
	}

	.home-news__body .c-slider {
		--c-slider-peek: 101px;
	}

	/* 4190:19490's news «View All» is the 64-tall Default variant, not the
	   84 Full HD one the afisha and actors rows use. */
	.home-news__view-all .c-view-all {
		padding-block: 20px;
	}
}