/* ==========================================================================
   BLOG (post 51) + SINGLE-POST ARTICLE -> AGENT-LIST DARK MATCH (2026-07-26)
   --------------------------------------------------------------------------
   Same direct request/technique as w9-agents/agent-pages-dark-match.css and
   w9-vk/faq-dark-match.css: the blog listing and every article page must use
   Agent List's exact dark "premium casino" palette instead of the earlier
   cream-hero + stock-photo treatment. Scoped to `body.page-id-51` (blog
   listing) and `body.single-post` (every article) — nothing here can leak
   onto any other page.

   DELIBERATELY LEFT LIGHT/CREAM (this is real post content, not chrome —
   "without post data change"): `.w9-art-wrap` (the article's own prose body,
   share row and back-link all sit inside this one continuous light reading
   block with no visual section break — recoloring only the share icons
   while the paragraph text above stays light would look broken, so the
   whole block stays exactly as authored) and every `.w9-pcard`'s own
   title/excerpt TEXT content, featured image, date and category (only the
   card's container chrome — background/border/shadow — is recolored below).

   Palette identical to the other dark-match passes:
     bg gradient #0B0906 -> #15110A -> #17150F | gold #FFC72C
     heading #FBF6EC | muted #C9BFA6 / #8A8270 | card text #F3ECDD

   Loads after blog-premium.css (dependency) so it wins every cascade tie.
   ========================================================================== */

/* ==================================================================
   BLOG LISTING HERO (body.page-id-51 .s5-ihero)
   ================================================================== */
