/* ==========================================================================
   fmovie — SLIDER STYLES
   ==========================================================================
   Twenty treatments for the home-page hero, selectable in Fmovies → Slider.

   Each style is one class on the slider element — `fm-slider--<key>` — and the
   markup never changes between them. The same title, meta row, actions and poster
   are simply re-arranged, re-coloured and re-sized by CSS.

   The admin previews use these exact rules at 23% scale, so what the settings
   screen shows is what the site renders.

   NOTES ON OVERRIDING
   -------------------
   premium.css pins the caption with `!important` in three places:

       .slide-wrapper .info { position: static !important;
                              padding: 0 !important;
                              background: none !important; }

   so any style that wants a captive panel must also be `!important` on padding and
   background, or it will silently lose. That is why those two properties repeat
   with `!important` below and nothing else does.

   `font-size` on the slide title is also `!important`, for the same reason: style.css
   pins it with an ID selector —

       #featured .swiper-slide .slide-wrapper .info .start .name { font-size: 2.7em }

   — which no number of classes can outrank. Without the pin every one of the twenty
   styles rendered the same 36.45px title.

   The scrim lives on `.fm-slide:before` !important; each style replaces it rather than
   stacking another layer, so a style can never end up with two gradients that
   were never designed together.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared scaffolding
   --------------------------------------------------------------------------
   Anything common across the styles: the wrappers, the poster element (present in
   the markup but hidden unless a style asks for it), and the numeric badge used by
   one of them.
   -------------------------------------------------------------------------- */

/* The poster. In the markup for every slide, shown only by the styles that use it. */
.slide-poster { display: none; }

/* The slide counter badge, used by "Big Number". */
.slide-index { display: none; }

/*
 * CLEARING THE ORIGINAL HERO'S ASSUMPTIONS
 * ----------------------------------------
 * The theme's first slider put the caption ABOVE the artwork, in a tall box, with a
 * progress bar underneath it — so style.css reserves that space:
 *
 *     #featured .swiper-slide .slide-wrapper { margin-bottom: 13rem }
 *
 * Every one of the thirty styles here puts the caption ON the artwork instead. The
 * 13rem (175.5px at this root size) was never reset, so `align-items: flex-end`
 * still left the caption parked 175px above the bottom of the slide with a band of
 * empty backdrop beneath it — visible in every style, and the reason the hero
 * looked unbalanced however the caption was arranged.
 *
 * The glass layer also gives `.slide-wrapper .info` a panel of its own (border,
 * radius, shadow, blur). premium.css zeroes its padding and background but not
 * those three, so every non-glass style drew a tight empty box around its text.
 * Both are cleared here; the styles that DO want a panel declare it themselves and
 * their four-class selectors outrank this two-class reset.
 */
#featured .slide-wrapper {
	position: relative;
	z-index: 3;
	margin-bottom: 0 !important;
}

