/* Section header — the shared «Section Title» block of every page section
   that has one.

   There is NO «Main Title» component in the Figma library: the two library
   sections (`cards` 4299:29793 and `blocks` 4299:29794) name their own
   annotation labels «Main Title» (the words «Desktop» / «Tablet» / «Mob» /
   «Hover» beside each variant, «H5» in GolosText), and nothing else in the
   file carries that name. What the pages DO share is one composition,
   drawn identically wherever a section has a heading:

   - «FAQ Section Title» 3546:13430 (1440) / 4393:26405 (390),
     «FAQ Section Header» 3648:12126 / 4426:29266 — heading alone;
   - «Form Title Block» 4436:34502 / 3981:22884 — H2 + paragraph under it;
   - «Theater Halls Header» 3905:17398 / 4420:26347, «Frame 1437255229»
     3977:17451 — the PAGE BANNER (H1), the `--banner` variant below;
   - «Театр сьогодні» 3776:10212 — «Visit Title» + «Key Moment», the same
     pair with the paragraph in «M/M text» instead of «S/S text»;
   - «Buffet Highlights» 3550:13855, «Frame 1437255184» — heading + link.

   So the component owns the heading's type, the paragraph's type and the
   gap/direction between them. It does NOT own the two-column geometry of
   any one section: the FAQ puts a 319 heading against a 765 list, the halls
   hero a hug heading against a 244 description, «Театр сьогодні» 483
   against 487 — three different grids, which belong to those sections.

   No 768 or 1920 frame exists for any of these headers (inventory.md), so the
   1440 values start at 1440, the width they are drawn at, and the type steps
   through tokens.css's own breakpoint modes.

   Animations: none. `interactions` is empty on every node listed above,
   in the .fig and in the REST dump alike — so there is no transition here
   (animations.md, «Для всіх наступних задач»). */

.c-section-title {
	display: flex;
	flex-direction: column;

	/* The one auto-layout pair of an H2 heading and a paragraph the file draws
	   at section level: «Form Title Block» 4436:34502 (390, VERTICAL 40) /
	   3981:22884 and 3790:15916 (1440, VERTICAL 24). Every other H2 section in
	   the plan-06 frames is a heading alone above its content (checked:
	   buffet, halls, history, accessibility, contacts, partnership). */
	gap: 40px;
}

/* «Section Title» / «Heading» / «FAQ Title»: «H2/H2 S» — 38/40 at 390,
   44/44 at 768, 56/56 at 1440, 76/76 at 1920, letter-spacing −1, uppercase,
   leadingTrim CAP_HEIGHT on every one of these nodes (checked in file.json).

   Kilok is not licensed, so the site runs Exo 2 under its name (fonts.css):
   Figma trims to Kilok's 0.70 em cap and the substitute's is 0.659 em, so the
   0.041 em goes back as bottom padding — the same remedy visit.css,
   performance-about.css and performance-sections.css already use. */
.c-section-title__heading {
	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;

	/* A long Ukrainian word at 150 % text scale must wrap, not widen the page
	   (WCAG 1.4.4/1.4.10; the same guard repertoire.css, afisha.css and visit.css
	   use). At 100 % nothing breaks, so the Figma measurement is untouched. */
	overflow-wrap: anywhere;
}