body.page-id-51 .s5-ihero {
	background: linear-gradient(180deg, #0B0906 0%, #15110A 55%, #17150F 100%) !important;
	border-bottom: 1px solid rgba(255, 199, 44, .16);
	position: relative;
	/* base .s5-ihero padding is clamp(90px,10vh,124px) top — this page never
	   got the "hero slim" pass agent-pages.css already gave the other 7
	   dark-matched pages (clamp(26px,3.6vh,40px)); same values reused here
	   for consistency rather than inventing new ones. */
	padding: clamp(26px, 3.6vh, 40px) 24px clamp(18px, 2.4vh, 26px) !important;
}
body.page-id-51 .s5-ihero.s5-wave-t::before,
body.page-id-51 .s5-ihero.s5-wave-b::after,
body.page-id-51 .s5-sec.s5-wave-t::before,
body.page-id-51 .s5-sec.s5-wave-b::after {
	background-image: none !important;
}
body.page-id-51 .s5-ihero .s5-eyebrow .elementor-heading-title {
	background: rgba(255, 199, 44, .12) !important;
	border: 1px solid rgba(255, 199, 44, .30);
	color: #FFC72C !important;
}
body.page-id-51 .s5-ihero h1.elementor-heading-title { color: #FBF6EC !important; }
body.page-id-51 .s5-ihero .s5-lede p { color: #C9BFA6 !important; }

/* hero "N guides published" stat pill (.w9-herostat) */
body.page-id-51 .w9-herostat {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid rgba(255, 199, 44, .16);
	box-shadow: none !important;
	color: #C9BFA6 !important;
}
body.page-id-51 .w9-herostat-n {
	background: linear-gradient(150deg, #FFD34D 0%, #C8860B 100%) !important;
	color: #1A0F02 !important;
}

/* orbit visual (injected by agent-pages-orbit-inject.js, enqueued for this
   page too) — same widget/positioning as the other 8 dark-matched pages. */
body.page-id-51 .s5-ihero .vk-alh-visual {
	position: absolute;
	z-index: 2;
	right: clamp(24px, 6vw, 90px);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}
@media (max-width: 1024px) {
	body.page-id-51 .s5-ihero .vk-alh-visual { display: none; }
}
/* base blog-premium.css caps hero text at max-width:46% on desktop to clear
   the (now-removed) decorative photo — the orbit replaces that photo, same
   cap still keeps copy clear of it. */

/* ==================================================================
   BLOG LISTING SECTIONS — "যা নিয়ে আমরা লিখি" topic cards +
   "ব্লগ থেকে / সর্বশেষ গাইড" listing section
   ================================================================== */
body.page-id-51 .s5-sec {
	background: linear-gradient(180deg, #0B0906 0%, #15110A 55%, #17150F 100%) !important;
}
body.page-id-51 .s5-eyebrow .elementor-heading-title {
	background: rgba(255, 199, 44, .12) !important;
	border: 1px solid rgba(255, 199, 44, .30);
	color: #FFC72C !important;
}
body.page-id-51 .s5-sechead .elementor-heading-title,
body.page-id-51 .s5-head { color: #FBF6EC !important; }
body.page-id-51 .s5-lede-c p,
body.page-id-51 .s5-head p { color: #C9BFA6 !important; }

body.page-id-51 .s5-card {
	background: rgba(255, 255, 255, .06) !important;
	box-shadow: none !important;
	border: 1px solid rgba(255, 199, 44, .14);
}
body.page-id-51 .s5-card h3 { color: #FBF6EC !important; }
body.page-id-51 .s5-card p { color: #C9BFA6 !important; }

/* ==================================================================
   POST CARDS (.w9-pcard) — chrome only, shared by the blog listing grid
   AND the related-guides grid at the foot of every article. Title,
   excerpt, image, date and category text are untouched real post data.
   ================================================================== */
body.page-id-51 .w9-pcard,
body.single-post .w9-pcard {
	background: linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%) !important;
	border: 1px solid rgba(255, 199, 44, .16) !important;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .04) inset !important;
}
body.page-id-51 .w9-pcard:hover,
body.single-post .w9-pcard:hover {
	border-color: rgba(255, 199, 44, .40) !important;
	box-shadow: 0 16px 38px -6px rgba(255, 199, 44, .22), 0 1px 0 rgba(255, 255, 255, .06) inset !important;
}
body.page-id-51 .w9-ptopic,
body.single-post .w9-ptopic {
	background: rgba(255, 199, 44, .14) !important;
	color: #FFC72C !important;
}
body.page-id-51 .w9-rtime,
body.single-post .w9-rtime,
body.page-id-51 .w9-pmeta time,
body.single-post .w9-pmeta time { color: #8A8270 !important; }
body.page-id-51 .w9-rtime i,
body.single-post .w9-rtime i { color: #FFC72C !important; }
body.page-id-51 .w9-ptitle a,
body.single-post .w9-ptitle a { color: #F3ECDD !important; }
body.page-id-51 .w9-pexc,
body.single-post .w9-pexc { color: #C9BFA6 !important; }
body.page-id-51 .w9-pgo,
body.single-post .w9-pgo { color: #FFC72C !important; }
body.page-id-51 .w9-pmedia-alt,
body.single-post .w9-pmedia-alt {
	background: rgba(255, 199, 44, .10) !important;
	color: #FFC72C !important;
}

/* pagination (.w9-pag) */
body.page-id-51 .w9-pag a,
body.page-id-51 .w9-pag span.current,
body.page-id-51 .w9-pag span.dots {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid rgba(255, 199, 44, .16);
	color: #F3ECDD !important;
	box-shadow: none !important;
}
body.page-id-51 .w9-pag a:hover {
	border-color: rgba(255, 199, 44, .40);
	background: rgba(255, 199, 44, .10) !important;
}
body.page-id-51 .w9-pag span.current {
	background: linear-gradient(150deg, #FFD34D 0%, #C8860B 100%) !important;
	color: #1A0F02 !important;
	border-color: transparent;
}
body.page-id-51 .w9-pag span.dots { color: #8A8270 !important; }
body.page-id-51 .w9-pag-count { color: #8A8270 !important; }
body.page-id-51 .w9-pempty { color: #C9BFA6 !important; }

/* ==================================================================
   SINGLE-POST ARTICLE HERO (.w9-art-hero) — the .w9-art-wrap reading
   body below it (article prose, share row, back link) is deliberately
   left on its existing light/cream background — see file header.
   ================================================================== */
body.single-post .w9-art-hero {
	/* full-bleed fix (same vw-based technique blog-premium.css already uses
	   for .w9-bcta, documented there): `main.site-main` carries a fixed
	   max-width:1140px (theme/Elementor-kit content-width setting) — the
	   base `body.single-post .site-main{max-width:none}` reset does NOT
	   actually win that cascade (verified via computed style: site-main
	   still renders at 1140px), so both this hero and .w9-art-rel below
	   were already being invisibly capped — cosmetically silent while both
	   the hero and the page background were the same cream, now a visible
	   gutter of page-background cream down both sides now that the hero is
	   dark. Pull it back out to the viewport edge exactly like the CTA. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: linear-gradient(180deg, #0B0906 0%, #15110A 55%, #17150F 100%) !important;
	border-bottom: 1px solid rgba(255, 199, 44, .16);
	/* same "hero slim" padding fix as the blog listing hero above — base
	   .w9-art-hero padding is clamp(90px,10vh,124px) top, this template
	   never got the slim treatment either. */
	padding: clamp(26px, 3.6vh, 40px) 24px clamp(18px, 2.4vh, 26px) !important;
}
body.single-post .w9-art-chip span {
	background: rgba(255, 199, 44, .12) !important;
	color: #FFC72C !important;
}
body.single-post .w9-art-title { color: #FBF6EC !important; }
body.single-post .w9-art-lead { color: #C9BFA6 !important; }
body.single-post .w9-art-meta {
	border-top-color: rgba(255, 199, 44, .16) !important;
}
body.single-post .w9-art-meta span { color: #8A8270 !important; }
body.single-post .w9-art-meta i,
body.single-post .w9-byline i { color: #FFC72C !important; }
body.single-post .w9-byline b { color: #F3ECDD !important; }
body.single-post .w9-art-shot img {
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 199, 44, .18);
}

/* ==================================================================
   RELATED GUIDES (.w9-art-rel) — section head only; its .w9-pgrid of
   .w9-pcard is covered by the shared rules above.
   ================================================================== */
body.single-post .w9-art-rel {
	/* same full-bleed fix as .w9-art-hero above — this section is also a
	   direct child of the width-capped .site-main. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: linear-gradient(180deg, #0B0906 0%, #15110A 55%, #17150F 100%) !important;
	padding-bottom: clamp(46px, 5.4vh, 68px);
}
body.single-post .w9-art-eyebrow span {
	background: rgba(255, 199, 44, .12) !important;
	color: #FFC72C !important;
}
body.single-post .w9-art-rel .w9-art-h2 { color: #FBF6EC !important; }

/* ==================================================================
   "PREMIUM SPLIT" CTA (.w9-bcta) — shared by the blog listing AND every
   article. Already dark by default (base --s5-dark tokens); unified here
   to the exact Agent-List premium palette for pixel-identical colors.
   ================================================================== */
body.page-id-51 .w9-bcta,
body.single-post .w9-bcta {
	background:
		radial-gradient(760px 380px at 78% 15%, rgba(255, 199, 44, .18), transparent 64%),
		radial-gradient(620px 340px at 12% 90%, rgba(200, 134, 11, .16), transparent 66%),
		linear-gradient(180deg, #0B0906 0%, #15110A 60%, #17150F 100%) !important;
	border-top: 1px solid rgba(255, 199, 44, .16);
}
body.page-id-51 .w9-bcta .w9-bcta__eyebrow,
body.single-post .w9-bcta .w9-bcta__eyebrow {
	background: rgba(255, 199, 44, .12) !important;
	color: #FFC72C !important;
}
body.page-id-51 .w9-bcta .w9-bcta__lead,
body.single-post .w9-bcta .w9-bcta__lead { color: #C9BFA6 !important; }
body.page-id-51 .w9-bcta .w9-bcta__btn,
body.single-post .w9-bcta .w9-bcta__btn {
	background: linear-gradient(150deg, #FFD34D 0%, #C8860B 100%) !important;
}
body.page-id-51 .w9-bcta .w9-bcta__panel,
body.single-post .w9-bcta .w9-bcta__panel {
	background: linear-gradient(160deg, rgba(255, 199, 44, .35) 0%, rgba(200, 134, 11, .14) 45%, rgba(255, 255, 255, .10) 100%) !important;
	box-shadow: 0 30px 70px -22px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 199, 44, .28) !important;
}
body.page-id-51 .w9-bcta .w9-bcta__panel i,
body.single-post .w9-bcta .w9-bcta__panel i { color: #FFC72C !important; }
body.page-id-51 .w9-bcta .w9-bcta__chip,
body.single-post .w9-bcta .w9-bcta__chip {
	background: #1C1610 !important;
	color: #FFC72C !important;
	box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 199, 44, .22) !important;
}
body.page-id-51 .w9-bcta .w9-bcta__chip i,
body.single-post .w9-bcta .w9-bcta__chip i { color: #FFC72C !important; }