/* CH1 Trending — white theme (white background). */

body.ch1-trending-white {
	background: #ffffff !important;
}
body.ch1-trending-white main,
body.ch1-trending-white .main,
body.ch1-trending-white #main {
	background: #ffffff !important;
	display: block;
}
body.ch1-trending-white .ts-trending-page-wrap {
	background: #ffffff !important;
}

body.ch1-trending-white .ch1-trending-section {
	position: relative;
	padding: 24px 0 40px;
	background: transparent;
	color: #111111;
	overflow: visible;
	display: block;
}
/* The theme's .content-section is display:flex; a very wide carousel (many
   cards) becomes a flex item that won't shrink, blowing the whole section out
   to several thousand px and pushing the nav off-screen (clipped by the
   theme's overflow-x:hidden). Make the section a normal block so it stays at
   the viewport width and the nav sits at the visible right edge. */
body.ch1-trending-white .ch1-trending-section .container {
	min-width: 0;
	max-width: 100%;
}
/* The theme renders <main> as display:flex, so .ts-trending-page-wrap (the
   only child) becomes a flex item that sizes to its content. With a very wide
   carousel that means the whole page blows out to several thousand px and the
   nav is clipped off-screen. Make <main> a normal block on this page so its
   child fills the viewport instead of expanding to the carousel width. */
body.ch1-trending-white main {
	display: block;
}
body.ch1-trending-white .ch1-trending-section .container {
	max-width: none;
	padding-left: 100px;
	padding-right: 100px;
}
body.ch1-trending-white .ch1-trending-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
	padding: 0 4px;
}
body.ch1-trending-white .ch1-trending-eyebrow {
	margin: 0;
	font-size: 15px;
	letter-spacing: .32em;
	font-weight: 700;
	color: var(--color-main);
	text-transform: uppercase;
}
body.ch1-trending-white .ch1-trending-head-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
body.ch1-trending-white .ch1-trending-title {
	margin: 0;
	font-size: clamp(26px,4vw,46px);
	font-weight: 800;
	letter-spacing: -.5px;
	color: #111111;
}
body.ch1-trending-white .ch1-trending-intro {
	margin: 4px 0 0;
	color: rgba(0,0,0,.6);
	font-size: 18px;
	max-width: 640px;
}
body.ch1-trending-white .ch1-trending-nav {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}
body.ch1-trending-white .ch1-trending-nav button {
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 2px solid var(--color-main);
	background: var(--color-main);
	color: #ffffff;
	font-size: 24px; line-height: 1;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 22px rgba(0,0,0,.32);
	transition: background .25s ease, border-color .25s ease, transform .25s ease, filter .25s ease;
}
body.ch1-trending-white .ch1-trending-nav button:hover:not(:disabled) {
	background: var(--color-main); border-color: var(--color-main); color: #ffffff;
	filter: brightness(0.9);
	transform: scale(1.08);
}
body.ch1-trending-white .ch1-trending-nav button:disabled {
	opacity: .35; cursor: default;
}
body.ch1-trending-white .ch1-trending-carousel {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	padding: 18px 16px 40px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
body.ch1-trending-white .ch1-trending-carousel::-webkit-scrollbar { display: none; }

body.ch1-trending-white .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);
}
body.ch1-trending-white .ch1-trending-card.is-in { opacity: 1; }
body.ch1-trending-white .ch1-trending-card:hover { z-index: 5; }

/* Black "ghost" rank numeral, red on hover. */
body.ch1-trending-white .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;
	color: rgba(0,0,0,.08);
	-webkit-text-fill-color: rgba(0,0,0,.08);
	-webkit-text-stroke: 2px rgba(0,0,0,.35);
	transition: color .3s ease, -webkit-text-fill-color .3s ease, -webkit-text-stroke-color .3s ease, transform .4s ease;
}
body.ch1-trending-white .ch1-trending-card:hover .ch1-trending-rank {
	color: var(--color-main);
	-webkit-text-fill-color: var(--color-main);
	-webkit-text-stroke-color: rgba(0,0,0,.55);
	transform: translateX(4px);
}
	body.ch1-trending-white .ch1-trending-card__media {
		position: relative;
		z-index: 1;
		display: block;
		width: 200px;
		border-radius: 12px;
		overflow: hidden;
		background: transparent;
		border: 2px solid transparent;
		box-shadow: 0 8px 18px rgba(0,0,0,.08);
		transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .3s ease;
	}
