/*
   LuckyBet777 — Watch Live listing (/watch-live)
   The page shell (banner, section spacing, empty state) reuses the Lucky Draw
   listing's .lde-* rules from pages/luckydraw-list.css, so both "View All"
   pages read as one family. The cards come from components/watch-live-card.css.
   This file lays out the two sections (Live Now / Videos), their headings,
   the category chips and the card grid.
*/

/* ── Section heading: dot or icon · title · count ── */
.wlive-head {
	display: flex;
	align-items: center;
	gap: 0.5625rem;
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.0313rem;
	color: var(--text-primary);
}

.wlive-head-icon {
	color: var(--gold-text);
	font-size: 1.625rem;
}

.wlive-live-dot {
	width: 0.5rem;
	height: 0.5rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--red);
	box-shadow: 0 0 0 0.25rem rgba(var(--red-rgb), 0.22);
	animation: live-pulse 1.4s ease-in-out infinite;
}

.wlive-count {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
}

/* Divider between Live Now and Videos (design) */
.wlive-section + .wlive-section {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 0.0625rem solid var(--border-subtle);
}

/* ── Category chips (Videos only) — same pill as the home game chips ── */
.wlive-chips {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
	margin-bottom: 1rem;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.wlive-chips::-webkit-scrollbar {
	display: none;
}

.wlive-chip {
	flex: 0 0 auto;
	height: 2.375rem;
	padding: 0 0.875rem;
	background: var(--bg-card);
	border: 0.0625rem solid var(--border-subtle);
	border-radius: 62.4375rem;
	color: var(--text-secondary);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s, background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.15s;
}

.wlive-chip:active {
	transform: scale(0.95);
}

.wlive-chip[aria-selected="true"] {
	color: var(--text-on-gold);
	background: var(--gold-gradient);
	border-color: transparent;
	box-shadow: var(--shadow-glow);
}

.wlive-chip:focus-visible {
	outline: 0.125rem solid var(--gold);
	outline-offset: 0.125rem;
}

@media (hover: hover) {
	.wlive-chip:not([aria-selected="true"]):hover {
		color: var(--text-primary);
	}
}

.main-scroll .wlive-head {
	font-size: 1.25rem;
}

/* A plain wrapping grid: unlike the home rail, this page exists to show
   everything at once. Same fluid track as the old home grid, so a card is the
   same size here as the user just saw on the home page. */
.wlive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(clamp(11rem, 33vw, 19rem), 1fr));
	gap: 0.875rem;
}

/* Phones keep two across, matching the home rail's two-up view. */
.main-scroll .wlive-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

@media (min-width: 48rem) {
	.main-scroll .wlive-grid {
		grid-template-columns: repeat(auto-fill, minmax(clamp(11rem, 33vw, 19rem), 1fr));
		gap: 0.875rem;
	}
}

/* Small phones: two ~140px cards across, so the play button shrinks (design: 44px at ≤460px). */
@media (max-width: 28.75rem) {
	.wlive-grid .watch-live-play {
		width: 2.75rem;
		height: 2.75rem;
		font-size: 1.25rem;
	}
}

/* Under 360px (iPhone SE and smaller): one card per row, full-size play button. */
@media (max-width: 22.4375rem) {
	.main-scroll .wlive-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wlive-grid .watch-live-play {
		width: 3.25rem;
		height: 3.25rem;
		font-size: 1.5rem;
	}
}

/* Hover lift — only here: the home rail scrolls on x and would clip it.
   The zoom / play / border effects come from components/watch-live-card.css. */
.wlive-grid .watch-live-card {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

@media (hover: hover) {
	.wlive-grid .watch-live-card:hover {
		transform: translateY(-0.25rem);
		box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.35), 0 0 1.25rem rgba(var(--gold-rgb), 0.2);
	}
}

/* Inactive category panels / counts. The grid's display:grid would otherwise
   beat the UA [hidden] rule. */
.lde-events.wlive-section [hidden] {
	display: none;
}

/* Watch Live art is a different shape from Lucky Draw's, so it needs its own box */
.lde-banner.wlive-banner {
	aspect-ratio: var(--banner-ratio);
	aspect-ratio: 2172 / 724; /* TEMP: matches current art; delete once watchlive.png is 1920×600 */
}