.slide-wrapper .info {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* The image inside .slide-poster should never overflow its frame. */
.slide-poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* --------------------------------------------------------------------------
   1. Cinematic Glass — frosted card, lower left
   -------------------------------------------------------------------------- */
.fm-slider--cinematic-glass .fm-slide > .container { align-items: flex-end; }

.fm-slider--cinematic-glass .slide-wrapper { max-width: 620px; }

.fm-slider--cinematic-glass .slide-wrapper .info {
	padding: 1.2rem 1.4rem !important;
	background: rgba(10, 10, 10, 0.55) !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--fm-r-lg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
}

.fm-slider--cinematic-glass .slide-wrapper .actions { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   2. Centered Spotlight — centred type, light behind it
   -------------------------------------------------------------------------- */
.fm-slider--centered-spotlight .fm-slide:before {
	background:
		radial-gradient( 55% 70% at 50% 45%, rgba(0, 0, 0, 0.15 ) 0%, rgba(5, 5, 5, 0.92 ) 78% ),
		linear-gradient( 0deg, rgba(5, 5, 5, 0.9 ) 0%, transparent 60% ) !important;
}

.fm-slider--centered-spotlight .fm-slide > .container {
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
}

.fm-slider--centered-spotlight .slide-wrapper { max-width: 720px; align-items: center; }

.fm-slider--centered-spotlight .slide-wrapper .info .name {
	font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.2rem) !important;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
}

.fm-slider--centered-spotlight .slide-wrapper .info .meta { justify-content: center; }
.fm-slider--centered-spotlight .slide-wrapper .actions { justify-content: center; margin-top: 1.2rem; }

/* --------------------------------------------------------------------------
   3. Split Panel — poster left, details right
   -------------------------------------------------------------------------- */
.fm-slider--split-panel .fm-slide:before {
	background: linear-gradient( 90deg, rgba(5, 5, 5, 0.97 ) 0%, rgba(5, 5, 5, 0.9 ) 52%, rgba(5, 5, 5, 0.55 ) 100% ) !important;
}

.fm-slider--split-panel .fm-slide > .container { align-items: center; }

.fm-slider--split-panel .slide-wrapper {
	flex-direction: row;
	align-items: center;
	gap: 2rem;
	max-width: 100%;
}

.fm-slider--split-panel .slide-poster {
	display: block;
	flex: 0 0 190px;
	width: 190px;
	aspect-ratio: 2 / 3;
	border-radius: var(--fm-r-lg);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

.fm-slider--split-panel .slide-wrapper .info { flex: 1 1 auto; min-width: 0; max-width: 560px; }

.fm-slider--split-panel .slide-wrapper .actions { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   4. Full Bleed Title — oversized title, nothing else
   -------------------------------------------------------------------------- */
.fm-slider--full-bleed-title .fm-slide:before {
	background: linear-gradient( 0deg, rgba(5, 5, 5, 0.95 ) 0%, rgba(5, 5, 5, 0.5 ) 38%, transparent 72% ) !important;
}

.fm-slider--full-bleed-title .fm-slide > .container { align-items: flex-end; }

.fm-slider--full-bleed-title .slide-wrapper { max-width: 100%; }

.fm-slider--full-bleed-title .slide-wrapper .info .name {
	font-size: clamp(2.4rem, 1.4rem + 5vw, 6rem) !important;
	line-height: 0.92;
	letter-spacing: -0.045em;
	text-transform: uppercase;
	margin: 0;
	text-shadow: 0 6px 40px rgba(0, 0, 0, 0.75);
}

/* The chips and buttons are what makes this style quiet — the title carries it. */
.fm-slider--full-bleed-title .slide-wrapper .info .meta { display: none; }
.fm-slider--full-bleed-title .slide-wrapper .actions { margin-top: 1.2rem; }

/* --------------------------------------------------------------------------
   5. Magazine — upper-left card with a vertical accent rule
   -------------------------------------------------------------------------- */
.fm-slider--magazine .fm-slide:before {
	background: linear-gradient( 100deg, rgba(5, 5, 5, 0.96 ) 0%, rgba(5, 5, 5, 0.7 ) 46%, rgba(5, 5, 5, 0.15 ) 100% ) !important;
}

.fm-slider--magazine .fm-slide > .container { align-items: flex-start; }

.fm-slider--magazine .slide-wrapper { max-width: 520px; }

.fm-slider--magazine .slide-wrapper .info {
	padding: 0 0 0 1.1rem !important;
	background: none !important;
	border-left: 3px solid var(--fm-accent);
}

.fm-slider--magazine .slide-wrapper .info .name {
	font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem) !important;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.05;
}

.fm-slider--magazine .slide-wrapper .info .meta { margin-bottom: 0.2rem; }
.fm-slider--magazine .slide-wrapper .actions { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   6. Bottom Bar — a full-width strip across the bottom
   -------------------------------------------------------------------------- */
.fm-slider--bottom-bar .fm-slide:before {
	background: linear-gradient( 0deg, rgba(5, 5, 5, 0.92 ) 0%, transparent 45% ) !important;
}

.fm-slider--bottom-bar .fm-slide > .container {
	align-items: flex-end !important;
	padding-bottom: 0 !important;
}

.fm-slider--bottom-bar .slide-wrapper {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 100%;
	width: 100%;
	padding: 1rem 1.25rem !important;
	background: rgba(8, 8, 8, 0.92);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.fm-slider--bottom-bar .slide-wrapper .info { flex: 1 1 auto; min-width: 0; }

.fm-slider--bottom-bar .slide-wrapper .info .name {
	font-size: clamp(1.05rem, 0.9rem + 0.9vw, 1.5rem) !important;
	margin-bottom: 0.2rem;
}

.fm-slider--bottom-bar .slide-wrapper .info .meta { margin-bottom: 0; }
.fm-slider--bottom-bar .slide-wrapper .actions { margin-top: 0; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   7. Corner Card — a small compact card, lower right
   -------------------------------------------------------------------------- */
.fm-slider--corner-card .fm-slide:before {
	background: linear-gradient( 0deg, rgba(5, 5, 5, 0.72 ) 0%, transparent 55% ) !important;
}

.fm-slider--corner-card .fm-slide > .container {
	align-items: flex-end !important;
	justify-content: flex-end !important;
}

.fm-slider--corner-card .slide-wrapper { max-width: 340px; }

.fm-slider--corner-card .slide-wrapper .info {
	padding: 0.85rem 1rem !important;
	background: rgba(8, 8, 8, 0.86) !important;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--fm-r);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.fm-slider--corner-card .slide-wrapper .info .name { font-size: 1.05rem !important; margin-bottom: 0.25rem; }

/* Only the first two chips, so the card stays small. */
.fm-slider--corner-card .slide-wrapper .info .meta > *:nth-child(n+3) { display: none; }
.fm-slider--corner-card .slide-wrapper .actions { margin-top: 0.7rem; }

/* --------------------------------------------------------------------------
   8. Left Rail — narrow vertical band, title rotated
   -------------------------------------------------------------------------- */
.fm-slider--left-rail .fm-slide:before {
	background: linear-gradient( 90deg, rgba(5, 5, 5, 0.92 ) 0%, rgba(5, 5, 5, 0.35 ) 30%, transparent 60% ) !important;
}

.fm-slider--left-rail .fm-slide > .container { align-items: center; padding-bottom: 1rem !important; }

.fm-slider--left-rail .slide-wrapper {
	flex-direction: row;
	align-items: stretch;
	gap: 1.25rem;
	max-width: 100%;
}

.fm-slider--left-rail .slide-wrapper .info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 74px;
	flex: 0 0 74px;
	padding: 1rem 0.35rem !important;
	background: rgba(8, 8, 8, 0.7) !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--fm-r);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.fm-slider--left-rail .slide-wrapper .info .name {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 1rem !important;
	letter-spacing: 0.04em;
	margin: 0 auto;
	text-transform: uppercase;
	max-height: 100%;
	overflow: hidden;
}

.fm-slider--left-rail .slide-wrapper .info .meta { display: none; }
.fm-slider--left-rail .slide-wrapper .actions { align-items: center; }

/* --------------------------------------------------------------------------
   9. Duotone — two-colour wash, centred type
   -------------------------------------------------------------------------- */
.fm-slider--duotone .fm-slide { filter: saturate(0.35) contrast(1.1); }

.fm-slider--duotone .fm-slide:before {
	background:
		linear-gradient( 140deg, rgba(0, 240, 181, 0.32 ) 0%, rgba(0, 30, 24, 0.55 ) 45%, rgba(5, 5, 5, 0.94 ) 100% ) !important;
}

/* The caption must not inherit the duotone filter. */
.fm-slider--duotone .fm-slide > .container { filter: saturate(1) contrast(1); }

.fm-slider--duotone .fm-slide > .container {
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
}

.fm-slider--duotone .slide-wrapper { max-width: 680px; align-items: center; }

.fm-slider--duotone .slide-wrapper .info .name {
	font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem) !important;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.fm-slider--duotone .slide-wrapper .info .meta { justify-content: center; }
.fm-slider--duotone .slide-wrapper .actions { justify-content: center; margin-top: 1.2rem; }

/* --------------------------------------------------------------------------
   10. Neon Glow — dark frame, title glowing
   -------------------------------------------------------------------------- */
.fm-slider--neon-glow .fm-slide { background-blend-mode: luminosity; }

.fm-slider--neon-glow .fm-slide:before {
	background: radial-gradient( 60% 80% at 30% 60%, rgba(0, 240, 181, 0.16 ) 0%, rgba(5, 5, 5, 0.95 ) 70% ) !important;
}

.fm-slider--neon-glow .fm-slide > .container { align-items: center; }

.fm-slider--neon-glow .slide-wrapper { max-width: 600px; }

.fm-slider--neon-glow .slide-wrapper .info .name {
	/* `color` is pinned by an ID-scoped rule in style.css, like font-size. */
	color: var(--fm-accent) !important;
	text-shadow: 0 0 12px rgba(0, 240, 181, 0.55), 0 0 44px rgba(0, 240, 181, 0.3);
	font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.8rem) !important;
	letter-spacing: 0.01em;
}

.fm-slider--neon-glow .slide-wrapper .info .meta .quality {
	border-color: rgba(0, 240, 181, 0.5);
	color: var(--fm-accent);
	box-shadow: 0 0 10px rgba(0, 240, 181, 0.25);
}

.fm-slider--neon-glow .slide-wrapper .actions { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   11. Frosted Heavy — the whole slide is frosted, panel centred
   -------------------------------------------------------------------------- */
.fm-slider--frosted-heavy .fm-slide:before {
	background: rgba(5, 5, 5, 0.55 ) !important;
	-webkit-backdrop-filter: blur(16px) saturate(120%);
	backdrop-filter: blur(16px) saturate(120%);
}

.fm-slider--frosted-heavy .fm-slide > .container {
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
}

.fm-slider--frosted-heavy .slide-wrapper { max-width: 640px; align-items: center; }

.fm-slider--frosted-heavy .slide-wrapper .info {
	padding: 1.5rem 1.8rem !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--fm-r-xl);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.fm-slider--frosted-heavy .slide-wrapper .info .meta { justify-content: center; }
.fm-slider--frosted-heavy .slide-wrapper .actions { justify-content: center; margin-top: 1.2rem; }

/* --------------------------------------------------------------------------
   12. Diagonal — angled scrim, text set along it
   -------------------------------------------------------------------------- */
.fm-slider--diagonal .fm-slide:before {
	background: linear-gradient( 115deg, rgba(5, 5, 5, 0.97 ) 0%, rgba(5, 5, 5, 0.9 ) 40%, rgba(5, 5, 5, 0.28 ) 62%, transparent 78% ) !important;
}

.fm-slider--diagonal .fm-slide > .container { align-items: flex-end; }

.fm-slider--diagonal .slide-wrapper {
	max-width: 560px;
	padding-left: 1.4rem !important;
	border-left: 2px solid var(--fm-accent);
}

.fm-slider--diagonal .slide-wrapper .info .name {
	font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem) !important;
	transform: skewX(-4deg);
	transform-origin: left bottom;
}

.fm-slider--diagonal .slide-wrapper .actions { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   13. Stacked Layers — cards behind the panel
   -------------------------------------------------------------------------- */
.fm-slider--stacked-layers .fm-slide:before {
	background: linear-gradient( 80deg, rgba(5, 5, 5, 0.95 ) 0%, rgba(5, 5, 5, 0.55 ) 55%, transparent 90% ) !important;
}

.fm-slider--stacked-layers .fm-slide > .container { align-items: center; }

.fm-slider--stacked-layers .slide-wrapper { max-width: 560px; }

/* Two offset copies of the panel's outline, behind it. */
.fm-slider--stacked-layers .slide-wrapper::before,
.fm-slider--stacked-layers .slide-wrapper::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--fm-layer-w, 78%);
	height: var(--fm-layer-h, 62%);
	border-radius: var(--fm-r-lg);
	border: 1px solid rgba(255, 255, 255, 0.09);
	pointer-events: none;
	z-index: -1;
}

.fm-slider--stacked-layers .slide-wrapper::before {
	transform: translate(14px, 14px);
	background: rgba(255, 255, 255, 0.03);
}

.fm-slider--stacked-layers .slide-wrapper::after {
	transform: translate(28px, 28px);
	background: rgba(255, 255, 255, 0.02);
}

.fm-slider--stacked-layers .slide-wrapper .info {
	position: relative;
	padding: 1.2rem 1.4rem !important;
	background: rgba(10, 10, 10, 0.9) !important;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--fm-r-lg);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.fm-slider--stacked-layers .slide-wrapper .actions { position: relative; margin-top: 1rem; }

/* --------------------------------------------------------------------------
   14. Letterbox — black bars, cinematic proportion
   -------------------------------------------------------------------------- */
.fm-slider--letterbox .fm-slide:before {
	background:
		linear-gradient( 180deg, #050505 0%, #050505 9%, transparent 9%, transparent 91%, #050505 91%, #050505 100% ),
		radial-gradient( 70% 60% at 50% 50%, transparent 20%, rgba(5, 5, 5, 0.85 ) 100% ) !important;
}

.fm-slider--letterbox .fm-slide > .container {
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	padding-bottom: 1rem !important;
}

.fm-slider--letterbox .slide-wrapper { max-width: 620px; align-items: center; }

.fm-slider--letterbox .slide-wrapper .info .name {
	font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem) !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 700;
}

.fm-slider--letterbox .slide-wrapper .info .meta { justify-content: center; }
.fm-slider--letterbox .slide-wrapper .actions { justify-content: center; margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   15. Gradient Wash — accent gradient across the base
   -------------------------------------------------------------------------- */
.fm-slider--gradient-wash .fm-slide:before {
	background: linear-gradient( 0deg, rgba(0, 77, 64, 0.85 ) 0%, rgba(0, 240, 181, 0.18 ) 26%, rgba(5, 5, 5, 0.6 ) 60%, transparent 100% ) !important;
}

.fm-slider--gradient-wash .fm-slide > .container { align-items: flex-end; }

.fm-slider--gradient-wash .slide-wrapper { max-width: 640px; }

.fm-slider--gradient-wash .slide-wrapper .info .name {
	font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem) !important;
	font-weight: 900;
	letter-spacing: -0.03em;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

.fm-slider--gradient-wash .slide-wrapper .actions { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   16. Poster Float — poster lifted off the backdrop
   -------------------------------------------------------------------------- */
.fm-slider--poster-float .fm-slide:before {
	background: linear-gradient( 90deg, rgba(5, 5, 5, 0.97 ) 0%, rgba(5, 5, 5, 0.75 ) 48%, rgba(5, 5, 5, 0.3 ) 100% ) !important;
}

.fm-slider--poster-float .fm-slide > .container { align-items: center; }

.fm-slider--poster-float .slide-wrapper {
	flex-direction: row;
	align-items: center;
	gap: 2.2rem;
	max-width: 100%;
}

.fm-slider--poster-float .slide-poster {
	display: block;
	flex: 0 0 160px;
	width: 160px;
	aspect-ratio: 2 / 3;
	border-radius: var(--fm-r-lg);
	overflow: hidden;
	transform: rotate(-4deg) translateY(-6px);
	box-shadow: 0 28px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12);
	transition: transform 400ms var(--fm-ease);
}

.fm-slider--poster-float .fm-slide:hover .slide-poster { transform: rotate(-2deg) translateY(-10px); }

.fm-slider--poster-float .slide-wrapper .info { flex: 1 1 auto; min-width: 0; max-width: 520px; }
.fm-slider--poster-float .slide-wrapper .actions { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   17. Minimal Rule — hairlines, small caps
   -------------------------------------------------------------------------- */
.fm-slider--minimal-rule .fm-slide:before {
	background: linear-gradient( 0deg, rgba(5, 5, 5, 0.94 ) 0%, rgba(5, 5, 5, 0.35 ) 50%, transparent 85% ) !important;
}

.fm-slider--minimal-rule .fm-slide > .container { align-items: flex-end; }

.fm-slider--minimal-rule .slide-wrapper {
	max-width: 520px;
	padding-top: 1rem !important;
	border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.fm-slider--minimal-rule .slide-wrapper .info .name {
	font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.5rem) !important;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.fm-slider--minimal-rule .slide-wrapper .info .meta { margin-bottom: 0; }
.fm-slider--minimal-rule .slide-wrapper .info .meta .quality { border-radius: 0; background: none; border: 0; padding: 0; }
.fm-slider--minimal-rule .slide-wrapper .actions { margin-top: 0.9rem; }

/* --------------------------------------------------------------------------
   18. Big Number — the slide position as a design element
   -------------------------------------------------------------------------- */
.fm-slider--big-number .fm-slide:before {
	background: linear-gradient( 90deg, rgba(5, 5, 5, 0.96 ) 0%, rgba(5, 5, 5, 0.6 ) 50%, transparent 85% ) !important;
}

.fm-slider--big-number .fm-slide > .container { align-items: center; }

.fm-slider--big-number .slide-wrapper { max-width: 560px; padding-left: 7rem !important; }

.fm-slider--big-number .slide-index {
	display: block;
	position: absolute;
	left: 0;
	bottom: -0.5rem;
	font-size: 7rem !important;
	line-height: 1;
	font-weight: 900;
	letter-spacing: -0.06em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, 0.22);
	pointer-events: none;
	user-select: none;
}

.fm-slider--big-number .slide-wrapper .info .name {
	font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem) !important;
	letter-spacing: -0.02em;
}

.fm-slider--big-number .slide-wrapper .actions { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   19. Grid Overlay — a visible grid over the artwork
   -------------------------------------------------------------------------- */
.fm-slider--grid-overlay .fm-slide:before {
	background:
		linear-gradient( 90deg, rgba(255, 255, 255, 0.06 ) 1px, transparent 1px ) 0 0 / 80px 100%,
		linear-gradient( 180deg, rgba(255, 255, 255, 0.06 ) 1px, transparent 1px ) 0 0 / 100% 80px,
		linear-gradient( 0deg, rgba(5, 5, 5, 0.95 ) 0%, rgba(5, 5, 5, 0.5 ) 45%, transparent 80% ) !important;
}

.fm-slider--grid-overlay .fm-slide > .container { align-items: flex-end; }

.fm-slider--grid-overlay .slide-wrapper {
	max-width: 600px;
	padding: 1.1rem 1.3rem !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--fm-r);
	background: rgba(5, 5, 5, 0.55);
}

.fm-slider--grid-overlay .slide-wrapper .info .name { font-size: clamp(1.2rem, 1rem + 1.2vw, 1.9rem) !important; }
.fm-slider--grid-overlay .slide-wrapper .actions { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   20. Vignette — darkened edges, quiet type
   -------------------------------------------------------------------------- */
.fm-slider--vignette .fm-slide:before {
	background:
		radial-gradient( 75% 75% at 50% 50%, transparent 25%, rgba(5, 5, 5, 0.55 ) 70%, rgba(5, 5, 5, 0.92 ) 100% ),
		linear-gradient( 0deg, rgba(5, 5, 5, 0.8 ) 0%, transparent 55% ) !important;
}

.fm-slider--vignette .fm-slide > .container {
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
}

.fm-slider--vignette .slide-wrapper { max-width: 640px; align-items: center; }

.fm-slider--vignette .slide-wrapper .info .name {
	font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important;
	font-weight: 300;
	letter-spacing: 0.06em;
}

.fm-slider--vignette .slide-wrapper .info .meta { justify-content: center; }
.fm-slider--vignette .slide-wrapper .actions { justify-content: center; margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   Phones
   --------------------------------------------------------------------------
   Several styles are built around horizontal space — a split panel, a poster
   beside the text, a rail down one side. None of that survives a 390px column, so
   on a phone they fall back to the stacked arrangement rather than squeezing.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.fm-slider--split-panel .slide-wrapper,
	.fm-slider--poster-float .slide-wrapper,
	.fm-slider--bottom-bar .slide-wrapper,
	.fm-slider--left-rail .slide-wrapper {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.85rem;
	}

	.fm-slider--split-panel .slide-poster,
	.fm-slider--poster-float .slide-poster {
		flex: 0 0 auto;
		width: 96px;
	}

	.fm-slider--left-rail .slide-wrapper .info {
		width: auto;
		flex: 0 0 auto;
		flex-direction: row;
		justify-content: flex-start;
		padding: 0.5rem 0.75rem !important;
	}

	.fm-slider--left-rail .slide-wrapper .info .name {
		writing-mode: horizontal-tb;
		transform: none;
	}

	.fm-slider--big-number .slide-wrapper { padding-left: 4.2rem !important; }
	.fm-slider--big-number .slide-index { font-size: 4.4rem !important; }

	.fm-slider--bottom-bar .slide-wrapper { padding: 0.85rem 1rem !important; }

	/*
	 * No blanket title size here.
	 *
	 * An earlier version forced every style's title to one size below 767px. That
	 * flattened the twenty styles into one on a phone — and, because it was
	 * `!important`, it also overrode the admin previews at their old 720px width,
	 * which is how the bug surfaced. Each style's own clamp() already scales with
	 * the viewport, so the identity survives on a phone without help.
	 */
}

/* ==========================================================================
   MOTION — the smooth part
   ==========================================================================
   Two things make a hero feel expensive rather than merely animated: the slide
   move itself and what the caption does as it arrives.

   1. The transition curve. Swiper applies its own transform transition; the default
      is `ease`, which decelerates too early and reads as a snap at 900ms. An
      ease-out curve keeps velocity at the start and settles at the end.

   2. The caption. Only the active slide's content is shown, and it fades up as the
      slide settles. This is what stops two captions being visible mid-transition,
      which is the single most "cheap" thing a hero slider can do.

   The caption rule is scoped to `.swiper-container-initialized`, so if the script
   never loads the first slide's caption is still visible — the animation is an
   enhancement, never a requirement.
   ========================================================================== */
#featured.swiper-container-initialized .swiper-wrapper {
	transition-timing-function: cubic-bezier( 0.16, 1, 0.3, 1 );
}

#featured.swiper-container-initialized .slide-wrapper {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms cubic-bezier( 0.16, 1, 0.3, 1 ),
		transform 620ms cubic-bezier( 0.16, 1, 0.3, 1 );
	will-change: opacity, transform;
}

#featured.swiper-container-initialized .fm-slide.swiper-slide-active .slide-wrapper,
#featured.swiper-container-initialized .fm-slide.swiper-slide-duplicate-active .slide-wrapper {
	opacity: 1;
	transform: translateY(0);
}

/* A short stagger so the title lands before the buttons, rather than all at once. */
#featured.swiper-container-initialized .fm-slide .slide-wrapper .info {
	transition-delay: 60ms;
}

