/* Afisha page (/afisha/) — Figma 3214:4621 (1440; banner 3894:11478,
   list 3214:5200, day group 3214:4658, View All 3312:11412) and
   4234:24405 (390; banner in 4223:18628, list 4372:23214, View All
   4229:24331). No 768 / 1920 frame exists for this page: 768–1439 keep
   the 390 structure (stacked banner, day header as a centred row above
   the cards) with the breakpoint-aware type tokens and a 40px gutter
   (the repertoire's tablet gutter); 1920 keeps the 1440 structure. See
   task-6-report.md.

   Colours: the day-of-week and the season number are #12AD99 in the
   design (2.8:1 on white / #F3F4F6) — fails WCAG AA for text, so
   --color-primary-700 (5.5:1), the same substitution the header and the
   event card already make; designer-questions.md.

   Card internals are event-card.css (Task 5); this file only places the
   cards. Banner and list are plain blocks: DOM order = visual order at
   every width. */

/* ---------------------------------------------------------------- banner */

.afisha-hero {
	padding: 0 16px 85px;
	background: var(--color-neutral-100);
}

/* The breadcrumb link is #697482 (--color-neutral-500) in the design, which
   is 4.31:1 on the banner's own #F3F4F6 — under WCAG AA for text. Same
   substitution the footer already makes for the same pair
   (--color-neutral-600, 6.9:1); designer-questions.md. */
.afisha-hero .breadcrumbs a {
	color: var(--color-neutral-600);
}

/* The breadcrumb `<nav>` is a plain block whose `<ol>` is inline-flex: as
   an inline-level box the list would sit on a text baseline and take the
   line box's leading with it (measured: +6px above the design's y=0). A
   flex container has no line box. */
.afisha-hero .breadcrumbs {
	display: flex;
}

.afisha-hero__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 69px; /* breadcrumbs (15) → title top 84 (4223:18661). */
}

.afisha-hero__heading {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.afisha-hero__title {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h1-l);
	font-weight: 400;
	line-height: var(--lh-h1-l);
	letter-spacing: var(--ls-h1-l);
	text-transform: uppercase;
	text-box: trim-both cap alphabetic; /* leadingTrim CAP_HEIGHT, 3894:11487 / 4223:18661. */

	/* Kilok's cap height is 0.70 of the font size in the design (143/204 at
	   1440, 56/80 at 390); the metric substitute (Exo 2) caps at 0.659, so
	   a trimmed box alone comes out 4% short and drags the whole
	   bottom-aligned banner up with it. Pinning the trimmed box to the
	   design's own cap ratio keeps every position derived from it exact at
	   any --font-scale, whichever font ends up loading. `min-height`, not
	   `height`: one line is always the pinned box (the natural trimmed line
	   is shorter), but a heading that has to wrap — see below — grows
	   instead of spilling out of a fixed box. */
	min-height: calc(var(--fs-h1-l) * 0.7);

	/* «АФІША» is a single word, and at the accessibility widget's 150 % text
	   scale (more still in the dyslexia face) it is wider than the 358px
	   column at 390: 418px, which pushed the document to 434 and failed
	   smoke.spec.js's reflow check (WCAG 1.4.10). It breaks instead. At the
	   design scale the word fits with room to spare, so nothing about the
	   measured geometry changes. */
	overflow-wrap: anywhere;
}

/* Season Info 4223:18662: FIXED 50px tall at 390, bottom-aligned with the
   title; its label column (37px) overhangs it by 6px exactly as in the
   frame. Hug height at 1440 (3894:11488). */
.afisha-hero__season {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	height: 50px;
	margin: 0;
}

.afisha-hero__season-number {
	height: calc(var(--fs-h6) * 0.7); /* Design cap ratio, as on the title. */
	color: var(--color-primary-700);
	font-family: var(--font-title);
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
	letter-spacing: var(--ls-h6);
	text-transform: uppercase;
	text-box: trim-both cap alphabetic;
}

.afisha-hero__season-label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-weight: 600;
	text-transform: uppercase;
}

.afisha-hero__season-label-1 {
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
}

.afisha-hero__season-label-2 {
	font-size: var(--fs-h6);
	line-height: var(--lh-h6);
	letter-spacing: var(--ls-h6);
}

.afisha-hero__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.afisha-hero__description {
	max-width: 284px;
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

/* «View Schedule Link / Variant3» (4394:26663 → 3058:2302). That set has
   no Hover variant and no prototype action (unlike the home page's
   3015:2441 «переглянути афішу»), so no hover is added —
   designer-questions.md. */
.afisha-hero__download {
	display: flex;
	align-self: stretch; /* Link is FILL in both frames (371 / 358). */
	align-items: center;
	gap: 8px;
	color: var(--color-neutral-800);
	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-decoration: none;
	text-transform: uppercase;

	/* The label is a hug text layer in the design (331 at 1440, filling the
	   row exactly together with the icon); the substitute font runs a few
	   percent wider, and letting it wrap would double the row's height. */
	white-space: nowrap;
}

.afisha-hero__download svg {
	flex: 0 0 auto;
	width: 32px;
	height: 22px;
}

/* ------------------------------------------------------------- day groups */

.afisha-list {
	background: var(--color-base-white);
}

.afisha-day {
	background: var(--color-base-white);
}

.afisha-day__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 21px 0; /* 20 + the 1px strokes: strokesIncludedInLayout (4372:23226). */
	box-shadow:
		inset 0 1px 0 var(--color-neutral-200),
		inset 0 -1px 0 var(--color-neutral-200);
	background: var(--color-base-white);
	text-align: center;
}

