/* ==========================================================================
   9wickets — "বাংলাদেশ × 9WICKETS" section REDESIGN "Premium Dark Banner"
   (2026-07, v2 — supersedes the v1 "Bangladesh Trust Story" cream layout)
   --------------------------------------------------------------------------
   v1 was a plain centred text block on the page's cream background (eyebrow
   + headline + lead + a flat white 4-card stat row). v2 turns it into a
   full-bleed dark banner: a real photo (elegant couple on a casino floor)
   fills the section, a dark scrim sits over it for legibility + the site's
   established dark/black/gold mood, and the same 4 stats become frosted
   glass cards floating on the photo instead of solid white cards — same
   "glass on a photo" language as platform-story.css's .vps-chip, just
   applied to the whole stat row here instead of one small badge.

   Deliberately uses an entirely new class prefix (.vk-story*) instead of
   reusing the reference's dormant `.vk-seo__*` component (which carries
   several stacked !important retrofit passes elsewhere in
   wickets-home.css) — same isolation pattern as social-pills.css
   (.vk-sp-*) and platform-pills.css (.vk-pp-*).
   Reuses existing base classes only where they're safe/unstyled-by-retrofit
   (.vk-section, .vk-section__head, .vk-eyebrow, .vk-h2, .vk-lead) and the
   global [data-reveal] fade-in engine already wired up in wickets-home.js —
   no new JS needed. .vk-eyebrow/.vk-h2/.vk-lead default colors assume a
   CREAM section background though, so this file has to repaint all three
   for the new dark photo backdrop (see the "text repaint" block below).
   Scoped entirely under .vk-story / .vk-story__*.
   Markup: post 11, widget vp0017.
   ========================================================================== */

body.vk .vk-story { position: relative; overflow: hidden; }
/* wickets-home.css's own "PREMIUM REBALANCE" retrofit layer forces
   `body.vk .vk-section{ background:#FFFCF9 !important; padding-block:... !important }`
   twice over (and a follow-up pass tightens padding-block again, also
   !important) — the background loss doesn't matter (the opaque photo/scrim
   div sits above it in the same stacking context) but the padding DOES
   need to be reclaimed with !important of our own, at higher specificity
   (.vk-story.vk-section beats the bare .vk-section), to actually get the
   slimmer banner height this redesign asks for. */
body.vk .vk-story.vk-section { padding-block: clamp(36px, 4.5vw, 62px) !important; }

/* ---------- full-bleed photo + dark scrim ---------- */
body.vk .vk-story__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
body.vk .vk-story__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Y kept close to 0 — the couple's heads sit right near the TOP of the
       source photo, and this section is short/slim, so the box is much
       wider-than-tall relative to the photo. A mid-range Y (the old 24%)
       crops a chunk off the top before the box even gets to bottom-crop the
       poker table — heads were getting clipped. Near-0 biases the crop to
       come entirely from the bottom (table/chips) instead. */
    object-position: 65% 4%;
    /* transform-origin matches that same focal point so the Ken-Burns zoom
       below scales toward the couple's faces rather than the image's
       geometric center — zooming from centre would crop MORE off the top
       as it scales up, re-introducing the same clipping over the loop. */
    transform-origin: 65% 12%;
    /* slow continuous Ken-Burns zoom — same "loops forever regardless of
       scroll position" pattern as the decorative .vk-orb blobs elsewhere
       (wickets-home.css's vk-float-a/b keyframes), so it's already mid-zoom
       whenever a visitor scrolls down to this section rather than needing
       a scroll-triggered start. */
    animation: vk-story-zoom 24s ease-in-out infinite alternate;
}
@keyframes vk-story-zoom {
    0%   { transform: scale(1); }
    100% { transform: scale(1.12); }
}
body.vk .vk-story__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 8, 5, .92) 0%, rgba(10, 8, 5, .84) 45%, rgba(10, 8, 5, .93) 100%),
        radial-gradient(55% 65% at 50% 0%, rgba(232, 162, 0, .16), transparent 65%);
}

