/* Lucky Draw listing page (desktop). Card grid + filter rail + hero. */

/* No top padding: the page banner is full-bleed and sits flush under the header,
   the same as the slot/sportsbook lobbies. */
.lde-page {
	padding-top: 0;
}

/* Page banner — same treatment as the slot/sportsbook lobby heroes
   (assets/css/pages/slot.css): full-bleed artwork that keeps its own 2115x743
   ratio, a gold floor glow, and a bottom fade into the page. The image itself is
   set inline by the view, so dropping in public/banners/luckydraw.png takes over
   from the placeholder with no CSS edit. */
.lde-banner {
	position: relative;
	aspect-ratio: var(--banner-ratio);
	aspect-ratio: 2115 / 743; /* TEMP: matches current art; delete once luckydraw.png is 1920×600 */
	margin: 0 var(--shell-bleed) 1.75rem;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	box-shadow: var(--shadow-lg);
}

/* Bottom fade — dissolves the artwork's base into the page */
.lde-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 87%, var(--bg-base) 100%);
	pointer-events: none;
}

.lde-banner-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(var(--gold-rgb), 0.22) 0%, transparent 60%);
	pointer-events: none;
}

/* Hero — the DETAIL page's per-draw banner image (luckydraw_detail.php), which
   is admin-uploaded per draw and so stays a plain <img>. The listing page uses
   .lde-banner above. */
.lde-hero {
	border-radius: 1rem;
	overflow: hidden;
	border: 0.0625rem solid var(--border);
}

.lde-hero img {
	display: block;
	width: 100%;
	height: auto;
}

/* Events section */
/* My Tickets — one tile per daily / weekly / monthly draw (shared/_luckydraw_tickets) */
.ldt {
	margin-top: 2.25rem;
}

.ldt-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.ldt-head .lde-events-title {
	margin: 0;
}

.ldt-rule {
	font-size: 0.8125rem;
	color: var(--text-secondary);
}

.ldt-login {
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gold-text);
	cursor: pointer;
}

.ldt-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	background: var(--bg-card);
	border: 0.0625rem solid var(--border);
	border-radius: 0.875rem;
	box-shadow: var(--shadow-sm);
}

.ldt-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	padding: 1.25rem 1rem;
	text-align: center;
}

/* Thin dividers between the columns */
.ldt-col + .ldt-col {
	border-left: 0.0625rem solid var(--border-subtle);
}

.ldt-cat {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.0313rem;
	color: var(--text-secondary);
}

.ldt-num {
	font-family: var(--font-brand);
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1.05;
	color: var(--gold-text);
	font-variant-numeric: lining-nums tabular-nums;
}

.ldt-sub {
	font-size: 0.75rem;
	color: var(--text-secondary);
}

/* Guest, or nothing running: a muted dash instead of a count */
.ldt-num.is-empty {
	color: var(--text-secondary);
	opacity: 0.5;
}

.lde-events {
	margin-top: 2.25rem;
}

.lde-events-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	font-size: 1.125rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.0313rem;
	color: var(--text-primary);
}

.lde-events-title iconify-icon {
	color: var(--gold-text);
	font-size: 1.875rem;
}

.lde-layout {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: 1.5rem;
	align-items: start;
}

/* Filter rail — icon + label; the active category gets a gold bar and wash */
.lde-filters {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.5rem;
	background: var(--bg-card);
	border: 0.0625rem solid var(--border);
	border-radius: 0.875rem;
}

.lde-filter {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.875rem;
	border-radius: 0.625rem;
	font-family: var(--font-brand);
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: left;
	color: var(--text-secondary);
	background: transparent;
	border: none;
	cursor: pointer;
	transition: color 0.18s ease, background 0.18s ease;
}

.lde-filter-ico {
	flex: 0 0 auto;
	font-size: 1.25rem;
	opacity: 0.75;
	transition: opacity 0.18s ease;
}

.lde-filter:hover {
	color: var(--text-primary);
	background: rgba(var(--gold-rgb), 0.06);
}

.lde-filter:hover .lde-filter-ico {
	opacity: 1;
}

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

.lde-filter.is-active {
	color: var(--gold-text);
	background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.16), rgba(var(--gold-rgb), 0.03));
}

.lde-filter.is-active .lde-filter-ico {
	opacity: 1;
}

