/**
 * [trainings_cinema] — v2.18.3 rewrite to match cine-display-craft.lovable.app
 * structurally + visually. Layout: per-card 56px sidebar (dot + rotated date) +
 * article (poster 128×192 + content with Laikas/Vieta meta-grid + CTA button).
 *
 * Full no-inheritance lockdown: every property carries !important so the host
 * theme button/article/heading/paragraph/anchor rules cannot bleed in.
 *
 * @package Tobalt_Renginiai
 * @author  Tobalt — https://tobalt.lt
 */

.tr-cinema {
	/* Palette — derived from cine-display-craft. Bound to admin --tr-color-primary
	 * so site brand drives the dot/badge/CTA where appropriate. */
	--trc-bg-page: transparent;
	--trc-bg-card: #fafafa;
	--trc-bg-poster: #eeeeee;
	--trc-text: var(--tr-color-primary, #001c46);
	/* v2.18.5 WCAG AA: opacity bumped to clear 4.5:1 on white + #fafafa.
	 * --trc-text-soft 0.78 → 8.4:1 (excerpt body)
	 * --trc-muted     0.70 → 6.2:1 (subhead, sidebar date, meta labels) */
	--trc-text-soft: rgba(0, 28, 70, 0.78);
	--trc-muted: rgba(0, 28, 70, 0.70);
	--trc-muted-soft: rgba(0, 28, 70, 0.45);
	--trc-border: rgba(0, 28, 70, 0.10);

	/* v2.18.4: TWO accents per cine-display-craft reference. Marquee chartreuse
	 * = design-system constant (dot/kicker/badge/header-rule). Foreground navy
	 * = admin --tr-color-primary (CTA bg, title color). NOT interchangeable. */
	--trc-accent: var(--tr-color-primary, #001c46);
	--trc-accent-fg: #ffffff;
	--trc-accent-ring: rgba(0, 28, 70, 0.18);

	--trc-marquee: #a8d834;
	--trc-marquee-fg: var(--tr-color-primary, #001c46);
	--trc-marquee-ring: rgba(168, 216, 52, 0.30);
	--trc-marquee-soft: rgba(168, 216, 52, 0.40);
	/* v2.18.5 WCAG: darkened chartreuse for kicker TEXT use (small font).
	 * #476308 on white = 7.4:1 — passes AA. Dot/badge bg still bright #a8d834. */
	--trc-marquee-text: #476308;

	--trc-radius: 0px;
	--trc-radius-pill: 0;
	--trc-card-pad: 32px;
	--trc-row-gap: 40px;
	--trc-cards-gap: 64px;

	/* v2.18.6: bind to site's Elementor Kit typography globals so cinema
	 * follows the host brand fonts (anyksciukc = Roboto body + Bricolage
	 * Grotesque accent). Full literal fallback chain is appended AFTER the
	 * var so font-load failures (Elementor unset / web-font 404) still get a
	 * decent stack — not just the var's bare value. */
	--trc-font-body: var(--e-global-typography-text-font-family, 'Roboto'), 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--trc-font-display: var(--e-global-typography-accent-font-family, 'Bricolage Grotesque'), 'Barlow', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	font-family: var(--trc-font-body) !important;
	color: var(--trc-text) !important;
	max-width: 880px !important;
	margin: 0 auto !important;
	padding: 0 16px !important;
	box-sizing: border-box !important;
}

.tr-cinema *,
.tr-cinema *::before,
.tr-cinema *::after {
	box-sizing: border-box !important;
}

/* --------------------------------------------------------------------- */
/* Page head — kicker + heading + subhead (italic Playfair display)       */
/* --------------------------------------------------------------------- */
.tr-cinema .tr-cinema__head {
	text-align: left !important;
	margin: 0 0 64px !important;
	padding: 0 0 0 32px !important;
	border-left: 2px solid var(--trc-marquee-soft) !important;
}
.tr-cinema .tr-cinema__kicker {
	display: block !important;
	font-family: var(--trc-font-body) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3em !important;
	text-transform: uppercase !important;
	color: var(--trc-marquee-text) !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
}
.tr-cinema .tr-cinema__kicker-icon { display: none !important; }
.tr-cinema .tr-cinema__heading,
.tr-cinema h1.tr-cinema__heading,
.tr-cinema h2.tr-cinema__heading {
	margin: 0 0 16px !important;
	padding: 0 !important;
	font-family: var(--trc-font-display) !important;
	font-style: italic !important;
	font-size: clamp(40px, 7vw, 60px) !important;
	font-weight: 800 !important;
	line-height: 1.0 !important;
	color: var(--trc-text) !important;
	letter-spacing: -0.025em !important;
	font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1 !important;
	text-rendering: optimizeLegibility !important;
}
.tr-cinema .tr-cinema__subheading {
	margin: 0 !important;
	max-width: 560px !important;
	padding: 0 !important;
	font-size: 17px !important;
	line-height: 1.55 !important;
	color: var(--trc-muted) !important;
	font-weight: 300 !important;
}

/* --------------------------------------------------------------------- */
/* Filter chips — kept for opt-in; restyled minimal                       */
/* --------------------------------------------------------------------- */
.tr-cinema .tr-cinema__chips {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin: 24px 0 32px !important;
	padding: 0 !important;
}
.tr-cinema .tr-cinema__chip,
.tr-cinema .tr-cinema__chip:hover,
.tr-cinema .tr-cinema__chip:focus,
.tr-cinema .tr-cinema__chip:focus-visible,
.tr-cinema .tr-cinema__chip:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	padding: 6px 14px !important;
	margin: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--trc-muted) !important;
	border: 1px solid var(--trc-border) !important;
	border-radius: 0 !important;
	font-family: var(--trc-font-body) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	text-decoration: none !important;
}
.tr-cinema .tr-cinema__chip[aria-pressed="true"] {
	background: var(--trc-accent) !important;
	background-color: var(--trc-accent) !important;
	color: var(--trc-accent-fg) !important;
	border-color: var(--trc-accent) !important;
}

/* --------------------------------------------------------------------- */
/* "Visi seansai" bar — also kept opt-in; styled minimal                   */
/* --------------------------------------------------------------------- */
.tr-cinema .tr-cinema__bar {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	margin: 0 0 24px !important;
	padding: 0 0 12px !important;
	border-bottom: 1px solid var(--trc-border) !important;
}
.tr-cinema .tr-cinema__bar-label {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3em !important;
	text-transform: uppercase !important;
	color: var(--trc-accent) !important;
}
.tr-cinema .tr-cinema__bar-count {
	font-size: 11px !important;
	color: var(--trc-muted) !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
}

/* --------------------------------------------------------------------- */
/* List wraps card rows, generous vertical rhythm                         */
/* --------------------------------------------------------------------- */
.tr-cinema .tr-cinema__list {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--trc-cards-gap) !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
}

