/* =====================================================================
   NXTbets Sports — Single League layout
   Consumes the semantic --lp-* tokens from tokens.css, so it themes to
   light/dark automatically. Per-league accent arrives as an inline
   --lp-accent override on .lp-shell.
   ===================================================================== */

.lp-shell {
	background: var(--lp-page-bg);
	color: var(--lp-ink);
	font-family: var(--lp-font);
	line-height: 1.55;
}

.lp-container {
	width: 100%;
	max-width: var(--lp-maxw);
	margin: 0 auto;
	padding-inline: var(--lp-s-5);
}

.lp-narrow {
	max-width: 760px;
}

/* ---------- Typography ---------- */
.lp-h2 {
	font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
	font-weight: 700;
	color: var(--lp-ink);
	margin: 0 0 var(--lp-s-5);
	position: relative;
	padding-bottom: var(--lp-s-3);
}
.lp-h2::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 4px;
	border-radius: var(--lp-r-pill);
	background: var(--lp-accent);
}
.lp-h2--invert {
	color: var(--lp-hero-ink);
}

.lp-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	font-weight: 600;
	margin: 0 0 var(--lp-s-3);
	color: var(--lp-hero-ink);
	opacity: 0.85;
}

.lp-lede {
	font-size: 1.05rem;
	color: var(--lp-ink-soft);
	margin: 0 0 var(--lp-s-5);
}
.lp-lede--invert {
	color: var(--lp-hero-ink);
	opacity: 0.9;
}

.lp-fineprint {
	font-size: 0.8rem;
	color: var(--lp-ink-muted);
	margin: var(--lp-s-2) 0 0;
}

/* ---------- Buttons ---------- */
.lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lp-s-2);
	padding: var(--lp-s-3) var(--lp-s-5);
	border-radius: var(--lp-r-md);
	font-weight: 600;
	text-decoration: none;
	transition: all 0.12s ease;
}
.lp-btn:hover {
	transform: translateY(-1px);
}
.lp-btn--accent {
	background: var(--lp-btn-bg);
	color: var(--lp-btn-text);
	border: 2px solid var(--lp-btn-border);
	border-radius: var(--lp-r-sm);
	font-weight: 500;
	letter-spacing: 0.5px;
}
.lp-btn--accent:hover {
	background: var(--lp-btn-bg-hover);
	border-color: #fff;
}
.lp-btn--ghost {
	background: transparent;
	color: var(--lp-hero-ink);
	border: 2px solid currentColor;
	border-radius: var(--lp-r-sm);
	font-weight: 500;
	letter-spacing: 0.5px;
}
/* .lp-shell prefix so the hover fill wins over the per-section color overrides. */
.lp-shell .lp-btn--ghost:hover {
	background: var(--lp-hero-bg);
	border-color: var(--white);
	color: var(--lp-btn-text);
}
.lp-btn--pro {
	background: var(--lp-pro);
	color: #fff;
}
.lp-btn--subtle {
	color: var(--lp-link);
	background: var(--lp-surface-2);
	border: 1px solid var(--lp-border-soft);
	padding: 8px 16px;
	margin-top: var(--lp-s-6);
	cursor: pointer;
}
.lp-btn--subtle:hover {
	color: var(--lp-link);
}
/* ---------- Hero ---------- */
.lp-hero {
	background: var(--lp-hero-bg);
	color: var(--lp-hero-ink);
	/* Vertical-only — horizontal gutter comes from .lp-container, so side
	   padding here would double up and squish content on narrow screens. */
	padding-block: 120px;
}
@media (max-width: 780px) {
	.lp-hero {
		padding-top: 100px;
	}
	.lp-btn {
		padding: var(--lp-s-1) var(--lp-s-4);
	}
}
/* When a league sets a hero background image, the inline style supplies the
   overlay + image; we only need it to cover and stay centered. */
.lp-hero--has-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.lp-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--lp-s-5);
}
.lp-hero__logo {
	max-width: 360px;
	max-height: 180px;
	width: auto;
	height: auto;
	object-fit: contain;
}
.lp-hero__title {
	font-size: 2.4rem;
	font-weight: 700;
	margin: 0;
}
.lp-hero__offer {
	width: 100%;
	max-width: 720px;
}
.lp-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lp-s-3);
	justify-content: center;
}