.lde-filter.is-active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5rem;
	bottom: 0.5rem;
	width: 0.1875rem;
	border-radius: 0 0.1875rem 0.1875rem 0;
	background: var(--gold);
}

/* Card grid */
.lde-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

.lde-card {
	display: flex;
	flex-direction: column;
	background: var(--bg-card);
	border: 0.0625rem solid var(--border);
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

/* Ongoing — the live event: a gold light chases around the border + a breathing glow */
@property --lde-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.lde-card[data-phase="ongoing"] {
	position: relative;
	border-color: transparent;
	/* Theme-aware live gold — bright on dark, deeper on light for contrast on white */
	--lde-live-rgb: var(--gold-rgb);
	--lde-live: var(--gold);
	--lde-live-hi: #fff4b2;
	--lde-glow-min: 0.22;
	--lde-glow-max: 0.55;
	animation: lde-live-glow 2.4s ease-in-out infinite;
}

[data-theme="light"] .lde-card[data-phase="ongoing"] {
	--lde-live-rgb: 184, 134, 11;
	--lde-live: rgb(184, 134, 11);
	--lde-live-hi: #e0a818;
	--lde-glow-min: 0.5;
	--lde-glow-max: 0.85;
	/* Solid base border so it reads as bordered even between streak passes */
	border-width: 0.125rem;
	border-color: rgb(184, 134, 11);
	/* Warm cream-gold wash — the light-theme stand-in for the dark glow */
	background: linear-gradient(180deg, rgba(240, 192, 64, 0.22), rgba(240, 192, 64, 0.06));
}

.lde-card[data-phase="ongoing"]::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	padding: 0.1875rem;
	background: conic-gradient(from var(--lde-angle),
		transparent 0%, rgba(var(--lde-live-rgb), 0.15) 12%,
		var(--lde-live) 25%, var(--lde-live-hi) 32%, var(--lde-live) 40%,
		rgba(var(--lde-live-rgb), 0.15) 55%, transparent 70%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	animation: lde-live-spin 3s linear infinite;
	pointer-events: none;
}

@keyframes lde-live-spin {
	to { --lde-angle: 360deg; }
}

@keyframes lde-live-glow {
	0%, 100% { box-shadow: 0 0 0.625rem rgba(var(--lde-live-rgb), var(--lde-glow-min)); }
	50%      { box-shadow: 0 0 1.75rem rgba(var(--lde-live-rgb), var(--lde-glow-max)); }
}

.lde-card-media {
	position: relative;
	aspect-ratio: 813 / 450; /* banner art size — change if the admin banner spec changes */
	background: var(--bg-card-alt);
	overflow: hidden;
}

.lde-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
}

/* Hover: lift + banner zoom. Only transform — the ongoing card's box-shadow
   is owned by the lde-live-glow animation. */
.lde-card {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

@media (hover: hover) {
	.lde-card:hover {
		transform: translateY(-0.3125rem);
	}

	/* Ongoing keeps its transparent border under the chasing gold light. */
	.lde-card:not([data-phase="ongoing"]):hover {
		border-color: var(--border-strong);
	}

	.lde-card:hover .lde-card-media img {
		transform: scale(1.07);
		filter: brightness(1.08);
	}
}

.lde-badge {
	position: absolute;
	top: 0.625rem;
	left: 0.625rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.3125rem 0.625rem;
	border-radius: 0.375rem;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.0313rem;
	text-transform: uppercase;
	color: #fff;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.35);
}

/* Status dot — makes the tag read at a glance */
.lde-badge::before {
	content: '';
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	background: #fff;
}

/* Ongoing dot pings to read as live */
.lde-badge--ongoing::before {
	animation: lde-badge-ping 1.3s ease-in-out infinite;
}

@keyframes lde-badge-ping {
	0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
	70%  { box-shadow: 0 0 0 0.375rem rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.lde-badge--ongoing {
	background: var(--green);
}

.lde-badge--upcoming {
	background: #3b82f6;
}

.lde-badge--ended {
	background: var(--text-muted);
}

/* Ended — past draws stay listed; only the static timer is greyed out */
.lde-countdown.is-ended {
	filter: grayscale(1);
	opacity: 0.65;
}

.lde-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 1rem;
	padding: 1.25rem 1.125rem;
}

/* Event name — room for two lines so cards in a row stay the same height,
   with a one-line name centred in that space; longer names clamp at two. */
.lde-card-name {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6em;
	margin: 0;
	font-family: var(--font-brand);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: var(--text-primary);
}

.lde-card-name span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lde-card-desc {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--text-secondary);
}

.lde-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.lde-meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.1875rem 0.5rem;
	border-radius: 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--gold-text);
	background: rgba(var(--gold-rgb), 0.1);
	border: 0.0625rem solid var(--border);
}