/* --------------------------------------------------------------------- */
/* CARD ROW — outer flex with left sidebar (date) + right article         */
/* --------------------------------------------------------------------- */
.tr-cinema .tr-cinema__row {
	display: flex !important;
	gap: var(--trc-row-gap) !important;
	align-items: stretch !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
}

/* Left sidebar — 56px wide, dot + rotated date label */
.tr-cinema .tr-cinema__sidebar {
	flex: 0 0 56px !important;
	width: 56px !important;
	display: flex !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
}
.tr-cinema .tr-cinema__sidebar-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	padding-top: 32px !important;
	gap: 18px !important;
}
.tr-cinema .tr-cinema__dot {
	display: block !important;
	width: 12px !important;
	height: 12px !important;
	border-radius: 50% !important;
	background: var(--trc-marquee) !important;
	box-shadow: 0 0 0 4px var(--trc-marquee-ring), 0 0 18px var(--trc-marquee-ring) !important;
	flex-shrink: 0 !important;
}
.tr-cinema .tr-cinema__date-vertical {
	display: block !important;
	font-family: var(--trc-font-body) !important;
	font-size: 10px !important;
	font-weight: 900 !important;
	color: var(--trc-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.15em !important;
	writing-mode: vertical-rl !important;
	transform: rotate(180deg) !important;
	white-space: nowrap !important;
	line-height: 1 !important;
}

/* --------------------------------------------------------------------- */
/* ARTICLE CARD — flex row of poster + content                            */
/* --------------------------------------------------------------------- */
.tr-cinema .tr-cinema__card {
	display: flex !important;
	flex: 1 1 auto !important;
	gap: 32px !important;
	padding: var(--trc-card-pad) !important;
	background: var(--trc-bg-card) !important;
	border: 1px solid var(--trc-border) !important;
	border-radius: var(--trc-radius) !important;
	box-shadow: none !important;
	margin: 0 !important;
	position: relative !important;
	min-height: 256px !important;
	transition: border-color 200ms ease !important;
}

/* v2.24.0: cinema card geometry-hover effects REMOVED per Tomas — was
 * causing blink on hover (lift -2px triggered hover-release-reapply loop on
 * card edges). Only color/decoration changes retained:
 *  - border-color: darkens to navy
 *  - title link: underline
 * No transform, no shadow, no scale, no transition on hover. */
.tr-cinema .tr-cinema__row:hover .tr-cinema__card,
.tr-cinema .tr-cinema__row:focus-within .tr-cinema__card {
	border-color: var(--trc-text) !important;
}
.tr-cinema .tr-cinema__row:hover .tr-cinema__title a,
.tr-cinema .tr-cinema__row:focus-within .tr-cinema__title a {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 4px !important;
}

/* Poster — fixed 128×192 (h-48 w-32 from reference) */
.tr-cinema .tr-cinema__poster {
	flex: 0 0 128px !important;
	width: 128px !important;
	height: 192px !important;
	display: block !important;
	background: var(--trc-bg-poster) !important;
	border-radius: var(--trc-radius) !important;
	overflow: hidden !important;
	position: relative !important;
	text-decoration: none !important;
	color: var(--trc-muted-soft) !important;
	border: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.tr-cinema .tr-cinema__poster img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}
.tr-cinema .tr-cinema__poster-gradient {
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(to top, rgba(250,250,250,0.85) 0%, transparent 40%, transparent 100%) !important;
	pointer-events: none !important;
}
.tr-cinema .tr-cinema__badge {
	position: absolute !important;
	bottom: 12px !important;
	left: 12px !important;
	display: inline-block !important;
	padding: 3px 8px !important;
	font-family: var(--trc-font-body) !important;
	font-size: 9px !important;
	font-weight: 900 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--trc-marquee-fg) !important;
	background: var(--trc-marquee) !important;
	border-radius: 0 !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	border: 0 !important;
}