/* The scrollbar drag should feel like a physical object. */
#featured .swiper-scrollbar-drag {
	transition: background-color 200ms var(--fm-ease), width 200ms var(--fm-ease);
}

#featured:hover .swiper-scrollbar-drag { background: var(--fm-accent); }

/* Arrow buttons: a small fade so they do not pop. */
#featured .swiper-button-prev,
#featured .swiper-button-next {
	transition: background-color 200ms var(--fm-ease), color 200ms var(--fm-ease),
		transform 200ms var(--fm-ease), opacity 200ms var(--fm-ease);
}

/* Respect a request for less motion: no travel, just a plain cross-fade. */
@media (prefers-reduced-motion: reduce) {
	#featured.swiper-container-initialized .swiper-wrapper {
		transition-duration: 200ms !important;
	}

	#featured.swiper-container-initialized .slide-wrapper {
		opacity: 1;
		transform: none;
		transition: opacity 200ms linear;
	}
}

/* ==========================================================================
   THE SECOND SET — patterns from real streaming services
   ==========================================================================
   The first twenty were arrangements. These ten are modelled on what the major
   services actually put on their home pages, because each one solves the same
   problem differently and the differences are worth having:

     Netflix     a cinema-black billboard, weight-900 title, one solid pill
     Apple TV+   almost nothing — centred, thin, huge negative space
     Disney+     a brand chip above a centred title, one very round button
     Prime Video a left panel with a hairline rule and an "Included" chip
     HBO Max     near-monochrome, tiny caps, content low and quiet
     Hulu        left-aligned with one prominent rounded Watch pill
     IMDb        a rating badge in the corner, title bottom-left
     Letterboxd  a poster strip along the base
     JustWatch   availability chips in a row under the title
     Criterion   an inset frame around centred type

   All ten reuse the existing markup — the poster element for Letterboxd, the
   existing meta row for JustWatch — so no template changes were needed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   21. Netflix Billboard
   -------------------------------------------------------------------------- */
