/*
 * Liliental — карусель авиапарка
 *
 * Geometry is taken from Figma node 2332-32 (frame 1920, container 1598):
 *   side slot    302 x 461   (photo 302 x 344, then title bar, then spec lines)
 *   featured     948 x 461   = photo 625 + panel 323
 *   gold bar      44 x 461   overlaid on the photo's right edge
 *   gap           22         (5 x 302 + 4 x 22 = 1598 exactly)
 *
 * Every length here is a multiple of --llac-u, one design pixel of that 1920
 * frame, and carousel.js measures the DOM rather than assuming pixels. So the
 * whole component — type, padding and geometry alike — rescales above 2040 by
 * overriding that single custom property, with no JS change.
 *
 * Between the two, the featured *photo* is the only thing that flexes: side
 * slots, panel, type sizes and the card height all stay at their design values
 * down to 1280, and the row keeps fitting its container because the photo gives
 * the width up. See --llac-photo.
 */

.llac {
	/* One design pixel of the 1920 frame. Every length below is written as a
	   multiple of it, so the widescreen block scales the *whole* component —
	   type, padding and geometry alike — by overriding this one value. */
	--llac-u: 1px;

	--llac-slot: calc(302 * var(--llac-u));
	--llac-gap: calc(22 * var(--llac-u));
	--llac-panel: calc(323 * var(--llac-u));

	/* The featured photo is the one elastic dimension on desktop. It takes
	   whatever is left after the two neighbouring slots, their gaps and the
	   stat panel, so the five slots fit the container *exactly* at every width
	   from 1598 (the Figma frame) down to ~1410. Below that it holds at a floor
	   and the neighbours start to clip rather than the photo turning into a
	   sliver narrower than a side card. */
	--llac-photo: clamp(
		calc(440 * var(--llac-u)),
		calc(100% - 2 * (var(--llac-slot) + var(--llac-gap)) - var(--llac-panel)),
		calc(625 * var(--llac-u))
	);
	--llac-featured: calc(var(--llac-photo) + var(--llac-panel));
	--llac-h: calc(461 * var(--llac-u));
	--llac-photo-h: calc(344 * var(--llac-u));
	--llac-bar: calc(44 * var(--llac-u));

	/* Shared easing, so a skin can restyle every transition at once. */
	--llac-ease: cubic-bezier(.4, 0, .2, 1);

	--llac-gold: #cfbe7b;
	--llac-navy: #212c68;
	--llac-ink: #333;
	--llac-sans: "Montserrat", -apple-system, "Segoe UI", sans-serif;
	--llac-serif: "Playfair Display", Georgia, serif;

	position: relative;
	width: 100%;

	/* Makes 1cqw = 1% of the carousel's own width, which is what --llac-u and
	   the tablet slot are sized from. A percentage cannot do this job: several
	   of the lengths derived from them are `height`s, and a percentage in a
	   height resolves against the parent's height and drops the declaration.
	   NB an element is not its own query container — never consume a cqw-based
	   property on `.llac` itself (the phone width below stays in vw). */
	container-type: inline-size;
}

/* The track's children are absolutely positioned, so the widget has no
   intrinsic width and collapses to zero inside a flex-row container. */
.elementor-widget-llac_aircraft_carousel {
	width: 100%;
}

.llac-empty {
	padding: 40px;
	border: 1px dashed #c3c7d9;
	color: #6b7089;
	font-family: var(--llac-sans);
	text-align: center;
}

.llac-viewport {
	overflow: hidden;
	width: 100%;
}

.llac-track {
	position: relative;
	height: var(--llac-h);
}

.llac-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--llac-slot);
	height: var(--llac-h);
	transition: width var(--llac-speed, 450ms) var(--llac-ease),
		transform var(--llac-speed, 450ms) var(--llac-ease);
	will-change: transform, width;
}

.llac-slide.is-featured {
	width: var(--llac-featured);
	z-index: 2;
}

/* ---------- before the script runs ----------
   Every slide is absolutely positioned at left:0, so without this they stack
   and only the wide one is visible until layout() runs. PHP marks the two
   slides flanking the starting one; place all three exactly where the script
   will put them, and keep the rest out of sight, so nothing jumps. */

.llac:not(.llac--ready) .llac-slide {
	visibility: hidden;
}

