/* ==================================================================
   BLOG PREMIUM PASS (2026-07) — /blog/ (post 51) + single posts (42/44/46)
   --------------------------------------------------------------------
   Scope: ONLY the blog listing + single-post templates. Everything here
   targets classes owned by 9w-blog.php's card/article markup (.w9-p*,
   .w9-art-*) or brand-new classes added only to that markup (.w9-rtime,
   .w9-byline, .w9-herostat, .w9-bcta*) — nothing here can leak onto the
   homepage, About, Terms, FAQ or Agent List pages.

   1. Card upgrade: same "glass pill" family as the agent cards
      (w9-agents/agent-list.css .w9a-card) — translucent gradient glass,
      backdrop blur, brand-tinted ambient glow, refined radius/hover —
      applied to the existing .w9-pcard grid (base rules still live in
      w9-site5.php; this file loads after it and wins at equal
      specificity, same pattern as every other v2+ layer on this site).
   2. Read-time + byline chips (new fields the brief asked for that the
      original 9w-blog.php build didn't have).
   3. A reusable "Premium Split" CTA (.w9-bcta) — the same two-column
      framed-visual + gold-chip language as the homepage's final CTA
      (w9-vk/cta-premium.css), rebuilt on THIS page's own --s5-* tokens
      and its own class names (not vk-cta__*) since the blog runs on the
      s5 inner-page layer, not the vk home layer — reusing the vk classes
      directly would either do nothing (no .vk-cta__bg wrapper here) or
      require importing homepage-only CSS. No photo asset exists for
      blog content, so the visual panel is an icon plate + a real,
      build-time-baked stat chip instead of a portrait.
   Must load after w9-agent-list (agent-list.css) so its equal-specificity
   rules win — same reasoning as every layer above it in w9-site5.php.
   ================================================================== */

/* ------------------------------------------------------------------
   1. Post cards — "glass pill" treatment
   ------------------------------------------------------------------ */
.w9-pcard{
  border-radius:30px;
  background:linear-gradient(135deg,rgba(255,255,255,.97) 0%,rgba(255,252,240,.92) 100%);
  border:1px solid rgba(30,27,20,.08);
  box-shadow:0 10px 28px rgba(30,27,20,.07), 0 1px 0 rgba(255,255,255,.7) inset;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  isolation:isolate;
}
.w9-pcard::before{
  content:"";
  position:absolute; inset:-30% -10% auto -10%; height:70%;
  background:radial-gradient(closest-side, var(--s5-gold-2), transparent 72%);
  opacity:.07; z-index:-1; filter:blur(30px); pointer-events:none;
  transition:opacity .5s ease;
}
.w9-pcard:hover{
  border-color:var(--s5-line-gold);
  box-shadow:0 20px 46px -10px rgba(200,134,11,.24), 0 1px 0 rgba(255,255,255,.8) inset;
}
.w9-pcard:hover::before{ opacity:.18; }
.w9-pmedia{ margin:10px 10px 0; border-radius:22px; }
.w9-pmedia img{ border-radius:22px; }
.w9-pmedia-alt{ margin:10px 10px 0; border-radius:22px; }
.w9-pbody{ padding:20px 22px 22px; }

/* meta row now wraps two kinds of pill: topic (brand) + read-time (neutral) */
.w9-pmeta{ flex-wrap:wrap; row-gap:8px; }
.w9-rtime{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--s5-en); font-size:12px; font-weight:600; color:var(--s5-dim);
}
.w9-rtime i{ color:var(--s5-gold); font-size:10.5px; }
.w9-pmeta time{ margin-left:auto; }

/* ------------------------------------------------------------------
   2. Article byline + read-time (hero meta row)
   ------------------------------------------------------------------ */
.w9-art-meta{ row-gap:10px; }
.w9-byline{ display:inline-flex; align-items:center; gap:8px; }
.w9-byline i{ color:var(--s5-gold); font-size:11px; }
.w9-byline b{ font-family:var(--s5-en); font-weight:700; color:var(--s5-ink); }

/* ------------------------------------------------------------------
   3. Blog listing hero — slim "guides published" stat line
   ------------------------------------------------------------------ */
