/**
 * Box Office Collections — hub (archive) styles.
 *
 * Self-contained: the archive loads ONLY this file plus tt-type.css, not
 * auto-collection.css. That file is ~77KB and the archive used maybe 8KB of
 * it. Everything the archive needs — tokens, grid, card, sort bar, pagination,
 * ad slots, empty state — lives here.
 *
 * Class prefix is `tt-hub-`.
 *
 * SURFACE MODEL — this is the change from the previous revision. The list used
 * to be a dark slab dropped into the theme's white page. It read as a foreign
 * object: tracktollywood.com is white throughout, and the panel fought it
 * rather than belonging to it. The list is now the same white the theme paints,
 * and the only colour is carried by the cards, the state badges and the brand
 * violet sampled off the live site (#673AB7 — measurably the most-used colour
 * on the homepage).
 *
 * No markup changes. Every selector here targets classes the template already
 * emits, so this file can be reverted on its own without touching PHP.
 */

.tt-hub {
	/* ---- surfaces ---- */
	--tt-hub-ground:    #FFFFFF;   /* same white the theme paints */
	--tt-hub-card:      #FFFFFF;
	--tt-hub-card-2:    #F4F1FA;   /* poster letterbox bed */
	--tt-hub-raise:     #F7F5FC;   /* stat rows inside a card */

	/* ---- ink ----
	   Not neutral greys. Each carries a slight violet bias so the type sits in
	   the same family as the brand rather than beside it. */
	--tt-hub-ink:       #1B1430;
	--tt-hub-ink-2:     #5A5175;
	/* 4.6:1 on white, which is the floor these 9.5–11.5px labels need (card
	   genre, gross label, card footer, sort label). Must stay in step with
	   --tt-mv-ink-3 (tt-single.css) and --tt-at-ink-3 (tt-article.css): the
	   three files hold one palette under three prefixes. */
	--tt-hub-ink-3:     #6F6790;

	/* ---- lines ---- */
	--tt-hub-rule:      #E8E3F1;
	--tt-hub-rule-2:    #D5CEE6;

	/* ---- brand ---- */
	--tt-hub-accent:    #673AB7;
	--tt-hub-accent-dim:#8B5CF6;
	--tt-hub-accent-deep:#4A148C;
	--tt-hub-accent-tint:#F2ECFB;

	/* ---- lifecycle states ----
	   Still spread deliberately across the spectrum so the four are separable
	   at a glance, but re-cut for a white ground: each is now a dark ink on a
	   pale tint rather than a dark ink on a saturated fill. A saturated chip
	   inverted straight from the dark theme turned into four shouting blocks
	   once the card behind it went white. */
	--tt-hub-live:      #E7F6EF;  --tt-hub-live-on:     #046C4E;  --tt-hub-live-line:     #B7E4CE;
	--tt-hub-advance:   #FDF2DF;  --tt-hub-advance-on:  #8A3F06;  --tt-hub-advance-line:  #F0D8AC;
	--tt-hub-upcoming:  #E6F3FB;  --tt-hub-upcoming-on: #075985;  --tt-hub-upcoming-line: #BFE0F2;
	--tt-hub-final:     #EFEDF4;  --tt-hub-final-on:    #54506B;  --tt-hub-final-line:    #DCD8E6;

	/* Falls back to the old local stacks if tt-type.css somehow fails to load,
	   which on this install means WP Rocket's Remove Unused CSS having eaten
	   it — the layout must not collapse in that case, only lose its faces. */
	--tt-hub-font: var(--tt-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	--tt-hub-mono: var(--tt-mono, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace);
	--tt-hub-display: var(--tt-display, Impact, 'Haettenschweiler', sans-serif);

	max-width: 1180px;
	margin: 24px auto;
	padding: 0 clamp(14px, 3vw, 26px);
	background: var(--tt-hub-ground);
	color: var(--tt-hub-ink);
	font-family: var(--tt-hub-font);
	box-sizing: border-box;
}

.tt-hub *,
.tt-hub *::before,
.tt-hub *::after { box-sizing: border-box; }

/* =========================================================================
   HEADER
   ========================================================================= */

.tt-hub-header {
	margin: 0 calc(clamp(14px, 3vw, 26px) * -1) 20px;
	padding: 28px clamp(14px, 3vw, 26px) 22px;
	/* A wash rather than a filled band: it marks the top of the page without
	   putting a hard edge across a white template. */
	background: linear-gradient(180deg, #F6F1FD 0%, var(--tt-hub-ground) 100%);
	border-bottom: 1px solid var(--tt-hub-rule);
}

/* font-family is pinned on every heading, not just inherited from .tt-hub.
   A theme rule that targets `h1`/`h3` directly beats container inheritance
   regardless of specificity, and Newspaper does exactly that — card titles
   came out in the theme's Roboto. The theme's font is also client-
   configurable in tagDiv's options, so inheritance is not safe to rely on.
   Same reasoning as the var(--tt-font) pins in auto-collection.css. */
.tt-hub .tt-hub-title {
	font-family: var(--tt-hub-display);
	font-size: clamp(27px, 4.4vw, 40px);
	font-weight: 400;               /* Anton ships one weight; 700 would synthesise a fake bold */
	letter-spacing: .012em;
	line-height: 1.06;
	text-transform: uppercase;
	margin: 0 0 8px;
	color: var(--tt-hub-ink);
	text-wrap: balance;
}

.tt-hub .tt-hub-desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--tt-hub-ink-2);
	max-width: 62ch;
}

