/* ==========================================================================
   9wickets — "Cricket Passion" spotlight section (2026-08)
   --------------------------------------------------------------------------
   New section, home page, inserted right after the video hero (vpv0001) and
   before the hero-v6 banner (vp0001) / Agent Category band (vp0002).
   Widget: vp0019.

   Full-bleed dark panel (same "lose the section gutter, panel spans full
   viewport width" treatment as .vk-why--v7 / .vk-how--v3), warm-black/gold
   palette — matches the home page's own dark sections (vk-vhero,
   agents-cards-v5 spotlight skin), NOT the navy .b9g-mesh--navy used on the
   inner pages (sports-betting/live-casino), which is a different accent
   reserved for those standalone pages.

   Layout: two-column grid — framed portrait photo (gold-ring card, floating
   stat badge) on one side, eyebrow/heading/lead/stats/CTA copy on the
   other. Stacks to a single column under 960px, photo first.

   Every rule below is prefixed `body.vk` — wickets-home.css's "final
   override layer" carries several high-specificity `body.vk <tag>{...
   !important}` rules (h1..h5 -> #1A1813, img -> height:auto, .vk-section ->
   cream background) that a bare `.vk-crk-x{!important}` selector ties on
   class-count and then LOSES on type-count. `body.vk` on our own selector
   adds a class match that wins that comparison outright — confirmed the
   hard way (title went dark-on-dark, photo collapsed to text-line height
   before this was applied everywhere).

   Entrance motion reuses the site-wide [data-reveal] intersection-observer
   (wickets-home.js) — no new JS needed.
   ========================================================================== */

body.vk .vk-cricket.vk-section {
    max-width: none !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    background: linear-gradient(165deg, var(--vk-bg-dark) 0%, var(--vk-bg-dark-2) 100%) !important;
}

/* decorative dot mesh + gold glow, same visual family as .b9g-mesh--navy
   but recolored for the warm-black home page palette */
body.vk .vk-cricket::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(249, 233, 0, .14) 1.4px, transparent 1.4px);
    background-size: 24px 24px;
    opacity: .5;
    pointer-events: none;
}
body.vk .vk-cricket::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -140px;
    top: -160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 233, 0, .16) 0%, transparent 70%);
    pointer-events: none;
}

body.vk .vk-crk-wrap {
    position: relative;
    z-index: 1;
    max-width: var(--vk-max);
    margin: 0 auto;
    padding: clamp(56px, 8vw, 96px) var(--vk-pad);
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
}

/* ---------- photo column ---------- */
body.vk .vk-crk-visual { position: relative; display: flex; justify-content: center; }

/* NOTE: no `overflow: hidden` here on purpose — the live tag AND the
   floating badge are deliberately positioned partly outside this box, and
   an ancestor's overflow:hidden clips descendants regardless of z-index,
   which was silently hiding the bottom half of the badge (its label line)
   on mobile once the badge's negative bottom offset grew. Only the photo
   itself needs clipping to the rounded corners — that's scoped to the new
   .vk-crk-photo-clip wrapper below instead. */
body.vk .vk-crk-photo-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4 / 5;
    border-radius: 26px;
    isolation: isolate;
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .55), 0 0 0 1px rgba(249, 233, 0, .22);
}
body.vk .vk-crk-photo-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(145deg, #FFE066 0%, #F9E900 35%, #D39E00 100%);
    opacity: .55;
}
body.vk .vk-crk-photo-clip {
    position: absolute;
    inset: 2px;
    border-radius: 24px;
    overflow: hidden;
}
body.vk .vk-crk-photo {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    border-radius: 0;
    object-fit: cover;
    object-position: 50% 22%;
    display: block !important;
}
body.vk .vk-crk-photo-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(8, 6, 4, .74) 0%, rgba(8, 6, 4, 0) 38%);
    pointer-events: none;
}

body.vk .vk-crk-badge {
    position: absolute;
    left: -18px;
    bottom: 26px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 12px 12px;
    border-radius: 16px;
    background: #17150F;
    border: 1px solid rgba(249, 233, 0, .3);
    box-shadow: 0 14px 32px -10px rgba(0, 0, 0, .6);
}
body.vk .vk-crk-badge__icon {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #FFCF3D 0%, #F7B900 55%, #E6AD00 100%);
    color: #17150F;
    box-shadow: 0 4px 12px rgba(200, 134, 11, .4);
}
body.vk .vk-crk-badge__icon svg { width: 18px; height: 18px; display: block; }
body.vk .vk-crk-badge__num { display: block; font-family: var(--vk-font-en); font-size: 15px; font-weight: 800; color: #FFFFFF !important; line-height: 1.25; }
body.vk .vk-crk-badge__lbl { display: block; font-family: var(--vk-font-bn); font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .68) !important; }