body.vk .vk-story__inner { position: relative; z-index: 1; }
body.vk .vk-story__head.vk-section__head { margin-bottom: 30px; }

/* ---------- text repaint: base .vk-eyebrow/.vk-h2/.vk-lead assume cream ---------- */
body.vk .vk-story .vk-eyebrow {
    background: rgba(249, 233, 0, .14);
    border-color: rgba(249, 233, 0, .32);
    color: #F9E900;
}
/* wickets-home.css's "PREMIUM REBALANCE" layer force-inks every h1/h2/h3
   with `color:#1A1813 !important` — needs matching !important + higher
   specificity to repaint white on this section's dark photo. */
body.vk .vk-story .vk-h2 { color: #FFFFFF !important; }
body.vk .vk-story .vk-h2 em {
    background: linear-gradient(95deg, #FFE066 0%, #F9E900 50%, #FFC72C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.vk .vk-story .vk-lead { max-width: 68ch; margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, .78); }
body.vk .vk-story .vk-lead a {
    color: #F9E900;
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.vk .vk-story .vk-lead a:hover { color: #FFFFFF; }

/* ---------- trust / stat row — frosted glass on the photo ---------- */
body.vk .vk-story__stats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
}

body.vk .vk-story__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 14px 10px 12px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--vk-r-md, 14px);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .6);
    transition: transform .4s cubic-bezier(.2, .7, .15, 1), box-shadow .4s ease, border-color .4s ease, background .4s ease;
}
body.vk .vk-story__stat:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .11);
    border-color: rgba(249, 233, 0, .4);
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .7);
}

body.vk .vk-story__stat-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--vk-grad-gold);
    color: #1A0F02;
    box-shadow: var(--vk-glow-gold);
    margin-bottom: 2px;
}
body.vk .vk-story__stat-ic svg { width: 14px; height: 14px; display: block; }

body.vk .vk-story__stat-num {
    font-family: var(--vk-font-en);
    font-weight: 800;
    font-size: clamp(14px, 1.4vw, 16px);
    line-height: 1.1;
    background: linear-gradient(95deg, #FFE066 0%, #F9E900 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.vk .vk-story__stat-lbl {
    font-family: var(--vk-font-bn);
    font-size: 10.5px;
    line-height: 1.3;
    color: rgba(255, 255, 255, .68);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    body.vk .vk-story__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.vk .vk-story__media img { object-position: 70% 4%; transform-origin: 70% 12%; }
}
@media (max-width: 560px) {
    body.vk .vk-story__stats { grid-template-columns: 1fr; gap: 12px; }
    body.vk .vk-story__stat { flex-direction: row; text-align: left; padding: 16px 18px; }
    body.vk .vk-story__stat-ic { margin-bottom: 0; flex: none; }
    /* HOME-ONLY (this .vk-story component is also reused on other pages,
       e.g. agent-list, which keep the stacked-rows fallback above): one
       compact line reads better here than 4 tall stacked rows, so instead
       of the base column-of-4 the grid stays 4-across and every cell just
       shrinks to fit. */
    body.vk-home .vk-story__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    body.vk-home .vk-story__stat { flex-direction: column; text-align: center; padding: 10px 4px 8px; gap: 2px; }
    body.vk-home .vk-story__stat-ic { width: 24px; height: 24px; border-radius: 8px; margin-bottom: 0; }
    body.vk-home .vk-story__stat-ic svg { width: 12px; height: 12px; }
    body.vk-home .vk-story__stat-num { font-size: 12px; }
    body.vk-home .vk-story__stat-lbl { font-size: 8.5px; line-height: 1.2; }
    body.vk .vk-story__media img { object-position: 74% 4%; transform-origin: 74% 12%; }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .vk-story__stat { transition: none !important; }
    body.vk .vk-story__media img { animation: none !important; }
}