/* =========================================================================
   HEADER STATS

   Counts for the whole tracker, not the current filter. They sit above the
   filter deliberately: they are the thing that tells you what narrowing the
   list would actually get you.
   ========================================================================= */

.tt-hub-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin-top: 16px;
}

.tt-hub-stat b {
	display: block;
	font-family: var(--tt-hub-display);
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .01em;
}

.tt-hub-stat span {
	display: block;
	margin-top: 3px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--tt-hub-ink-3);
}

/* Each count wears the colour its own cards wear, so the eye can connect the
   number to the badges further down without reading either. */
.tt-hub-stat--live b { color: var(--tt-hub-accent); }
.tt-hub-stat--soon b { color: #B45309; }
.tt-hub-stat--done b { color: var(--tt-hub-ink-3); }

/* =========================================================================
   LIFECYCLE FILTER
   ========================================================================= */

.tt-hub-filter {
	display: inline-flex;
	gap: 3px;
	padding: 3px;
	margin-bottom: 14px;
	background: #F1EEF7;
	border: 1px solid var(--tt-hub-rule);
	border-radius: 11px;
}

.tt-hub .tt-hub-filter-btn {
	font-family: var(--tt-hub-font);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	padding: 8px 15px;
	border-radius: 8px;
	color: var(--tt-hub-ink-2);
	text-decoration: none;
	transition: background .15s, color .15s;
}

.tt-hub .tt-hub-filter-btn:hover { color: var(--tt-hub-accent-deep); }

/* Segmented, not pills: these three are mutually exclusive views of one list,
   where the sort row below offers an orthogonal choice. Giving them different
   shapes is what says so. */
.tt-hub .tt-hub-filter-btn--active {
	background: var(--tt-hub-accent);
	color: #fff;
	box-shadow: 0 2px 8px -3px rgba(103, 58, 183, .7);
}

.tt-hub .tt-hub-filter-btn--active:hover { color: #fff; }

/* =========================================================================
   SORT BAR
   ========================================================================= */

.tt-hub-sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-bottom: 18px;
}

.tt-hub-sort-label {
	font-family: var(--tt-hub-mono);
	font-size: 10px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--tt-hub-ink-3);
	margin-right: 2px;
}