.lde-card-foot {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-top: auto;
}

.lde-card-cta {
	font-size: 0.9375rem;
	padding-top: 0.6875rem;
	padding-bottom: 0.6875rem;
}

/* Whole card is clickable: the button's link stretches over the card (above
   the badge and the ongoing card's light) while the button stays the target. */
.lde-card {
	position: relative;
	cursor: pointer;
}

.lde-card-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 4;
}

/* The button's own hover lift / press shrink would make it the ::after's
   containing block, shrinking the overlay mid-click so the click is lost.
   Keep the colour change (it highlights while the card is hovered). */
.lde-card .lde-card-cta:hover,
.lde-card .lde-card-cta:active {
	transform: none;
}

.lde-countdown-block {
	display: flex;
	flex-direction: column;
	gap: 0.4375rem;
}

.lde-cd-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6875rem;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.15rem;
	text-transform: uppercase;
	color: var(--gold-text);
}

.lde-cd-label::before,
.lde-cd-label::after {
	content: '';
	height: 0.0625rem;
	width: 1.75rem;
	background: linear-gradient(90deg, transparent, var(--border-strong));
}

.lde-cd-label::after {
	background: linear-gradient(90deg, var(--border-strong), transparent);
}

.lde-countdown {
	display: flex;
	gap: 0.5rem;
}

/* Odometer — the new number rolls up into the window */
.lde-flip {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4375rem;
}

.lde-num {
	width: 100%;
	height: 3.25rem;
	overflow: hidden;
	border-radius: 0.5rem;
	background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.16), rgba(var(--gold-rgb), 0.05));
	border: 0.0625rem solid var(--border);
}

.lde-num-track {
	display: flex;
	flex-direction: column;
	will-change: transform;
}

.lde-num-track span {
	height: 3.25rem;
	line-height: 3.25rem;
	text-align: center;
	font-size: 2.25rem;
	font-weight: 800;
	color: var(--gold-text);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum';
}

.lde-flip-label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: var(--gold-text);
	opacity: 0.72;
}

/* Past draws — ended events under the current ones: smaller cards, more per
   row, dimmed until hovered so the live draw stays the focus. */
.lde-past-title {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 2.5rem 0 1.125rem;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.0313rem;
	text-transform: uppercase;
	color: var(--text-primary);
}

.lde-past-title::after {
	content: '';
	flex: 1;
	height: 0.0625rem;
	background: rgba(var(--gold-rgb), 0.35);
}

.lde-grid--past {
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 1rem;
}

.lde-grid--past .lde-card {
	opacity: 0.8;
	transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

.lde-grid--past .lde-card:hover {
	opacity: 1;
}

.lde-grid--past .lde-card-body {
	gap: 0.75rem;
	padding: 0.875rem;
}

.lde-grid--past .lde-card-name {
	font-size: 0.875rem;
}

.lde-grid--past .lde-card-cta {
	padding: 0.5rem;
	font-size: 0.8125rem;
}

/* "Show more" under the past draws */
.lde-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.lde-more {
	min-width: 10rem;
}

.lde-empty {
	grid-column: 1 / -1;
	padding: 2.5rem 1rem;
	text-align: center;
	color: var(--text-secondary);
}

/* Feature cards — boxed/centered layout matching the NRL-live page. */
.lde-feature-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.875rem;
	margin-top: 2.5rem;
}

.lde-feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.625rem;
	padding: 1.5rem 1rem;
	background: var(--bg-card);
	border: 0.0625rem solid var(--border);
	border-radius: 0.75rem;
}

.lde-feature-icon {
	flex-shrink: 0;
	font-size: 2.75rem;
	color: var(--gold-text);
}

.lde-feature-title {
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.0312rem;
	text-transform: uppercase;
	color: var(--text-primary);
}

.lde-feature-sub {
	margin-top: 0.1875rem;
	font-size: 0.6875rem;
	line-height: 1.4;
	color: var(--text-secondary);
}