/* live pulse tag, top-right corner of the photo */
body.vk .vk-crk-live {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: var(--vk-r-pill, 999px);
    background: rgba(8, 6, 4, .55);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
    font-family: var(--vk-font-bn);
    font-size: 11.5px;
    font-weight: 700;
    color: #FFFFFF !important;
}
body.vk .vk-crk-live__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #F43F5E;
    box-shadow: 0 0 0 0 rgba(244, 63, 94, .6);
    animation: vk-crk-pulse 1.8s ease-out infinite;
}
@keyframes vk-crk-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(244, 63, 94, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(244, 63, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}

/* ---------- copy column ---------- */
body.vk .vk-crk-copy { display: flex; flex-direction: column; align-items: flex-start; }

body.vk .vk-crk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: var(--vk-r-pill, 999px);
    background: rgba(249, 233, 0, .14);
    border: 1px solid rgba(249, 233, 0, .32);
    color: #F9E900 !important;
    font-family: var(--vk-font-bn);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 16px;
}

body.vk .vk-crk-title {
    font-family: var(--vk-font-bn);
    font-size: clamp(26px, 3.6vw, 42px);
    font-weight: 700;
    line-height: 1.28;
    color: #FFFFFF !important;
    margin: 0 0 16px;
}
body.vk .vk-crk-title em {
    font-style: normal;
    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-crk-lead {
    font-family: var(--vk-font-bn);
    font-size: clamp(14.5px, 1.4vw, 16px);
    line-height: 1.75;
    color: rgba(255, 255, 255, .78) !important;
    max-width: 52ch;
    margin: 0 0 26px;
}

body.vk .vk-crk-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}
body.vk .vk-crk-stats li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--vk-font-bn);
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .78) !important;
}
body.vk .vk-crk-stats svg { flex: none; width: 17px; height: 17px; color: #F9E900; }

body.vk .vk-crk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
body.vk .vk-crk-cta .vk-btn--glass {
    background: rgba(255, 255, 255, .06) !important;
    border: 1.5px solid rgba(255, 255, 255, .4) !important;
    color: #FFFFFF !important;
}
body.vk .vk-crk-cta .vk-btn--glass:hover {
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .7) !important;
    color: #FFFFFF !important;
}

/* ---------------------------- RESPONSIVE ---------------------------- */
@media (max-width: 960px) {
    body.vk .vk-crk-wrap { grid-template-columns: 1fr; padding-top: clamp(48px, 10vw, 72px); row-gap: 44px; }
    body.vk .vk-crk-copy { align-items: center; text-align: center; }
    body.vk .vk-crk-lead { margin-inline: auto; }
    body.vk .vk-crk-stats { justify-content: center; }
    body.vk .vk-crk-cta { justify-content: center; }
    /* was a flat 340px cap — too small once the section is this wide;
       scale with the viewport instead so the card actually reads as the
       hero visual it's meant to be, not a shrunken afterthought. */
    body.vk .vk-crk-photo-card { width: min(86vw, 420px); max-width: 420px; margin: 0 auto 40px; }
    body.vk .vk-crk-badge { left: 50%; transform: translateX(-50%); bottom: -24px; }
}
@media (max-width: 480px) {
    body.vk .vk-crk-cta { flex-direction: column; width: 100%; }
    body.vk .vk-crk-cta .vk-btn { width: 100%; text-align: center; justify-content: center; }
    /* keep the same 4/5 ratio as desktop instead of squashing it shorter —
       vw-based width already keeps it inside the viewport with room to
       spare either side. */
    body.vk .vk-crk-photo-card { width: min(84vw, 360px); margin-bottom: 36px; }
    body.vk .vk-crk-badge {
        bottom: -20px;
        padding: 10px 16px 10px 10px;
        max-width: calc(100% - 20px);
        box-sizing: border-box;
    }
    body.vk .vk-crk-badge__icon { width: 34px; height: 34px; }
    body.vk .vk-crk-badge__num { font-size: 14px; }
    body.vk .vk-crk-badge__lbl { font-size: 10.5px; }
    body.vk .vk-crk-live { top: 12px; right: 12px; font-size: 11px; padding: 5px 11px; }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .vk-crk-live__dot { animation: none !important; }
}