.fm-slider--netflix-billboard .fm-slide:before {
	background:
		linear-gradient( 0deg, #050505 0%, rgba(5, 5, 5, 0.92 ) 22%, rgba(5, 5, 5, 0.35 ) 58%, rgba(5, 5, 5, 0.15 ) 100% ),
		linear-gradient( 90deg, rgba(5, 5, 5, 0.85 ) 0%, transparent 55% ) !important;
}

.fm-slider--netflix-billboard .fm-slide > .container { align-items: flex-end !important; padding-bottom: 2.4rem !important; }

.fm-slider--netflix-billboard .slide-wrapper { max-width: 640px; }

.fm-slider--netflix-billboard .slide-wrapper .info .name {
	font-size: clamp( 2rem, 1.2rem + 3.4vw, 4.2rem ) !important;
	font-weight: 900 !important;
	line-height: .95 !important;
	letter-spacing: -.035em !important;
	margin-bottom: .55rem !important;
}

.fm-slider--netflix-billboard .slide-wrapper .info .meta { margin-bottom: .2rem; }

.fm-slider--netflix-billboard .slide-wrapper .actions { margin-top: 1.3rem; }

.fm-slider--netflix-billboard .slide-wrapper .actions .watchnow {
	padding: .7rem 1.6rem !important;
	font-weight: 800;
	letter-spacing: .01em;
}

/* --------------------------------------------------------------------------
   22. Apple TV+ Minimal
   -------------------------------------------------------------------------- */
.fm-slider--apple-minimal .fm-slide:before {
	background: linear-gradient( 0deg, rgba(5, 5, 5, 0.9 ) 0%, rgba(5, 5, 5, 0.25 ) 42%, transparent 72% ) !important;
}

.fm-slider--apple-minimal .fm-slide > .container { align-items: center !important; justify-content: center !important; text-align: center !important; }

.fm-slider--apple-minimal .slide-wrapper { max-width: 720px; align-items: center; }

.fm-slider--apple-minimal .slide-wrapper .info .name {
	font-size: clamp( 1.5rem, 1rem + 2vw, 2.9rem ) !important;
	font-weight: 300 !important;
	letter-spacing: .10em !important;
	text-transform: uppercase;
	margin-bottom: 1.1rem !important;
}

/* Only the year and the rating — Apple shows almost nothing. */
.fm-slider--apple-minimal .slide-wrapper .info .meta { justify-content: center; gap: 1.1rem; margin-bottom: 0; }

.fm-slider--apple-minimal .slide-wrapper .info .meta .quality,
.fm-slider--apple-minimal .slide-wrapper .info .meta .genres { display: none; }

.fm-slider--apple-minimal .slide-wrapper .info .meta > * {
	font-size: .68rem !important;
	letter-spacing: .22em !important;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72 ) !important;
}

.fm-slider--apple-minimal .slide-wrapper .actions { margin-top: 1.6rem; }

/* --------------------------------------------------------------------------
   23. Disney+ Centered
   -------------------------------------------------------------------------- */
/*
 * Centred type needs a scrim behind it, not only below it.
 *
 * The first version lightened the middle of the backdrop, and the title landed on
 * a pale patch of artwork where white text disappeared. The radial pool follows
 * the caption instead of the frame.
 */
.fm-slider--disney-centered .fm-slide:before {
	background:
		radial-gradient( 62% 70% at 50% 52%, rgba(5, 5, 5, 0.82 ) 0%, rgba(5, 5, 5, 0.5 ) 55%, transparent 100% ),
		linear-gradient( 0deg, rgba(5, 5, 5, 0.96 ) 0%, rgba(8, 16, 30, 0.5 ) 45%, transparent 80% ),
		linear-gradient( 90deg, rgba(5, 5, 5, 0.5 ) 0%, transparent 26%, transparent 74%, rgba(5, 5, 5, 0.5 ) 100% ) !important;
}

.fm-slider--disney-centered .fm-slide > .container { align-items: center !important; justify-content: center !important; text-align: center !important; }

.fm-slider--disney-centered .slide-wrapper { max-width: 680px; align-items: center; }

/* The brand chip above the title. */
.fm-slider--disney-centered .slide-wrapper .info .meta::before {
	content: "ORIGINAL";
	display: inline-block;
	padding: .2rem .55rem;
	margin-bottom: .7rem;
	border-radius: 4px;
	background: rgba(255, 255, 255, .14 );
	color: #fff;
	font-size: .6rem !important;
	font-weight: 800;
	letter-spacing: .22em;
}

/*
 * The chip goes on its own line, and the rest stays a row.
 *
 * An earlier version made .meta a column, which stacked all six chips (quality,
 * certificate, rating, year, runtime, genres) vertically — taller than the slide,
 * so the centred wrapper overflowed upward and the title was clipped off the top.
 * A full-width flex item wrapped onto its own line does the same job without
 * changing the height of the row.
 */
.fm-slider--disney-centered .slide-wrapper .info .meta {
	flex-wrap: wrap;
	justify-content: center;
	gap: .35rem .5rem;
}

.fm-slider--disney-centered .slide-wrapper .info .meta::before { flex: 0 0 100%; width: 100%; margin-bottom: .25rem; }

.fm-slider--disney-centered .slide-wrapper .info .name {
	font-size: clamp( 1.8rem, 1.1rem + 2.8vw, 3.4rem ) !important;
	font-weight: 800 !important;
	letter-spacing: -.01em !important;
}

.fm-slider--disney-centered .slide-wrapper .actions { margin-top: 1.4rem; justify-content: center; }

.fm-slider--disney-centered .slide-wrapper .actions .watchnow {
	padding: .8rem 2.2rem !important;
	border-radius: var(--fm-r-pill ) !important;
	font-weight: 800;
}

/* --------------------------------------------------------------------------
   24. Prime Video Panel
   -------------------------------------------------------------------------- */
.fm-slider--prime-panel .fm-slide:before {
	background: linear-gradient( 90deg, rgba(5, 5, 5, 0.96 ) 0%, rgba(5, 5, 5, 0.72 ) 40%, transparent 78% ) !important;
}

.fm-slider--prime-panel .fm-slide > .container { align-items: center !important; }

.fm-slider--prime-panel .slide-wrapper {
	max-width: 540px;
	padding-left: 1.2rem !important;
	border-left: 1px solid rgba(255, 255, 255, .22 );
}

.fm-slider--prime-panel .slide-wrapper .info .name {
	font-size: clamp( 1.4rem, 1rem + 1.6vw, 2.3rem ) !important;
	font-weight: 700 !important;
	letter-spacing: -.015em !important;
	margin-bottom: .5rem !important;
}

/* An "included" marker, the way Prime labels catalogue titles. */
.fm-slider--prime-panel .slide-wrapper .info .meta::before {
	content: "Included with Prime";
	display: block;
	width: 100%;
	margin-bottom: .45rem;
	color: #9fd7ff;
	font-size: .7rem !important;
	font-weight: 600;
	letter-spacing: .02em;
}

/* Same fix as Disney: a full-width marker above a normal wrapped row. */
.fm-slider--prime-panel .slide-wrapper .info .meta {
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .3rem .45rem;
}