.tt-hub .tt-hub-sort-btn {
	font-family: var(--tt-hub-font);
	font-size: 12.5px;
	font-weight: 650;
	line-height: 1;
	padding: 8px 14px;
	border: 1px solid var(--tt-hub-rule-2);
	border-radius: 100px;
	background: var(--tt-hub-card);
	color: var(--tt-hub-ink-2);
	text-decoration: none;
	transition: border-color .15s, color .15s, background .15s;
}

.tt-hub .tt-hub-sort-btn:hover {
	border-color: var(--tt-hub-accent-dim);
	color: var(--tt-hub-accent-deep);
	background: var(--tt-hub-accent-tint);
}

.tt-hub .tt-hub-sort-btn--active {
	background: var(--tt-hub-accent);
	border-color: var(--tt-hub-accent);
	color: #fff;
	box-shadow: 0 4px 12px -5px rgba(103, 58, 183, .65);
}

.tt-hub .tt-hub-sort-btn--active:hover {
	background: var(--tt-hub-accent-deep);
	border-color: var(--tt-hub-accent-deep);
	color: #fff;
}

.tt-hub a:focus-visible,
.tt-hub button:focus-visible {
	outline: 2px solid var(--tt-hub-accent);
	outline-offset: 2px;
	border-radius: 6px;
}

/* =========================================================================
   GRID

   auto-fill + minmax means the browser picks the column count from available
   width. No media queries at the top end and — importantly — no server
   involvement; posts_per_page stays 12 whatever the column count is.

   The track floor is what decides that column count, and it has one job
   beyond sizing the card: every count it can produce must DIVIDE 12.

   At the previous 205px floor the 1128px content box resolved to five
   columns, and 12 does not divide by five — so every full page rendered
   5 + 5 + 2 and left three empty slots in the last row. Not just on the final
   page, where a short row is expected, but on every page of the run, which
   reads as a page that failed to load rather than one that is full.

   240px pins the ladder to 4 / 3 / 2 across every width this grid can be
   asked to render:

     1128px (the content cap)  floor(1142 / 254) = 4   12 = 3 rows
      ~900px                   floor( 914 / 254) = 3   12 = 4 rows
      ~700px                   floor( 714 / 254) = 2   12 = 6 rows
      <560px                   pinned to 2 below       12 = 6 rows

   Five would need a 1256px content box, which the 1180px shell cannot give,
   and one is ruled out by the phone rule below. So every count that can occur
   divides 12 exactly, and no full page is ever ragged again — while the
   column count still comes from the browser rather than from a breakpoint
   ladder that would have to be kept in step with posts_per_page by hand.

   The card grows from ~205px to ~271px as a result, which the poster carries
   happily; it is the same 2:3 crop at a larger size.
   ========================================================================= */

.tt-hub-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

@media (max-width: 560px) {
	.tt-hub-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

/* =========================================================================
   CARD
   ========================================================================= */

.tt-hub .tt-hub-card {
	display: flex;
	flex-direction: column;
	background: var(--tt-hub-card);
	border: 1px solid var(--tt-hub-rule);
	border-radius: 15px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	position: relative;              /* the state badge is positioned against this */
	transition: border-color .18s, transform .18s, box-shadow .18s;
}

.tt-hub .tt-hub-card:hover {
	border-color: var(--tt-hub-accent);
	transform: translateY(-3px);
	box-shadow: 0 16px 34px -20px rgba(103, 58, 183, .55);
}

/* ---- poster -------------------------------------------------------------
   Fixed 2:3 now that the poster is the top of a portrait card rather than a
   side column that had to stretch to whatever height the body came out at.

   Source posters vary from 0.56 to 0.81 aspect, so a single crop cannot work
   for all of them. object-fit:contain shows every poster whole, over a
   blurred copy of itself that fills the remaining space.
   ------------------------------------------------------------------------ */

.tt-hub-card-poster {
	position: relative;
	overflow: hidden;
	aspect-ratio: 2 / 3;
	flex: none;
	background: var(--tt-hub-card-2);
}

.tt-hub-card-poster img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	margin: 0;
	max-width: none;      /* theme resets often force max-width:100% + auto height */
	border-radius: 0;
}