.llac:not(.llac--ready) .llac-slide.is-featured,
.llac:not(.llac--ready) .llac-slide.is-prev,
.llac:not(.llac--ready) .llac-slide.is-next {
	visibility: visible;
	left: 50%;
}

.llac:not(.llac--ready) .llac-slide.is-featured {
	margin-left: calc(var(--llac-featured) / -2);
}

.llac:not(.llac--ready) .llac-slide.is-prev {
	margin-left: calc((var(--llac-featured) / -2) - var(--llac-gap) - var(--llac-slot));
}

.llac:not(.llac--ready) .llac-slide.is-next {
	margin-left: calc((var(--llac-featured) / 2) + var(--llac-gap));
}

/* Below the featured breakpoint the track is a plain scroll row, so the flow
   already puts the cards in the right place — undo all of the above. */
@media (max-width: 1279px) {
	.llac:not(.llac--ready) .llac-slide {
		visibility: visible;
		left: auto;
		margin-left: 0;
	}
}

.llac-card {
	display: block;
	height: 100%;
	overflow: hidden;
	background: #fff;
	color: inherit;
	text-decoration: none;
}

/* ---------- photo ---------- */

.llac-photo {
	position: relative;
	height: var(--llac-photo-h);
	background: #dfe3ee;
	overflow: hidden;
	transition: height var(--llac-speed, 450ms) var(--llac-ease);
}

.llac-pic {
	display: block;
	width: 100%;
	height: 100%;
}

/* The theme ships `img { height: auto }` and, depending on how Seraphinite
   orders the combined bundle, it can outrank a single class. Cover-cropping is
   the whole point of the fixed photo box, so make it non-negotiable. */
.llac .llac-photo .llac-img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100% !important;
	object-fit: cover;
}

/* The category label is white on whatever the photo happens to be; several
   aircraft are shot against bright sky or tarmac. */
.llac-photo::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 42%;
	background: linear-gradient(to top, rgba(14, 20, 48, .72), rgba(14, 20, 48, 0));
	pointer-events: none;
}