.w9-herostat{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  padding:8px 16px 8px 8px; border-radius:999px;
  background:#FFFFFF; box-shadow:var(--s5-shadow);
  font-family:var(--s5-en); font-size:13px; font-weight:600; color:var(--s5-ink);
}
.w9-herostat span.w9-herostat-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:999px; background:var(--s5-grad);
  color:#1A1813; font-size:12px; font-weight:800;
}

/* Article share row (w9-site5.php `.w9-art-share`) carries a `border-top:1px
   solid var(--s5-line)` meant as a subtle divider above the share icons —
   rendering as a bold solid gold line instead (reported with a screenshot).
   Removed per request rather than re-tuned, since the row already reads as
   its own group (label + 4 icon buttons) without a divider. */
body.single-post .w9-art-share{ border-top:none; padding-top:0; }

/* ------------------------------------------------------------------
   4. Premium Split CTA — shared by the blog listing and every article
   ------------------------------------------------------------------ */
.w9-bcta{
  position:relative; overflow:hidden; padding:clamp(22px,3vh,32px) 24px;
  background:
    radial-gradient(760px 380px at 78% 15%, rgba(232,162,0,.24), transparent 64%),
    radial-gradient(620px 340px at 12% 90%, rgba(200,134,11,.16), transparent 66%),
    linear-gradient(180deg,var(--s5-dark) 0%,var(--s5-dark-2) 100%);
}
/* Single-post articles (unlike the blog listing) render inside the theme's
   own <main class="site-main"> column, which carries a fixed max-width
   (1140px here) for readable article prose — correct for body text, but it
   also traps this CTA, which is meant to break out edge-to-edge like every
   other page's closing CTA. Standard full-bleed technique: 100vw width,
   pulled back to center with a negative margin computed from the viewport,
   escaping the ancestor's max-width regardless of how deep it's nested. */
