/**
 * Tollywood Hub — front-end styles.
 *
 * Type is deliberately left to the Newspaper theme: nothing here sets a
 * font-family, so headings and body copy inherit tagDiv's typography.
 * Only colour, spacing and layout are defined.
 */

.th-wrap {
	--th-navy: #1a1a3c;
	--th-navy-soft: rgba(255, 255, 255, 0.045);
	--th-label: #8f8fb5;
	--th-on-dark: #ffffff;
	--th-on-dark-dim: #ccccdf;
	--th-ink: #111111;
	--th-muted: #767676;
	--th-line: #e8e8ee;
	--th-accent: #e01a1a;
	--th-radius-lg: 24px;
	--th-radius-md: 14px;
	--th-radius-sm: 8px;

	max-width: 1140px;
	margin: 30px auto 60px;
	padding: 0 20px;
	box-sizing: border-box;
}

.th-wrap *,
.th-wrap *::before,
.th-wrap *::after {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------------------
   Hero infobox
   ------------------------------------------------------------------------ */

.th-hero {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 30px;
	padding: 26px;
	background: var(--th-navy);
	border-radius: var(--th-radius-lg);
	color: var(--th-on-dark);
	/* Poster keeps its own height — the rounded rectangle must not stretch
	   when the info column grows taller. */
	align-items: start;
}

.th-hero__poster {
	border-radius: 16px;
	overflow: hidden;
	line-height: 0;
	background: rgba(255, 255, 255, 0.06);
}

.th-hero__poster img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

/* No image: keep the poster's footprint so the two-column hero grid doesn't
   collapse — show a subtle placeholder with the title's initial. */
.th-hero__poster--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 2 / 3;
	line-height: 1;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.10);
}

.th-hero__initial {
	font-size: 72px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.28);
	text-transform: uppercase;
}

.th-hero__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.th-hero__title {
	margin: 4px 0 22px;
	color: var(--th-on-dark);
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.1;
	font-weight: 800;
}

/* Stat grid ---------------------------------------------------------------- */

.th-stats {
	display: grid;
	gap: 22px 30px;
	padding: 20px 22px;
	background: var(--th-navy-soft);
	border-radius: 16px;
}

.th-stats--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.th-stats--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.th-stat {
	min-width: 0;
}

.th-stat__label {
	display: block;
	margin-bottom: 6px;
	color: var(--th-label);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.th-stat__value {
	display: block;
	color: var(--th-on-dark);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.th-stat__value a {
	color: inherit;
	text-decoration: none;
}

.th-stat__value a:hover,
.th-stat__value a:focus-visible {
	text-decoration: underline;
}

/* "Last updated" footer spanning the full stats panel. */
.th-stats__updated {
	grid-column: 1 / -1;
	margin-top: 2px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--th-on-dark-dim);
	font-size: 12.5px;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   Two-column body (movie page)
   ------------------------------------------------------------------------ */

.th-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
	margin-top: 34px;
}

.th-body__main {
	min-width: 0;
}

.th-body__side {
	min-width: 0;
}

.th-sticky {
	position: sticky;
	top: 90px;
}

/* ---------------------------------------------------------------------------
   Section headings
   ------------------------------------------------------------------------ */

.th-section {
	margin-bottom: 40px;
}

.th-section:last-child {
	margin-bottom: 0;
}

.th-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.th-eyebrow {
	margin: 0 0 14px;
	color: var(--th-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.th-eyebrow--onDark {
	color: var(--th-on-dark);
}

.th-heading {
	margin: 0 0 16px;
	color: var(--th-ink);
	font-size: 22px;
	font-weight: 700;
}

.th-viewall {
	padding: 0;
	background: none;
	border: 0;
	color: var(--th-accent);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: underline;
	white-space: nowrap;
	cursor: pointer;
}

.th-viewall:hover {
	color: #b01010;
}

/* ---------------------------------------------------------------------------
   All-movies modal
   ------------------------------------------------------------------------ */

.th-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

.th-modal[hidden] {
	display: none;
}

.th-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 12, 34, 0.74);
}

.th-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(960px, 100%);
	max-height: 86vh;
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(5, 5, 25, 0.45);
}

.th-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 22px;
	background: var(--th-navy);
}