/* ---------- Sections ---------- */
.lp-section {
	padding-block: var(--lp-s-8);
}
.lp-section--flush {
	padding-block: var(--lp-s-5);
}
.lp-section--tint {
	background: var(--lp-surface-2);
}
.lp-section--pro {
	background: #0a101b;
}
@media (max-width: 780px) {
	.lp-section {
		padding-block: var(--lp-s-6);
	}
}
/* ---------- Steps ---------- */
.lp-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--lp-s-4);
	grid-template-columns: 1.25fr 1fr 1fr;
}
@media (max-width: 780px) {
	.lp-steps {
		grid-template-columns: 1fr;
	}
}
.lp-step {
	background: var(--lp-surface);
	border: 1px solid var(--lp-border-soft);
	border-radius: var(--lp-r-md);
	padding: var(--lp-s-5);
	box-shadow: var(--lp-shadow-soft);
}
.lp-step p {
	margin: var(--lp-s-3) 0 0;
	color: var(--lp-ink-soft);
}

/* Number stacked above its heading. */
.lp-step__head {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: var(--lp-s-3);
}
.lp-step__head h3 {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--lp-ink);
}
.lp-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--lp-r-sm);
	background: var(--lp-accent);
	color: var(--black);
	font-weight: 700;
}

/* ---------- Two-column row (map 66% / bonuses 33%) ---------- */
.lp-two-col {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--lp-s-6);
	align-items: start;
}
@media (max-width: 900px) {
	.lp-two-col {
		grid-template-columns: 1fr;
	}
}

/* ---------- Offers cards: theme handshake ----------
   nxtbets-offers' cards consume --of-* tokens (light defaults). Mapping them
   to our --lp-* tokens makes offers follow the league theme automatically —
   dark by default, light when <html data-theme="light"> — no .offers-dark
   opt-in class needed. CTA buttons stay brand-colored by design. */
.lp-shell .offers-container-wrap {
	--of-card-bg: var(--lp-surface);
	--of-card-border: var(--lp-border);
	--of-card-shadow: var(--lp-shadow-soft);
	--of-ink: var(--lp-ink);
	--of-ink-muted: var(--lp-ink-soft);
	--of-fallback-bg: var(--lp-surface);
	--of-fallback-ink: var(--lp-ink);
	--of-fallback-rule: var(--lp-border-soft);
}

/* ---------- Featured offer: single highlighted card ----------
   The shortcode's limit="1" renders only the container's top offer
   (offer_order ASC); highlight it like the sidebar's first card, with the
   operator's brand colour (--offer-hex, emitted by the card markup). */
#offers .offers-grid--one .offer-item:first-child .card_wrap_container {
	border-color: var(--offer-hex, #0db5ff);
	padding: 16px;
}

/* ---------- Step 1 distribution widget ---------- */
.lp-available-title {
	font-size: 0.95rem;
	font-weight: 600;
	margin: var(--lp-s-4) 0 var(--lp-s-3);
	color: var(--lp-ink);
}
/* The widget styles itself in shadow DOM; we only manage outer spacing.
   BUT: shadow DOM doesn't block inheritance — without a reset, the host's
   color/font (e.g. dark theme's light --lp-ink) flows into any widget
   element that doesn't declare its own, washing out text on the widget's
   light cards. Resetting inheritable text props ON the marker (the shadow
   host) restores the widget's intended defaults. */
.lp-distribution,
.lp-odds {
	color: initial;
	font-family: poppins, sans-serif;
	line-height: initial;
}
.lp-distribution {
	margin-top: var(--lp-s-2);
}

/* ---------- Athletes grid ---------- */
.lp-athletes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--lp-s-4);
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
/* Mobile: cap the grid at 8 — the "See all" button covers the rest. */
@media (max-width: 600px) {
	.lp-athlete:nth-child(n + 9) {
		display: none;
	}
}
.lp-athlete__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lp-s-3);
	text-decoration: none;
	color: var(--lp-ink);
}
.lp-athlete__photo {
	width: 110px;
	height: 110px;
	border-radius: var(--lp-r-sm);
	background: var(--lp-surface-2) center/cover no-repeat;
	border: 3px solid var(--lp-border);
	box-shadow: var(--lp-shadow-soft);
	transition: transform 0.12s ease;
	/* Photo/fallback-logo live as child <img>s now (needed for the
	   onerror swap), so the box clips and centers them itself. */
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lp-athlete__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.lp-athlete__fallback-logo {
	max-width: 72%;
	max-height: 58%;
	object-fit: contain;
}
.lp-athlete__link:hover .lp-athlete__photo {
	transform: translateY(-2px);
}
.lp-athlete__name {
	font-weight: 600;
	font-size: 0.95rem;
	text-align: center;
}
.lp-athletes__more {
	text-align: center;
}

/* ---------- Latest news (card design ported from the athletes v2 news
   grid, re-expressed in --lp-* tokens so it follows dark/light theming
   and picks up the per-league accent) ---------- */
.lp-news__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lp-s-4);
	flex-wrap: wrap;
}
.lp-news__all {
	color: var(--lp-link);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}