.fm-slider--prime-panel .slide-wrapper .info .meta::before { flex: 0 0 100%; width: 100%; }
.fm-slider--prime-panel .slide-wrapper .actions { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   25. HBO Noir
   -------------------------------------------------------------------------- */
.fm-slider--hbo-noir .fm-slide { filter: grayscale( .55 ) contrast( 1.08 ); }

.fm-slider--hbo-noir .fm-slide:before {
	background:
		linear-gradient( 0deg, #000 0%, rgba(0, 0, 0, 0.9 ) 18%, rgba(0, 0, 0, 0.35 ) 55%, rgba(0, 0, 0, 0.55 ) 100% ) !important;
}

.fm-slider--hbo-noir .fm-slide > .container { align-items: flex-end !important; padding-bottom: 1.8rem !important; }

.fm-slider--hbo-noir .slide-wrapper { max-width: 560px; }

.fm-slider--hbo-noir .slide-wrapper .info .name {
	font-size: clamp( 1.2rem, .9rem + 1.2vw, 1.9rem ) !important;
	font-weight: 500 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase;
	margin-bottom: .6rem !important;
}

.fm-slider--hbo-noir .slide-wrapper .info .meta > * {
	color: rgba(255, 255, 255, .62 ) !important;
	font-size: .64rem !important;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.fm-slider--hbo-noir .slide-wrapper .info .meta .quality { background: none !important; border: 0 !important; }
.fm-slider--hbo-noir .slide-wrapper .actions { margin-top: .9rem; }

/* --------------------------------------------------------------------------
   26. Hulu Pill
   -------------------------------------------------------------------------- */
.fm-slider--hulu-pill .fm-slide:before {
	background:
		linear-gradient( 0deg, rgba(5, 5, 5, 0.94 ) 0%, rgba(5, 5, 5, 0.45 ) 40%, transparent 75% ),
		linear-gradient( 90deg, rgba(5, 5, 5, 0.7 ) 0%, transparent 60% ) !important;
}

.fm-slider--hulu-pill .fm-slide > .container { align-items: flex-end !important; padding-bottom: 2rem !important; }

.fm-slider--hulu-pill .slide-wrapper { max-width: 600px; }

.fm-slider--hulu-pill .slide-wrapper .info .name {
	font-size: clamp( 1.4rem, 1rem + 1.8vw, 2.5rem ) !important;
	font-weight: 800 !important;
	letter-spacing: -.02em !important;
}

.fm-slider--hulu-pill .slide-wrapper .actions { margin-top: 1.1rem; }

.fm-slider--hulu-pill .slide-wrapper .actions .watchnow {
	padding: .78rem 2rem !important;
	border-radius: var(--fm-r-pill ) !important;
	font-size: .95rem;
	font-weight: 800;
	box-shadow: 0 8px 24px rgba(0, 240, 181, .22 );
}

/* --------------------------------------------------------------------------
   27. IMDb Badge
   -------------------------------------------------------------------------- */
.fm-slider--imdb-badge .fm-slide:before {
	background: linear-gradient( 0deg, rgba(5, 5, 5, 0.95 ) 0%, rgba(5, 5, 5, 0.3 ) 45%, transparent 80% ) !important;
}

.fm-slider--imdb-badge .fm-slide > .container { align-items: flex-end !important; }

.fm-slider--imdb-badge .slide-wrapper { max-width: 600px; }

/*
 * The yellow block sits in the slide's corner, not above the caption.
 *
 * It was on .slide-wrapper with a negative top, and the wrapper is bottom-aligned
 * in a 380px slide — so the badge landed about 20px above the slide's top edge and
 * was cut off by `overflow: hidden`. Anchoring it to .container, which is the full
 * height of the slide, puts it where IMDb puts it regardless of caption height.
 */
.fm-slider--imdb-badge .fm-slide > .container::before {
	content: "IMDb";
	position: absolute;
	top: 1.1rem;
	left: 0;
	padding: .2rem .55rem;
	border-radius: 3px;
	background: #f5c518;
	color: #000;
	font-size: .74rem !important;
	font-weight: 900;
	letter-spacing: -.01em;
	line-height: 1.5;
	z-index: 4;
}

.fm-slider--imdb-badge .slide-wrapper .info .name {
	font-size: clamp( 1.5rem, 1rem + 2vw, 2.7rem ) !important;
	font-weight: 800 !important;
	margin-bottom: .4rem !important;
}

/* The rating chip becomes the badge's companion — bigger and yellow. */
.fm-slider--imdb-badge .slide-wrapper .info .meta > span:nth-child(3) {
	color: #f5c518 !important;
	font-weight: 800;
	font-size: .95rem !important;
}

.fm-slider--imdb-badge .slide-wrapper .actions { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   28. Letterboxd Strip
   -------------------------------------------------------------------------- */
.fm-slider--letterboxd-strip .fm-slide:before {
	background:
		linear-gradient( 0deg, #050505 0%, #050505 17%, rgba(5, 5, 5, 0.55 ) 40%, rgba(5, 5, 5, 0.12 ) 70%, rgba(5, 5, 5, 0.3 ) 100% ) !important;
}

.fm-slider--letterboxd-strip .fm-slide > .container { align-items: flex-end !important; padding-bottom: 1.2rem !important; }

.fm-slider--letterboxd-strip .slide-wrapper {
	flex-direction: row;
	align-items: flex-end;
	gap: 1.3rem;
	max-width: 100%;
}

.fm-slider--letterboxd-strip .slide-poster {
	display: block;
	flex: 0 0 84px;
	width: 84px;
	aspect-ratio: 2 / 3;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .22 );
	box-shadow: 0 10px 26px rgba(0, 0, 0, .6 );
}

.fm-slider--letterboxd-strip .slide-wrapper .info { flex: 1 1 auto; min-width: 0; max-width: 560px; }

.fm-slider--letterboxd-strip .slide-wrapper .info .name {
	font-size: clamp( 1.2rem, .95rem + 1.1vw, 1.8rem ) !important;
	font-weight: 700 !important;
	margin-bottom: .35rem !important;
}

.fm-slider--letterboxd-strip .slide-wrapper .actions { margin-top: .8rem; }

/* --------------------------------------------------------------------------
   29. JustWatch Providers
   -------------------------------------------------------------------------- */
.fm-slider--justwatch-providers .fm-slide:before {
	background: linear-gradient( 0deg, rgba(5, 5, 5, 0.96 ) 0%, rgba(5, 5, 5, 0.55 ) 42%, transparent 78% ) !important;
}

.fm-slider--justwatch-providers .fm-slide > .container { align-items: center !important; }

.fm-slider--justwatch-providers .slide-wrapper { max-width: 600px; }

.fm-slider--justwatch-providers .slide-wrapper .info .name {
	font-size: clamp( 1.4rem, 1rem + 1.7vw, 2.4rem ) !important;
	font-weight: 800 !important;
}

/* The genre chips become availability chips, as JustWatch lists them. */
.fm-slider--justwatch-providers .slide-wrapper .info .meta {
	gap: .4rem;
	margin-top: .2rem;
	margin-bottom: .2rem;
}

.fm-slider--justwatch-providers .slide-wrapper .info .meta .genres {
	order: 9;
	width: 100%;
	margin-top: .5rem;
}

.fm-slider--justwatch-providers .slide-wrapper .info .meta .genres a,
.fm-slider--justwatch-providers .slide-wrapper .info .meta .genres span {
	display: inline-block;
	padding: .18rem .55rem;
	margin-right: .3rem;
	border-radius: var(--fm-r-pill );
	background: rgba(255, 255, 255, .1 );
	border: 1px solid rgba(255, 255, 255, .14 );
	color: #fff;
	font-size: .7rem !important;
}

.fm-slider--justwatch-providers .slide-wrapper .actions { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   30. Criterion Frame
   -------------------------------------------------------------------------- */
.fm-slider--criterion-frame .fm-slide:before {
	background: radial-gradient( 65% 65% at 50% 50%, rgba(5, 5, 5, 0.35 ) 0%, rgba(5, 5, 5, 0.88 ) 100% ) !important;
}

.fm-slider--criterion-frame .fm-slide > .container { align-items: center !important; justify-content: center !important; text-align: center !important; }

.fm-slider--criterion-frame .slide-wrapper {
	max-width: 620px;
	align-items: center;
	padding: 1.8rem 2rem !important;
	border: 1px solid rgba(255, 255, 255, .3 );
}

/* A second, inset hairline — the doubled frame is the whole idea. */
.fm-slider--criterion-frame .slide-wrapper::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid rgba(255, 255, 255, .14 );
	pointer-events: none;
}

.fm-slider--criterion-frame .slide-wrapper .info .name {
	font-size: clamp( 1.3rem, 1rem + 1.5vw, 2.1rem ) !important;
	font-weight: 400 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase;
	margin-bottom: .7rem !important;
}

.fm-slider--criterion-frame .slide-wrapper .info .meta { justify-content: center; margin-bottom: 0; }

.fm-slider--criterion-frame .slide-wrapper .info .meta > * {
	font-size: .66rem !important;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.fm-slider--criterion-frame .slide-wrapper .actions { justify-content: center; margin-top: 1.2rem; }

/* --------------------------------------------------------------------------
   The new ten on a phone
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.fm-slider--letterboxd-strip .slide-wrapper { flex-direction: column; align-items: flex-start; gap: .7rem; }
	.fm-slider--letterboxd-strip .slide-poster { flex: 0 0 auto; width: 66px; }

	.fm-slider--criterion-frame .slide-wrapper { padding: 1.1rem 1.2rem !important; }
	.fm-slider--criterion-frame .slide-wrapper::before { inset: 4px; }

	.fm-slider--imdb-badge .slide-wrapper::before { top: -1.6rem; }
}

/* ==========================================================================
   THE THIRD SET — focused carousels
   ==========================================================================
   These five are a different shape of slider, not a different arrangement of the
   hero. Each shows several slides at once with the centre one enlarged:

     codepen.io/gulay2020/pen/BaydyRE  active card scale(1.5), the two beside it
                                       scale(1.25), 5px corners, dots below
     dribbble.com/shots/26385706       centre card raised over a warm glow, service
                                       badge top-left, rating top-right, title and
                                       pill metadata on the card

   THE SHAPE OF THE MARKUP HERE
   ----------------------------
   In these styles the SLIDE is the card. The backdrop image that fills a hero slide
   would be wrong inside a 210px poster, so it is switched off and the real poster
   (`.slide-poster img`, already in every slide) is drawn instead. The caption overlays
   it, which is what the references show.

   THE SCALE IS DONE WITH TRANSFORM, NOT WIDTH — so the cards do not reflow as the
   slider moves. `transform-origin: center` keeps the enlarged card centred on its own
   slot instead of growing off to one side.
   ========================================================================== */

/* The frame these styles run in. Taller than a hero slide, because the enlarged
   centre card has to fit inside it without being clipped. */
#featured.swiper.fm-slider--focused-carousel,
#featured.swiper.fm-slider--streaming-bar,
#featured.swiper.fm-slider--category-strip,
#featured.swiper.fm-slider--coverflow-rail,
#featured.swiper.fm-slider--deck-fan {
	height: clamp( 330px, 52vh, 470px ) !important;
	background: #050505;
}

/*
 * The card itself, for all five.
 *
 * Prefixed with `#featured` because premium.css pins the slide's height with an
 * ID-scoped `!important` —
 *
 *     .swiper#featured .swiper-slide { height: 100% !important }
 *
 * — so a two-class selector loses even with its own `!important`, and every card took
 * the full height of the frame and then scaled up from there. Matching id-plus-two-
 * classes ties, and this comes later in the cascade.
 */
#featured.fm-slider--focused-carousel .fm-slide,
#featured.fm-slider--streaming-bar .fm-slide,
#featured.fm-slider--category-strip .fm-slide,
#featured.fm-slider--coverflow-rail .fm-slide,
#featured.fm-slider--deck-fan .fm-slide {
	position: relative;
	width: 210px !important;
	height: 315px !important;
	border-radius: 10px;
	overflow: hidden;
	/* The backdrop belongs to the hero, not to a poster card. */
	background-image: none !important;
	background-color: #0d0d0d;
	transform-origin: center center;
	transition: transform 500ms cubic-bezier( 0.16, 1, 0.3, 1 ),
		box-shadow 500ms cubic-bezier( 0.16, 1, 0.3, 1 ),
		opacity 400ms var(--fm-ease ), filter 400ms var(--fm-ease );
	will-change: transform;
}

/*
 * The padding moves from the container to the wrapper.
 *
 * `.slide-poster` is absolutely positioned, so it fills its nearest positioned
 * ancestor — and that was `.slide-wrapper`, not the card. The wrapper is a flex
 * column sized by its own content (248x215), so the poster filled that instead of the
 * 210x315 card and sat as a small image in the middle with black around it. A
 * container padding would have inset the poster from the card edge as well, which is
 * not what a poster card looks like.
 *
 * So: the container fills the card with no padding, the wrapper fills the container,
 * and the poster fills the wrapper. The padding that positions the caption moves to
 * the wrapper's own bottom, where it belongs.
 */
#featured.fm-slider--focused-carousel .fm-slide > .container,
#featured.fm-slider--streaming-bar .fm-slide > .container,
#featured.fm-slider--category-strip .fm-slide > .container,
#featured.fm-slider--coverflow-rail .fm-slide > .container,
#featured.fm-slider--deck-fan .fm-slide > .container {
	position: absolute;
	inset: 0;
	height: 100% !important;
	padding: 0 !important;
	align-items: flex-end !important;
	display: block !important;
}

#featured.fm-slider--focused-carousel .slide-wrapper,
#featured.fm-slider--streaming-bar .slide-wrapper,
#featured.fm-slider--category-strip .slide-wrapper,
#featured.fm-slider--coverflow-rail .slide-wrapper,
#featured.fm-slider--deck-fan .slide-wrapper {
	position: absolute !important;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0.9rem;
	max-width: 100%;
	width: 100%;
	margin: 0 !important;
}

/* The caption sits above the poster and the scrim. */
#featured.fm-slider--focused-carousel .slide-wrapper .info,
#featured.fm-slider--streaming-bar .slide-wrapper .info,
#featured.fm-slider--category-strip .slide-wrapper .info,
#featured.fm-slider--coverflow-rail .slide-wrapper .info,
#featured.fm-slider--deck-fan .slide-wrapper .info {
	position: relative;
	z-index: 2;
}