/* Backdrop deliberately points at the small (medium) size. Blur cost scales
   with source pixels, and detail is invisible under a 16px blur — using the
   full-size poster here was ~50x the work for an identical result.

   brightness is lifted from the dark theme's .5: the letterbox bars now sit
   against a white card, and a near-black blur read as a hole punched in it. */
.tt-hub-card-poster img.tt-hub-card-poster-bg {
	object-fit: cover;
	filter: blur(16px) saturate(1.5) brightness(.82);
	transform: scale(1.4);
}

.tt-hub-card-poster img.tt-hub-card-poster-fg {
	object-fit: contain;
}

.tt-hub-card-poster::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 -1px 0 var(--tt-hub-rule);
	pointer-events: none;
}

.tt-hub-card-poster--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	background: linear-gradient(150deg, #EDE7F6 0%, #DCD3EE 100%);
	color: rgba(74, 20, 140, .28);
}

/* ---- body ---- */

.tt-hub-card-body {
	padding: 12px 13px 11px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1;
	min-width: 0;
}

/* ---- state badge --------------------------------------------------------
   Lifted out of the body flow and onto the artwork. The previous revision
   kept it in the body specifically because a chip over arbitrary poster art
   could not be trusted for contrast — that reasoning held while the chip was
   a translucent tint. These chips are opaque, with their own border and a
   dark ink on a pale fill, so they carry their own contrast regardless of
   what is behind them.

   Anchored to .tt-hub-card-poster, which the template now renders it inside.
   Positioning it against the card instead would look identical today and
   quietly wrong the moment the poster stopped being the thing at the card's
   top-left corner.
   ------------------------------------------------------------------------ */

.tt-hub-card-badge {
	position: absolute;
	top: 9px;
	left: 9px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .085em;
	text-transform: uppercase;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 100px;
	border: 1px solid transparent;
	/* Poster art can be busy; a hairline of white separates the chip from it
	   without needing a drop shadow. */
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
}

.tt-hub-card-badge::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.tt-hub-badge--live     { background: var(--tt-hub-live);     color: var(--tt-hub-live-on);     border-color: var(--tt-hub-live-line); }
.tt-hub-badge--advance  { background: var(--tt-hub-advance);  color: var(--tt-hub-advance-on);  border-color: var(--tt-hub-advance-line); }
.tt-hub-badge--upcoming { background: var(--tt-hub-upcoming); color: var(--tt-hub-upcoming-on); border-color: var(--tt-hub-upcoming-line); }
.tt-hub-badge--final    { background: var(--tt-hub-final);    color: var(--tt-hub-final-on);    border-color: var(--tt-hub-final-line); }

.tt-hub-badge--live::before { animation: tt-hub-pulse 1.8s ease-in-out infinite; }

/* ---- day marker ---------------------------------------------------------
   Opposite corner to the state badge, and deliberately the inverse of it:
   dark fill, light ink. The two chips say different kinds of thing — one is
   a status, one is a count — and reading as a matched pair would blur that.

   Dark-on-poster rather than the pale treatment used by the state badge,
   because at the top-right it frequently lands on a bright sky or a title
   card, where a pale chip disappears. The white hairline holds it off busy
   artwork the same way. */
.tt-hub-card-daybadge {
	position: absolute;
	top: 9px;
	right: 9px;
	z-index: 2;
	font-family: var(--tt-hub-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 7px;
	background: rgba(27, 20, 48, .78);
	color: #fff;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .42);
	white-space: nowrap;
	max-width: calc(100% - 18px);
	overflow: hidden;
	text-overflow: ellipsis;
}

@keyframes tt-hub-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .25; }
}

/* ---- release strip ------------------------------------------------------
   Reads over whatever the poster's bottom edge happens to be, so it carries
   its own scrim rather than trusting the artwork. The gradient runs to fully
   transparent at the top so it reads as light falling off the poster instead
   of a bar stuck across it. */