.lp-news__all:hover {
	text-decoration: underline;
}
.lp-news__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--lp-s-5);
}
@media (max-width: 900px) {
	.lp-news__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.lp-news__grid {
		grid-template-columns: 1fr;
	}
}
.lp-news-card {
	background: var(--lp-surface);
	border: 1px solid var(--lp-border-soft);
	border-radius: var(--lp-r-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	box-shadow: var(--lp-shadow-soft);
	transition:
		transform 0.16s ease,
		box-shadow 0.16s ease,
		border-color 0.16s ease;
}
.lp-news-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(0, 20, 45, 0.25);
	border-color: var(--lp-accent);
}
.lp-news-card__thumb {
	display: block;
	/* 3:2 ≈ the Pressbox featured images' native shape (e.g. 768x499),
	   so cover-cropping trims almost nothing. */
	aspect-ratio: 3 / 2;
	background: var(--lp-surface-2) center/cover no-repeat;
}
.lp-news-card__body {
	padding: var(--lp-s-4) var(--lp-s-4) var(--lp-s-5);
	display: flex;
	flex-direction: column;
	gap: var(--lp-s-2);
	flex: 1;
}
.lp-news-card__tag {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lp-accent);
}
.lp-news-card__title {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--lp-ink);
	line-height: 1.35;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lp-news-card__meta {
	font-size: 0.78rem;
	color: var(--lp-ink-muted);
	margin-top: auto;
}

/* ---------- Map ---------- */
.lp-map {
	background: var(--lp-surface);
	border: 1px solid var(--lp-border-soft);
	border-radius: var(--lp-r-md);
	padding: var(--lp-s-7);
	box-shadow: var(--lp-shadow-soft);
}
@media (max-width: 786px) {
	.lp-map {
		padding: var(--lp-s-4);
	}
}

/* ---------- Latest news (cards) ---------- */
.lp-news__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--lp-s-4);
	flex-wrap: wrap;
	margin-bottom: var(--lp-s-5);
}
.lp-news__eyebrow,
.lp-card__tag {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--brand-orange-deep);
}
.lp-h2--flush {
	margin-bottom: 0;
	padding-bottom: 0;
}
.lp-h2--flush::after {
	display: none;
}
.lp-news__link {
	color: var(--lp-link);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
}
.lp-news__link:hover {
	color: var(--lp-accent);
}

.lp-news__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--lp-s-5);
}
@media (max-width: 900px) {
	.lp-news__grid {
		grid-template-columns: 1fr;
	}
}
.lp-card {
	background: var(--lp-surface);
	border: 1px solid var(--lp-border-soft);
	border-radius: var(--lp-r-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition:
		transform 0.16s ease,
		box-shadow 0.16s ease,
		border-color 0.16s ease;
}
.lp-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--lp-shadow);
	border-color: var(--lp-border);
}
.lp-card__thumb {
	aspect-ratio: 16 / 9;
	background: var(--lp-surface-2) center/cover no-repeat;
}
.lp-card__body {
	padding: var(--lp-s-4) var(--lp-s-4) var(--lp-s-5);
	display: flex;
	flex-direction: column;
	gap: var(--lp-s-3);
	flex: 1;
}
.lp-card__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--lp-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.lp-card__meta {
	font-size: 0.75rem;
	color: var(--lp-ink-muted);
	margin-top: auto;
}

/* ---------- Lists ---------- */
.lp-list {
	color: var(--lp-ink-soft);
	padding-left: 1.2em;
}
.lp-list li {
	margin-bottom: var(--lp-s-2);
}

.lp-pro-list {
	list-style: none;
	margin: 0 0 var(--lp-s-5);
	padding: 0;
	display: grid;
	gap: var(--lp-s-2);
}
.lp-pro-list li {
	position: relative;
	padding-left: 1.6em;
	color: var(--lp-hero-ink);
	opacity: 0.92;
}
.lp-pro-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--brand-orange);
	font-weight: 700;
}

/* PRO promo: image left, content right; stacks image-on-top on mobile. */
.lp-pro-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--lp-s-6);
	align-items: center;
	max-width: 1080px;
	margin-inline: auto;
}
.lp-pro__media {
	display: flex;
	justify-content: center;
}
.lp-pro__media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 460px;
}
@media (max-width: 780px) {
	.lp-pro-grid {
		grid-template-columns: 1fr;
		gap: var(--lp-s-5);
	}
	.lp-pro__media {
		justify-content: flex-start;
	}
	.lp-pro__media img {
		max-width: 200px;
	}
}