.llac-cat {
	position: absolute;
	z-index: 2;
	right: calc(16 * var(--llac-u));
	bottom: calc(14 * var(--llac-u));
	left: calc(16 * var(--llac-u));
	/* The longest category needs ~260px and a card gives it ~237, so it has to
	   wrap. Clamped to two lines: everything in the taxonomy fits in two. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	color: #fff;
	font-family: var(--llac-sans);
	font-size: calc(12 * var(--llac-u));
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

/* Gold name bar — only in the featured state. Its own column beside the photo
   rather than an overlay, so it never crops the aircraft. */
.llac-bar {
	position: relative;
    border-left: calc(2 * var(--llac-u)) solid #212C68;
    border-right: calc(2 * var(--llac-u)) solid #212C68;
	display: none;
    text-align: left;
	width: var(--llac-bar);
	background: var(--llac-gold);
}

.llac-bar-text {
    position: absolute;
    transform-origin: left;
    bottom: calc(15 * var(--llac-u));
    left: 50%;
    color: #fff;
    font-family:var(--llac-sans);
    font-size: calc(17 * var(--llac-u));
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
    transform: translateY(-50%) rotate(-90deg);
}

/* ---------- side-card body ---------- */

.llac-title {
	display: block;
	height: calc(46 * var(--llac-u));
	line-height: calc(46 * var(--llac-u));
	padding: 0 calc(16 * var(--llac-u));
	background: var(--llac-navy);
	color: #fff;
	font-family: var(--llac-sans);
	font-size: calc(19 * var(--llac-u));
	font-weight: 600;
	/* carousel.js shrinks this to fit; the ellipsis is only the last resort for
	   a name still too long at the minimum size. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.llac-lines {
	padding: calc(13 * var(--llac-u)) calc(16 * var(--llac-u));
	font-family: var(--llac-sans);
	font-size: calc(15 * var(--llac-u));
	line-height: 1.5;
	color: var(--llac-ink);
}

.llac-lines p {
	margin: 0 0 calc(4 * var(--llac-u));
}

.llac-lines b {
	color: var(--llac-navy);
	font-weight: 700;
}

/* ---------- featured stat panel ---------- */

.llac-panel {
	display: none;
	width: var(--llac-panel);
	height: 100%;
	box-sizing: border-box;
	padding: calc(44 * var(--llac-u)) calc(20 * var(--llac-u)) calc(38 * var(--llac-u));
	background: #fff;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	align-content: space-between;
	gap: calc(24 * var(--llac-u)) calc(10 * var(--llac-u));
}

/* Each stat owns a fixed cell, so a missing value leaves a hole rather than
   reflowing the other three. */
.llac-stat--range  { grid-area: 1 / 1; }
.llac-stat--height { grid-area: 1 / 2; }
.llac-stat--pax    { grid-area: 2 / 1; }
.llac-stat--bag    { grid-area: 2 / 2; }

.llac-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
}

.llac-ico {
	display: block;
	color: var(--llac-gold);
	line-height: 0;
}

.llac-ico svg {
	display: block;
	width: auto;
	height: calc(58 * var(--llac-u));
}

.llac-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.llac-val {
	display: block;
	margin-top: calc(10 * var(--llac-u));
	color: var(--llac-navy);
	font-family: var(--llac-serif);
	font-size: calc(34 * var(--llac-u));
	font-weight: 600;
	line-height: 1.05;
	white-space: nowrap;
}

.llac-lab {
	display: block;
	margin-top: calc(4 * var(--llac-u));
	color: var(--llac-ink);
	font-family: var(--llac-sans);
	font-size: calc(15 * var(--llac-u));
	line-height: 1.22;
}

/* ---------- featured state ---------- */

.llac--featured .llac-slide.is-featured .llac-card {
	display: flex;
	align-items: stretch;
}

/* The photo simply eats the space the fixed gold bar and stat panel leave, so
   --llac-photo never has to be resolved against the card (a percentage inside
   it would resolve against the *card*, not the carousel). */
.llac--featured .llac-slide.is-featured .llac-photo {
	width: auto;
	min-width: 0;
	height: var(--llac-h);
	flex: 1 1 auto;
}

.llac--featured .llac-slide.is-featured .llac-bar {
	display: block;
	flex: 0 0 var(--llac-bar);
}

.llac--featured .llac-slide.is-featured .llac-panel {
	display: grid;
	flex: 0 0 var(--llac-panel);
}

.llac--featured .llac-slide.is-featured .llac-title,
.llac--featured .llac-slide.is-featured .llac-lines {
	display: none;
}

.llac--featured .llac-slide.is-featured .llac-cat {
	right: calc(16 * var(--llac-u));
	bottom: calc(18 * var(--llac-u));
	left: calc(24 * var(--llac-u));
	font-size: calc(13 * var(--llac-u));
}

/* ---------- arrows ---------- */

/* Matches the shared .new-swiper chrome the site's other carousels use:
   a bare navy chevron in the page gutter, no button chrome at all. */
.llac-nav {
	position: absolute;
	top: calc(var(--llac-h) / 2);
	z-index: 3;
	display: flex;
	width: calc(25 * var(--llac-u));
	height: calc(25 * var(--llac-u));
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--llac-navy);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity .2s;
}

.llac-nav svg {
	width: 100%;
	height: 100%;
}

.llac-nav:hover, .llac-nav:focus {
    background-color: transparent;
    color: inherit;
	opacity: .6;
}

/* The arrows live in the page gutter — but only where there is one. A
   full-bleed container has none, and -40px then put the next arrow 40px past
   the right edge of the document, which is the horizontal scrollbar the page
   grew on laptops. `(100% - 100vw) / 2` is the gutter this container actually
   has, so the arrow falls back to sitting just inside the screen edge. */
.llac-nav--prev { left: max(calc(-40 * var(--llac-u)), calc((100% - 100vw) / 2 + 24px)); }
.llac-nav--next { right: max(calc(-40 * var(--llac-u)), calc((100% - 100vw) / 2 + 24px)); }