/* «Section Description» 3656:13668 / 4420:26349 — «S/S text (regular)». */
.c-section-title__intro {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 400;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

/* «Key Moment» 3776:10215 («Театр сьогодні») uses «M/M text» for the same
   slot: 20/24 at 1440 against the description's 16/22, and it is the only one
   of the two with leadingTrim CAP_HEIGHT (checked in file.json). */
.c-section-title--intro-m .c-section-title__intro {
	font-size: var(--fs-m-text);
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
	text-box: trim-both cap alphabetic;
}

/* The trailing slot: «View Schedule Link» / «Details Link» / «View All» keep
   their own components; this only places them. «Frame 1437255184» 3776:10229
   puts the link at the end of the row, baseline-aligned with the paragraph. */
.c-section-title__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* On a photograph («video» 3759:7501, «Hall Image» 3776:10222): the heading's
   own fill there is #FFFFFF. */
.c-section-title--on-photo .c-section-title__heading,
.c-section-title--on-photo .c-section-title__intro {
	color: var(--color-base-white);
}

/* Banner — `variant => 'banner'`: the page's H1 with the paragraph beside it,
   «Theater Halls Header» 4420:26347 (390: VERTICAL 20, «H1/H1 S» 40/40) and
   3905:17398 (1440: HORIZONTAL 40, counter-axis MAX, «H1/H1 M» 120/120),
   «Frame 1437255229» 3977:17451 likewise. The design switches STYLE at 1440
   (S → M), not only the mode, so this variant does too. This is the only
   place the row layout is drawn; the H2 default never becomes a row. */
.c-section-title--banner {
	gap: 20px;
}

.c-section-title--banner .c-section-title__heading {
	font-size: var(--fs-h1-s);
	line-height: var(--lh-h1-s);
	letter-spacing: var(--ls-h1-s);
}

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

@media (min-width: 1440px) {

	.c-section-title {
		gap: 24px;
	}

	/* 3905:17398 hugs its two children (1050 = 766 + 40 + 244). */
	.c-section-title--banner {
		flex-direction: row;
		align-items: flex-end;
		gap: 40px;
		width: fit-content;
		max-width: 100%;
	}

	.c-section-title--banner .c-section-title__heading {
		flex: 0 0 auto;
		font-size: var(--fs-h1-m);
		line-height: var(--lh-h1-m);
		letter-spacing: var(--ls-h1-m);
	}

	.c-section-title--banner .c-section-title__intro {
		flex: 0 1 auto;
	}

	.c-section-title--banner .c-section-title__aside {
		flex: 0 0 auto;
		align-items: flex-end;
	}
}

/* ===================================================== липкий заголовок */

/* «Sticky effect для заголовків: заголовок залишається зафіксованим під час
   скролу секції та рухається далі, коли секція закінчується. Reference:
   Locomotive Scroll 03. CSS sticky» — six annotation blocks of the 22.09 .fig
   say that sentence over a section whose heading stands BESIDE its content:
   Головна `4343:19691` (афіша) and `4348:19863` (актори), Вистава
   `4497:25442` (Cast Section), Безбар'єрність `4550:25451` (FAQ), Зали
   `4550:25441` (FAQ) — the last two already carry it in their own sheets.

   One class, because the composition is one: a heading column at the left of
   a tall list. Who carries it differs — the four vertical section labels are
   hand-placed boxes in home.css / performance-t14.css / performance-sections.
   css / person.css, not this component (the library has no vertical-label
   component; see the head of this file) — so the mechanism is a class those
   boxes and `c-section-title` alike can wear, and the geometry stays where it
   already is.

   Plain CSS sticky, no script and no `transform`: the box holds one offset
   while its own containing block scrolls past and is carried off by that
   block's bottom edge, which is exactly the note's «рухається далі, коли
   секція закінчується». Which is also the one rule a consumer has to honour:
   **the containing block must be the section's own full height** — a grid
   area or a positioned block that ends where the travel should end. An
   `align-self: stretch` cell (the grid default) makes the box as tall as the
   column and it has nowhere to go; a `position: absolute` box is not in flow
   at all and `sticky` cannot replace it without giving it a cell first.

   Not turned off under `prefers-reduced-motion` / `data-motion="reduced"`:
   sticky is layout, not animation — the same ruling the history timeline's
   sticky year already carries (animations.md `4549:26031`). The only thing
   with a duration here is `top` following the header, and the global rules in
   base.css zero that duration with every other transition. */
.c-sticky-title {
	position: sticky;

	/* Under everything that is already pinned up there, and travelling with
	   it. `--podil-header-h` / `--podil-header-shift` are what
	   header-reveal.js publishes (0 when the header is not sticky at all);
	   `--podil-anchor-nav-h` is the performance page's own tab strip, which
	   stands under the header (performance-shows.css) — every other page
	   leaves it unset, i.e. 0. The 24px gap is the offset the
	   «Безбар'єрність» sticky columns settled on (`4550:25445`/`4550:25451`);
	   a consumer whose frame wants another one overrides
	   `--c-sticky-title-gap`.

	   The whole offset is a custom property as well, because a consumer that is
	   only sticky above a breakpoint has to neutralise `top` below it (`top`
	   moves a `position: relative` box too) and then hand it back without
	   restating the formula: `top: 0` in its own rule, `top:
	   var(--c-sticky-title-top)` inside its media query. */
	--c-sticky-title-top: calc(var(--podil-header-h, 0px) + var(--podil-header-shift, 0px) + var(--podil-anchor-nav-h, 0px) + var(--c-sticky-title-gap, 24px));

	top: var(--c-sticky-title-top);

	/* The same easing and duration `.performance-anchor-nav` uses for the same
	   value, so a pinned heading and a pinned bar move as one when the header
	   hides. */
	transition: top 300ms cubic-bezier(0, 0, 0.58, 1);

	/* A grid or flex item stretches to its area by default, and a box as tall
	   as the column it travels in never travels (the same `align-self` the
	   «Безбар'єрність» FAQ heading needed). */
	align-self: start;
}