/* The first header sits directly on the filter bar's own bottom stroke
   (4372:23219: bottom stroke only, 87 tall). Bounded above: at 1440 the
   header is a plain left column with no strokes at all, and a
   `:first-child` rule would otherwise out-specify the desktop ones. */
@media (max-width: 1439px) {

	.afisha-day:first-child .afisha-day__heading {
		padding-top: 20px;
		box-shadow: inset 0 -1px 0 var(--color-neutral-200);
	}
}

.afisha-day__weekday {
	color: var(--color-primary-700);
	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;
}

.afisha-day__date {

	/* Hug text in the design (hence nowrap), trimmed to Kilok's 0.70 cap
	   ratio — see .afisha-hero__title for why the ratio is pinned. */
	height: calc(var(--fs-h3) * 0.7);
	white-space: nowrap;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h3);
	font-weight: 400;
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	text-transform: uppercase;
	text-box: trim-both cap alphabetic;
}

/* The «сьогодні» tag exists only in the 1440 frame (3214:4661). */
.afisha-day__today {
	display: none;
}

.afisha-day__cards {
	display: flex;
	flex-direction: column;
	gap: 60px;
	padding-bottom: 80px;
}

/* The first card of a freshly loaded page takes programmatic focus
   (load-more.js); it is a big block, so the ring goes outside it. */
.afisha-day__cards > .event-card:focus {
	outline-offset: 4px;
}

/* ------------------------------------------------------------ empty state */

.afisha-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 56px 16px 80px;
	background: var(--color-base-white);
}

.afisha-empty__message {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	text-transform: uppercase;
}

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

/* -------------------------------------------------------------- View All */

/* 4229:24331 / 3214:5200: the row sits straight under the last group,
   16px (1440: 80px) from the page edge. The space below it belongs to the
   next section — «Сплануйте свій візит», which hooks into
   `podil_after_afisha` and brings its own 120/180px top padding. */
.afisha-more {
	padding-inline: 16px;
	background: var(--color-base-white);
}

/* Below 1440 the banner has no side padding to speak of, so the one-line
   row cannot spill into it the way it does at 1440+ (where the design's own
   112px right padding absorbs the few percent the substitute font adds):
   here the label wraps rather than widen the page at 150 % text scale. At
   the design scale it is 265px in a 358px row — one line either way. */