body.single-post .w9-bcta{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.w9-bcta__inner{
  position:relative; z-index:2; max-width:1360px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  align-items:center; gap:clamp(24px,4vw,48px);
}
/* This section (.s5-final) sets text-align:center + a `!important` colour
   on every h1-h6 and `color:inherit` on every <a> (w9-vk/wickets-home.css
   `body.vk h1..h6`, `body.vk a`) — the same kit/global-override pattern
   documented for buttons elsewhere on this site. Both are higher-specificity
   AND (for the heading) `!important`, so every colour + the alignment below
   must fight back with matching or greater specificity/`!important`, not
   just declare a value. */
@media(min-width:861px){
  .w9-bcta .w9-bcta__inner,
  .w9-bcta .w9-bcta__content,
  .w9-bcta .w9-bcta__eyebrow,
  .w9-bcta .w9-bcta__h2,
  .w9-bcta .w9-bcta__lead{ text-align:left !important; }
}
.w9-bcta__eyebrow{
  display:inline-flex; padding:7px 16px; border-radius:999px;
  background:rgba(255,199,44,.16); font-family:var(--s5-en); font-size:11px;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.w9-bcta .w9-bcta__eyebrow{ color:var(--s5-sun) !important; }
.w9-bcta__h2{
  font-family:var(--s5-en); font-size:clamp(26px,3.4vw,40px); font-weight:700;
  line-height:1.16; letter-spacing:-.02em; margin:14px 0 0;
}
.w9-bcta .w9-bcta__content .w9-bcta__h2{ color:#FFFFFF !important; }
.w9-bcta__lead{
  font-family:var(--s5-bn); font-size:16px; line-height:1.85;
  max-width:56ch; margin:14px 0 0;
}
.w9-bcta .w9-bcta__lead{ color:#C7BA9C !important; }
.w9-bcta__btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.w9-bcta .w9-bcta__btn,
.w9-bcta .w9-bcta__btn:visited{
  display:inline-flex; align-items:center; gap:9px; padding:14px 28px;
  border-radius:999px; background:var(--s5-grad); color:#1A0F02 !important;
  font-family:var(--s5-en); font-size:14.5px; font-weight:600; text-decoration:none;
  box-shadow:var(--s5-glow); white-space:nowrap;
  transition:transform .35s cubic-bezier(.2,.7,.15,1), box-shadow .35s ease;
}
.w9-bcta .w9-bcta__btn:hover{ transform:translateY(-3px); box-shadow:var(--s5-glow-hi); color:#1A0F02 !important; }
.w9-bcta .w9-bcta__btn--ghost,
.w9-bcta .w9-bcta__btn--ghost:visited{
  background:rgba(255,255,255,.08); color:#FFFFFF !important; box-shadow:none;
  border:1px solid rgba(255,255,255,.22);
}
.w9-bcta .w9-bcta__btn--ghost:hover{ background:rgba(255,255,255,.14); color:#FFFFFF !important; transform:translateY(-3px); }

.w9-bcta__visual{ position:relative; z-index:1; display:flex; justify-content:center; }
.w9-bcta__panel{
  position:relative; width:min(100%,268px); aspect-ratio:1/1; border-radius:32px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, rgba(232,162,0,.35) 0%, rgba(200,134,11,.14) 45%, rgba(255,255,255,.10) 100%);
  box-shadow:0 30px 70px -22px rgba(0,0,0,.55), 0 0 0 1px rgba(200,134,11,.28);
}
.w9-bcta__panel::before{
  content:""; position:absolute; inset:-22px; z-index:-1; border-radius:40px;
  background:radial-gradient(60% 60% at 50% 40%, rgba(232,162,0,.34), transparent 70%);
  filter:blur(24px);
}
.w9-bcta__panel i{ font-size:64px; color:var(--s5-sun); opacity:.92; }
.w9-bcta__chip{
  position:absolute; left:-14px; bottom:20px; z-index:2;
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px;
  background:#FFFFFF; border-radius:999px;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.35), 0 0 0 1px rgba(200,134,11,.18);
  font-family:var(--s5-en); font-size:12.5px; font-weight:700; color:var(--s5-gold-3);
  white-space:nowrap;
}
.w9-bcta__chip i{ color:var(--s5-gold); }

@media(max-width:860px){
  .w9-bcta__inner{ grid-template-columns:1fr; text-align:center; }
  .w9-bcta__lead{ margin-left:auto; margin-right:auto; }
  .w9-bcta__btns{ justify-content:center; }
  .w9-bcta__visual{ order:-1; margin-bottom:6px; }
  .w9-bcta__panel{ width:min(100%,200px); }
  .w9-bcta__panel i{ font-size:52px; }
  .w9-bcta__chip{ left:50%; transform:translateX(-50%); bottom:-14px; }
}
@media(max-width:480px){ .w9-bcta__chip{ display:none; } }

/* ==================================================================
   SITE-WIDE MOBILE PASS (2026-07) — centre headings/lead text, fix the
   raw-<ul> bullet bug, on the two blog surfaces that never got either
   treatment when it was applied to the agent-tier pages / About-Terms-
   FAQ-AgentList group:
     - Blog listing (post 51): its H1 hero + "What we cover" section head
       (.s5-ihero / .s5-sechead, both plain Elementor heading widgets) were
       built with left alignment; every other page's equivalent hero is
       centred on mobile — the discrepancy has nothing to do with content,
       it's just a per-widget alignment choice this page never had. Scoped
       to body.page-id-51 (WP's own body class for the Blog page) so it
       can't touch the 4 pillpage surfaces or the agent-tier pages, which
       already center their own version of this via pages-pills.css /
       agent-pages.css.
     - Single-post article hero (.w9-art-*, PHP-generated by 9w-blog.php):
       same left-alignment gap. Scoped to body.single-post (WP's default
       body class for a single `post`). The article BODY (the h2/p content
       inside the guide itself, plus the ✓ checklist) is deliberately left
       alone — centring multi-paragraph prose hurts readability and no
       other long-form content on this site does it (the homepage's own
       .vk-seo__lead / .vk-seo__col prose stays left for the same reason).
     - `.s5-grid.s5-g3` / `.s5-card` bullet bug: same root cause already
       diagnosed for the agent-tier pages (w9-agents/agent-pages.css) —
       the shared base rule never resets list-style/padding on this raw
       <ul>, so a bullet floats to the left of every card once the grid
       collapses to one column. Blog's "Everything a 9Wickets player asks
       about" list and New Account's "কেন প্রথম থেকেই আস্থা রাখবেন" list are
       the only two surfaces still on the un-fixed base behaviour — this
       file only owns the blog half (New Account's is in help-desk.css).
   ================================================================== */
/* ---- Blog listing hero (.s5-ihero: eyebrow + h1 + .s5-lede) ----
   Two DIFFERENT rules for two different situations, corrected after a real
   bug report at 1100px: earlier this centred the hero at every width,
   including desktop — but desktop also carries the width-capped
   `max-width:46%` rule below (needed to keep text clear of the decorative
   photo). A CENTRED box that's ALSO width-capped drifts its right edge
   further right than a left-anchored box of the same width (centering
   position + half the box width, vs. just the box width from the left
   padding) — at 1100px that pushed the box's right edge into the image's
   own fade zone, i.e. exactly the "text over the image" bug. Fix: only
   centre on mobile, where no image exists at all (it's `min-width:1025px`
   only, below) so there's nothing to run into; stay left-aligned at
   desktop, where the cap does its actual job of keeping clear of the
   photo. */
@media (max-width: 767px) {
	body.page-id-51 .s5-ihero .s5-eyebrow,
	body.page-id-51 .s5-ihero h1.elementor-heading-title,
	body.page-id-51 .s5-ihero .s5-lede p { text-align: center; }
	body.page-id-51 .s5-ihero .s5-lede p { margin-left: auto; margin-right: auto; }
	body.page-id-51 .s5-ihero .w9-herostat { margin-left: auto; margin-right: auto; }
}

/* ---- keep hero text clear of the decorative photo (desktop only) ----
   The image is a right-edge background wash on .s5-ihero itself, not a
   boxed column — there is no DOM-level boundary stopping foreground text
   from running underneath it, so the heading/lede must be explicitly
   width-capped. LEFT-anchored (no margin:auto) — matches the hero's own
   default text-align:left, so the cap alone is what keeps it clear of the
   image; centring the box here is what caused the bug above. Capped only
   where the image actually renders (matches its own breakpoint). */
@media (min-width: 1025px) {
	body.page-id-51 .s5-ihero .s5-eyebrow,
	body.page-id-51 .s5-ihero h1.elementor-heading-title,
	body.page-id-51 .s5-ihero .s5-lede p,
	body.page-id-51 .s5-ihero .w9-herostat {
		max-width: 46%;
	}
}

/* ---- Blog listing section heads (.s5-head wraps eyebrow + h2 + lede for
   BOTH "যা নিয়ে আমরা লিখি" and "ব্লগ থেকে / সর্বশেষ গাইড") — base .s5-head only
   styles font, not the flex container's alignment, so it defaults to
   left/start. Centred at every width. ---- */
body.page-id-51 .s5-head { align-items: center; text-align: center; }
body.page-id-51 .s5-head p { margin-left: auto; margin-right: auto; }

/* ---- raw-<ul> bullet/indent fix (same fix as agent-pages.css §"FEATURE-GRID
   FIX") — was mobile-only, the dots show at every width. ---- */
body.page-id-51 .s5-grid,
body.page-id-51 .s5-g3,
body.page-id-51 .s5-g4 { list-style: none !important; padding: 0 !important; }
body.page-id-51 .s5-card { border: 1px solid rgba(200, 134, 11, .14); box-shadow: 0 10px 26px rgba(30, 27, 20, .10); }

/* ---- section-gap fix (same root cause already diagnosed on the agent-tier
   pages: shared .s5-sec forces min-height:100vh regardless of how little
   content a section holds, so the "যা নিয়ে আমরা লিখি" 3-card section — far
   short of a full viewport — pads out into a long dead stretch before
   "ব্লগ থেকে সর্বশেষ গাইড" begins). Never applied to the blog page at all. ---- */
body.page-id-51 .s5-sec { min-height: 0 !important; }
@media (min-width: 901px) {
	body.page-id-51 .s5-sec {
		padding-top: clamp(46px, 5.4vh, 68px) !important;
		padding-bottom: clamp(46px, 5.4vh, 68px) !important;
	}
}

/* ---- decorative hero image (desktop only, background wash — same
   technique as w9-agents/agent-pages.css, never a DOM <img>) — the blog
   hero was the one redesigned page left with no photo at all. ---- */
@media (min-width: 1025px) {
	body.page-id-51 .s5-ihero {
		background:
			radial-gradient(820px 400px at 70% 0%, rgba(255, 199, 44, .30), transparent 64%),
			linear-gradient(90deg, var(--s5-cream) 0%, var(--s5-cream) 46%, rgba(255, 248, 225, .45) 64%, transparent 88%),
			url("../../uploads/2026/07/89856877-pretty-long-hair-woman-in-black-dress-holding-chips-for-gambling.jpg"),
			var(--s5-cream) !important;
		background-position: 0 0, 0 0, right center, 0 0 !important;
		background-size: auto, auto, auto 100%, auto !important;
		background-repeat: no-repeat, no-repeat, no-repeat, repeat !important;
	}
}

/* ---- SITE-WIDE FIX: pointer-events dead zone inside every .s5-wave-t /
   .s5-wave-b section ----
   Root cause (found while chasing "blog cards aren't clickable"): the base
   rule `.s5-wave-t, .s5-wave-b { pointer-events: none; ... }` (w9-site5.php)
   was written for a thin standalone 64px decorative divider bar. In every
   real build on this site, though, those two modifier classes get applied
   directly to the SAME element as the actual content section (e.g.
   `class="... s5-sec s5-blogsec s5-wave-t ..."` on the container that also
   holds this page's whole card grid, or `class="... s5-final s5-wave-t ..."`
   on every redesigned page's closing CTA). Because pointer-events is
   inherited, EVERY interactive descendant of such a section — this page's
   .w9-pcard stretched-link overlay (already correctly implemented in the
   base file: `.w9-pcard{position:relative}` + `.w9-ptitle a::after{inset:0}`
   — position/size were always right, they just couldn't receive clicks),
   plus every .vk-cta--premium / .w9-bcta / .hd-chan button on every other
   redesigned page's closing CTA — silently stopped responding to clicks
   sitewide. Confirmed via a real click test (button click produced zero
   navigation) before writing this fix, not just a computed-style guess.
   Fixed here (this file loads on every page, unconditionally, at the
   latest wp_enqueue_scripts priority — see the PHP block below in this
   file's loader) rather than per-page, since the bug is not page-specific.
   `!important` because pointer-events:none is inherited, not overridden by
   normal specificity rules — a plain-specificity `auto` on a *descendant*
   would still lose to the inherited value unless the descendant itself is
   targeted directly, which is fragile; forcing `auto` on every element that
   carries BOTH a wave class and a real-content class is the precise,
   narrowly-scoped counter-fix (a true standalone decorative-only divider,
   with no content classes alongside the wave class, is untouched). ---- */
.s5-wave-t.s5-sec, .s5-wave-b.s5-sec,
.s5-wave-t.s5-final, .s5-wave-b.s5-final { pointer-events: auto !important; }

@media (max-width: 767px) {
	/* ---- single-post article hero (.w9-art-head wraps chip/h1/lead/meta;
	   text-align inherits down to all three — only the already-flex meta
	   row needs its own justify-content) ---- */
	body.single-post .w9-art-head { text-align: center; }
	body.single-post .w9-art-lead { margin-left: auto; margin-right: auto; }
	body.single-post .w9-art-meta { justify-content: center; }
	/* .w9-art-shot (featured image) is already a centred, capped-width,
	   width:100% block (base rule, w9-site5.php) — nothing to do here. */

	/* ---- post cards: meta row / title / excerpt / "read the guide" link.
	   .w9-pcard is the SAME markup (w9_post_card()) on both surfaces this
	   file owns — the blog listing grid (body.page-id-51) and the
	   related-guides grid at the foot of every article (body.single-post) —
	   and is not used anywhere else on the site (see this file's header
	   comment), so one unscoped rule covers both without any risk of
	   leaking onto another page.
	   Root cause: .w9-pbody is `display:flex;flex-direction:column`
	   (base rule), which blockifies+stretches EVERY direct child to full
	   card width — including .w9-pmeta and .w9-pgo, which are themselves
	   flex rows (inline-flex/flex), not plain block text. text-align:center
	   on .w9-pbody centres the plain-block children (.w9-ptitle, .w9-pexc)
	   for free, but the two flex-row children ignore text-align entirely
	   and need their own justify-content — and .w9-pmeta's date pill
	   carries `margin-left:auto` (this file, "meta row" section above) to
	   push it flush right in the desktop card, which as an auto-margin
	   would fight and win over justify-content:center once the row is
	   centred, so it has to be zeroed here too. */
	.w9-pcard .w9-pbody { text-align: center; }
	.w9-pcard .w9-pmeta { justify-content: center; }
	.w9-pcard .w9-pmeta time { margin-left: 0; }
	.w9-pcard .w9-pgo { justify-content: center; }

	/* ---- blog listing pagination row + "page X / Y" count ----
	   .w9-pag ul is a flex row (base rule) — text-align does nothing to a
	   flex container, it needs justify-content. Scoped to the Blog page:
	   .w9-pag is blog-exclusive markup like .w9-pcard above, but kept
	   body-scoped here to match the rest of this page's mobile-pass rules
	   (bullet-fix / section-gap fix above) at no cost. */
	body.page-id-51 .w9-pag ul { justify-content: center; }
	body.page-id-51 .w9-pag-count { text-align: center; }

	/* ---- blog listing "যা নিয়ে আমরা লিখি" topic cards (.s5-card, raw
	   <li> markup inside the html widget — icon chip + h3 + p, see
	   w9_post_card()-adjacent comment). Unlike .w9-pcard/.w9-pag, .s5-card
	   is a SITE-WIDE design-system class (w9-site5.php's card family, also
	   used by other pages' pill/tier/link cards) with its own centring
	   rules on other page groups' scope — so this MUST stay scoped to
	   body.page-id-51, or it would silently recolour/recentre cards on
	   pages this group does not own. */
	body.page-id-51 .s5-card { text-align: center; }

	/* ---- single-post share row + back link ----
	   .w9-art-share is a flex row (base rule) — same "text-align does
	   nothing to a flex row" reasoning as the pagination fix above. */
	body.single-post .w9-art-share { justify-content: center; }
	body.single-post .w9-post-back { text-align: center; }

	/* ---- single-post related-guides section head (eyebrow + h2 above the
	   .w9-pgrid; the grid's own cards are covered by the unscoped .w9-pcard
	   rules above). .w9-art-rel-in has no text-align of its own in the base
	   file, so it inherits the page default (left). ---- */
	body.single-post .w9-art-rel .w9-art-eyebrow,
	body.single-post .w9-art-rel .w9-art-h2 { text-align: center; }

	/* Article BODY prose (.w9-art-body — the actual h2/p/ul guide content)
	   is deliberately left alone here, same as documented in the SITE-WIDE
	   MOBILE PASS comment above: no long-form paragraph content anywhere on
	   this site is centred on mobile, and doing it here would hurt
	   readability for multi-line running text. Checked every published post
	   for anything that isn't plain paragraph/heading/list prose (a
	   pull-quote or callout box would be a legitimate exception) — as of
	   this pass none of the 32 posts contain a <blockquote>, <table>, or any
	   callout-style markup, so there is currently nothing in the article
	   body that qualifies for centring. */
}
@media (max-width: 480px) {
	/* Nothing further breaks at this width: pagination pills wrap (flex-wrap
	   already set, base rule) and stay centred via the 767px rule above; the
	   share row's 4 icon buttons + label fit on one line down to ~360px and
	   otherwise wrap+recentre the same way; the CTA chip is already hidden
	   below 480px (rule above). Verified by reading computed layout math
	   (button/pill widths + gaps against 480px minus the 24px side padding
	   used throughout this page), NOT by an actual narrow-viewport render —
	   see report for the outstanding real-device/browser check. */
}