/* ==========================================================================
   CONTENT HUB PAGES — Bonus & Promotions / Payment Methods / Sports & Casino
   (2026-07-26)
   --------------------------------------------------------------------------
   Three new pages, built "same design" as the rest of the 2026-07 dark
   redesign pass (see agent_pages_redesign_status / blog_dark_match_status
   memory) but with NEW markup end to end (no existing light page to
   override) — so unlike every other dark-match file in this project, this
   one styles its own brand-new `.w9ch-*` classes dark BY DESIGN rather than
   overriding a cream default. Scoped to nothing: these classes don't exist
   anywhere else in the codebase, so no body-class gate is needed (same
   reasoning already used for `.vk-alh-*` / `.w9-bcta` being left unscoped).

   Hero + orbit graphic on each page reuse Agent List's own `.vk-alh*`
   markup/CSS verbatim (agentlist-hero-cta-v2.css, already unscoped) — no
   new hero CSS needed here. The closing CTA on each page reuses the
   existing `w9_premium_cta()` PHP helper (9w-blog.php) → `.w9-bcta`
   (blog-premium.css, already unscoped and already dark). This file only
   covers the middle: section head + card grid + numbered steps + callouts.

   Palette identical to every other pass this session:
     bg gradient #0B0906 -> #15110A -> #17150F | gold #FFC72C
     heading #FBF6EC | muted #C9BFA6 / #8A8270 | card text #F3ECDD
   ========================================================================== */

/* ==========================================================================
   HERO CONTENT CENTERING (direct request, 2026-07-26) — these 3 pages only.
   `.vk-alh*` is Agent List's own unscoped hero component (reused verbatim,
   see file header above) — Agent List itself keeps its original
   left-aligned hero, so this is scoped to the 3 new page IDs rather than
   touching `.vk-alh*` directly (which would also re-center Agent List's).
   ========================================================================== */
/* Single centered column instead of Agent List's own text|orbit 2-column
   split — a narrower text column centered WITHIN itself still reads as
   left-of-page overall once a same-height orbit graphic occupies the other
   half (verified: text was correctly centered inside its own box, equal
   gaps both sides, but that box only spans the left ~57% of the hero).
   Orbit moves above the text, matching the same reflow Agent List's own
   hero already does at mobile widths (`.vk-alh .e-con-inner{ grid-
   template-columns:1fr }`, orbit `order:-1`) — just applied at every width
   here instead of only <900px. */
body.page-id-400 .vk-alh .e-con-inner,
body.page-id-401 .vk-alh .e-con-inner,
body.page-id-402 .vk-alh .e-con-inner {
	grid-template-columns: 1fr !important;
	justify-items: center !important;
	max-width: 720px !important;
}
body.page-id-400 .vk-alh .e-con-inner > *,
body.page-id-401 .vk-alh .e-con-inner > *,
body.page-id-402 .vk-alh .e-con-inner > * {
	grid-column: 1 !important;
}
body.page-id-400 .vk-alh .e-con-inner > *:nth-child(5),
body.page-id-401 .vk-alh .e-con-inner > *:nth-child(5),
body.page-id-402 .vk-alh .e-con-inner > *:nth-child(5) {
	grid-row: auto !important;
	order: -1;
	margin-bottom: 6px;
}
body.page-id-400 .vk-alh-eyebrow,
body.page-id-401 .vk-alh-eyebrow,
body.page-id-402 .vk-alh-eyebrow {
	display: flex !important;
	justify-content: center !important;
}
body.page-id-400 .vk-alh-title,
body.page-id-401 .vk-alh-title,
body.page-id-402 .vk-alh-title,
body.page-id-400 .vk-alh-lead,
body.page-id-401 .vk-alh-lead,
body.page-id-402 .vk-alh-lead {
	text-align: center !important;
}
body.page-id-400 .vk-alh-lead p,
body.page-id-401 .vk-alh-lead p,
body.page-id-402 .vk-alh-lead p {
	margin-left: auto !important;
	margin-right: auto !important;
}
body.page-id-400 .vk-alh-stats,
body.page-id-401 .vk-alh-stats,
body.page-id-402 .vk-alh-stats {
	justify-content: center !important;
}