.llac-nav[disabled] {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

/* ---------- progress bar (phone only), same as .new-swiper ---------- */

.llac-pagination {
	position: relative;
	display: none;
	width: 100%;
	height: 4px;
	margin: 14px auto 0;
	overflow: visible;
}

/* the track */
.llac-pagination::before {
	content: "";
	position: absolute;
	top: 1px;
	right: 0;
	left: 0;
	height: 2px;
	background: #222d68;
}

/* the thumb, deliberately thicker than the track */
.llac-pagination .ll-thumb {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 0;
	height: 4px;
	background: var(--llac-gold);
	transition: left .35s, width .35s;
}

/* Suppressed while a finger is actually dragging, so the thumb tracks 1:1
   and only eases when an arrow jumps it. */
.llac-pagination.is-dragging .ll-thumb {
	transition: none;
}

/* ---------- 1280 and up: the row always fits its container ---------- */

/* At design size the narrowest the row can be is 1411 = two side slots, two
   gaps, the stat panel and the featured photo at its 440 floor. Below that the
   photo has nothing left to give and the neighbours used to be clipped by the
   container edge — on the home page (80px gutters) that was every width from
   1280 to ~1590, cutting half a card at 1280.

   So below 1411 the whole component scales instead: u = container / 1411 puts
   the photo exactly on its floor and the row exactly on the container edges, at
   every width, with the proportions of the Figma frame intact. At and above
   1411 u is 1 and the photo grows back to 625 on its own. */
@media (min-width: 1280px) {
	.llac {
		--llac-u: min(1px, calc(100cqw / 1411));
	}
}

/* ---------- wide screens: the whole component scales ---------- */

/* One line, because every length in this file is a multiple of --llac-u:
   1 design px of the 1920 frame is 1/1920 of the viewport = .052083vw. The
   card type scales with the boxes it sits in — an earlier version listed the
   handful of properties to convert by hand and quietly left the side-card
   title, spec lines and category label pinned at their 1280 sizes, which on a
   4K screen is 19px of text in a 604px card.

   This deliberately keys off the *viewport*, not the container: the site's
   widescreen containers are themselves vw-based above 2040 (85vw on the home
   page), so the two scale together. */
@media (min-width: 2041px) {
	.llac {
		--llac-u: 0.052083vw;
	}
}

/* ---------- tablet and phone: plain cards, no featured panel ---------- */

@media (max-width: 1279px) {
	.llac {
		/* Exactly three cards across, at every tablet width: four made them
		   too small to read. cqw and not a percentage because --llac-photo-h
		   is derived from this and used as a `height`, where a percentage
		   resolves against the parent's *height* and drops the declaration. */
		--llac-slot: calc((100cqw - 2 * var(--llac-gap)) / 3);
		/* Follow the slot so the photo keeps the design's 302 x 344 crop
		   instead of getting more portrait as the card narrows. */
		--llac-photo-h: calc(var(--llac-slot) * 344 / 302);
	}

	.llac-track {
		display: flex;
		height: auto;
		gap: var(--llac-gap);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.llac-track::-webkit-scrollbar { display: none; }

	.llac-slide,
	.llac-slide.is-featured {
		position: static;
		width: var(--llac-slot);
		height: auto;
		flex: 0 0 var(--llac-slot);
		scroll-snap-align: center;
		transform: none !important;
		transition: none;
	}

	/* The featured skin is desktop-only. */
	.llac--featured .llac-slide.is-featured .llac-card { display: block; }
	.llac--featured .llac-slide.is-featured .llac-photo {
		width: auto;
		height: var(--llac-photo-h);
		flex: none;
	}
	.llac--featured .llac-slide.is-featured .llac-bar,
	.llac--featured .llac-slide.is-featured .llac-panel { display: none; }
	.llac--featured .llac-slide.is-featured .llac-title,
	.llac--featured .llac-slide.is-featured .llac-lines { display: block; }
	.llac--featured .llac-slide.is-featured .llac-title { display: block; }
	.llac--featured .llac-slide.is-featured .llac-cat {
		right: 16px;
		bottom: 14px;
		left: 16px;
		font-size: 12px;
	}

	.llac-nav { top: calc(var(--llac-photo-h) / 2); }
	.llac--featured .llac-slide.is-featured .llac-cat { right: 16px; }
}

@media (max-width: 767px) {
	.llac {
		/* Inset like the site's other carousels (~75% of the viewport), which
		   is what leaves room for the arrows in the margin. */
		--llac-slot: 74.6vw;
		--llac-gap: 12px;
		/* The desktop box is portrait (302x344) but every source photo is a
		   1.5-1.8 landscape, and on a phone that crop throws most of the frame
		   away. Sit close to the sources instead. */
		--llac-photo-h: calc(var(--llac-slot) / 1.7);

		width: var(--llac-slot);
		margin-right: auto;
		margin-left: auto;
	}

	/* The viewport is exactly one card wide, so neighbours are clipped rather
	   than peeking in at the edge. */
	.llac-track {
		padding: 0;
		scroll-padding: 0;
	}

	.llac-slide,
	.llac-slide.is-featured {
		scroll-snap-align: start;
	}

	.llac-nav {
		display: flex;
		width: 10px;
		height: 20px;
		top: 37.5%;
	}

	.llac-nav--prev { left: -26px; }
	.llac-nav--next { right: -26px; }

	.llac-pagination { display: block; }

	/* Centred text on phones, matching the site's other mobile cards. */
	.llac-cat,
	.llac-title,
	.llac-lines,
	.llac-lines p {
		text-align: center;
	}
}

/* ===========================================================================
   Skin: "cinema"
   ===========================================================================

   The designer's treatment of the home-page carousel. It lived as a
   <style>+<script> HTML widget dropped next to the widget on page 13514 and is
   now a setting: "Оформление" -> «Кинематографичное».

   What it changes, in one line each:
     - side cards are dimmed and shrunk and the featured one is scaled up, so
       the row reads as a stage with a spotlight rather than five equal cards;
     - the gold name plate becomes a 4-wide navy divider and the aircraft name
       moves into a navy bar laid over the bottom of the photo;
     - the stat panel narrows to 270 and becomes a 2x2 grid of fixed cells;
     - a counter and an autoplay progress bar sit under the row.

   Two deliberate departures from the markup it was pasted onto:

   - Everything that restyles the *featured* layout is scoped to
     `min-width: 1280px`, the breakpoint at which this widget actually has a
     featured slide. The original used 768px, and put no lower bound on the
     dimming at all: between 768 and 1279 — where the carousel is a plain
     three-card scroll row — one arbitrary card kept the `is-featured` class
     PHP had rendered, and every other card was dimmed and squashed by a
     transform that row never asked for.

   - Lengths are multiples of --llac-u like the rest of this file, so the skin
     scales with the component above 2040px instead of staying at 1920 sizes.

   The featured card is deliberately scaled *past* the row it sits in
   (scaleY(1.07) from the bottom edge) and .llac-viewport clips the 32u that
   puts above the track. That is the look — the card fills the row top to
   bottom while its neighbours are inset — not an oversight. */

.llac--cinema {
	--llac-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- transitions ---------- */

.llac--cinema .llac-slide,
.llac--cinema .llac-photo,
.llac--cinema .llac-img,
.llac--cinema .llac-card {
	transition-duration: var(--llac-speed, 450ms);
	transition-timing-function: var(--llac-ease);
}

.llac--cinema .llac-card {
	transition-property: transform, opacity, box-shadow;
}

/* Note what is NOT here: height. The base rule animates the photo box from the
   side card's 344 to the featured 461, and that is wrong for this skin — for the
   length of the transition the photo is short inside a full-height card, so the
   card's white background shows under it and the image reads as growing down
   from the top corner. Letting the height snap instead means the cover-cropped
   image fills the box from the first frame and only the card width animates,
   which is the stretch-into-place the design asks for. */
.llac--cinema .llac-photo {
	transition-property: filter, opacity;
}

/* The photo is held slightly over-scaled while the card is a neighbour and
   settles back to 1 as it becomes featured, so the crop drifts open. */
.llac--cinema .llac-img {
	transition-property: transform;
	transform: scale(1.035);
}

/* ---------- counter + autoplay progress ---------- */

.llac-meta {
	display: flex;
	width: min(calc(580 * var(--llac-u)), calc(100% - 40 * var(--llac-u)));
	margin: calc(18 * var(--llac-u)) auto calc(2 * var(--llac-u));
	align-items: center;
	gap: calc(14 * var(--llac-u));
	color: #253675;
	font-family: var(--llac-sans);
}

.llac-meta-count {
	min-width: calc(58 * var(--llac-u));
	font-size: calc(12 * var(--llac-u));
	font-weight: 600;
	letter-spacing: .08em;
}

.llac-meta-progress {
	position: relative;
	display: block;
	flex: 1;
	height: calc(2 * var(--llac-u));
	overflow: hidden;
	background: rgba(37, 54, 117, .16);
}

.llac-meta-progress > i {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(90deg, #c7af61, #253675);
	transform: scaleX(0);
	transform-origin: left center;
}

/* The duration is the widget's own autoplay pause, published by carousel.js,
   so the bar fills exactly as far as the next slide is away — the original
   hard-coded 5s and drifted whenever the pause was not 5000ms. carousel.js
   also owns the play state: it pauses with the autoplay timer, which is what
   hovering and focusing the carousel already do. */
.llac-meta-progress > i.is-running {
	animation: llacProgress var(--llac-autoplay, 5000ms) linear forwards;
}

@keyframes llacProgress {
	to { transform: scaleX(1); }
}

@keyframes llacGoldReveal {
	from { opacity: .25; transform: scaleX(0); }
	to { opacity: 1; transform: scaleX(1); }
}

@keyframes llacStatReveal {
	from { transform: translateY(12px); filter: blur(2px); }
	to { transform: translateY(0); filter: blur(0); }
}

/* ---------- desktop: the spotlight ---------- */

@media (min-width: 1280px) {

	.llac--cinema .llac-slide:not(.is-featured) .llac-card {
		opacity: .78;
		transform: scaleX(.82) scaleY(.94);
		transform-origin: center bottom;
	}

	.llac--cinema .llac-slide:not(.is-featured) .llac-photo {
		filter: brightness(.48) saturate(.55) contrast(.95);
		opacity: .78;
	}

	.llac--cinema .llac-slide:not(.is-featured) .llac-card:hover {
		opacity: .92;
		transform: scaleX(.86) scaleY(.98);
	}

	.llac--cinema .llac-slide:not(.is-featured) .llac-card:hover .llac-photo {
		filter: brightness(.68) saturate(.75) contrast(1);
		opacity: .9;
	}

	.llac--cinema .llac-slide.is-featured .llac-card {
		position: relative;
		transform: scaleX(1.05) scaleY(1.07);
		transform-origin: center bottom;
		box-shadow: 0 18px 46px rgba(27, 43, 96, .16);
	}

	.llac--cinema .llac-slide.is-featured .llac-card:hover .llac-img {
		transform: scale(1.025);
	}

	/* Spelled out rather than left to fall back to `none`, so the filter
	   interpolates function for function on the way in from the dimmed state. */
	.llac--cinema .llac-slide.is-featured .llac-photo {
		position: relative;
		filter: brightness(1) saturate(1) contrast(1);
		opacity: 1;
	}

	.llac--cinema .llac-slide.is-featured .llac-img {
		transform: scale(1);
	}

	/* The 44-wide gold plate becomes a hairline divider; the name it carried
	   moves to .llac-title over the photo. --llac-bar and --llac-panel are left
	   alone on purpose — they define the *slide's* width, which does not
	   change; the photo simply absorbs the 93u the two give up. */
	.llac--cinema.llac--featured .llac-slide.is-featured .llac-bar {
        display: none;
		flex: 0 0 calc(4 * var(--llac-u));
		width: calc(4 * var(--llac-u));
		min-width: calc(4 * var(--llac-u));
		border: 0;
		background: var(--llac-navy);
		box-shadow: none;
		transform-origin: left center;
		animation: llacGoldReveal var(--llac-speed, 450ms) var(--llac-ease) both;
	}

	.llac--cinema .llac-slide.is-featured .llac-bar-text {
		display: none;
	}

	.llac--cinema.llac--featured .llac-slide.is-featured .llac-title {
		display: block;
		position: absolute;
		z-index: 3;
		/* the panel (270) + the divider (4) + a hairline, so the plate stops
		   just short of the divider instead of butting into it */
		/*right: calc(275 * var(--llac-u));*/
		right: calc(275 * var(--llac-u));
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		height: auto;
		padding: calc(11 * var(--llac-u)) calc(20 * var(--llac-u)) calc(12 * var(--llac-u));
		overflow: visible;
		background: var(--llac-navy);
		color: #fff;
		font-size: calc(19 * var(--llac-u));
		font-weight: 600;
		line-height: 1.2;
		text-align: left;
	}

	.llac--cinema.llac--featured .llac-slide.is-featured .llac-cat {
		top: calc(60 * var(--llac-u));
		right: calc(24 * var(--llac-u));
		bottom: auto;
		left: calc(24 * var(--llac-u));
		font-size: calc(12 * var(--llac-u));
		font-weight: 600;
		letter-spacing: .04em;
		line-height: 1.25;
	}

	.llac--cinema.llac--featured .llac-slide.is-featured .llac-panel {
		position: relative;
		flex: 0 0 calc(270 * var(--llac-u));
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(2, calc(150 * var(--llac-u)));
		align-content: center;
		gap: calc(24 * var(--llac-u)) calc(8 * var(--llac-u));
		padding: calc(56 * var(--llac-u)) calc(14 * var(--llac-u)) calc(44 * var(--llac-u));
	}

	/* Fixed rows for icon / value / label, so four stats with wildly different
	   label lengths still line up across the panel. */
	.llac--cinema .llac-slide.is-featured .llac-stat {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: calc(48 * var(--llac-u)) calc(31 * var(--llac-u)) calc(50 * var(--llac-u));
		align-content: center;
		align-items: start;
		justify-items: center;
		min-width: 0;
		row-gap: calc(4 * var(--llac-u));
		animation: llacStatReveal 480ms var(--llac-ease) both;
	}

	.llac--cinema .llac-slide.is-featured .llac-stat:nth-child(1) { animation-delay: 160ms; }
	.llac--cinema .llac-slide.is-featured .llac-stat:nth-child(2) { animation-delay: 220ms; }
	.llac--cinema .llac-slide.is-featured .llac-stat:nth-child(3) { animation-delay: 280ms; }
	.llac--cinema .llac-slide.is-featured .llac-stat:nth-child(4) { animation-delay: 340ms; }

	.llac--cinema .llac-slide.is-featured .llac-ico {
		display: flex;
		width: calc(48 * var(--llac-u));
		height: calc(48 * var(--llac-u));
		align-items: center;
		justify-content: center;
		margin: 0;
	}

	.llac--cinema .llac-slide.is-featured .llac-ico-svg {
		width: 100%;
		height: 100%;
	}

	.llac--cinema .llac-slide.is-featured .llac-val {
		align-self: center;
		margin: 0;
		font-size: calc(28 * var(--llac-u));
		line-height: calc(31 * var(--llac-u));
		white-space: nowrap;
	}

	.llac--cinema .llac-slide.is-featured .llac-lab {
		margin: 0;
		font-size: calc(13 * var(--llac-u));
		line-height: 1.2;
	}

	/* The original drew this with a ::after and a hard-coded Russian string.
	   A real element instead, so the text is a widget setting. */
	.llac--cinema .llac-slide.is-featured .llac-cta {
		position: absolute;
		right: calc(14 * var(--llac-u));
		bottom: calc(9 * var(--llac-u));
		color: #253675;
		font-family: var(--llac-sans);
		font-size: calc(12 * var(--llac-u));
		font-weight: 700;
		letter-spacing: .03em;
		opacity: .9;
		white-space: nowrap;
		transition: opacity .25s ease, transform .25s ease;
	}

	.llac--cinema .llac-slide.is-featured .llac-card:hover .llac-cta {
		opacity: 1;
		transform: translateX(3px);
	}
    .llac--cinema .llac-slide.is-featured .llac-card .llac-cta:hover {
        color: var(--llac-gold);
    }
}

/* ---------- phone: full-bleed row, centred snap ---------- */

/* --llac-u is 1px below 1280, so plain pixels here, like the block above it. */
@media (max-width: 767px) {
	.llac--cinema {
		width: 100vw;
		max-width: 100vw;
		margin-right: 0;
		margin-left: calc(50% - 50vw);
	}

	/* The card is narrower than the screen again, so half the difference on
	   each side puts the snapped card in the middle with its neighbours
	   peeking in at the edges. */
	.llac--cinema .llac-track {
		padding: 0 calc((100vw - var(--llac-slot)) / 2);
		scroll-padding: 0 calc((100vw - var(--llac-slot)) / 2);
	}

	.llac--cinema .llac-slide,
	.llac--cinema .llac-slide.is-featured {
		scroll-snap-align: center;
	}

	/* There is no margin left for them to sit in once the row is full-bleed. */
	.llac--cinema .llac-nav--prev { left: 14px; }
	.llac--cinema .llac-nav--next { right: 14px; }

	/* The counter bar replaces the scroll thumb. */
	.llac--cinema .llac-pagination { display: none; }

	.llac--cinema .llac-meta {
		width: calc(100% - 32px);
		margin-top: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.llac--cinema .llac-slide,
	.llac--cinema .llac-slide *,
	.llac--cinema .llac-meta-progress > i {
		animation: none !important;
		transition-duration: .01ms !important;
	}

	.llac--cinema .llac-slide.is-featured .llac-stat {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}