/* ==========================================================================
   BLOG "DARK PREMIUM" PASS (2026-07) — /blog/ (51) + every single post
   --------------------------------------------------------------------------
   blog-premium.css already gave this page family a light-cream "glass pill"
   premium treatment; this brings it in line with the dark #17150F→#0E0C09 /
   gold #F9E900 identity used on the home page, every agent-family page and
   FAQ. Scoped to `body.page-id-51` (listing) and `body.single-post` (every
   article) — the same two selectors blog-premium.css itself already uses,
   so nothing here can leak onto any other page.

   NOT touched, on purpose (matches the FAQ pass's same scope discipline):
     - `.w9-bcta` and `.w9-art-cta` (the two closing-CTA components) — both
       ALREADY use `var(--s5-dark)`/`var(--s5-dark-2)`, which compute to the
       exact `#17150F`/`#0E0C09` this pass uses everywhere — confirmed live,
       not assumed. They were dark before this identity even had a name.
     - `.s5-card` ("যা নিয়ে আমরা লিখি" 3-card intro) and `.s5-head` section
       eyebrow/heading text — same call as FAQ's category headers: dark ink
       on the existing cream section backdrop already reads fine, and only
       the REPEATING content (post cards here, accordion pills there) goes
       dark, for the same "dark cards on a light section" contrast that's
       already proven across this whole site.
     - `.w9-art-body` (the actual article prose) and `.w9-share-btn` — both
       sit on the page's own light content column outside any hero/card,
       untouched.
   Loads after blog-premium.css (w9-site5.php enqueue dependency).
   ========================================================================== */

/* ==========================================================================
   1. BLOG LISTING HERO (.s5-ihero, body.page-id-51)
   ========================================================================== */
body.page-id-51 .s5-ihero {
    background-color: #17150F !important;
    background-image:
        radial-gradient(120% 180% at 100% -20%, rgba(249, 233, 0, .14), transparent 55%),
        linear-gradient(160deg, #17150F 0%, #0E0C09 100%) !important;
}
body.page-id-51 .s5-ihero.s5-wave-b::after { background-image: none !important; }
body.page-id-51 .s5-ihero .s5-eyebrow .elementor-heading-title {
    background: rgba(249, 233, 0, .16) !important;
    color: #F9E900 !important;
}
body.page-id-51 .s5-ihero h1.elementor-heading-title { color: #FFFFFF !important; }
body.page-id-51 .s5-ihero h1 .s5-hl {
    /* solid gold via -webkit-text-fill-color, not the gradient-clip the base
       rule ships with — sidesteps the Elementor lazy-load bug that makes
       this exact pattern invisible elsewhere on the site whenever its
       background-image gets blocked (see agent-list-redesign.css §8 /
       faq-dark-premium.css). */
    -webkit-text-fill-color: #F9E900 !important;
    color: #F9E900 !important;
}
body.page-id-51 .s5-ihero .s5-lede p { color: rgba(255, 255, 255, .76) !important; }

/* the desktop-only decorative photo wash (blog-premium.css, min-width:1025px)
   fades from solid cream (left) to the photo (right) via a linear-gradient
   layered over the same url() — recolor the wash to dark, keep the photo,
   same technique already used for the agent tier-pages' hero (agent-
   list-redesign.css §5). Must match/exceed that rule's specificity+
   !important (both are `!important`, same 2-class-ish weight; this file
   loads later so wins the tie). */
@media (min-width: 1025px) {
    body.page-id-51 .s5-ihero {
        background:
            radial-gradient(820px 400px at 70% 0%, rgba(249, 233, 0, .18), transparent 64%),
            linear-gradient(90deg, #17150F 0%, #17150F 46%, rgba(23, 21, 15, .55) 64%, transparent 88%),
            url("../../uploads/2026/07/89856877-pretty-long-hair-woman-in-black-dress-holding-chips-for-gambling.jpg"),
            #17150F !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;
    }
}

body.page-id-51 .w9-herostat {
    background: rgba(255, 255, 255, .06) !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, .85) !important;
}
body.page-id-51 .w9-herostat span.w9-herostat-n { color: #1A1500; }

/* ==========================================================================
   2. SINGLE-POST ARTICLE HERO (.w9-art-*, body.single-post)
   ========================================================================== */
body.single-post .w9-art-hero {
    background-color: #17150F !important;
    background-image:
        radial-gradient(820px 380px at 70% 0%, rgba(249, 233, 0, .18), transparent 64%) !important;
}
body.single-post .w9-art-chip span {
    background: rgba(249, 233, 0, .16);
    color: #F9E900;
}
/* `.w9-art-title` renders as an actual heading tag — wickets-home.css's
   "premium rebalance" layer sets `body.vk h1,h2,h3,h4,h5,h6{ color:#1A1813
   !important }` globally, which otherwise wins over a plain (non-important)
   color here regardless of this selector's higher specificity. Confirmed
   live: `.w9-art-lead`/`.w9-art-chip span`/`.w9-art-meta span` (all
   <p>/<span>, never matched by that h1-h6 rule) applied correctly with no
   !important needed; only this heading needed it. */
body.single-post .w9-art-title { color: #FFFFFF !important; }
body.single-post .w9-art-lead { color: rgba(255, 255, 255, .76); }
body.single-post .w9-art-meta {
    border-top-color: rgba(255, 255, 255, .14);
}
body.single-post .w9-art-meta span { color: rgba(255, 255, 255, .68); }
body.single-post .w9-art-meta i { color: #F9E900; }
/* `.w9-byline b` (the "9Wickets টিম" name) keeps blog-premium.css's
   `color:var(--s5-ink)` — near-black, invisible on this hero's new dark
   background. The `.w9-art-meta span` rule above only touches the span
   itself, not this more-specific nested `b`. */
body.single-post .w9-byline b { color: #FFFFFF; }

/* ==========================================================================
   3. POST CARDS (.w9-pcard) — shared by the blog listing grid AND every
   article's "related guides" grid; the main repeating content on both
   surfaces, same role the FAQ accordion pills play there.
   ========================================================================== */
.w9-pcard {
    background: none !important;
    background-color: #1A170F !important;
    background-image: linear-gradient(160deg, #1A170F 0%, #0E0C09 100%) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .04) inset !important;
}
.w9-pcard::before {
    background: radial-gradient(closest-side, #F9E900, transparent 72%);
    opacity: .08;
}
.w9-pcard:hover {
    border-color: rgba(249, 233, 0, .35) !important;
    box-shadow: 0 18px 40px -10px rgba(249, 233, 0, .22), 0 1px 0 rgba(255, 255, 255, .06) inset !important;
}
.w9-pcard:hover::before { opacity: .18; }

.w9-ptitle,
.w9-ptitle a { color: #FFFFFF !important; }
.w9-pexc { color: rgba(255, 255, 255, .68) !important; }
.w9-rtime { color: rgba(255, 255, 255, .55) !important; }
.w9-pmeta time { color: rgba(255, 255, 255, .55) !important; }
.w9-pgo,
.w9-pgo a { color: #F9E900 !important; }

/* topic pill (brand-tinted, kept legible against the new dark card) */
.w9-ptopic {
    background: rgba(249, 233, 0, .16) !important;
    color: #F9E900 !important;
}

@media (prefers-reduced-motion: reduce) {
    .w9-pcard { transition: none !important; }
}