/* Ad placements — values taken from the Aperture prototype's .ad rules.

   The creative is capped by max-width:100% before its nominal width, so a 728px
   leaderboard never forces horizontal page scroll on a phone. That is the one
   place this deviates from the prototype, where the mockup viewport was fixed. */
.tsp-ad{margin:var(--tsp-ad-mt,18px) auto var(--tsp-ad-mb,18px);text-align:center;max-width:100%}
.tsp-ad__label{display:block;font-size:9px;letter-spacing:1.5px;color:#b4ad9c;margin-bottom:5px;text-transform:uppercase;font-family:var(--ts-ui)}
.tsp-ad__creative{display:inline-block;line-height:0;max-width:100%;border-radius:6px;overflow:hidden;box-shadow:0 1px 5px rgba(0,0,0,.10)}
/* height:auto is what lets the width/height ATTRIBUTES on the img do their job:
   the browser derives an aspect ratio from them and reserves the full box before
   the creative arrives, so the slot never collapses and then shoves the page
   down. Removing either the attributes or this rule brings the shift back. */
.tsp-ad__creative img{display:block;height:auto;max-width:100%}
.tsp-ad__creative picture{display:block}
.tsp-ad--leaderboard .tsp-ad__creative img{width:728px}
.tsp-ad--mr .tsp-ad__creative img{width:300px}
/* Editor-only affordance for a slot with no creative yet. Never shown to
   visitors — the render callback gates it on edit_posts. */
.tsp-ad--empty{padding:18px;border:1px dashed #bbb;background:#fafafa;color:#646970;font-size:13px;font-family:var(--ts-ui)}

/* v1.10.64 — the MPU's empty state, and the rail-safety it needs.

   This replaces the inline-styled dummy box that used to live in page content.
   The size comes from the stylesheet so nothing has to be typed into a Custom
   HTML block to hold the space, and there is no "300 x 250" text baked into the
   page — the frame communicates the slot on its own. */
.tsp-ad--empty .tsp-ad__creative--empty{
	display:block;
	width:100%;
	background:var(--tsp-wash,#F6F4EF);
	border:1px dashed var(--tsp-hairline,#E8E5DE);
	border-radius:6px;
}
/* aspect-ratio rather than a fixed height, so the frame keeps the IAB shape when
   the rail is narrower than 300px instead of letterboxing. */
.tsp-ad--mr .tsp-ad__creative--empty{aspect-ratio:300/250;max-width:300px}
.tsp-ad--leaderboard .tsp-ad__creative--empty{aspect-ratio:728/90}

/* A 300px creative in a ~33% rail overflows the moment the rail drops below
   300px. Capping at 100% and letting height follow keeps it inside its column at
   every width — the slot narrows, it does not spill. */
.tsp-ad--mr{max-width:300px}
.tsp-ad--mr img{max-width:100%;height:auto}

/* ==========================================================================
   v1.10.238 — PREMIUM WIDE LEADERBOARD
   Reference: Images/advertisement.png (supersedes the Advertisement row of
   telugu_scope_remaning_sections.png where they differ)

   What was wrong: `.tsp-ad--leaderboard .tsp-ad__creative img{width:728px}`
   pinned every leaderboard to the IAB 728 width, so the real 1492x180 careers
   creative rendered at less than half the editorial measure and read as a small
   banner adrift in a 1200px column. The reference asks for the opposite — one
   wide, centred creative that is obviously commercial but never louder than the
   editorial around it.

   The creative is an ASSET and is not rebuilt here: this rule set governs only
   its width, scaling, radius, shadow, disclosure and rhythm. Aspect ratio comes
   from the img's own width/height attributes, which Ad_Renderer already emits
   from the real attachment, so the box is reserved before the image decodes and
   nothing shifts.
   ========================================================================== */

/* Rhythm: a clear break from the editorial above, and enough below that the eye
   leaves the ad and lands on the next section rather than bouncing back.
   Measured on the page, the gap down to the Sports heading was 72px — more
   separation than the section needs, which made the ad sit in its own pool of
   space like a standalone section. margin-bottom is set directly rather than
   through the variable, because the block's own inline margins win over it. */
.tsp-ad--leaderboard {
	--tsp-ad-mt: 32px;
	--tsp-ad-mb: 40px;
	margin-bottom: 8px;
}

/* Block, not inline-block: an inline-block leaves a text-node baseline gap under
   the creative that reads as uneven spacing against the label above it.

   v1.10.243 — 1160px, the measured editorial container width, so the creative's
   left and right edges line up exactly with Trending above and Sports/Business
   below rather than sitting inset from them.

   The artwork ratio is fixed at 3.75:1 and is never touched, so width alone sets
   the height: 1160 renders 309px. Height cannot be reduced at this width without
   either a wider-ratio export of the artwork or cropping it, and cropping the
   approved creative is not permitted. */
.tsp-ad--leaderboard .tsp-ad__creative {
	display: block;
	max-width: 1160px;
	margin-inline: auto;
	border-radius: 12px;
	overflow: hidden;
	/* "Gentle" per the reference — enough to lift the creative off a white page,
	   not enough to read as a card. */
	box-shadow: 0 2px 14px rgba(16, 18, 24, .08);
}

/* The whole point: fill the allowed width instead of the 728px pin, and let the
   intrinsic ratio set the height. Never stretched, never cropped. */
.tsp-ad--leaderboard .tsp-ad__creative img {
	width: 100%;
	height: auto;
}

/* Disclosure: 12px, 1px tracking, centred and subordinate — the reference's own
   specification. Deliberately NOT the brand red, and not the category-kicker
   treatment, so it can never be mistaken for editorial.
 *
 * v1.10.661 — the grey was #9A9A9A, which is 2.81:1 on white where 12px text
 * needs 4.5:1. It is a legal disclosure line, so "subordinate" cannot mean
 * "unreadable": if a reader cannot make out the word Advertisement, the label is
 * not doing the job it exists to do.
 *
 * #767676 is 4.54:1 on white — the darkest grey that still reads as clearly
 * secondary and the lightest that clears AA, so the design intent survives the
 * fix. The rail placement is unaffected: it overrides this with
 * `var(--tsp-cat-muted)` in category.css and was already passing.
 */
.tsp-ad .tsp-ad__label {
	font-size: 12px;
	letter-spacing: 1px;
	color: #767676;
	margin-bottom: 14px;
}

/* Phones: the creative keeps its ratio and simply uses the width it is given.
   The container already carries the page gutter, so no extra side padding is
   added here — that would double the inset. Spacing tightens because a phone
   screen cannot afford desktop rhythm. */
@media (max-width: 600px) {
	.tsp-ad--leaderboard {
		--tsp-ad-mt: 24px;
		--tsp-ad-mb: 28px;
	}

	.tsp-ad .tsp-ad__label {
		margin-bottom: 10px;
	}
}

/* ==========================================================================
   v1.10.292 — HOUSE ADS: square Careers promo (`House_Ads::careers_square()`)

   The sidebar composition, not the masthead banner re-proportioned. The strip
   beside the logo reads as one horizontal line because it has 700x90; at ~300
   square the same content has to become a vertical hierarchy — wordmark,
   headline, roles, CTA — which is a different design.

   Drawn rather than cut as an image: the unit carries Telugu that must shape
   correctly, stays sharp at any DPI, and adds no bytes. `--tsp-house-art` is the
   hook for layering a real photographic treatment behind it later without
   touching this composition.
   ========================================================================== */

.tsp-house{
	--tsp-house-red:#C8102E;
	--tsp-house-art:none;
	margin:0;
	min-width:0;
}

.tsp-house__link{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	/* Square by preference, but height stays auto so a longer translation grows
	   the card instead of being clipped. The brief forbids clipping the logo,
	   text or CTA; a hard height is what would cause it. */
	aspect-ratio:1/1;
	height:auto;
	padding:20px;
	border-radius:10px;
	background:var(--tsp-house-red);
	background-image:var(--tsp-house-art);
	background-size:cover;
	background-position:center;
	color:#fff;
	text-decoration:none;
	overflow:hidden;
	isolation:isolate;
}

/* The wordmark. Two weights on one line, as the masthead lockup reads. */
.tsp-house__mark{
	display:flex;
	align-items:baseline;
	gap:5px;
	font-family:var(--ts-ui);
	font-size:10px;
	font-weight:800;
	letter-spacing:.14em;
	text-transform:uppercase;
}

.tsp-house__mark-brand{color:#fff}
.tsp-house__mark-unit{color:rgba(255,255,255,.72)}

.tsp-house__head{
	margin-top:auto;
	font-family:var(--ts-display);
	font-size:30px;
	font-weight:700;
	line-height:1.04;
	letter-spacing:-.01em;
}

.tsp-house__lead{
	margin-top:6px;
	font-family:var(--ts-ui);
	font-size:13px;
	line-height:1.32;
	color:rgba(255,255,255,.92);
}

.tsp-house__roles{
	display:flex;
	flex-wrap:wrap;
	gap:4px 6px;
	margin:10px 0 0;
	padding:0;
	list-style:none;
}

.tsp-house__role{
	font-family:var(--ts-ui);
	font-size:9.5px;
	font-weight:700;
	letter-spacing:.05em;
	text-transform:uppercase;
	padding:3px 7px;
	border:1px solid rgba(255,255,255,.34);
	border-radius:999px;
	color:rgba(255,255,255,.94);
}

.tsp-house__kicker{
	margin-top:10px;
	font-family:var(--ts-ui);
	font-size:11.5px;
	line-height:1.35;
	color:rgba(255,255,255,.78);
}

.tsp-house__cta{
	display:inline-flex;
	align-items:center;
	gap:7px;
	margin-top:auto;
	padding:9px 15px;
	border-radius:999px;
	background:#fff;
	color:var(--tsp-house-red);
	font-family:var(--ts-ui);
	font-size:11.5px;
	font-weight:800;
	letter-spacing:.09em;
	text-transform:uppercase;
}

/* v1.10.659 — motion is opt-IN, matching scope-verdict.css.
 *
 * The arrow's 3px nudge was the only plugin-owned TRANSFORM still running under
 * `prefers-reduced-motion: reduce` on either edition. Everything else the audit
 * flagged was colour or opacity — `tsp-story-title` (color), `tsp-sv-*`
 * (border-color/background, already corrected in v1.10.644) — which are not
 * vestibular triggers, or Blocksy's own `ct-panel-inner` / `sub-menu`, which are
 * not ours.
 *
 * `.tsp-house__cta` also carried `transition:transform`, but nothing anywhere
 * ever transforms it: a dead declaration that only served to make the element
 * show up in motion audits. Dropped rather than wrapped.
 *
 * The card keeps its focus-visible outline in every case — that rule is separate
 * and deliberately outside this block, because a reader who reduces motion still
 * needs to see where focus is.
 */
@media (prefers-reduced-motion: no-preference) {
	.tsp-house__arrow{transition:transform .16s ease}

	.tsp-house__link:hover .tsp-house__arrow,
	.tsp-house__link:focus-visible .tsp-house__arrow{transform:translateX(3px)}
}

/* The card is the target, so the ring goes on the card — an outline on the
   inner CTA would point at the wrong thing. */
.tsp-house__link:focus-visible{
	outline:3px solid #16181F;
	outline-offset:3px;
}

/* ---- narrow: a deliberate landscape treatment, NOT shrunken type ----------
   Below the rail's stacking breakpoint the promo sits in the single column at
   full width. Holding it square there would make a ~340px-tall block of house
   advertising in the editorial flow. It becomes a shorter card instead, at the
   SAME type sizes — only the shape changes. */
@media (max-width:1019px){
	.tsp-house__link{
		aspect-ratio:auto;
		min-height:0;
		padding:18px 20px;
	}

	.tsp-house__head{margin-top:14px;font-size:26px}
	.tsp-house__cta{margin-top:14px}
}

/* Between the rail stacking and the phone widths the card is full-bleed in a
   single column — 728px at a 768 viewport — and stacking everything left leaves
   the right half as empty red. The text keeps column one and the CTA moves to
   column two, centred against the block, which is the same horizontal logic the
   masthead banner uses at similar proportions. Below 561 there is no room for a
   side-by-side CTA, so the stack returns. */
@media (min-width:561px) and (max-width:1019px){
	.tsp-house__link{
		display:grid;
		grid-template-columns:minmax(0,1fr) auto;
		align-items:center;
		column-gap:28px;
	}

	.tsp-house__mark,
	.tsp-house__head,
	.tsp-house__lead,
	.tsp-house__roles,
	.tsp-house__kicker{grid-column:1}

	/* `grid-row: 1 / -1` does NOT work here: -1 counts back from the last line
	   of the EXPLICIT grid, and with no `grid-template-rows` the explicit grid
	   has a single line — so the CTA occupied row 1 only and sat top-right,
	   floating away from the message it belongs to. The five text siblings
	   (mark, head, lead, roles, kicker) are markup this component owns, so
	   spanning them explicitly is safe and says what it means. */
	.tsp-house__cta{
		grid-column:2;
		grid-row:1 / span 5;
		align-self:center;
		margin-top:0;
		white-space:nowrap;
	}
}

/* At the narrowest widths the role pills are the first thing to cost a line
   each; two per row keeps the card compact without touching the type scale. */
@media (max-width:360px){
	.tsp-house__link{padding:16px}
	.tsp-house__head{font-size:23px}
	.tsp-house__role{font-size:9px;padding:3px 6px}
}

/* ==========================================================================
   v1.10.456 — a careers leaderboard a phone can actually read.

   THE MEASUREMENT. The creative is 1559x227 — 8.3:1. A phone gives the slot
   350px, so it renders 350x51, and on that render only "We're hiring" survives:
   the strapline, the roles line, "APPLY NOW" and the URL are all 4-5px tall.
   The aspect ratio is the cause, so no width fixes it, and the copy is baked
   into the pixels where CSS cannot reach it.

   Ad_Renderer emits BOTH the raster and the text unit, because PHP cannot know
   the viewport, and only ever does so for a slot that already points at the
   careers page — an advertiser's creative is never replaced by our promotion.
   Here the stylesheet picks one. The switch is 600px to match the breakpoint
   `mobile_source()` already uses for an art-directed creative, so a real 320x50
   creative and this fallback take over at exactly the same width.
   ========================================================================== */

.tsp-ad__text-alt{display:none}

@media (max-width:600px){
	.tsp-ad--leaderboard .tsp-ad__creative{display:none}
	.tsp-ad--leaderboard .tsp-ad__text-alt{display:block}
}

/* The compact banner: the square card's own DOM, laid out along the row.
   `aspect-ratio` has to be cleared explicitly — 1/1 on a 350px-wide element is
   a 350px-tall advertisement above the hero, which trades an unreadable unit
   for an overbearing one. */
.tsp-house--compact .tsp-house__link{
	aspect-ratio:auto;
	display:grid;
	grid-template-columns:1fr auto;
	grid-template-areas:
		"mark cta"
		"head cta"
		"lead cta";
	align-items:center;
	column-gap:12px;
	padding:12px 14px;
	border-radius:8px;
	/* The slot centres its contents — correct for a raster, wrong for a column
	   of copy. The square card never showed this because its flex children
	   shrink to fit; grid children stretch to the track, so the inherited
	   centring became visible as a headline indented against the wordmark and
	   the strapline sitting either side of it. */
	text-align:left;
}

.tsp-house--compact .tsp-house__mark{grid-area:mark;margin-bottom:2px}
.tsp-house--compact .tsp-house__head{
	grid-area:head;
	margin-top:0;
	/* 30px is the square card's display size and belongs to a 300px-tall unit.
	   In a banner it is the loudest thing on the page. */
	font-size:19px;
	line-height:1.1;
}
.tsp-house--compact .tsp-house__lead{
	grid-area:lead;
	margin-top:2px;
	font-size:12px;
}

/* The roles list and the kicker are what a 51px raster made illegible in the
   first place; a banner has no room for them either, so they are dropped here
   rather than shrunk into the same problem. The link's accessible name already
   carries the offer in full, so nothing is lost to a screen reader — the
   markup is unchanged and only the presentation differs. */
.tsp-house--compact .tsp-house__roles,
.tsp-house--compact .tsp-house__kicker{display:none}

.tsp-house--compact .tsp-house__cta{
	grid-area:cta;
	align-self:center;
	/* The square card stacks, so the CTA carries a top margin to clear the copy
	   above it. Beside that copy the same margin just pushes the button off
	   centre. */
	margin:0;
	/* A real target rather than the 7px-tall painted button in the raster. */
	min-height:36px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	white-space:nowrap;
}

/* At the narrowest phones the CTA and a 19px headline stop sharing a row
   comfortably, so the button takes its own line at full width instead of
   squeezing the headline into a second wrap.

   340, not 360. Measured: at 361 the row still holds at 321x95 with the
   strapline taking a second line, while the stacked layout is 147px. Stacking
   at 360 meant a 68px jump for 30px of viewport, and it took the two commonest
   phone widths — 360 and 375 — with it. Only 320-class devices stack now. */
@media (max-width:340px){
	.tsp-house--compact .tsp-house__link{
		grid-template-columns:1fr;
		grid-template-areas:"mark" "head" "lead" "cta";
		row-gap:2px;
	}
	.tsp-house--compact .tsp-house__cta{margin-top:8px;justify-content:center}
}