/* assets/css/components/investor-ticker.css
 * @layer components — Investor ticker (in-banner glass strip).
 *
 * Single-row strip pinned to the bottom edge of the page banner. Glass
 * surface (white@10% + backdrop-blur) over the banner image. On mobile,
 * the rail scrolls horizontally — content stays in one row.
 *
 * When the user scrolls past the banner, JS adds .is-pinned which flips
 * the strip from absolute-inside-banner to position:sticky at top of
 * viewport, so the ticker remains glanceable while reading the page.
 *
 * Surface contract:
 *  - Lives inside .page-banner (position:relative). The banner is the
 *    positioning context for the absolute placement.
 *  - Text is always on-dark (white). Hairlines via white-at-alpha.
 *  - Semantic green/red on direction only; no brand teal/marigold.
 */

@layer components {

	.vt-ticker {
		position: absolute;
		inset-block-end: 0;
		inset-inline: 0;
		z-index: var(--z-raised, 2);

		/* Surface matches the homepage accreditation strip — dark teal
		   gradient slab. Reads as a structural footer band on the banner
		   image, not a translucent glass overlay. */
		background: linear-gradient(
			135deg,
			var(--primary-ultra-dark) 0%,
			var(--primary-dark)       60%,
			var(--primary-semi-dark)  100%
		);
		border-block-start: 1px solid color-mix(in oklch, var(--white) 12%, transparent);
	}

	/* When the banner hosts a ticker, push the banner content up so the
	   H1 and breadcrumb don't sit behind the strip. The bump matches the
	   strip's intrinsic block-size + a small breathing gap. */
	.page-banner:has(.vt-ticker) {
		padding-block-end: calc(var(--space-2xl) + var(--space-3xl));
	}

	/* RAIL — the horizontal row of cells. Scrolls on mobile. */

	/* Rail spans gutter-to-gutter — full banner width on desktop. Status
	   anchors the left edge, timestamp the right edge. The middle overflow
	   zone hosts the exchanges — flex-row on desktop, scrolling marquee on
	   mobile. */
	.vt-ticker__rail {
		display: flex;
		align-items: stretch;
		justify-content: flex-start;
		padding-inline: var(--gutter);
	}

	.vt-ticker__rail::-webkit-scrollbar {
		display: none;
	}

	/* Rail-level cell hairlines — every rail child gets a vertical hairline
	   on its inline-end, except the last child. Keeps cell-to-cell rhythm
	   consistent without having to insert <span> dividers in markup. */
	.vt-ticker__rail > *:not(:last-child) {
		border-inline-end: 1px solid color-mix(in oklch, var(--white) 14%, transparent);
	}

	/* STATUS — dot + label. */

	.vt-ticker__status {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		padding-block: var(--space-m);
		padding-inline: var(--space-xl);
		flex-shrink: 0;
	}

	/* BRAND — wordmark + company name stacked. */

	.vt-ticker__brand {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-3xs);
		padding-block: var(--space-m);
		padding-inline: var(--space-xl);
		flex-shrink: 0;
	}

	.vt-ticker__wordmark {
		margin: 0;
		font-size: var(--text-m);
		font-weight: var(--weight-bold);
		letter-spacing: var(--tracking-snug);
		color: var(--text-on-dark);
		line-height: 1;
	}

	.vt-ticker__company {
		margin: 0;
		font-size: var(--text-2xs);
		font-weight: var(--weight-medium);
		color: color-mix(in oklch, var(--white) 60%, transparent);
		line-height: 1.2;
	}

	.vt-ticker__status-dot {
		inline-size: var(--space-2xs);
		block-size: var(--space-2xs);
		border-radius: var(--radius-full);
		background-color: var(--secondary);
	}

	.vt-ticker__status-label {
		font-size: var(--text-2xs);
		font-weight: var(--weight-bold);
		letter-spacing: var(--tracking-caps);
		text-transform: uppercase;
		color: var(--text-on-dark);
		white-space: nowrap;
	}

	/* DIVIDER — vertical hairline between cells. */

	.vt-ticker__divider {
		flex-shrink: 0;
		align-self: center;
		inline-size: 1px;
		block-size: var(--space-l);
		background-color: color-mix(in oklch, var(--white) 16%, transparent);
	}

	/* OVERFLOW + TRACK — the scrolling middle zone between status (left
	   anchor) and timestamp (right anchor). On desktop only the first
	   half of the duplicated content shows; on mobile the marquee
	   animation cycles through both halves seamlessly. */

	.vt-ticker__overflow {
		flex: 1 1 auto;
		min-inline-size: 0;
		display: flex;
		align-items: stretch;
		overflow: hidden;
	}

	.vt-ticker__track {
		display: flex;
		align-items: stretch;
		inline-size: max-content;
	}

	/* Desktop: hide the duplicate set (articles 3 & 4 and every divider
	   that follows the second article). The PHP loop produces:
	     div · NSE · div · BSE · div · NSE-dup · div · BSE-dup · div
	   We keep only the first set + its closing divider on desktop. */
	.vt-ticker__track > .vt-ticker__exchange:nth-of-type(n + 3),
	.vt-ticker__track > .vt-ticker__exchange:nth-of-type(2) ~ .vt-ticker__divider:nth-of-type(n + 4) {
		display: none;
	}

	/* EXCHANGE — head block (label + scrip symbol stacked) + price + change. */

	.vt-ticker__exchange {
		display: flex;
		align-items: center;
		gap: var(--space-l);
		padding-block: var(--space-m);
		padding-inline: var(--space-xl);
		flex-shrink: 0;
	}

	/* Exchange head — inline by default (one row, no dead vertical space).
	   The "label · symbol" pair reads as a single ticker line. On mobile,
	   we flip to vertical stacking because horizontal space is the
	   constraint there. */
	.vt-ticker__exchange-head {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		gap: var(--space-2xs);
		line-height: 1;
	}

	.vt-ticker__exchange-label {
		font-size: var(--text-2xs);
		font-weight: var(--weight-bold);
		letter-spacing: var(--tracking-caps);
		text-transform: uppercase;
		color: var(--text-on-dark);
		white-space: nowrap;
	}

	.vt-ticker__exchange-symbol {
		font-size: var(--text-2xs);
		font-weight: var(--weight-medium);
		letter-spacing: var(--tracking-snug);
		color: color-mix(in oklch, var(--white) 55%, transparent);
		white-space: nowrap;
		font-variant-numeric: tabular-nums;
	}

	/* Mid-dot separator between label and symbol, desktop inline pair. */
	.vt-ticker__exchange-label + .vt-ticker__exchange-symbol::before {
		content: '·';
		margin-inline-end: var(--space-2xs);
		color: color-mix(in oklch, var(--white) 35%, transparent);
	}

	/* PRICE */

	.vt-ticker__price {
		margin: 0;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		font-size: var(--text-l);
		font-weight: var(--weight-bold);
		color: var(--text-on-dark);
		line-height: 1;
		letter-spacing: var(--tracking-tight);
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	/* SVG ₹ — sized relative to the price font so it scales with the
	   price token. Translated down a hair so the optical centre sits on
	   the digit baseline, not the digit cap-height. */
	.vt-ticker__rupee {
		flex-shrink: 0;
		inline-size: 0.72em;
		block-size: 0.72em;
		color: color-mix(in oklch, var(--white) 80%, transparent);
		transform: translateY(0.04em);
	}

	.vt-ticker__price-value {
		font-variant-numeric: tabular-nums;
	}

	/* CHANGE — direction modifier via JS (vt-ticker__change--up / --down). */

	.vt-ticker__change {
		margin: 0;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		font-size: var(--text-s);
		font-weight: var(--weight-bold);
		line-height: 1;
		color: color-mix(in oklch, var(--white) 70%, transparent);
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.vt-ticker__change-icon {
		inline-size: var(--icon-inline-s);
		block-size: var(--icon-inline-s);
		flex-shrink: 0;
	}

	.vt-ticker__change--up {
		color: oklch(85% 0.18 145);
	}

	.vt-ticker__change--down {
		color: oklch(82% 0.18 28);
	}

	/* TIMESTAMP */

	.vt-ticker__timestamp {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-3xs);
		padding-block: var(--space-m);
		padding-inline: var(--space-xl);
		flex-shrink: 0;
		margin-inline-start: auto;
		white-space: nowrap;
	}

	.vt-ticker__timestamp-value {
		font-size: var(--text-s);
		font-weight: var(--weight-bold);
		color: var(--text-on-dark);
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}

	.vt-ticker__timestamp-note {
		font-size: var(--text-2xs);
		font-weight: var(--weight-medium);
		color: color-mix(in oklch, var(--white) 60%, transparent);
		line-height: 1;
	}

	/* CTA — "View details" at the far right edge. */

	.vt-ticker__cta {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2xs);
		padding-block: var(--space-m);
		padding-inline: var(--space-xl);
		flex-shrink: 0;
		font-size: var(--text-s);
		font-weight: var(--weight-bold);
		color: var(--text-on-dark);
		text-decoration: none;
		white-space: nowrap;
		transition:
			color var(--duration-fast) var(--ease-default),
			gap var(--duration-fast) var(--ease-default);
	}

	.vt-ticker__cta:hover {
		color: var(--white);
		gap: var(--space-xs);
	}

	.vt-ticker__cta-icon {
		inline-size: var(--icon-inline-s);
		block-size: var(--icon-inline-s);
		flex-shrink: 0;
	}

	.vt-ticker__cta:focus-visible {
		outline: var(--focus-ring);
		outline-offset: calc(var(--focus-ring-offset) * -1);
	}

	/* MOBILE — horizontal scroll affordance. */

	@media (max-width: 48em) {

		.vt-ticker__rail {
			padding-inline: 0;
		}

		/* Mobile: only brand (constant left anchor) + flipping exchange
		   card on the right. Status, timestamp, and CTA are hidden — the
		   brand identity + live price is the actionable surface. */
		.vt-ticker__status,
		.vt-ticker__timestamp,
		.vt-ticker__cta {
			display: none;
		}

		.vt-ticker__brand {
			padding-inline-start: var(--gutter);
			padding-inline-end: var(--space-m);
		}

		.vt-ticker__wordmark {
			font-size: var(--text-s);
		}

		.vt-ticker__company {
			font-size: 0.6875rem;
		}

		.vt-ticker__overflow {
			padding-inline-end: var(--gutter);
		}

		/* Mobile: stack the label + symbol so each cell stays narrow. */
		.vt-ticker__exchange-head {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-3xs);
		}

		.vt-ticker__exchange-label + .vt-ticker__exchange-symbol::before {
			content: none;
		}

		/* Marquee: bring the duplicate set BACK on mobile (desktop hid it)
		   so the loop translates -50% seamlessly. Both halves animate as
		   one continuous track. Mask fades the edges into the surface so
		   content doesn't pop in/out hard at the overflow boundary. */
		.vt-ticker__track > .vt-ticker__exchange,
		.vt-ticker__track > .vt-ticker__divider {
			display: flex;
		}

		.vt-ticker__overflow {
			mask-image: linear-gradient(
				to right,
				transparent 0%,
				black 6%,
				black 94%,
				transparent 100%
			);
			-webkit-mask-image: linear-gradient(
				to right,
				transparent 0%,
				black 6%,
				black 94%,
				transparent 100%
			);
		}

		/* Snappier scroll: faster duration for a more energetic ticker
		   feel, GPU-accelerated via translate3d + will-change so the
		   pace doesn't introduce jitter. */
		.vt-ticker__track {
			animation: vt-ticker-marquee var(--duration-marquee-ticker, 25s) linear infinite;
			will-change: transform;
		}

		.vt-ticker__overflow:hover .vt-ticker__track {
			animation-play-state: paused;
		}
	}

	@keyframes vt-ticker-marquee {
		from { transform: translate3d(0, 0, 0); }
		to   { transform: translate3d(-50%, 0, 0); }
	}

	/* Reduced motion: stop the marquee and let the track wrap so all
	   exchanges remain readable. Mask is also dropped since the loop
	   isn't running. */
	@media (prefers-reduced-motion: reduce) {
		.vt-ticker__track {
			animation: none;
			flex-wrap: wrap;
			justify-content: center;
		}

		.vt-ticker__overflow {
			mask-image: none;
			-webkit-mask-image: none;
			overflow: visible;
		}
	}

	/* STICKY — when user scrolls past the banner, JS adds .is-pinned which
	   detaches the strip from the banner and re-renders it as a sticky band
	   at the top of the viewport. Pure CSS state — JS only toggles the
	   class on an IntersectionObserver scroll past. */

	.vt-ticker.is-pinned {
		position: fixed;
		inset-block-start: 0;
		inset-block-end: auto;
		inset-inline: 0;
		background: color-mix(in oklch, var(--primary-ultra-dark) 92%, transparent);
		border-block-start: 0;
		border-block-end: 1px solid color-mix(in oklch, var(--white) 12%, transparent);
		box-shadow: 0 var(--space-2xs) var(--space-m) color-mix(in oklch, var(--black) 30%, transparent);
		animation: vt-ticker-slide-down var(--duration-normal) var(--ease-default);
	}

	@keyframes vt-ticker-slide-down {
		from {
			transform: translateY(-100%);
		}
		to {
			transform: translateY(0);
		}
	}

	/* REDUCED MOTION */

	@media (prefers-reduced-motion: reduce) {
		.vt-ticker.is-pinned {
			animation: none;
		}
	}

}