/* The poster fills the card. */
.fm-slider--focused-carousel .slide-poster,
.fm-slider--streaming-bar .slide-poster,
.fm-slider--category-strip .slide-poster,
.fm-slider--coverflow-rail .slide-poster,
.fm-slider--deck-fan .slide-poster {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	width: auto;
	height: auto;
	aspect-ratio: auto;
	border: 0;
	border-radius: inherit;
	box-shadow: none;
	transform: none;
}

.fm-slider--focused-carousel .slide-poster img,
.fm-slider--streaming-bar .slide-poster img,
.fm-slider--category-strip .slide-poster img,
.fm-slider--coverflow-rail .slide-poster img,
.fm-slider--deck-fan .slide-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Caption sizing inside a card. */
/* (the wrapper rules above already cover this) */

.fm-slider--focused-carousel .fm-slide .name,
.fm-slider--streaming-bar .fm-slide .name,
.fm-slider--category-strip .fm-slide .name,
.fm-slider--coverflow-rail .fm-slide .name,
.fm-slider--deck-fan .fm-slide .name {
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	margin: 0 !important;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8 );
}

/* The chip row does not fit a 210px card; each style decides what to keep. */
.fm-slider--focused-carousel .fm-slide .meta > *,
.fm-slider--coverflow-rail .fm-slide .meta > *,
.fm-slider--deck-fan .fm-slide .meta > * {
	font-size: 0.6rem !important;
}

.fm-slider--focused-carousel .fm-slide .actions,
.fm-slider--streaming-bar .fm-slide .actions,
.fm-slider--category-strip .fm-slide .actions,
.fm-slider--coverflow-rail .fm-slide .actions,
.fm-slider--deck-fan .fm-slide .actions {
	margin-top: 0.5rem !important;
}

.fm-slider--focused-carousel .fm-slide .watchnow,
.fm-slider--streaming-bar .fm-slide .watchnow,
.fm-slider--category-strip .fm-slide .watchnow,
.fm-slider--coverflow-rail .fm-slide .watchnow,
.fm-slider--deck-fan .fm-slide .watchnow {
	padding: 0.35rem 0.8rem !important;
	font-size: 0.68rem !important;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   31. Focused Carousel — the CodePen's proportions
   -------------------------------------------------------------------------- */
.fm-slider--focused-carousel .fm-slide:before {
	background: linear-gradient( 0deg, rgba(5, 5, 5, 0.92 ) 0%, rgba(5, 5, 5, 0.35 ) 34%, transparent 62% ) !important;
}

/* 1.5x in the pen; a little gentler at card scale so the neigbours stay readable. */
.fm-slider--focused-carousel .fm-slide.swiper-slide-active {
	transform: scale( 1.34 );
	z-index: 10;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65 );
}

.fm-slider--focused-carousel .fm-slide.swiper-slide-prev,
.fm-slider--focused-carousel .fm-slide.swiper-slide-next {
	transform: scale( 1.14 );
	z-index: 5;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5 );
}

.fm-slider--focused-carousel .fm-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
	transform: scale( 0.92 );
	opacity: 0.55;
}

/* Only the centred card carries its caption; on the others it is noise at this size. */
.fm-slider--focused-carousel .fm-slide:not(.swiper-slide-active) .actions { display: none; }

/* Dots, the way the pen has them. */
#featured.fm-slider--focused-carousel .featured-pagination { display: none; }

/* --------------------------------------------------------------------------
   32. Streaming Bar — the Dribbble shot
   -------------------------------------------------------------------------- */
.fm-slider--streaming-bar .fm-slide:before {
	background: linear-gradient( 0deg, rgba(0, 0, 0, 0.86 ) 0%, rgba(0, 0, 0, 0.36 ) 36%, rgba(0, 0, 0, 0.12 ) 62%, rgba(0, 0, 0, 0.3 ) 100% ) !important;
}

.fm-slider--streaming-bar .fm-slide.swiper-slide-active {
	transform: scale( 1.42 );
	z-index: 10;
	border-radius: 16px;
	/* The warm bloom behind the raised card — the shot's most recognisable trait.
	   A box-shadow rather than a pseudo-element because the card clips its own
	   contents; this is the only way the glow can fall outside it. */
	box-shadow: 0 0 120px 40px rgba( 158, 72, 37, 0.34 ), 0 26px 70px rgba( 0, 0, 0, 0.7 );
}

.fm-slider--streaming-bar .fm-slide.swiper-slide-prev,
.fm-slider--streaming-bar .fm-slide.swiper-slide-next {
	transform: scale( 1.1 );
	z-index: 5;
	opacity: 0.9;
}

.fm-slider--streaming-bar .fm-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
	transform: scale( 0.88 );
	opacity: 0.42;
	filter: saturate( 0.7 );
}

/* Service badge, top-left — the quality chip re-purposed the way the shot shows it. */
.fm-slider--streaming-bar .fm-slide .info .meta .quality {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0 !important;
	border-radius: 50%;
	background: linear-gradient( 145deg, #6c4bd8, #3a2bd0 ) !important;
	border: 1px solid rgba( 255, 255, 255, 0.25 ) !important;
	color: #fff !important;
	font-size: 0.52rem !important;
	font-weight: 900;
	letter-spacing: 0;
}

/* Rating, top-right, with the star from the meta row beside it. */
.fm-slider--streaming-bar .fm-slide .info .meta > span:nth-child(3) {
	position: absolute;
	top: 0.8rem;
	right: 0.75rem;
	z-index: 3;
	color: #fff !important;
	font-size: 1rem !important;
	font-weight: 800;
	text-shadow: 0 1px 8px rgba( 0, 0, 0, 0.9 );
}

/* The rest of the chips become the two dark pills the shot shows under the title. */
.fm-slider--streaming-bar .fm-slide .info .meta {
	gap: 0.35rem;
	margin-bottom: 0.15rem;
}

.fm-slider--streaming-bar .fm-slide .info .meta > span:nth-child(4),
.fm-slider--streaming-bar .fm-slide .info .meta > span:nth-child(5) {
	padding: 0.2rem 0.55rem;
	border-radius: var(--fm-r-pill );
	background: rgba( 12, 12, 12, 0.72 );
	font-size: 0.66rem !important;
	font-weight: 600;
	color: rgba( 255, 255, 255, 0.92 ) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.fm-slider--streaming-bar .fm-slide .info .meta .rating,
.fm-slider--streaming-bar .fm-slide .info .meta .genres { display: none; }

/* Title is the loudest thing on the card, as in the shot. */
.fm-slider--streaming-bar .fm-slide.swiper-slide-active .name {
	font-size: 1.15rem !important;
	letter-spacing: -0.02em !important;
}

.fm-slider--streaming-bar .fm-slide:not(.swiper-slide-active) .actions,
.fm-slider--streaming-bar .fm-slide:not(.swiper-slide-active) .info .meta > span:nth-child(-n+3) { display: none; }

/* --------------------------------------------------------------------------
   33. Category Strip — the KatMovieHD band
   -------------------------------------------------------------------------- */
#featured.fm-slider--category-strip .fm-slide {
	width: 150px !important;
	height: 225px !important;
	border-radius: 6px;
}

.fm-slider--category-strip .fm-slide:before {
	background: linear-gradient( 0deg, rgba( 8, 6, 20, 0.96 ) 0%, rgba( 8, 6, 20, 0.5 ) 30%, transparent 58% ) !important;
}

.fm-slider--category-strip .fm-slide > .container { padding: 0.6rem !important; align-items: flex-end !important; }

.fm-slider--category-strip .fm-slide .name {
	font-size: 0.78rem !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: 0.01em !important;
	line-height: 1.15 !important;
}

/* A low band: nothing else on the card, everything else would be unreadable. */
.fm-slider--category-strip .fm-slide .meta,
.fm-slider--category-strip .fm-slide .actions { display: none; }

.fm-slider--category-strip .fm-slide.swiper-slide-active {
	transform: scale( 1.08 );
	z-index: 10;
	box-shadow: 0 12px 30px rgba( 0, 0, 0, 0.6 );
}

.fm-slider--category-strip .fm-slide.swiper-slide-prev,
.fm-slider--category-strip .fm-slide.swiper-slide-next {
	transform: scale( 1.02 );
	z-index: 5;
}

.fm-slider--category-strip .fm-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
	opacity: 0.62;
}