.th-modal__title {
	margin: 0;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.th-modal__close {
	padding: 2px 6px;
	background: none;
	border: 0;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.th-modal__close:hover {
	color: var(--th-on-dark-dim);
}

.th-modal__body {
	padding: 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

body.th-modal-open {
	overflow: hidden;
}

@media (max-width: 540px) {
	.th-modal {
		padding: 0;
	}

	.th-modal__dialog {
		width: 100%;
		max-height: 100dvh;
		height: 100dvh;
		border-radius: 0;
	}
}

.th-prose {
	line-height: 1.7;
}

.th-prose > *:first-child {
	margin-top: 0;
}

.th-prose > *:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Linked articles (review / box office)
   ------------------------------------------------------------------------ */

.th-article {
	display: block;
	color: inherit;
	text-decoration: none;
}

.th-article img {
	display: block;
	width: 100%;
	height: auto;
}

.th-article--row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--th-line);
}

.th-article--row .th-article__media img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--th-radius-sm);
}

.th-article__title {
	display: block;
	color: var(--th-ink);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.35;
}

.th-article:hover .th-article__title,
.th-article:focus-visible .th-article__title {
	color: var(--th-accent);
}

.th-article__excerpt {
	display: block;
	margin-top: 8px;
	color: var(--th-muted);
	font-size: 15px;
	line-height: 1.6;
}

.th-article__date {
	display: block;
	margin-top: 10px;
	color: var(--th-muted);
	font-size: 13px;
}

.th-article--card {
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(20, 20, 60, 0.08);
}

.th-article--card .th-article__media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.th-article--card .th-article__body {
	display: block;
	padding: 16px 18px 18px;
}

.th-article--card .th-article__title {
	font-size: 18px;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   People tiles (cast, crew, related)
   ------------------------------------------------------------------------ */

.th-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 26px 20px;
}

.th-tile {
	display: block;
	color: inherit;
	text-decoration: none;
}

.th-tile__media {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: #e9e9f0;
	aspect-ratio: 1 / 1;
}

.th-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.25s ease;
}

.th-tile:hover .th-tile__media img {
	transform: scale(1.04);
}

.th-tile--circle .th-tile__media {
	border-radius: 50%;
}

.th-tile__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #9a9ab0;
	font-size: 32px;
	font-weight: 700;
}