.w9ch-sec {
	position: relative;
	padding: clamp(46px, 5.4vh, 68px) 24px;
	background: linear-gradient(180deg, #0B0906 0%, #15110A 55%, #17150F 100%);
}
.w9ch-sec + .w9ch-sec { border-top: 1px solid rgba(255, 199, 44, .10); }

.w9ch-head {
	max-width: 720px;
	margin: 0 auto clamp(28px, 3.6vh, 42px);
	text-align: center;
}
.w9ch-eyebrow {
	display: inline-flex;
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(255, 199, 44, .12);
	border: 1px solid rgba(255, 199, 44, .30);
	font-family: var(--s5-en);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #FFC72C;
}
.w9ch-h2 {
	font-family: var(--s5-en);
	font-size: clamp(26px, 3.4vw, 40px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.02em;
	margin: 14px 0 0;
}
/* Specificity fight, not just !important: `body.vk h1, h2, h3, h4, h5{
   color:#1A1813 !important }` (wickets-home.css, site-wide heading-colour
   reset) is (0,1,2) — a plain `.w9ch-h2{ color:...!important }` is only
   (0,1,0), so even WITH !important on both sides the higher-specificity
   selector still wins the tie. `body.vk .w9ch-h2` matches (0,2,1), which
   beats it. */
body.vk .w9ch-h2 { color: #FBF6EC !important; }
.w9ch-lede {
	font-family: var(--s5-bn);
	font-size: 16px;
	line-height: 1.8;
	color: #C9BFA6;
	max-width: 62ch;
	margin: 14px auto 0;
}

.w9ch-grid {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	list-style: none;
	padding: 0;
}
@media (max-width: 1024px) { .w9ch-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .w9ch-grid { grid-template-columns: 1fr; } }

.w9ch-card {
	position: relative;
	isolation: isolate;
	background: linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%);
	border: 1px solid rgba(255, 199, 44, .16);
	border-radius: 26px;
	padding: 26px 24px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .04) inset;
	transition: transform .4s cubic-bezier(.2, .7, .15, 1), box-shadow .4s ease, border-color .4s ease;
}
.w9ch-card:hover {
	transform: translateY(-5px);
	border-color: rgba(255, 199, 44, .40);
	box-shadow: 0 16px 38px -6px rgba(255, 199, 44, .22), 0 1px 0 rgba(255, 255, 255, .06) inset;
}
.w9ch-card-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 18px;
	background: linear-gradient(150deg, #FFD34D 0%, #C8860B 100%);
	color: #1A0F02;
	font-size: 19px;
	margin-bottom: 16px;
}
.w9ch-card h3 {
	font-family: var(--s5-en);
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px;
}
/* same specificity fight as body.vk .w9ch-h2 above. */
body.vk .w9ch-card h3 { color: #FBF6EC !important; }
.w9ch-card p {
	font-family: var(--s5-bn);
	font-size: 14.5px;
	line-height: 1.8;
	color: #C9BFA6;
	margin: 0;
}

/* numbered step variant (deposit/withdraw walkthroughs) — same card shell,
   a round number chip instead of the icon glyph. */
.w9ch-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: rgba(255, 199, 44, .12);
	border: 1px solid rgba(255, 199, 44, .30);
	color: #FFC72C;
	font-family: var(--s5-en);
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 14px;
}

/* callout / note box — used for wagering-terms reminders, fraud warnings,
   responsible-gaming reminders. `.w9ch-note--warn` swaps the accent to red
   for the "don't trust guaranteed-bonus offers" style warning. */
.w9ch-note {
	max-width: 1240px;
	margin: clamp(22px, 3vh, 32px) auto 0;
	padding: 16px 20px;
	border-radius: 20px;
	background: rgba(255, 199, 44, .07);
	border: 1px solid rgba(255, 199, 44, .20);
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.w9ch-note i {
	flex: none;
	margin-top: 3px;
	color: #FFC72C;
	font-size: 15px;
}
.w9ch-note p {
	font-family: var(--s5-bn);
	font-size: 14px;
	line-height: 1.8;
	color: #C9BFA6;
	margin: 0;
}
.w9ch-note p strong { color: #F3ECDD; }
.w9ch-note--warn {
	background: rgba(220, 91, 75, .08);
	border-color: rgba(220, 91, 75, .28);
}
.w9ch-note--warn i { color: #E4796B; }

@media (max-width: 767px) {
	.w9ch-card { text-align: center; }
	.w9ch-card p { margin-left: auto; margin-right: auto; max-width: 38ch; }
}