/* CH1 Trending — Netflix-style ranked carousel.
   Colors are inherited from the global theme variables (--color-main = brand red,
   --color-dark = global dark background) so the page follows the site's global
   white + red theme automatically. Change the theme later and this updates too. */

:root{
	/* Fall back to the global dark background for the Trending canvas. */
	--ch1-trending-bg: var(--color-dark);
}

/* Each language section shares ONE background so they belong to the same system. */
.ch1-trending-section{
	position:relative;
	padding:14px 0;
	background-color:var(--color-dark);
	background-image:radial-gradient(120% 60% at 50% -12%, color-mix(in srgb, var(--color-main) 16%, transparent) 0%, transparent 60%);
	color:#fff;
	overflow:visible;
}
/* The bottom fade is redundant now that sections share one background. */
.ch1-trending-section::after{
	display:none;
}
/* Equal 100px horizontal padding on desktop so the heading, subtitle,
   carousel and controls all sit inside the same 100px content boundary. */
.ch1-trending-section .container{
	max-width:none;
	padding-left:100px;
	padding-right:100px;
}
.ch1-trending-head{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin-bottom:14px;
	padding:0 4px;
	transition:opacity .3s ease;
}
.ch1-trending-eyebrow{
	margin:0;
	font-size:15px;
	letter-spacing:.32em;
	font-weight:700;
	color:var(--color-main);
	text-transform:uppercase;
}
.ch1-trending-head-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}
.ch1-trending-title{
	margin:0;
	font-size:clamp(26px,4vw,46px);
	font-weight:800;
	letter-spacing:-.5px;
	color:#fff;
}
.ch1-trending-intro{
	margin:4px 0 0;
	color:rgba(255,255,255,.6);
	font-size:18px;
	max-width:640px;
}
.ch1-trending-nav{
	display:flex;
	gap:10px;
	flex:0 0 auto;
}
.ch1-trending-nav button{
	width:42px;height:42px;
	border-radius:50%;
	border:1px solid rgba(255,255,255,.25);
	background:rgba(255,255,255,.06);
	color:#fff;
	font-size:22px;line-height:1;
	cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.ch1-trending-nav button:hover:not(:disabled){
	background:var(--color-main);border-color:var(--color-main);transform:scale(1.06);
}
.ch1-trending-nav button:disabled{
	opacity:.3;cursor:default;
}
.ch1-trending-carousel{
	display:flex;
	gap:18px;
	overflow-x:auto;
	scroll-behavior:smooth;
	scroll-snap-type:x proximity;
	/* Bottom padding must be taller than the card shadow's spread so the
	   drop-shadow is never sliced by the carousel's overflow. */
	padding:14px 16px 30px;
	-ms-overflow-style:none;
	scrollbar-width:none;
}
.ch1-trending-carousel::-webkit-scrollbar{display:none;}

.ch1-trending-card{
	flex:0 0 auto;
	display:flex;
	align-items:stretch;
	width:auto;
	position:relative;
	scroll-snap-align:start;
	opacity:0;
	transition:opacity .55s ease;
	transition-delay:var(--trend-delay,0ms);
}
.ch1-trending-card.is-in{
	opacity:1;
}
.ch1-trending-card:hover{
	z-index:5;
}
.ch1-trending-rank{
	flex:0 0 auto;
	align-self:flex-end;
	font-size:210px;
	line-height:.7;
	font-weight:900;
	margin-right:-46px;
	z-index:1;
	user-select:none;
	/* Adaptive: readable on any background (poster image or solid color) */
	color:rgba(12,12,16,.85);
	-webkit-text-fill-color:rgba(12,12,16,.85);
	-webkit-text-stroke:2px rgba(255,255,255,.7);
	text-shadow:0 3px 16px rgba(255,255,255,.55);
	transition:color .3s ease,-webkit-text-fill-color .3s ease,-webkit-text-stroke-color .3s ease,transform .4s ease;
}
.ch1-trending-card:hover .ch1-trending-rank{
	color:var(--color-main);
	-webkit-text-fill-color:var(--color-main);
	-webkit-text-stroke-color:rgba(255,255,255,.7);
	transform:translateX(4px);
}
.ch1-trending-card__media{
	position:relative;
	z-index:1;
	display:block;
	width:200px;
	border-radius:12px;
	overflow:hidden;
	background:#16161c;
	border:2px solid rgba(255,255,255,.16);
	box-shadow:0 10px 20px rgba(0,0,0,.30);
	transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,border-color .3s ease;
}
.ch1-trending-card:hover .ch1-trending-card__media{
	transform:scale(1.06);
	box-shadow:0 14px 28px rgba(0,0,0,.42);
	border-color:var(--color-main);
}
.ch1-trending-card__media img{
	display:block;
	width:100%;
	aspect-ratio:2/3;
	object-fit:cover;
}
.ch1-trending-card__media::after{
	content:"";
	position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.78) 100%);
}
.ch1-trending-badge{
	position:absolute;left:8px;top:8px;z-index:2;
	background:var(--color-main);color:#fff;
	font-size:10px;font-weight:700;
	padding:3px 8px;border-radius:999px;
	letter-spacing:.04em;
}
.ch1-trending-card__content{
	position:absolute;
	left:0;right:0;bottom:0;z-index:2;
	padding:12px 12px 14px;
	opacity:0;
	transform:translateY(8px);
	transition:opacity .35s ease,transform .35s ease;
}
.ch1-trending-card:hover .ch1-trending-card__content{
	opacity:1;transform:translateY(0);
}
/* IMDb chip is styled/used only on the white page; keep it hidden on dark home cards. */
.ch1-trending-imdb{ display:none; }
.ch1-trending-meta{
	display:flex;gap:8px;flex-wrap:wrap;
	font-size:11px;color:rgba(255,255,255,.8);
	margin-bottom:6px;
}
.ch1-trending-meta span{
	background:rgba(0,0,0,.4);
	border:1px solid rgba(255,255,255,.18);
	padding:2px 8px;border-radius:999px;
}
.ch1-trending-card__title{
	margin:0;
	font-size:14px;
	font-weight:700;
	line-height:1.25;
	color:#fff;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.ch1-trending-card__title a{color:#fff;text-decoration:none;}
.ch1-trending-stats{
	margin-top:6px;
	font-size:11px;color:rgba(255,255,255,.7);
}
.ch1-trending-stats strong{color:#fff;}

/* ---- Hero -> white fade transition (trending pages only) ----
   Static gradient on the fixed .page-header. No JS scroll modulation — the
   natural scroll-over behaviour (main z-index 6 covers the fixed header) is
   the fade. The gradient ensures the seam is always white, never a hard edge. */
body.ch1-trending-page .page-header::before{
	content:"";
	position:absolute;
	left:0; right:0; bottom:0;
	height:350px;
	background:linear-gradient(to bottom,
		transparent 0%,
		rgba(255,255,255,0.04) 15%,
		rgba(255,255,255,0.12) 28%,
		rgba(255,255,255,0.24) 40%,
		rgba(255,255,255,0.4) 52%,
		rgba(255,255,255,0.58) 63%,
		rgba(255,255,255,0.74) 74%,
		rgba(255,255,255,0.88) 86%,
		#ffffff 100%);
	z-index:1;
	pointer-events:none;
}

@media (max-width:768px){
	.ch1-trending-section .container{ padding-left:24px; padding-right:24px; }
	body.ch1-trending-page .page-header::before{ height:200px; }
	.ch1-trending-head{ margin-bottom:18px; gap:10px; }
	.ch1-trending-head-row{ flex-wrap:wrap; gap:10px; }
	.ch1-trending-title{ font-size:28px; }
	.ch1-trending-intro{ font-size:16px; }
	.ch1-trending-rank{ font-size:140px; margin-right:-32px; }
	.ch1-trending-card__media{ width:130px; }
	.ch1-trending-nav{ display:none; }
	.ch1-trending-carousel{ scroll-snap-type:none; gap:14px; padding:8px 2px 16px; }
}
@media (max-width:480px){
	.ch1-trending-section .container{ padding-left:16px; padding-right:16px; }
	.ch1-trending-title{ font-size:23px; }
	.ch1-trending-rank{ font-size:108px; margin-right:-22px; }
	.ch1-trending-card__media{ width:112px; }
	.ch1-trending-carousel{ gap:12px; }
}

@media (prefers-reduced-motion: reduce){
	.ch1-trending-card{transition:none;transform:none;opacity:1;filter:none;}
	.ch1-trending-carousel{scroll-behavior:auto;}
}

/* ---- Trending page canvas (dark, inherits the global theme) ---- */
body.ch1-trending-page,
body.ch1-trending-front{
	background:var(--ch1-trending-bg);
}
body.ch1-trending-page{
	overflow-x:hidden;
}
/* Remove the white gap between the hero and the first Trending section:
   the theme's <main> is white (#fff) and the wrapping .content-section adds
   100px padding, producing a blank white bar. Make <main> transparent and zero
   the wrapper padding so sections flow with their own (compact) spacing. */
body.ch1-trending-page main{
	background:transparent;
}
body.ch1-trending-page main > .content-section{
	padding:0;
}
/* Full-bleed the trending wrapper so the dark band spans edge to edge */
body.ch1-trending-page .ts-trending-page-wrap{
	width:100vw;
	max-width:100vw;
	position:relative;
	margin-left:calc(50% - 50vw);
}
/* Adjacent language sections flow with only a small, intentional gap. */
body.ch1-trending-page .ch1-trending-section + .ch1-trending-section{
	margin-top:0;
}

/* ---- Main /trending/ page: white canvas, black text, red (--color-main) accents ---- */
/* Overrides the dark --ch1-trending-bg so the page background is white. The home
   band (body.ch1-trending-front) is untouched and stays dark. Cards/poster art
   keep their own dark styling, so only the canvas + chrome need flipping. */
body.ch1-trending-page{
	background:#fff;
}
body.ch1-trending-page .ch1-trending-section{
	background-color:#fff;
	color:var(--color-dark);
}
body.ch1-trending-page .ch1-trending-title{
	color:var(--color-dark);
}
body.ch1-trending-page .ch1-trending-intro{
	color:rgba(17,17,17,.6);
}
body.ch1-trending-page .ch1-trending-nav button{
	border:1px solid rgba(17,17,17,.25);
	background:rgba(17,17,17,.06);
	color:var(--color-dark);
}
body.ch1-trending-page .ch1-trending-rank{
	color:rgba(17,17,17,.85);
	-webkit-text-fill-color:rgba(17,17,17,.85);
	-webkit-text-stroke:2px rgba(17,17,17,.18);
	text-shadow:0 3px 16px rgba(17,17,17,.12);
}
body.ch1-trending-page .ch1-trending-card:hover .ch1-trending-rank{
	-webkit-text-stroke-color:rgba(17,17,17,.18);
}
/* Keep the fixed navbar (white text) legible over the now-white content. */
body.ch1-trending-page .navbar{
	background:var(--color-dark);
}