.th-tile__name {
	display: block;
	margin-top: 12px;
	color: var(--th-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	/* One line, ellipsized — full name in the tooltip. Keeps every tile the
	   same height so carousel rows stay perfectly aligned. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.th-tile--circle .th-tile__name {
	text-align: center;
}

.th-tile:hover .th-tile__name {
	color: var(--th-accent);
}

/* Long crew credits are truncated rather than pushing the grid out of line. */
.th-tile__role {
	display: -webkit-box;
	margin-top: 4px;
	color: var(--th-muted);
	font-size: 12.5px;
	line-height: 1.35;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Reserve two lines even when the role is short/empty — equal tile
	   heights across the row. */
	min-height: 2.7em;
}

.th-tile--circle .th-tile__role {
	text-align: center;
}

/* Draft-profile tiles render as buttons — reset to look identical to links. */
button.th-tile {
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Toast ("Profile coming soon")
   ------------------------------------------------------------------------ */

.th-toast {
	position: fixed;
	left: 50%;
	bottom: 34px;
	transform: translateX(-50%) translateY(12px);
	z-index: 100001;
	padding: 13px 24px;
	background: rgba(44, 44, 46, 0.96);
	color: #fff;
	font-size: 15px;
	line-height: 1.3;
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.th-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ---------------------------------------------------------------------------
   Movie posters (popular movies)
   ------------------------------------------------------------------------ */

.th-posters {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 26px 20px;
}

.th-poster {
	display: block;
	color: inherit;
	text-decoration: none;
}

.th-poster__media {
	display: block;
	overflow: hidden;
	border-radius: var(--th-radius-sm);
	background: #e9e9f0;
	aspect-ratio: 2 / 3;
}

.th-poster__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.th-poster__title {
	display: block;
	margin-top: 10px;
	color: var(--th-ink);
	font-size: 13.5px;
	font-weight: 700;
	text-align: center;
	line-height: 1.35;
}

.th-poster:hover .th-poster__title {
	color: var(--th-accent);
}

/* ---------------------------------------------------------------------------
   Dark biography panels (person page)
   ------------------------------------------------------------------------ */

.th-panel {
	position: relative;
	margin-top: 22px;
	padding: 24px 30px 26px;
	background: var(--th-navy);
	border-radius: var(--th-radius-lg);
	color: var(--th-on-dark-dim);
}

.th-panel + .th-section {
	margin-top: 44px;
}

.th-prose--onDark {
	color: var(--th-on-dark-dim);
	font-size: 15.5px;
}

.th-prose--onDark a {
	color: #9fb8ff;
}

.th-prose--onDark h3,
.th-prose--onDark h4,
.th-prose--onDark strong {
	color: var(--th-on-dark);
}

/* Collapsed state, expanded by frontend.js */
.th-panel--clamped .th-panel__body {
	max-height: 190px;
	overflow: hidden;
}

.th-panel--clamped .th-panel__body::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 52px;
	height: 70px;
	background: linear-gradient(to bottom, rgba(26, 26, 60, 0), var(--th-navy));
	pointer-events: none;
}

.th-readmore {
	display: block;
	margin: 14px 0 0 auto;
	padding: 0;
	background: none;
	border: 0;
	color: var(--th-on-dark);
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

.th-readmore:hover {
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Box office card (powered by the TTBO tracking plugin)
   ------------------------------------------------------------------------ */

/* Card renders in two slots: sidebar on desktop, after the Review block on
   mobile. Only one is ever visible. */
.th-bo-slot--mobile {
	display: none;
}

@media (max-width: 1000px) {
	.th-bo-slot--mobile {
		display: block;
		max-width: 420px;
	}

	.th-bo-slot--desktop {
		display: none;
	}
}

.th-bo {
	display: block;
	background: var(--th-navy);
	border-radius: 18px;
	overflow: hidden;
	color: var(--th-on-dark);
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(20, 20, 60, 0.16);
	transition: transform 0.15s ease;
}

.th-bo:hover {
	transform: translateY(-2px);
}

.th-bo__media {
	display: block;
	position: relative;
	background: rgba(255, 255, 255, 0.06);
}

.th-bo__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center 25%;
}

.th-bo__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	background: #444;
}

.th-bo--live .th-bo__badge {
	background: #16a34a;
}

.th-bo--advance .th-bo__badge {
	background: #5b3bd4;
}

.th-bo--final .th-bo__badge {
	background: #6d6d94;
}

.th-bo__body {
	display: block;
	padding: 15px 17px 17px;
}

.th-bo__title {
	display: block;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.th-bo__genre {
	display: block;
	margin-top: 3px;
	color: var(--th-on-dark-dim);
	font-size: 12px;
}

.th-bo__text {
	display: block;
	margin-top: 11px;
	color: var(--th-on-dark-dim);
	font-size: 13px;
	line-height: 1.55;
}

.th-bo__up {
	color: #4ade80;
	font-weight: 700;
}

.th-bo__down {
	color: #f87171;
	font-weight: 700;
}

.th-bo__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-top: 14px;
	padding: 12px 10px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	text-align: center;
}

.th-bo__stat {
	display: block;
	min-width: 0;
}

.th-bo__stat-value {
	display: block;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.th-bo__stat-label {
	display: block;
	margin-top: 4px;
	color: var(--th-label);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.25;
	text-transform: uppercase;
}

.th-bo__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
}

.th-bo__cta {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.th-bo:hover .th-bo__cta {
	text-decoration: underline;
}

.th-bo__asof {
	color: #6d6d94;
	font-size: 10.5px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Latest News (tag-linked articles)
   ------------------------------------------------------------------------ */

.th-news {
	display: grid;
	gap: 22px;
}

.th-news .th-article--row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
   FAQ accordions
   ------------------------------------------------------------------------ */

.th-faqs {
	display: grid;
	gap: 12px;
}

.th-faq {
	background: #fff;
	border: 1px solid var(--th-line);
	border-radius: 14px;
	overflow: hidden;
}

.th-faq summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 20px;
	color: var(--th-ink);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.th-faq summary::-webkit-details-marker {
	display: none;
}

.th-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	color: var(--th-muted);
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
}

.th-faq[open] summary::after {
	content: "\2212"; /* minus sign */
}

.th-faq[open] summary {
	border-bottom: 1px solid var(--th-line);
}

.th-faq__a {
	padding: 14px 20px 16px;
	color: var(--th-muted);
	font-size: 15px;
	line-height: 1.65;
}

.th-faq__a p {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Single-row carousels (cast, crew, popular movies, related)
   ------------------------------------------------------------------------ */

.th-carousel {
	position: relative;
}

[data-th-carousel] {
	display: flex;
	flex-wrap: nowrap;
	gap: 18px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;        /* Firefox */
	padding: 2px 2px 6px;
}

[data-th-carousel]::-webkit-scrollbar {
	display: none;                /* Chrome / Safari */
}

[data-th-carousel] > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* Fixed tile widths: however many fit the visible canvas are shown,
   the rest scroll into view. */
.th-tiles[data-th-carousel] > .th-tile {
	width: 128px;
}

.th-tiles--circle[data-th-carousel] > .th-tile {
	width: 118px;
}

.th-posters[data-th-carousel] > .th-poster {
	width: 156px;
}

/* Prev/next buttons — desktop pointer devices only. */
.th-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(28, 28, 32, 0.78);
	color: #fff;
	cursor: pointer;
	z-index: 6;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: background 0.15s ease;
}

.th-carousel__nav:hover {
	background: rgba(28, 28, 32, 0.95);
}

.th-carousel__nav--prev {
	left: -8px;
}

.th-carousel__nav--next {
	right: -8px;
}

.th-carousel__nav[hidden] {
	display: none;
}

/* Touch devices swipe instead — hide the buttons entirely. */
@media (hover: none), (pointer: coarse) {
	.th-carousel__nav {
		display: none !important;
	}
}

/* ---------------------------------------------------------------------------
   Accessibility + responsive
   ------------------------------------------------------------------------ */

.th-wrap a:focus-visible,
.th-wrap button:focus-visible {
	outline: 2px solid var(--th-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.th-wrap * {
		transition: none !important;
	}
}

@media (max-width: 1000px) {
	.th-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
	}

	.th-sticky {
		position: static;
	}

	.th-body__side .th-article--card {
		max-width: 420px;
	}
}

@media (max-width: 782px) {
	.th-hero {
		grid-template-columns: 160px minmax(0, 1fr);
		gap: 20px;
		padding: 20px;
	}

	.th-stats--3,
	.th-stats--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.th-article--row {
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 14px;
	}

	.th-article__title {
		font-size: 17px;
	}

	.th-article__excerpt {
		display: none;
	}
}

@media (max-width: 540px) {
	/* Matches the mobile mock: poster centered, title centered under it,
	   stats staying in a two-column grid. */
	.th-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.th-hero__poster {
		max-width: 230px;
		margin: 0 auto;
	}

	.th-hero__title {
		text-align: center;
		margin: 18px 0 20px;
	}

	.th-stats--3,
	.th-stats--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 20px;
		padding: 18px 16px;
	}

	.th-panel {
		padding: 20px;
	}

	.th-tiles {
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
		gap: 20px 14px;
	}

	.th-tiles[data-th-carousel] > .th-tile {
		width: 108px;
	}

	.th-posters[data-th-carousel] > .th-poster {
		width: 128px;
	}

	.th-posters {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}
}

@media (max-width: 360px) {
	/* Only the very narrowest phones drop to a single stat column. */
	.th-stats--3,
	.th-stats--2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   Now Showing / Upcoming widgets (self-contained: usable outside .th-wrap)
   ------------------------------------------------------------------------ */

.th-w {
	--thw-line: #e8e8ee;
	--thw-ink: #111111;
	--thw-muted: #767676;
	--thw-green: #16a34a;
	--thw-purple: #5b3bd4;

	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--thw-line);
	border-radius: 12px;
	padding: 16px;
}

.th-w *,
.th-w *::before,
.th-w *::after {
	box-sizing: inherit;
}

.th-w__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.th-w__title {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--thw-ink);
	font-size: 15px;
	font-weight: 700;
}

.th-w__ico {
	flex: 0 0 auto;
	vertical-align: -2px;
}

.th-w__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--thw-green);
}

