/* ==========================================================================
   9wickets — Social/Community section REDESIGN "Premium Pills" (loads LAST)
   --------------------------------------------------------------------------
   Replaces the six tall .vk-social__card tiles with compact, fully-rounded
   capsule/pill cards laid out in a responsive grid. Deliberately uses an
   entirely new class prefix (.vk-sp-*) instead of reusing .vk-social__card,
   so none of the legacy dark-card rules (wickets-home.css §13) or the later
   "deep yellow retrofit" block (which forces .vk-social__card to a yellow
   gradient) can leak in — same isolation pattern as agents-cards.css
   (.vk-a2-*) and why-split.css (.vk-w4-*).
   Reuses existing engines only — [data-reveal] fade-in and the .vk-tilt
   mousemove 3D-tilt engine are both already wired up globally in
   wickets-home.js, so no new JS file is needed here.
   Scoped entirely under .vk-community--pills / .vk-sp-*.
   Markup: claudedocs/build/build_social_pills.php (post 11, widget vp0008).
   ========================================================================== */

body.vk .vk-community--pills .vk-sp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 1220px;
    margin: 0 auto;
}

/* Real brand colors (same values as the legacy .vk-social--* hooks) */
body.vk .vk-sp-pill--fb   { --brand: #1877F2; --brand-text: #1877F2; }
body.vk .vk-sp-pill--page { --brand: #1877F2; --brand-text: #1877F2; }
body.vk .vk-sp-pill--yt   { --brand: #FF0000; --brand-text: #E10000; }
body.vk .vk-sp-pill--tg   { --brand: #229ED9; --brand-text: #1D8DC2; }
body.vk .vk-sp-pill--ig   { --brand: #E1306C; --brand-text: #C13584; --brand-bg: linear-gradient(45deg, #FFDC80 0%, #F77737 18%, #F56040 30%, #FD1D1D 45%, #E1306C 58%, #C13584 75%, #833AB4 87%, #5851DB 100%); }
body.vk .vk-sp-pill--wa   { --brand: #25D366; --brand-text: #1DA851; }

body.vk .vk-sp-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 88px;
    padding: 14px 22px 14px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 252, 240, 0.88) 100%);
    border: 1px solid rgba(30, 27, 20, 0.08);
    box-shadow: 0 10px 26px rgba(30, 27, 20, 0.08), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    transition: transform .45s cubic-bezier(.2, .7, .15, 1), box-shadow .45s ease, border-color .45s ease;
}

/* brand-tinted ambient glow, sits behind the card */
body.vk .vk-sp-pill::before {
    content: '';
    position: absolute;
    inset: -40% -10%;
    background: radial-gradient(closest-side, var(--brand), transparent 72%);
    opacity: .09;
    z-index: -1;
    filter: blur(30px);
    pointer-events: none;
    transition: opacity .5s ease, transform .6s ease;
}

body.vk .vk-sp-pill:hover,
body.vk .vk-sp-pill:focus-visible {
    transform: translateY(-5px) scale(1.015);
    border-color: color-mix(in srgb, var(--brand) 45%, transparent);
    box-shadow: 0 24px 52px -18px color-mix(in srgb, var(--brand) 50%, transparent), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
body.vk .vk-sp-pill:focus-visible {
    outline: 2.5px solid var(--brand);
    outline-offset: 3px;
}
body.vk .vk-sp-pill:hover::before {
    opacity: .24;
    transform: scale(1.12);
}

/* icon circle */
body.vk .vk-sp-pill__icon {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--brand-bg, var(--brand));
    color: #FFFFFF;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.16) inset,
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 -6px 14px rgba(0, 0, 0, 0.16) inset,
        0 10px 22px -8px var(--brand);
    transition: transform .5s cubic-bezier(.2, .7, .15, 1), box-shadow .4s ease;
}
body.vk .vk-sp-pill__icon svg { width: 22px; height: 22px; display: block; }
body.vk .vk-sp-pill:hover .vk-sp-pill__icon {
    transform: scale(1.08) rotate(-4deg);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.22) inset,
        0 1px 0 rgba(255, 255, 255, 0.34) inset,
        0 -6px 14px rgba(0, 0, 0, 0.18) inset,
        0 16px 34px -8px var(--brand);
}

/* text body */
body.vk .vk-sp-pill__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
body.vk .vk-sp-pill__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
body.vk .vk-sp-pill__title {
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--vk-text);
    white-space: nowrap;
}
body.vk .vk-sp-pill__count {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    color: var(--brand-text, var(--brand));
    font-family: var(--vk-font-en, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}
body.vk .vk-sp-pill__desc {
    font-size: 12px;
    line-height: 1.4;
    color: var(--vk-text-mid);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* arrow chip */
body.vk .vk-sp-pill__arrow {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(30, 27, 20, 0.05);
    border: 1px solid rgba(30, 27, 20, 0.12);
    color: var(--vk-text);
    transition: transform .4s cubic-bezier(.2, .7, .15, 1), background .4s ease, color .4s ease, border-color .4s ease;
}
body.vk .vk-sp-pill__arrow svg { width: 15px; height: 15px; stroke: currentColor; }
body.vk .vk-sp-pill:hover .vk-sp-pill__arrow {
    background: var(--brand-bg, var(--brand));
    color: #FFFFFF;
    border-color: transparent;
    transform: translateX(4px);
}

/* ---- responsive ---- */
@media (max-width: 1100px) {
    body.vk .vk-community--pills .vk-sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    body.vk .vk-sp-pill { padding: 12px 18px 12px 12px; gap: 13px; min-height: 78px; }
    body.vk .vk-sp-pill__icon { width: 46px; height: 46px; }
    body.vk .vk-sp-pill__icon svg { width: 19px; height: 19px; }
    body.vk .vk-sp-pill__title { font-size: 14.5px; }
    body.vk .vk-sp-pill__desc { font-size: 11.5px; }
    body.vk .vk-sp-pill__arrow { width: 34px; height: 34px; }
}
@media (max-width: 680px) {
    body.vk .vk-community--pills .vk-sp-grid { grid-template-columns: 1fr; gap: 14px; }
    body.vk .vk-sp-pill__desc { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .vk-sp-pill,
    body.vk .vk-sp-pill__icon,
    body.vk .vk-sp-pill__arrow { transition: none !important; }
    body.vk .vk-sp-pill { opacity: 1 !important; transform: none !important; }
}