#featured.swiper.fm-slider--category-strip { height: clamp( 250px, 34vh, 300px ) !important; }

/* --------------------------------------------------------------------------
   34. Coverflow Rail — side cards turned away in perspective
   -------------------------------------------------------------------------- */
.fm-slider--coverflow-rail { perspective: 1400px; perspective-origin: 50% 50%; }

.fm-slider--coverflow-rail .fm-slide:before {
	background: linear-gradient( 0deg, rgba(5, 5, 5, 0.94 ) 0%, rgba(5, 5, 5, 0.4 ) 34%, transparent 60% ) !important;
}

.fm-slider--coverflow-rail .fm-slide.swiper-slide-active {
	transform: scale( 1.3 ) rotateY( 0deg );
	z-index: 10;
	box-shadow: 0 26px 60px rgba( 0, 0, 0, 0.7 );
}

.fm-slider--coverflow-rail .fm-slide.swiper-slide-prev {
	transform: scale( 1.02 ) rotateY( 32deg ) translateX( 10px );
	transform-origin: right center;
	z-index: 5;
}

.fm-slider--coverflow-rail .fm-slide.swiper-slide-next {
	transform: scale( 1.02 ) rotateY( -32deg ) translateX( -10px );
	transform-origin: left center;
	z-index: 5;
}

.fm-slider--coverflow-rail .fm-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
	transform: scale( 0.9 ) rotateY( 40deg );
	opacity: 0.4;
}

/* A reflected gloss down the left edge, the way a cover-flow card catches light. */
.fm-slider--coverflow-rail .fm-slide.swiper-slide-prev::after,
.fm-slider--coverflow-rail .fm-slide.swiper-slide-next::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	background: linear-gradient( 90deg, rgba( 0, 0, 0, 0.55 ), transparent 55% );
	pointer-events: none;
}

.fm-slider--coverflow-rail .fm-slide.swiper-slide-next::after {
	background: linear-gradient( 270deg, rgba( 0, 0, 0, 0.55 ), transparent 55% );
}

.fm-slider--coverflow-rail .fm-slide:not(.swiper-slide-active) .actions { display: none; }

/* --------------------------------------------------------------------------
   35. Deck Fan — cards fanned like a hand
   -------------------------------------------------------------------------- */
.fm-slider--deck-fan .fm-slide:before {
	background: linear-gradient( 0deg, rgba(5, 5, 5, 0.95 ) 0%, rgba(5, 5, 5, 0.42 ) 32%, transparent 58% ) !important;
}

.fm-slider--deck-fan .fm-slide.swiper-slide-active {
	transform: translateY( -10px ) scale( 1.22 ) rotate( 0deg );
	z-index: 10;
	box-shadow: 0 30px 64px rgba( 0, 0, 0, 0.72 );
}

.fm-slider--deck-fan .fm-slide.swiper-slide-prev {
	transform: translateX( 26px ) scale( 1.06 ) rotate( -7deg );
	transform-origin: right bottom;
	z-index: 6;
	opacity: 0.92;
}

.fm-slider--deck-fan .fm-slide.swiper-slide-next {
	transform: translateX( -26px ) scale( 1.06 ) rotate( 7deg );
	transform-origin: left bottom;
	z-index: 6;
	opacity: 0.92;
}

.fm-slider--deck-fan .fm-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
	transform: translateY( 14px ) scale( 0.88 ) rotate( 0deg );
	opacity: 0.4;
}

.fm-slider--deck-fan .fm-slide:not(.swiper-slide-active) .actions { display: none; }

/* --------------------------------------------------------------------------
   The carousels on a phone
   --------------------------------------------------------------------------
   A strip of 210px cards on a 390px screen would show one card and a sliver. These
   shrink the cards and pull the scale back so two are always partly visible — which
   is the whole point of the arrangement.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	#featured.swiper.fm-slider--focused-carousel,
	#featured.swiper.fm-slider--streaming-bar,
	#featured.swiper.fm-slider--coverflow-rail,
	#featured.swiper.fm-slider--deck-fan {
		height: clamp( 260px, 44vh, 330px ) !important;
	}

	#featured.fm-slider--focused-carousel .fm-slide,
	#featured.fm-slider--streaming-bar .fm-slide,
	#featured.fm-slider--category-strip .fm-slide,
	#featured.fm-slider--coverflow-rail .fm-slide,
	#featured.fm-slider--deck-fan .fm-slide {
		width: 136px !important;
		height: 204px !important;
	}

	.fm-slider--focused-carousel .fm-slide.swiper-slide-active { transform: scale( 1.16 ); }
	.fm-slider--focused-carousel .fm-slide.swiper-slide-prev,
	.fm-slider--focused-carousel .fm-slide.swiper-slide-next { transform: scale( 1.04 ); }
	.fm-slider--streaming-bar .fm-slide.swiper-slide-active { transform: scale( 1.22 ); }
	.fm-slider--coverflow-rail .fm-slide.swiper-slide-prev { transform: scale( 0.98 ) rotateY( 26deg ); }
	.fm-slider--coverflow-rail .fm-slide.swiper-slide-next { transform: scale( 0.98 ) rotateY( -26deg ); }
	.fm-slider--deck-fan .fm-slide.swiper-slide-active { transform: translateY( -6px ) scale( 1.08 ); }

	.fm-slider--streaming-bar .fm-slide.swiper-slide-active .name { font-size: 0.9rem !important; }
	.fm-slider--streaming-bar .fm-slide .info .meta .quality { width: 26px; height: 26px; font-size: 0.42rem !important; }
	.fm-slider--streaming-bar .fm-slide .info .meta > span:nth-child(3) { font-size: 0.78rem !important; }

	.fm-slider--focused-carousel .fm-slide .name,
	.fm-slider--coverflow-rail .fm-slide .name,
	.fm-slider--deck-fan .fm-slide .name { font-size: 0.8rem !important; }
}

/* ==========================================================================
   CARD CAPTION — shared by the five carousels
   ==========================================================================
   A poster card is not a hero: there is no room for a button row, and the
   artwork usually already carries the film's title. What a card needs is the
   title over the bottom of the artwork and one short line of metadata.

   These rules sit at the end of the file on purpose. The per-style blocks above
   were written for a hero slide and kept fighting the card layout — six chips
   wrapping in a 108px column made the caption 215px tall on a 422px card, and the
   Watch button collapsed into a teal circle. One explicit card caption replaces
   all of it, and the per-style blocks only decide what is visible on top.
   ========================================================================== */

/* The caption is a stacked block, not a row of columns. */
#featured.fm-slider--focused-carousel .fm-slide .info,
#featured.fm-slider--streaming-bar .fm-slide .info,
#featured.fm-slider--category-strip .fm-slide .info,
#featured.fm-slider--coverflow-rail .fm-slide .info,
#featured.fm-slider--deck-fan .fm-slide .info {
	display: block !important;
	width: 100%;
	max-width: 100%;
}

#featured.fm-slider--focused-carousel .fm-slide .info .start,
#featured.fm-slider--streaming-bar .fm-slide .info .start,
#featured.fm-slider--category-strip .fm-slide .info .start,
#featured.fm-slider--coverflow-rail .fm-slide .info .start,
#featured.fm-slider--deck-fan .fm-slide .info .start {
	display: block !important;
	margin: 0 !important;
}

/* No buttons on a poster card — the whole card is the click target. */
#featured.fm-slider--focused-carousel .fm-slide .actions,
#featured.fm-slider--streaming-bar .fm-slide .actions,
#featured.fm-slider--category-strip .fm-slide .actions,
#featured.fm-slider--coverflow-rail .fm-slide .actions,
#featured.fm-slider--deck-fan .fm-slide .actions {
	display: none !important;
}

/* Two lines of title, then an ellipsis. */
#featured.fm-slider--focused-carousel .fm-slide .name,
#featured.fm-slider--streaming-bar .fm-slide .name,
#featured.fm-slider--category-strip .fm-slide .name,
#featured.fm-slider--coverflow-rail .fm-slide .name,
#featured.fm-slider--deck-fan .fm-slide .name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 0.35rem !important;
	font-weight: 800 !important;
}

/* One compact metadata line that never wraps. */
#featured.fm-slider--focused-carousel .fm-slide .meta,
#featured.fm-slider--streaming-bar .fm-slide .meta,
#featured.fm-slider--category-strip .fm-slide .meta,
#featured.fm-slider--coverflow-rail .fm-slide .meta,
#featured.fm-slider--deck-fan .fm-slide .meta {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0.3rem;
	overflow: hidden;
	margin: 0 !important;
	align-items: center;
}

/* By default a card shows the quality chip and the year — nothing else fits. */
#featured.fm-slider--focused-carousel .fm-slide .meta > *,
#featured.fm-slider--streaming-bar .fm-slide .meta > *,
#featured.fm-slider--category-strip .fm-slide .meta > *,
#featured.fm-slider--coverflow-rail .fm-slide .meta > *,
#featured.fm-slider--deck-fan .fm-slide .meta > * {
	font-size: 0.6rem !important;
	line-height: 1.5;
	white-space: nowrap;
	flex: 0 0 auto;
}