.tt-hub-card-release {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 16px 9px 7px;
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.3;
	color: rgba(255, 255, 255, .82);
	background: linear-gradient(0deg, rgba(18, 12, 33, .88) 25%, rgba(18, 12, 33, 0));
	pointer-events: none;
}

.tt-hub-card-release b {
	font-family: var(--tt-hub-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}

/* A date in the future is the whole proposition of an unreleased film, so it
   gets the amber the advance language uses everywhere else on this page. */
.tt-hub-card-release--soon b { color: #FCD9A0; }

/* ---- title + genre ---- */

.tt-hub .tt-hub-card-title {
	font-family: var(--tt-hub-font);
	font-size: 14px;
	font-weight: 750;
	letter-spacing: -.005em;
	line-height: 1.28;
	margin: 0;
	color: var(--tt-hub-ink);
	/* Two lines, then ellipsis. The box is sized off the line-height rather
	   than a rounded pixel value: a hard 36px against two 15.4px lines left a
	   sliver of the third line visible under the ellipsis. */
	min-height: calc(1.28em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* Titles include unbroken 50-character slugs. break-word rather than
	   anywhere: anywhere also shrinks the element's min-content width, which
	   is how a name ends up rendering one letter per line. */
	overflow-wrap: break-word;
}

.tt-hub-card-genre {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--tt-hub-ink-3);
	margin-top: -3px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- headline figure ----------------------------------------------------
   India Gross is what the reader came for, so it gets the display face and
   the only gradient on the card. Matching the movie hub's hero treatment is
   deliberate: a card and the page it opens should read as the same object.
   ------------------------------------------------------------------------ */

.tt-hub-card-hero {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.tt-hub-card-gross {
	font-family: var(--tt-hub-display);
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .005em;
	background: linear-gradient(170deg, var(--tt-hub-accent-deep), #7C3AED);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	/* Painted colour as well as the clip, so a browser that ignores
	   background-clip:text still gets a legible figure instead of a
	   transparent one. */
	color: var(--tt-hub-accent-deep);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	/* Same paint defect the hub hero had — see the long note on .tt-mv-big in
	   tt-single.css. The gradient is the only thing inking this figure, a
	   background only covers its own box, and Anton's ink does not fit a
	   line-height:1 box: at 28px the digits clear it by 1.7px but the comma's
	   tail hangs 0.8px past the bottom, so it is erased and "₹1,219.96 Cr"
	   loses the one mark that separates it from "₹1219.96". Every film over
	   ₹1,000 Cr on the grid hits it.

	   Fixed the same way, and the two surfaces are meant to stay identical —
	   this figure and the hero it opens are deliberately the same treatment.
	   Not given the hero's separator span as well: at 28px the comma is not
	   competing with a 62px decimal point, so restoring the tail is enough.

	   overflow:hidden above clips at the PADDING edge, so the padding really
	   does buy room rather than being trimmed straight back off; it is here for
	   the ellipsis and is unaffected. The negative margin returns the space in
	   the column flex parent, so .tt-hub-card-gross-lab under it does not move. */
	padding-bottom: .1em;
	margin-bottom: -.1em;
}

.tt-hub .tt-hub-unit { margin-left: 2px; }

/* The unit is not decoration — Cr against L is a hundredfold difference, and K
   against L a hundredfold again. Set in the mono face rather than inheriting
   Anton, which at a third of the figure's size renders "Cr" and "K" as narrow
   condensed marks that dissolve next to a 28px numeral. Mono at .48em, bold,
   in the mid ink: reads as a unit, not as a flourish.

   Still opts out of the gradient. A flat ink is more legible at this size,
   and the gradient belongs to the number. */
.tt-hub-card-gross .tt-hub-unit {
	font-family: var(--tt-hub-mono);
	font-size: .48em;
	font-weight: 700;
	letter-spacing: -.01em;
	margin-left: 3px;
	-webkit-text-fill-color: var(--tt-hub-ink-2);
	color: var(--tt-hub-ink-2);
}

.tt-hub-card-grosslab {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--tt-hub-ink-3);
}

/* ---- supporting stat rows ----------------------------------------------
   Two tinted rows: today's take in brand violet, the rolling next-day
   advance in amber. Colour-coding them apart matters because they are two
   different numbers about two different days sitting one above the other.
   ------------------------------------------------------------------------ */

.tt-hub-card-sub,
.tt-hub-card-advance {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	font-size: 11.5px;
	line-height: 1.2;
	padding: 6px 9px;
	border-radius: 8px;
	border: 1px solid transparent;
}

/* The advance state puts TWO figures in this row (tickets and shows) instead
   of the usual day-chip plus one. At a 205px track that pair does not fit on
   one line, and without wrapping the second figure collided with the first
   label. Wrapping is the right answer rather than shrinking the type: these
   are the only numbers on an advance card. */
.tt-hub-card-sub { flex-wrap: wrap; row-gap: 3px; }

.tt-hub-card-sub {
	background: var(--tt-hub-accent-tint);
	border-color: #E2D6F6;
	color: var(--tt-hub-ink-2);
}

/* The separator was a visible dot between two inline spans. With the row now
   a tinted block it becomes the gap that pushes the figure to the right
   edge, which is where the eye scans for a number. Only the advance state
   still uses it, to hold its ticket and show counts apart. */
.tt-hub-card-sep {
	flex: 1 1 auto;
	min-width: 4px;
}

.tt-hub-card-today {
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tt-hub-ink-3);
	white-space: nowrap;
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	min-width: 0;
}

/* With the day chip moved to the poster this row holds one label and one
   figure, so it spans the row and pushes them to opposite ends rather than
   sitting as an inline clump against the left edge. */
.tt-hub-card-today--solo {
	flex: 1;
	justify-content: space-between;
	gap: 8px;
}

.tt-hub-card-today b {
	font-family: var(--tt-hub-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--tt-hub-accent-deep);
	font-variant-numeric: tabular-nums;
}

/* The advance row's own label/figure split, which the markup gives as a
   <span> wrapping the label followed by a bare figure. */
.tt-hub-card-advance {
	background: var(--tt-hub-advance);
	border-color: var(--tt-hub-advance-line);
	/* Not space-between, and not the row `gap`. The figure arrives as three
	   flex items — label span, a bare "₹3.09" text node, and the unit span —
	   so both of those would have opened a gap between the amount and its own
	   unit. The label pushes itself away instead, leaving amount and unit
	   touching as one figure. */
	gap: 0;
	justify-content: flex-start;
	font-family: var(--tt-hub-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--tt-hub-advance-on);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
}

/* :not() is load-bearing. The figure's unit is also a <span> inside this row
   (`<span class="tt-hub-unit">Cr</span>`), so a bare `span` selector caught it
   too and printed the unit as an uppercased "CR" in the label's font. */
.tt-hub-card-advance > span:not(.tt-hub-unit) {
	font-family: var(--tt-hub-font);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #A05A17;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-right: auto;
	padding-right: 8px;
}

/* Same reasoning as the headline unit: same ink as the figure it belongs to,
   not the lighter tone used for the label beside it. */
.tt-hub-card-advance .tt-hub-unit {
	font-size: .9em;
	color: var(--tt-hub-advance-on);
}

/* ---- upcoming note ---- */

.tt-hub-card-note {
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--tt-hub-upcoming-on);
	background: var(--tt-hub-upcoming);
	border: 1px solid var(--tt-hub-upcoming-line);
	border-radius: 9px;
	padding: 9px 11px;
}

/* ---- footer ---- */

.tt-hub-card-footer {
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px dashed var(--tt-hub-rule);
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--tt-hub-mono);
	font-size: 9.5px;
	line-height: 1.35;
	color: var(--tt-hub-ink-3);
}

/* Two cards to a row on a phone leaves this row about 145px. The label is
   shortened to "17 Aug ADV" in the template so it fits on one line at that
   width; this stays as the safety net for a locale whose month abbreviation
   runs longer, and it wraps only when the content genuinely does not fit
   rather than forcing a break. */
@media (max-width: 560px) {
	.tt-hub-card-advance {
		flex-wrap: wrap;
		row-gap: 2px;
	}
	.tt-hub-card-advance > span:not(.tt-hub-unit) {
		letter-spacing: .04em;
		padding-right: 6px;
	}
}

@media (max-width: 420px) {
	.tt-hub-card-body { padding: 10px 10px 9px; gap: 6px; }
	.tt-hub .tt-hub-card-title { font-size: 12.5px; }
	.tt-hub-card-gross { font-size: 22px; }
	.tt-hub-card-sub,
	.tt-hub-card-advance { padding: 5px 8px; font-size: 11px; }
	.tt-hub-card-footer { font-size: 9px; }
}

/* =========================================================================
   AD SLOTS
   Rendered by TTBO_Auto_Collection_Settings::render_slot(). The mid slot is
   a grid child and must span the full row.
   ========================================================================= */

.tt-hub .tt-ac-ad-slot { margin: 16px 0; }
.tt-hub-grid > .tt-ac-ad-slot { grid-column: 1 / -1; margin: 4px 0; }

/* AdSense auto ads land as a direct child of whatever container they pick,
   so on this page they become items of .tt-hub-grid and get auto-placed into
   one card column. Measured on production 2026-08-19 at a 1128px content
   width: 272 x 640 inside the 4 x 271.5px card grid, against 1128 x 248 for
   the same unit where its parent was block-level. Same span fix as the slot
   above, kept broad because `grid-column` is inert wherever the parent is not
   a grid, and scoped to .tt-hub so a combined stylesheet cannot leak it to the
   rest of the site. See the longer note in tt-single.css. */
.tt-hub .google-auto-placed,
.tt-hub ins.adsbygoogle {
	grid-column: 1 / -1;
	min-width: 0;
}

/* =========================================================================
   PAGINATION
   ========================================================================= */

.tt-hub-pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 28px;
}

