/* Poster band — the one slanted light band the .fig draws across the
   bottom of every poster and photo:

   · «Age Rating Container» on the repertoire / home «Event Card» set
     3274:9334 — 3274:9341 (1440), 4316:27952 (390): 376×56 / 358×54;
   · «Age Rating Container» on the afisha list «Event Card» set 3336:16765 —
     3336:16766 (1440, 207×51.6), 4287:29271 (390, 280×58);
   · «Premiere Info» on the home premiere media 1159:7597 / 4128:16164 /
     4184:18303 / 4190:20169 (653×97 / 359×55 / 705×79 / 827×94);
   · «Vector 4» under the home hero photo 1159:7375 / 4124:11543 /
     4184:18252 / 4190:20022 (1332×241 / 358×169 / 768×241 / 1696×241).

   Same shape everywhere: a rectangle whose top edge starts at the band's
   own top on the left and lands `--c-poster-band-rise` lower on the right
   (measured on the 1:1 frame renders, design/figma/frames — the REST dump
   carries no vector geometry). The two custom properties are the whole
   API: a consumer sets its own height and rise per breakpoint and keeps
   the clip-path, colour and type from here. Text inside (the age marker,
   «Прем'єра сезону») is H6 semi-bold caps 16px in from the left; the hero
   and any other text-less use is `--plain`. */

.c-poster-band {
	--c-poster-band-height: 54px;
	--c-poster-band-rise: 60%;

	position: absolute;
	inset: auto 0 0 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	height: var(--c-poster-band-height);
	padding-left: 16px;
	clip-path: polygon(0 0, 100% var(--c-poster-band-rise), 100% 100%, 0 100%);
	background: var(--color-neutral-100);
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-h6);
	font-weight: 600;
	line-height: var(--lh-h6);
	letter-spacing: var(--ls-h6);
	text-transform: uppercase;
}

.c-poster-band--plain {
	padding: 0;
}

/* Forced colours drop `background` and, with it, the band would vanish
   into the poster — the shape is meaningful only with its text, so the
   text keeps its system colour and the band its own canvas. */
@media (forced-colors: active) {

	.c-poster-band {
		background: Canvas;
		color: CanvasText;
	}
}