@media (max-width: 1439px) {

	.afisha-hero__download {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

/* ---------------------------------------------------------------- 768+ */

@media (min-width: 768px) {

	.afisha-hero {
		padding-inline: 40px;
	}

	.afisha-day__cards {
		gap: 40px;
		padding-inline: 40px;
	}

	.afisha-empty {
		padding-inline: 40px;
	}

	.afisha-more {
		padding-inline: 40px;
	}
}

/* --------------------------------------------------------------- 1440+ */

@media (min-width: 1440px) {

	/* Hero Section 3894:11478: breadcrumbs at the top, then the title +
	   season (bottom-aligned, gap 18) and the 371px description column
	   whose right edge is 112px from the frame edge; everything ends 150px
	   above the frame bottom.

	   The left half is the page column (`--page-gutter`, container.css) — the
	   frame's 56 is the same 56 every other edge of this page and of the
	   header stands on, so it follows the column to 112 at 1920 instead of
	   holding the hero 56 px further out than the bar above it (client fix
	   ПР-20). The right 112 stays the frame's own number; from 1920 up it
	   coincides with the column, so the description's right edge never
	   crosses it either. */
	.afisha-hero {
		padding: 0 112px 150px var(--page-gutter);
	}

	.afisha-hero__content {
		flex-direction: row;
		align-items: flex-end;
		gap: 0;
		margin-top: 98px; /* breadcrumbs (16) → title top 114. */
	}

	.afisha-hero__heading {
		gap: 18px;
	}

	.afisha-hero__season {
		width: 118px;
		height: auto;
	}

	.afisha-hero__season-number {
		height: calc(var(--fs-h3) * 0.7);
		font-size: var(--fs-h3);
		line-height: var(--lh-h3);
		letter-spacing: var(--ls-h3);
	}

	.afisha-hero__season,
	.afisha-hero__season-label {
		align-items: stretch; /* Season Info is FIXED 118 wide, both labels FILL it. */
	}

	.afisha-hero__season-label-1 {
		font-size: var(--fs-s-text);
		line-height: var(--lh-s-text);
		letter-spacing: var(--ls-s-text);
	}

	.afisha-hero__season-label-2 {
		font-size: var(--fs-h4);
		line-height: var(--lh-h4);
		letter-spacing: var(--ls-h4);
		text-box: trim-both cap alphabetic;
	}

	.afisha-hero__aside {
		flex: 0 0 371px;
		margin-left: auto;
	}

	.afisha-hero__description {
		max-width: 244px;
	}

	/* Event Day Group 3214:4658 / 3214:4672: the date column at x=56, cards
	   from x=282 to 56px from the right edge; 100px above and below the
	   cards, 40 between them; 1px #D0D5DC top stroke (inside). Those two 56s
	   are the page column, read from `--page-gutter` (container.css) so the
	   list stays as wide as the header at every width and not 56 px wider
	   than it from 1920 up (client fix ПР-20). */
	.afisha-day {
		display: grid;
		grid-template-columns: 226px minmax(0, 1fr);
		align-items: start;
		padding: 100px var(--page-gutter);
		box-shadow: inset 0 1px 0 var(--color-neutral-300);
	}

	/* Annotation 4496:35835 on Events List 3214:5200: «Sticky effect для дат:
	   дата залишається зафіксованою під час скролу секції та рухається далі,
	   коли секція закінчується» (Locomotive Scroll, «03. CSS sticky»). A sticky
	   grid item does exactly that with no script: its containing block is its
	   own grid area, which here is the whole day group, so the date holds its
	   offset past every card and leaves with the last one. `align-items: start`
	   on `.afisha-day` is what gives it the room — a stretched item would be as
	   tall as the cards column and have nowhere to travel (the same reason the
	   accessibility page's sticky column is `align-self: start`).

	   Only from 1440, and this rule lives in that media query for that reason:
	   below it the frame draws the date as a full-width band ABOVE the cards
	   («Date Header» 390×87 in 4372:23215), not a column beside them, and no
	   annotation asks for that band to be pinned.

	   The offset clears two sticky boxes stacked above the list — the
	   hide-on-scroll header and the filter bar under it — and rides with the
	   header through `top`, never a transform (filters.css documents why a
	   transform on a sticky box is wrong here). The 24px is the house offset of
	   a sticky column (accessibility.css).

	   `--podil-afisha-bar-h` is the bar's measured height (filters.js), and it
	   deliberately has NO fallback. The bar is 50px in the .fig (3905:11616),
	   116 once a row of chips hangs under it, and 180 with the script off,
	   where the no-JS panels stay in flow — one number cannot serve all three.
	   Unresolved, the `var()` makes the whole `top` invalid, it computes to
	   `auto`, and a sticky box with `top: auto` never pins: without the script
	   the date simply stays in the flow the frame draws it in, rather than
	   being pinned behind a bar nobody measured (global-constraints.md — the
	   page is complete without JavaScript, the script only speeds it up). */
	.afisha-day__heading {
		position: sticky;
		top: calc(var(--podil-header-h, 0px) + var(--podil-header-shift, 0px) + var(--podil-afisha-bar-h) + 24px);
		grid-column: 1;
		grid-row: 1;
		align-items: flex-start;
		gap: 8px;
		padding: 0;
		box-shadow: none;
		background: none;
		text-align: left;
		transition: top 300ms cubic-bezier(0, 0, 0.58, 1);
	}

	.afisha-day__cards {
		grid-column: 2;
		grid-row: 1;
		gap: 40px;
		padding: 0;
	}

	/* Today (3214:4658): «сьогодні» (H3, trimmed, 25 tall) 80px from the
	   group's top, the first card 59px under it; the date header starts
	   145px down — 19px above the first card, unlike every other group,
	   where it lines up with it (as drawn; designer-questions.md). */
	.afisha-day--today {
		padding-top: 80px;
	}

	.afisha-day__today {
		display: block;
		grid-column: 2;
		grid-row: 1;
		height: calc(var(--fs-h3) * 0.7);
		margin: 0 0 59px;
		color: var(--color-neutral-800);
		font-family: var(--font-title);
		font-size: var(--fs-h3);
		line-height: var(--lh-h3);
		letter-spacing: var(--ls-h3);
		text-transform: uppercase;
		text-box: trim-both cap alphabetic;
	}

	.afisha-day--today .afisha-day__heading {
		grid-row: 1 / span 2;
		margin-top: 65px;
	}

	.afisha-day--today .afisha-day__cards {
		grid-row: 2;
	}

	.afisha-empty {
		padding: 100px var(--page-gutter);
	}

	/* View All 3312:11412: 1280 wide at x=80 — 24px inside the page column
	   (56 at that frame), kept as that relation so the button band stays
	   inside the column instead of hanging out of it above 1920. */
	.afisha-more {
		padding-inline: calc(var(--page-gutter) + 24px);
	}
}