.lp-edu-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lp-s-3);
	margin-top: var(--lp-s-5);
}
/* The Bet Education + PRO ghost buttons sit on light/navy; give them ink they can read. */
.lp-section .lp-btn--ghost {
	color: var(--lp-ink);
}
.lp-section--pro .lp-btn--ghost {
	color: var(--lp-hero-ink);
}

@media (max-width: 600px) {
	.lp-container {
		padding-inline: var(--lp-s-4);
	}
	.lp-hero {
		padding-block: var(--lp-s-8);
	}
	.lp-hero__logo {
		width: 50%;
	}
	.lp-step__head h3 {
		font-size: 1.25rem;
	}
}

/* ---------- Ultimate Guide banner (slim full-bleed CTA → learn_more_url) ---------- */
.lp-guide-banner {
	display: block;
	width: 100%;
	background: #00142d;
	color: #fff;
	text-decoration: none;
	border-block: 1px solid var(--lp-accent);
	transition: background 0.15s ease;
}
.lp-guide-banner:hover {
	background: #06203f;
	color: #fff;
}
.lp-guide-banner__inner {
	width: 100%;
	max-width: var(--lp-maxw);
	min-height: 72px;
	margin-inline: auto;
	padding: var(--lp-s-2) var(--lp-s-5);
	display: flex;
	align-items: center;
	gap: var(--lp-s-4);
}
.lp-guide-banner__text {
	font-family: var(--lp-font);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.75;
}
.lp-guide-banner__text strong {
	color: var(--lp-accent);
	font-weight: 800 !important;
}
.lp-guide-banner__btn {
	margin-left: auto;
	flex: none;
	background: var(--lp-accent);
	color: #00142d;
	font-weight: 700;
	font-size: 0.95rem;
	padding: 10px 22px;
	border-radius: var(--lp-r-md);
	white-space: nowrap;
}
.lp-guide-banner:hover .lp-guide-banner__btn {
	background: #2ec4ff;
}
@media (max-width: 640px) {
	.lp-guide-banner__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		min-height: 64px;
		gap: var(--lp-s-3);
		padding-block: var(--lp-s-4);
		padding-inline: var(--lp-s-4);
	}
	.lp-guide-banner__text {
		font-size: 0.9rem;
	}
	.lp-guide-banner__btn {
		margin-left: 0;
		padding: 8px 14px;
		font-size: 0.85rem;
	}
}

/* ---------- Hero in-page nav (boxed segmented nav; replaces CTA buttons) ----------
   Built on the semantic --lp-* tokens, so it inverts automatically between dark
   and light mode (light = <html data-theme="light">). Boxed to --lp-maxw (1440). */
.lp-hero-nav {
	/* content-width, centered (capped at 1440); a padded wrapper holding
	   individual buttons (8px padding, 8px gap). */
	width: fit-content;
	max-width: min(var(--lp-maxw), 100%);
	margin-inline: auto;
	display: flex;
	gap: 8px;
	padding: 8px;
	background: var(--lp-surface);
	border: 1px solid var(--lp-border);
	border-radius: var(--lp-r-md);
	box-shadow: var(--lp-shadow-soft);
}
.lp-hero-nav__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--lp-s-2);
	padding: var(--lp-s-3) var(--lp-s-5);
	background: var(--lp-surface-2);
	color: var(--lp-ink);
	font-weight: 600;
	font-size: 1rem;
	white-space: nowrap;
	text-decoration: none;
	border: 2px solid var(--lp-border-soft);
	border-radius: var(--lp-r-sm);
	transition:
		background 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease;
}
.lp-hero-nav__item:hover,
.lp-hero-nav__item:focus-visible {
	background: var(--lp-accent);
	color: var(--brand-navy);
	border-color: var(--lp-accent);
}
/* Offers = primary: pronounced accent, thicker border (flex stretch keeps
   all buttons the same height). */
.lp-hero-nav__item--primary {
	border-color: var(--lp-accent);
	color: var(--lp-accent);
}
.lp-hero-nav__item--primary:hover,
.lp-hero-nav__item--primary:focus-visible {
	color: var(--lp-accent-ink);
}
@media (max-width: 900px) {
	.lp-hero-nav {
		flex-direction: column;
	}
}
/* Mobile: keep only Offers + Live Odds; hide Map + Ultimate Guide. */
@media (max-width: 640px) {
	.lp-hero-nav__item--mobile-hide {
		display: none;
	}
}