#featured.fm-slider--focused-carousel .fm-slide .meta > *:nth-child(2),
#featured.fm-slider--streaming-bar .fm-slide .meta > *:nth-child(2),
#featured.fm-slider--category-strip .fm-slide .meta > *:nth-child(2),
#featured.fm-slider--coverflow-rail .fm-slide .meta > *:nth-child(2),
#featured.fm-slider--deck-fan .fm-slide .meta > *:nth-child(2),
#featured.fm-slider--focused-carousel .fm-slide .meta > *:nth-child(3),
#featured.fm-slider--streaming-bar .fm-slide .meta > *:nth-child(3),
#featured.fm-slider--category-strip .fm-slide .meta > *:nth-child(3),
#featured.fm-slider--coverflow-rail .fm-slide .meta > *:nth-child(3),
#featured.fm-slider--deck-fan .fm-slide .meta > *:nth-child(3),
#featured.fm-slider--focused-carousel .fm-slide .meta > *:nth-child(5),
#featured.fm-slider--streaming-bar .fm-slide .meta > *:nth-child(5),
#featured.fm-slider--category-strip .fm-slide .meta > *:nth-child(5),
#featured.fm-slider--coverflow-rail .fm-slide .meta > *:nth-child(5),
#featured.fm-slider--deck-fan .fm-slide .meta > *:nth-child(5),
#featured.fm-slider--focused-carousel .fm-slide .meta > *:nth-child(6),
#featured.fm-slider--streaming-bar .fm-slide .meta > *:nth-child(6),
#featured.fm-slider--category-strip .fm-slide .meta > *:nth-child(6),
#featured.fm-slider--coverflow-rail .fm-slide .meta > *:nth-child(6),
#featured.fm-slider--deck-fan .fm-slide .meta > *:nth-child(6) {
	display: none !important;
}

/* Streaming Bar keeps the rating and brings back two chips as the shot's pills. */
#featured.fm-slider--streaming-bar .fm-slide .meta > span:nth-child(3) {
	display: block !important;
}

#featured.fm-slider--streaming-bar .fm-slide .meta > span:nth-child(4) {
	display: inline-block !important;
}

/* The centred card is the loudest; the others step down. */
#featured.fm-slider--focused-carousel .fm-slide:not(.swiper-slide-active) .name,
#featured.fm-slider--streaming-bar .fm-slide:not(.swiper-slide-active) .name,
#featured.fm-slider--category-strip .fm-slide:not(.swiper-slide-active) .name,
#featured.fm-slider--coverflow-rail .fm-slide:not(.swiper-slide-active) .name,
#featured.fm-slider--deck-fan .fm-slide:not(.swiper-slide-active) .name {
	font-size: 0.82rem !important;
}

#featured.fm-slider--focused-carousel .fm-slide.swiper-slide-active .name,
#featured.fm-slider--streaming-bar .fm-slide.swiper-slide-active .name,
#featured.fm-slider--category-strip .fm-slide.swiper-slide-active .name,
#featured.fm-slider--coverflow-rail .fm-slide.swiper-slide-active .name,
#featured.fm-slider--deck-fan .fm-slide.swiper-slide-active .name {
	font-size: 1.02rem !important;
}

#featured.fm-slider--streaming-bar .fm-slide.swiper-slide-active .name {
	font-size: 1.18rem !important;
}

#featured.fm-slider--category-strip .fm-slide .name {
	font-size: 0.72rem !important;
}

/* ==========================================================================
   THE MOTION LAYER MUST NOT RUN ON A CARD
   ==========================================================================
   The smooth-caption rules fade `.slide-wrapper` in and out with the active slide:

       #featured.swiper-container-initialized .slide-wrapper { opacity: 0 }
       ... .swiper-slide-active .slide-wrapper           { opacity: 1 }

   That is right for a hero, where the wrapper holds only the caption. In the carousel
   styles the wrapper ALSO holds the poster, so every card except the centred one was
   faded to nothing — a strip of black rectangles with one poster in the middle, while
   the images were loaded and laid out correctly the whole time.

   The card itself is the thing that should move, and it already does (transform on
   .swiper-slide-active / -prev / -next). So the fade is switched off here.
   ========================================================================== */
#featured.swiper-container-initialized.fm-slider--focused-carousel .slide-wrapper,
#featured.swiper-container-initialized.fm-slider--streaming-bar .slide-wrapper,
#featured.swiper-container-initialized.fm-slider--category-strip .slide-wrapper,
#featured.swiper-container-initialized.fm-slider--coverflow-rail .slide-wrapper,
#featured.swiper-container-initialized.fm-slider--deck-fan .slide-wrapper {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* --------------------------------------------------------------------------
   Where the artwork carries the title, the caption does not repeat it
   --------------------------------------------------------------------------
   A poster almost always has the film's name printed on it. Animating that name and
   then printing it again directly underneath it is the one thing that makes a card
   look unfinished — and the two references this pair is modelled on do not do it:
   the CodePen has no text on the card at all, and the KatMovieHD strip has the title
   only where the artwork was drawn without one.

   So these two keep the metadata line (quality and year) and drop the repeated title.
   The full title stays in the markup for screen readers and for the card's own link,
   which is what the `position: absolute` clip below does — it hides the text visually
   without removing it from the accessibility tree.
   -------------------------------------------------------------------------- */
#featured.fm-slider--focused-carousel .fm-slide .name,
#featured.fm-slider--category-strip .fm-slide .name {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px !important;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* With the title gone the metadata line sits on the card's baseline. */
#featured.fm-slider--focused-carousel .fm-slide .info,
#featured.fm-slider--category-strip .fm-slide .info {
	padding-bottom: 0.1rem;
}

/* ==========================================================================
   CAROUSEL TIDY-UP
   ==========================================================================
   Two things showed up once the strip had cards on both sides.

   1. A long chip — "WED-DL 2010-06-01" — is wider than a 210px card and simply ran
      past its edge. `overflow: hidden` on the row was not enough because each chip
      was `flex: 0 0 auto`, so it refused to shrink; the chips have to be allowed to
      shrink and to ellipsis.

   2. The hero's scrollbar was drawing a teal bar across the bottom of the strip. A
      carousel has bullets, not a scrollbar.
   ========================================================================== */
#featured.fm-slider--focused-carousel .swiper-scrollbar,
#featured.fm-slider--streaming-bar .swiper-scrollbar,
#featured.fm-slider--category-strip .swiper-scrollbar,
#featured.fm-slider--coverflow-rail .swiper-scrollbar,
#featured.fm-slider--deck-fan .swiper-scrollbar {
	display: none !important;
}

/* Bullets, centred under the strip, the way the pen has them. */
#featured.fm-slider--focused-carousel .featured-pagination,
#featured.fm-slider--streaming-bar .featured-pagination,
#featured.fm-slider--category-strip .featured-pagination,
#featured.fm-slider--coverflow-rail .featured-pagination,
#featured.fm-slider--deck-fan .featured-pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	z-index: 20;
	display: flex;
	justify-content: center;
	gap: 0.4rem;
}

#featured.fm-slider--focused-carousel .swiper-pagination-bullet,
#featured.fm-slider--streaming-bar .swiper-pagination-bullet,
#featured.fm-slider--category-strip .swiper-pagination-bullet,
#featured.fm-slider--coverflow-rail .swiper-pagination-bullet,
#featured.fm-slider--deck-fan .swiper-pagination-bullet {
	width: 7px;
	height: 7px;
	margin: 0 !important;
	background: rgba( 255, 255, 255, 0.34 ) !important;
	opacity: 1 !important;
	transition: width 260ms var(--fm-ease ), background-color 260ms var(--fm-ease );
}

#featured.fm-slider--focused-carousel .swiper-pagination-bullet-active,
#featured.fm-slider--streaming-bar .swiper-pagination-bullet-active,
#featured.fm-slider--category-strip .swiper-pagination-bullet-active,
#featured.fm-slider--coverflow-rail .swiper-pagination-bullet-active,
#featured.fm-slider--deck-fan .swiper-pagination-bullet-active {
	width: 22px;
	background: var(--fm-accent ) !important;
}

/* Chips shrink and ellipsis instead of running off the card. */
#featured.fm-slider--focused-carousel .fm-slide .meta > *,
#featured.fm-slider--streaming-bar .fm-slide .meta > *,
#featured.fm-slider--category-strip .fm-slide .meta > *,
#featured.fm-slider--coverflow-rail .fm-slide .meta > *,
#featured.fm-slider--deck-fan .fm-slide .meta > * {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   The two artwork-only styles carry no caption on the side cards
   --------------------------------------------------------------------------
   The CodePen has no text on its cards at all and the KatMovieHD strip has the title
   printed into the artwork, so a second caption beside it is noise at 210px. Only the
   centred card keeps its metadata line; the rest are pure artwork, which is also what
   makes the size difference between them legible.
   -------------------------------------------------------------------------- */
#featured.fm-slider--focused-carousel .fm-slide:not(.swiper-slide-active) .info,
#featured.fm-slider--category-strip .fm-slide:not(.swiper-slide-active) .info {
	opacity: 0;
	pointer-events: none;
}

#featured.fm-slider--focused-carousel .fm-slide .info,
#featured.fm-slider--category-strip .fm-slide .info {
	transition: opacity 300ms var(--fm-ease );
}

/* On the centred card the metadata sits on a soft base so it reads over bright art. */
#featured.fm-slider--focused-carousel .fm-slide.swiper-slide-active .meta,
#featured.fm-slider--category-strip .fm-slide.swiper-slide-active .meta {
	padding: 0.22rem 0.5rem;
	border-radius: var(--fm-r-pill );
	background: rgba( 8, 8, 8, 0.6 );
	width: fit-content;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}