/* Body — flex-col justify-between, takes remaining width */
.tr-cinema .tr-cinema__body {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	gap: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
}
.tr-cinema .tr-cinema__body-top {
	margin: 0 !important;
	padding: 0 !important;
}
.tr-cinema .tr-cinema__title,
.tr-cinema h3.tr-cinema__title {
	margin: 0 0 12px !important;
	padding: 0 !important;
	font-family: var(--trc-font-display) !important;
	font-style: normal !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--trc-text) !important;
	letter-spacing: -0.01em !important;
	font-feature-settings: 'kern' 1, 'liga' 1 !important;
	text-rendering: optimizeLegibility !important;
}
.tr-cinema .tr-cinema__title a {
	color: inherit !important;
	text-decoration: none !important;
	background: transparent !important;
}
.tr-cinema .tr-cinema__title a:hover,
.tr-cinema .tr-cinema__title a:focus-visible {
	text-decoration: underline !important;
}
.tr-cinema .tr-cinema__director {
	margin: 0 0 20px !important;
	padding: 0 !important;
	font-family: var(--trc-font-body) !important;
	font-style: italic !important;
	font-size: 14px !important;
	font-weight: 300 !important;
	letter-spacing: 0.025em !important;
	color: var(--trc-muted) !important;
}
/* v2.19.2: "Kitas seansas" next-occurrence subtitle for recurring events. */
.tr-cinema .tr-cinema__next {
	margin: 0 0 12px !important;
	padding: 0 !important;
	font-family: var(--trc-font-body) !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
}
.tr-cinema .tr-cinema__next-link,
.tr-cinema .tr-cinema__next-link:hover,
.tr-cinema .tr-cinema__next-link:focus,
.tr-cinema .tr-cinema__next-link:focus-visible {
	display: inline-flex !important;
	align-items: baseline !important;
	gap: 8px !important;
	color: var(--trc-text) !important;
	text-decoration: none !important;
	background: transparent !important;
}
.tr-cinema .tr-cinema__next-link:hover,
.tr-cinema .tr-cinema__next-link:focus-visible {
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}
.tr-cinema .tr-cinema__next-label {
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	font-size: 10px !important;
	color: var(--trc-marquee-text) !important;
}
.tr-cinema .tr-cinema__next-when {
	font-weight: 600 !important;
	font-variant-numeric: tabular-nums !important;
	color: var(--trc-text) !important;
}
.tr-cinema .tr-cinema__next-more {
	display: inline-flex !important;
	align-items: center !important;
	padding: 2px 8px !important;
	background: var(--trc-marquee) !important;
	color: var(--trc-marquee-fg) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 0.05em !important;
	border-radius: 999px !important;
	line-height: 1 !important;
}

.tr-cinema .tr-cinema__excerpt {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--trc-font-body) !important;
	font-size: 16px !important;
	font-weight: 300 !important;
	line-height: 1.6 !important;
	color: var(--trc-text-soft) !important;
	max-width: 512px !important;
}