/* Mobile — two-up cards (matches .main-scroll .nrl-features). */
/* Past draws: two small cards per row on a phone. */
.main-scroll .lde-grid.lde-grid--past {
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 0.75rem;
}

.main-scroll .lde-feature-row {
	grid-template-columns: 1fr 1fr;
	gap: 0.625rem;
	margin-top: 1.75rem;
}

.main-scroll .lde-feature-icon {
	font-size: 2rem;
}

/* MOBILE — one event per row, filters stacked on top */
.main-scroll .lde-page {
	padding: 0.875rem 0.875rem 0;
}

.main-scroll .lde-banner {
	margin: 0 var(--shell-bleed) 1.25rem;
	box-shadow: var(--shadow-md);
}

.main-scroll .lde-banner-glow {
	background: radial-gradient(ellipse 70% 70% at 50% 100%, rgba(var(--gold-rgb), 0.22) 0%, transparent 60%);
}

.main-scroll .lde-hero {
	border-radius: 0.75rem;
}

.main-scroll .lde-events {
	margin-top: 1.5rem;
}

.main-scroll .lde-events-title {
	font-size: 1.25rem;
}

.main-scroll .lde-events-title iconify-icon {
	font-size: 1.75rem;
}

.main-scroll .lde-layout {
	display: block;
}

/* Mobile: one segmented bar, icon over label, active segment filled gold */
.main-scroll .lde-filters {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 0.25rem;
	margin-bottom: 1.25rem;
	padding: 0.25rem;
	border-radius: 0.875rem;
}

.main-scroll .lde-filter {
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
	padding: 0.5rem 0.25rem;
	font-size: 0.75rem;
	text-align: center;
	white-space: nowrap;
}

.main-scroll .lde-filter-ico {
	font-size: 1.25rem;
}

.main-scroll .lde-filter.is-active {
	color: var(--text-on-gold);
	background: var(--gold);
}

.main-scroll .lde-filter.is-active::before {
	display: none;
}

.main-scroll .lde-grid {
	/* auto-fill/auto-fit: adapts continuously instead of snapping at a
	   breakpoint, so split-view and Stage Manager widths are covered too.
	   Minimum sized against this grid's real container so a phone keeps the
	   column count it renders today. */
	grid-template-columns: repeat(auto-fill, minmax(clamp(17rem, 33vw, 19rem), 1fr));
	gap: 1.5rem;
}

.main-scroll .lde-feature-row {
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.75rem;
	margin-top: 2rem;
}

.main-scroll .lde-feature {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	padding: 1.125rem 0.75rem;
	background: var(--bg-card);
	border: 0.0625rem solid var(--border);
	border-radius: 0.625rem;
}

.main-scroll .lde-feature-icon {
	font-size: 2rem;
}

/* Full-width shell — 0.875rem of side padding is right on a phone and cramped
   at 1180px. The grids stay full-width; only the gutter grows. */
@media (min-width: 48rem) {
	.main-scroll .lde-page {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* Type was sized against a 430px column and a ~170px card. The cards are now
   250-380px wide on a tablet, so the same values read as undersized. One step
   at 48rem keeps them in proportion; phones are untouched. */
@media (min-width: 48rem) {
	.main-scroll .lde-events-title { font-size: 1.5rem; }
	.main-scroll .lde-events-title iconify-icon { font-size: 2rem; }
}

/* One more gutter step: 1.5rem is right at 820px and tight at 1366px. */
@media (min-width: 75rem) {
	.main-scroll .lde-page { padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* Mobile site: stacked rows (luckydraw-page.html) — name + period on the
   left, count on the right, hairlines between rows */
.main-scroll .ldt-head {
	flex-wrap: wrap;
	gap: 0.375rem 1rem;
}

.main-scroll .ldt-grid {
	grid-template-columns: minmax(0, 1fr);
	padding: 0 1.125rem;
}

.main-scroll .ldt-col {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "cat num" "sub num";
	align-items: center;
	gap: 0.25rem 1rem;
	padding: 1.125rem 0;
	text-align: left;
}

.main-scroll .ldt-col + .ldt-col {
	border-left: 0;
	border-top: 0.0625rem solid var(--border-subtle);
}

.main-scroll .ldt-cat {
	grid-area: cat;
	font-size: 0.9375rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-primary);
}

.main-scroll .ldt-sub {
	grid-area: sub;
}

.main-scroll .ldt-num {
	grid-area: num;
	font-size: 2.25rem;
}