body.ch1-trending-white .ch1-trending-card:hover .ch1-trending-card__media {
	transform: scale(1.06);
	box-shadow: 0 14px 28px rgba(0,0,0,.14);
}
body.ch1-trending-white .ch1-trending-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 2/3;
	object-fit: cover;
}
/* Poster stays DIRECTLY visible behind the metadata — no board, no overlay,
   no vignette, no shadow container behind the info. */
body.ch1-trending-white .ch1-trending-card__media::after{
	content:"";
	position:absolute;inset:0;
	background:none;
	transition: background .35s ease;
}
/* Black fade overlay on hover so the title + IMDb score stay readable. */
body.ch1-trending-white .ch1-trending-card:hover .ch1-trending-card__media::after{
	background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 32%, rgba(0,0,0,0) 62%);
}
body.ch1-trending-white .ch1-trending-badge {
	position: absolute; left: 8px; top: 8px; z-index: 2;
	background: var(--color-main); color: #ffffff;
	font-size: 10px; font-weight: 700;
	padding: 3px 8px; border-radius: 999px;
}
/* Red "Trending" bar at the top of the card: removed. */
body.ch1-trending-white .ch1-trending-badge { display:none; }
/* Only the movie name remains on this page: it lives at the bottom, is centered,
   and appears on hover. */
body.ch1-trending-white .ch1-trending-card__content {
	position: absolute;
	left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 14px 14px 16px;
	opacity: 0;
	transform: translateY(8px);
	text-align: center;
	background: transparent;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
body.ch1-trending-white .ch1-trending-card:hover .ch1-trending-card__content {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
/* Tag badges (category + upload time) removed on this page: keep only movie name. */
body.ch1-trending-white .ch1-trending-meta { display:none; }
body.ch1-trending-white .ch1-trending-card__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: #111111;
	text-shadow: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: font-size .25s ease;
}
/* Movie name grows on hover. */
body.ch1-trending-white .ch1-trending-card:hover .ch1-trending-card__title {
	font-size: 20px;
}
body.ch1-trending-white .ch1-trending-card__title a { color: #111111; text-decoration: none; }
/* IMDb score chip shown on hover, below the title. */
body.ch1-trending-white .ch1-trending-imdb {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 700;
	justify-content: center;
}
body.ch1-trending-white .ch1-trending-imdb__score {
	color: #f5c518;
	background: rgba(0,0,0,.55);
	padding: 2px 7px;
	border-radius: 4px;
}
body.ch1-trending-white .ch1-trending-imdb__label {
	color: #f5c518;
	letter-spacing: .5px;
}
body.ch1-trending-white .ch1-trending-stats {
	margin-top: 6px;
	font-size: 11px; color: #111111;
	text-shadow: none;
}
body.ch1-trending-white .ch1-trending-stats strong { color: #111111; }
body.ch1-trending-white .ch1-trending-card:hover .ch1-trending-stats strong { color: var(--color-main); }

/* ---- Hero → white fade transition ----
   The fade lives on the section (inside <main>, z-index 6) so it paints ABOVE
   the fixed .page-header (z-index 0). A transparent→white gradient extends 260px
   ABOVE each section's top edge; as the section scrolls over the dark header the
   seam fades instead of showing a hard white line. */
	body.ch1-trending-white .ch1-trending-section::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: -260px;
	height: 260px;
		background: linear-gradient(to bottom,
		transparent 0%,
		rgba(255,255,255,0.35) 55%,
		rgba(255,255,255,0.7) 80%,
		#ffffff 100%);
	pointer-events: none;
}

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

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