.tt-hub-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--tt-hub-rule-2);
	border-radius: 10px;
	background: var(--tt-hub-card);
	color: var(--tt-hub-ink-2);
	font-family: var(--tt-hub-mono);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s, color .15s, background .15s;
}

.tt-hub-pagination a.page-numbers:hover {
	border-color: var(--tt-hub-accent);
	color: var(--tt-hub-accent-deep);
	background: var(--tt-hub-accent-tint);
}

.tt-hub-pagination .page-numbers.current {
	background: var(--tt-hub-accent);
	border-color: var(--tt-hub-accent);
	color: #fff;
}

.tt-hub-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--tt-hub-ink-3);
}

/* =========================================================================
   CROSS-LINK + EMPTY STATE
   ========================================================================= */

.tt-hub-crosslink {
	margin-top: 26px;
	text-align: center;
}

.tt-hub .tt-hub-crosslink a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 700;
	padding: 11px 20px;
	border-radius: 100px;
	border: 1px solid var(--tt-hub-rule-2);
	background: var(--tt-hub-card);
	color: var(--tt-hub-accent-deep);
	text-decoration: none;
	transition: border-color .15s, background .15s;
}

.tt-hub .tt-hub-crosslink a:hover {
	border-color: var(--tt-hub-accent);
	background: var(--tt-hub-accent-tint);
}

.tt-hub-empty {
	text-align: center;
	padding: 48px 20px;
	font-size: 14px;
	color: var(--tt-hub-ink-3);
	background: var(--tt-hub-raise);
	border: 1px solid var(--tt-hub-rule);
	border-radius: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.tt-hub *,
	.tt-hub *::before,
	.tt-hub *::after {
		animation: none !important;
		transition: none !important;
	}
	.tt-hub .tt-hub-card:hover { transform: none; }
}