/* Meta row — Laikas / Vieta column labels + CTA pushed right */
.tr-cinema .tr-cinema__meta-row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
	gap: 32px !important;
	margin: 0 !important;
	padding: 0 !important;
}
.tr-cinema .tr-cinema__meta-col {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	margin: 0 !important;
	padding: 0 !important;
}
.tr-cinema .tr-cinema__meta-label {
	font-family: var(--trc-font-body) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.25em !important;
	text-transform: uppercase !important;
	color: var(--trc-muted) !important;
	line-height: 1 !important;
}
.tr-cinema .tr-cinema__meta-value {
	font-family: var(--trc-font-body) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--trc-text) !important;
	line-height: 1 !important;
	font-variant-numeric: tabular-nums !important;
}

/* Bottom-right watermark — film grid SVG, very faint */
.tr-cinema .tr-cinema__watermark {
	position: absolute !important;
	bottom: 12px !important;
	right: 12px !important;
	pointer-events: none !important;
	opacity: 0.06 !important;
	color: var(--trc-text) !important;
	line-height: 0 !important;
}
.tr-cinema .tr-cinema__watermark svg {
	display: block !important;
}

/* CTA — solid navy bg, white text, blocky uppercase. Pushed right via ml-auto. */
.tr-cinema .tr-cinema__cta,
.tr-cinema a.tr-cinema__cta,
.tr-cinema .tr-cinema__cta:hover,
.tr-cinema .tr-cinema__cta:focus,
.tr-cinema .tr-cinema__cta:focus-visible,
.tr-cinema .tr-cinema__cta:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-left: auto !important;
	padding: 14px 32px !important;
	background: var(--trc-accent) !important;
	background-color: var(--trc-accent) !important;
	color: var(--trc-accent-fg) !important;
	border: 0 !important;
	border-radius: 0 !important;
	text-decoration: none !important;
	font-family: var(--trc-font-body) !important;
	font-size: 11px !important;
	font-weight: 900 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: opacity 120ms ease !important;
}
.tr-cinema .tr-cinema__cta:hover,
.tr-cinema .tr-cinema__cta:focus-visible {
	opacity: 0.88 !important;
	color: var(--trc-accent-fg) !important;
	text-decoration: none !important;
}

/* --------------------------------------------------------------------- */
/* v2.20.0: Showtimes pill row (rendered when one event has >1 future       */
/* showing). Replaces the bottom CTA when present — each pill is its own    */
/* CTA pointing at the showing's ticket URL or single-event permalink.     */
/* --------------------------------------------------------------------- */
.tr-cinema .tr-cinema__showtimes {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	margin: 16px 0 0 !important;
	padding: 0 !important;
}
.tr-cinema .tr-cinema__showtimes-label {
	font-family: var(--trc-font-body) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3em !important;
	text-transform: uppercase !important;
	color: var(--trc-marquee-text) !important;
}
.tr-cinema .tr-cinema__showtimes-pills {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}
.tr-cinema .tr-cinema__showtime-pill,
.tr-cinema .tr-cinema__showtime-pill:hover,
.tr-cinema .tr-cinema__showtime-pill:focus,
.tr-cinema .tr-cinema__showtime-pill:focus-visible,
.tr-cinema .tr-cinema__showtime-pill:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	padding: 8px 14px !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--trc-text) !important;
	border: 1px solid var(--trc-border) !important;
	border-radius: 0 !important;
	text-decoration: none !important;
	font-family: var(--trc-font-body) !important;
	line-height: 1.2 !important;
	box-shadow: none !important;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease !important;
	font-variant-numeric: tabular-nums !important;
}
.tr-cinema .tr-cinema__showtime-pill:hover,
.tr-cinema .tr-cinema__showtime-pill:focus-visible {
	background: var(--trc-text) !important;
	background-color: var(--trc-text) !important;
	color: #ffffff !important;
	border-color: var(--trc-text) !important;
	transform: translateY(-1px) !important;
	text-decoration: none !important;
}
.tr-cinema .tr-cinema__showtime-date {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	color: inherit !important;
	margin-bottom: 2px !important;
}
.tr-cinema .tr-cinema__showtime-time {
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	color: inherit !important;
}
.tr-cinema .tr-cinema__showtime-hall {
	font-size: 9px !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--trc-muted) !important;
	margin-top: 2px !important;
}
.tr-cinema .tr-cinema__showtime-pill:hover .tr-cinema__showtime-hall,
.tr-cinema .tr-cinema__showtime-pill:focus-visible .tr-cinema__showtime-hall {
	color: rgba(255, 255, 255, 0.78) !important;
}

