/* ==========================================================================
   9wickets — "Why Us" section REDESIGN v4 "Trust Split" (loads LAST)
   --------------------------------------------------------------------------
   Supersedes why-rail.css (v3, "Trust Rail" — six equal card-tiles in one
   horizontal row). That was still visually a card grid, just re-oriented.
   This is a genuinely different pattern: an asymmetric two-column split.
   Left = fixed editorial column (eyebrow, headline, one flagship stat reused
   from the hero counters, WhatsApp CTA). Right = a flat, dividers-only
   2-column x 3-row list of the six trust points — no card shadows/borders,
   just icon + copy rows separated by hairlines, so it reads as one compact
   information panel rather than another set of tiles.
   ONE WINDOW: total section comfortably clears in ~700-800px at 1440px
   wide (measured, see claudedocs/build/build_why_v4.php header comment).
   Reuses existing engines only — [data-reveal], [data-count]/data-bn,
   .vk-tilt — no new JS.
   Scoped entirely under .vk-why--v4 / .vk-w4-*.
   Markup: claudedocs/build/build_why_v4.php (post 11, widget vp0003).
   ========================================================================== */

/* NOTE: wickets-home.css's later "CONSISTENT RHYTHM" pass added a
   `body.vk .vk-section{ padding-block:... !important }` rule at equal
   specificity, which silently won over this (non-!important) override —
   Why was rendering with the generic section padding, not this smaller
   one. Adding !important here restores the intended smaller Why spacing
   and lets it win over vk-overrides.css's shared `.vk-section` rule too. */
body.vk .vk-why--v4.vk-section { padding-top: clamp(20px, 2.4vw, 32px) !important; padding-bottom: clamp(20px, 2.4vw, 32px) !important; }

body.vk .vk-w4-split {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    max-width: 1220px;
    margin: 0 auto;
}

/* ---------------------------- LEFT COLUMN ---------------------------- */
body.vk .vk-w4-left { text-align: left; }
body.vk .vk-w4-left .vk-eyebrow { margin-bottom: 16px; }
body.vk .vk-w4-h2 {
    text-align: left;
    font-size: clamp(24px, 2.5vw, 34px);
    line-height: 1.28;
    margin-bottom: 12px;
}
body.vk .vk-w4-lead {
    font-family: var(--vk-font-bn);
    color: var(--vk-text-mid);
    font-size: clamp(13.5px, 1.05vw, 15px);
    line-height: 1.7;
    margin: 0 0 22px;
    max-width: 40ch;
}

body.vk .vk-w4-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(255, 199, 44, 0.14), rgba(255, 199, 44, 0.03));
    border: 1px solid rgba(200, 134, 11, 0.22);
    border-radius: 16px;
    max-width: fit-content;
}
body.vk .vk-w4-stat__num {
    font-family: var(--vk-font-en, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    background: linear-gradient(95deg, #E8A200 0%, #C8860B 60%, #8A5A0A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
}
body.vk .vk-w4-stat__lbl {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--vk-text-mid);
    font-weight: 600;
    max-width: 16ch;
}

body.vk .vk-w4-left .vk-btn { white-space: nowrap; }

/* ---------------------------- RIGHT COLUMN ---------------------------- */
body.vk .vk-w4-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--vk-line);
    border-left: 1px solid var(--vk-line);
    border-radius: 18px;
    overflow: hidden;
    background: #FFFFFF;
}

body.vk .vk-w4-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-right: 1px solid var(--vk-line);
    border-bottom: 1px solid var(--vk-line);
    transition: background .35s ease;
}
body.vk .vk-w4-row:hover { background: rgba(255, 199, 44, 0.06); }

body.vk .vk-w4-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(255, 199, 44, 0.20), rgba(255, 199, 44, 0.08));
    border: 1px solid rgba(200, 134, 11, 0.24);
    color: #B5830F;
    transition: transform .4s cubic-bezier(.2, .7, .15, 1), background .4s ease, color .4s ease, border-color .4s ease;
}
body.vk .vk-w4-icon svg { width: 18px; height: 18px; }
body.vk .vk-w4-row:hover .vk-w4-icon {
    background: var(--btn-grad, linear-gradient(135deg, #FFD34D 0%, #F7B500 48%, #E8940A 100%));
    color: #1A1813;
    border-color: transparent;
    transform: scale(1.06) rotate(-4deg);
}

body.vk .vk-w4-row__title {
    font-size: 14px;
    font-weight: 700;
    color: #1A1813;
    margin: 2px 0 4px;
    line-height: 1.3;
}
body.vk .vk-w4-row__desc {
    font-size: 12px;
    line-height: 1.55;
    color: #6B6349;
    margin: 0;
}

/* last row in each column loses its bottom/right hairline flush against the panel edge */
body.vk .vk-w4-right .vk-w4-row:nth-child(2n) { border-right: none; }
body.vk .vk-w4-right .vk-w4-row:nth-last-child(-n+2) { border-bottom: none; }

/* ---------------------------- RESPONSIVE ---------------------------- */
@media (max-width: 1100px) {
    body.vk .vk-w4-split { grid-template-columns: 1fr; gap: 28px; }
    body.vk .vk-w4-left, body.vk .vk-w4-h2, body.vk .vk-w4-lead { text-align: center; }
    body.vk .vk-w4-left { display: flex; flex-direction: column; align-items: center; }
    body.vk .vk-w4-stat { margin-inline: auto; }
}
@media (max-width: 640px) {
    body.vk .vk-why--v4.vk-section { padding-top: 30px !important; padding-bottom: 30px !important; }
    body.vk .vk-w4-right { grid-template-columns: 1fr; border-left: none; }
    body.vk .vk-w4-row { border-right: none !important; }
    body.vk .vk-w4-right .vk-w4-row:last-child { border-bottom: none !important; }
    body.vk .vk-w4-h2 { font-size: clamp(22px, 6.5vw, 26px); }
    body.vk .vk-w4-lead { max-width: none; }
    /* small-screen premium pass (2026-07): the 6 hairline feature rows are
       icon-left/text-left (a compact info-list, fine down to tablet) — on
       true small phones centre icon+title+desc as a stack so the whole
       panel reads consistently centred like the rest of the mobile page. */
    body.vk .vk-w4-row { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
    body.vk .vk-w4-row__desc { max-width: 34ch; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .vk-w4-row, body.vk .vk-w4-icon { transition: none; }
}