/* Strip: 5 cards visible, 6th peeking, horizontal scroll to the rest. */
.th-w--strip .th-w__track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
	/* Let the browser decide axis per-gesture: horizontal swipes scroll the
	   strip, vertical swipes scroll the page. Do NOT set touch-action: pan-x
	   here — it suppresses vertical gestures on the strip, trapping the page
	   scroll. Contain only the horizontal overscroll so a swipe past the end
	   doesn't trigger browser back-navigation; vertical still chains out. */
	overscroll-behavior-x: contain;
}

.th-w--strip .th-w__track::-webkit-scrollbar {
	display: none;
}

.th-w__card {
	flex: 0 0 116px;
	min-width: 0;
	display: block;
	color: inherit;
	text-decoration: none;
}

.th-w__poster {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: #e9e9f0;
	aspect-ratio: 2 / 3;
	min-width: 0;
}

.th-w__img,
.th-w__poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.th-w__noposter {
	display: block;
	width: 100%;
	height: 100%;
}

.th-w__pill {
	position: absolute;
	top: 6px;
	left: 6px;
	padding: 2px 8px;
	border-radius: 12px;
	background: var(--thw-green);
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.th-w__ribbon {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3px 0;
	background: var(--thw-purple);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	text-align: center;
}

.th-w__name {
	display: block;
	margin-top: 7px;
	color: var(--thw-ink);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.th-w__card:hover .th-w__name,
.th-w__row:hover .th-w__name {
	color: #e01a1a;
}

.th-w__sub {
	display: block;
	margin-top: 2px;
	color: var(--thw-muted);
	font-size: 11px;
	line-height: 1.35;
}

.th-w__gross {
	display: block;
	margin-top: 2px;
	color: var(--thw-green);
	font-size: 12px;
	font-weight: 700;
}

.th-w__soon {
	display: block;
	margin-top: 2px;
	color: var(--thw-purple);
	font-size: 11.5px;
	font-weight: 600;
}

.th-w__viewall {
	color: #e01a1a;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: underline;
	white-space: nowrap;
}

.th-w__foot {
	display: block;
	margin-top: 12px;
	padding-top: 11px;
	border-top: 1px solid var(--thw-line);
	color: #e01a1a;
	font-size: 12.5px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.th-w__foot:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Standalone upcoming page — [tollywood_upcoming_full], month-grouped
   ------------------------------------------------------------------------ */

.th-upfull__h {
	margin: 30px 0 14px;
	padding-left: 10px;
	border-left: 3px solid var(--thw-purple, #5b3bd4);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.th-upfull__h:first-child {
	margin-top: 0;
}

.th-upfull__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 20px 14px;
}

.th-upfull__card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.th-upfull__card:hover .th-w__name {
	color: #e01a1a;
}

@media (max-width: 540px) {
	.th-upfull__grid {
		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	}
}

/* Sidebar list: 5 rows visible (~370px), vertical scroll to the rest. */
.th-w--list .th-w__rows {
	max-height: 372px;
	overflow-y: auto;
	/* Do NOT use overscroll-behavior: contain here — it traps the scroll so
	   reaching the last row won't hand off to the page. 'auto' lets the page
	   continue scrolling once the inner list bottoms out. */
	overscroll-behavior-y: auto;
	padding-right: 4px;
	scrollbar-width: thin;
}

.th-w__row {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	margin-bottom: 12px;
	color: inherit;
	text-decoration: none;
}

.th-w__row:last-child {
	margin-bottom: 0;
}

.th-w__thumb {
	flex: 0 0 46px;
	height: 64px;
	border-radius: 6px;
	overflow: hidden;
	background: #e9e9f0;
}

.th-w--list .th-w__name {
	margin-top: 0;
	font-size: 13.5px;
	white-space: normal;
}

.th-w__body {
	min-width: 0;
}

@media (max-width: 540px) {
	.th-w__card {
		flex-basis: 104px;
	}

	/* Sidebar list on phones: the narrow column left the small thumbnails
	   swimming in whitespace, so scale the image and every text size up a
	   notch for a denser, more legible row. */
	.th-w__title {
		font-size: 17px;
	}

	.th-w__ico {
		width: 18px;
		height: 18px;
	}

	.th-w--list .th-w__rows {
		/* 5 taller rows visible (96px thumb + 16px gap ≈ 112px each), then
		   scroll for the rest — the agreed behaviour, recomputed for the
		   larger mobile row height rather than disabled. */
		max-height: 560px;
	}

	.th-w--list .th-w__row {
		gap: 14px;
		margin-bottom: 16px;
	}

	.th-w--list .th-w__thumb {
		flex-basis: 68px;
		height: 96px;
		border-radius: 8px;
	}

	.th-w--list .th-w__name {
		font-size: 16px;
	}

	.th-w--list .th-w__sub {
		font-size: 13px;
	}

	.th-w--list .th-w__gross {
		font-size: 14.5px;
	}

	.th-w--list .th-w__soon {
		font-size: 13.5px;
	}
}