/* Empty state */
.tr-cinema .tr-cinema__empty {
	padding: 48px 16px !important;
	text-align: center !important;
	color: var(--trc-muted) !important;
	font-size: 14px !important;
	margin: 0 !important;
	font-family: var(--trc-font-body) !important;
}

/* --------------------------------------------------------------------- */
/* v2.19.1: viewport + slide-from-right pagination transition             */
/* --------------------------------------------------------------------- */
.tr-cinema .tr-cinema__viewport {
	/* v2.20.3: was `overflow: hidden` to clip slide-from-right animation,
	 * but that also clipped the TOP of the first card on hover (translateY
	 * lift would push it out of the viewport). Use overflow-x for the
	 * horizontal slide, overflow-y visible so lift/shadow render fully. */
	overflow-x: hidden !important;
	overflow-y: visible !important;
	margin: 0 !important;
	padding: 6px 0 !important;
	position: relative !important;
}
.tr-cinema .tr-cinema__list {
	transition: transform 200ms ease, opacity 200ms ease !important;
	transform: translateX(0) !important;
	opacity: 1 !important;
}
.tr-cinema .tr-cinema__list.is-leaving {
	transform: translateX(-40px) !important;
	opacity: 0 !important;
}
.tr-cinema .tr-cinema__list.is-entering {
	transform: translateX(60px) !important;
	opacity: 0 !important;
	transition: none !important;
}

/* Pagination chip row */
.tr-cinema .tr-cinema__pagination {
	display: flex !important;
	gap: 8px !important;
	justify-content: center !important;
	margin: 48px 0 0 !important;
	padding: 0 !important;
	flex-wrap: wrap !important;
}
.tr-cinema .tr-cinema__page,
.tr-cinema .tr-cinema__page:hover,
.tr-cinema .tr-cinema__page:focus,
.tr-cinema .tr-cinema__page:focus-visible,
.tr-cinema .tr-cinema__page:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 40px !important;
	height: 40px !important;
	padding: 0 12px !important;
	margin: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--trc-text) !important;
	border: 1px solid var(--trc-border) !important;
	border-radius: 0 !important;
	font-family: var(--trc-font-body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em !important;
	line-height: 1 !important;
	cursor: pointer !important;
	user-select: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms ease !important;
	font-variant-numeric: tabular-nums !important;
}
.tr-cinema .tr-cinema__page:hover,
.tr-cinema .tr-cinema__page:focus-visible {
	border-color: var(--trc-text) !important;
	transform: translateY(-1px) !important;
}
.tr-cinema .tr-cinema__page.is-active,
.tr-cinema .tr-cinema__page[aria-current="page"] {
	background: var(--trc-text) !important;
	background-color: var(--trc-text) !important;
	color: #ffffff !important;
	border-color: var(--trc-text) !important;
	cursor: default !important;
	transform: none !important;
}
.tr-cinema .tr-cinema__page[hidden] {
	display: none !important;
}
.tr-cinema .tr-cinema__pagination-gap {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 28px !important;
	height: 40px !important;
	padding: 0 4px !important;
	color: var(--trc-muted) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.2em !important;
	user-select: none !important;
	pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.tr-cinema .tr-cinema__list,
	.tr-cinema .tr-cinema__list.is-leaving,
	.tr-cinema .tr-cinema__list.is-entering {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
	.tr-cinema .tr-cinema__page,
	.tr-cinema .tr-cinema__page:hover {
		transition: none !important;
		transform: none !important;
	}
}

/* --------------------------------------------------------------------- */
/* Responsive                                                              */
/* --------------------------------------------------------------------- */
@media (max-width: 768px) {
	.tr-cinema .tr-cinema__row { gap: 16px !important; }
	.tr-cinema .tr-cinema__sidebar { flex: 0 0 32px !important; width: 32px !important; }
	.tr-cinema .tr-cinema__sidebar-inner { padding-top: 24px !important; gap: 12px !important; }
	.tr-cinema .tr-cinema__card { flex-direction: column !important; gap: 24px !important; padding: 24px !important; }
	.tr-cinema .tr-cinema__poster { flex: 0 0 auto !important; width: 100% !important; height: 200px !important; }
	.tr-cinema .tr-cinema__meta-row { gap: 20px !important; }
	.tr-cinema .tr-cinema__cta { margin-left: 0 !important; width: 100% !important; }
	.tr-cinema .tr-cinema__list { gap: 40px !important; }
}

/* v2.22.2: hide excerpt only on PHONE + TABLET PORTRAIT (≤768px). On tablet
 * landscape (769-1024) + desktop the excerpt shows again per Tomas. */
@media (max-width: 768px) {
	.tr-cinema .tr-cinema__excerpt {
		display: none !important;
	}
}