/* ==========================================================================
   9wickets — Agent Category section REDESIGN v2 "Slim Rows" (loads LAST)
   --------------------------------------------------------------------------
   Replaces the tall (~330px) .vk-card--agent vertical tiles with a compact
   full-width row list. Same 4 links/copy, fresh pattern: icon chip + title/
   badge + description all on one slim horizontal bar, meta stat + CTA arrow
   chip pinned to the right. Rows lift and warm on hover; nothing here reuses
   .vk-card--agent's rules — scoped entirely under .vk-agents--v2 / .vk-a2-*
   so the old card CSS in wickets-home.css never applies.
   Markup: claudedocs/build/build_agents_v2.php (post 11, widget vp0002).
   ========================================================================== */

body.vk .vk-agents--v2 .vk-agents__grid {
    display: block; /* undo the old 4-col grid entirely */
    max-width: 1180px;
}

body.vk .vk-a2-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.vk .vk-a2-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 24px 18px 26px;
    background: #FFFFFF;
    border: 1px solid rgba(30, 27, 20, 0.08);
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(30, 27, 20, 0.06);
    color: #2A2620;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: transform .4s cubic-bezier(.2,.7,.15,1), box-shadow .4s ease, border-color .4s ease;
}
/* fade/rise-in handled by the site-wide [data-reveal] rule in wickets-home.css;
   this file only adds the hover/focus interaction on top of it. */
body.vk .vk-a2-row:hover,
body.vk .vk-a2-row:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(200, 134, 11, 0.35);
    box-shadow: 0 16px 38px rgba(200, 134, 11, 0.18);
}
body.vk .vk-a2-row:focus-visible {
    outline: 2.5px solid #B5830F;
    outline-offset: 2px;
}

/* left accent bar — brightens on hover */
body.vk .vk-a2-row__accent {
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 4px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #FFD34D 0%, #C8860B 100%);
    opacity: .55;
    transition: opacity .4s ease;
}
body.vk .vk-a2-row:hover .vk-a2-row__accent { opacity: 1; }

/* icon chip */
body.vk .vk-a2-row__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 199, 44, 0.18), rgba(255, 199, 44, 0.08));
    border: 1px solid rgba(200, 134, 11, 0.22);
    color: #B5830F;
    transition: transform .4s cubic-bezier(.2,.7,.15,1), background .4s ease, color .4s ease, border-color .4s ease;
}
body.vk .vk-a2-row__icon svg { width: 22px; height: 22px; display: block; }
body.vk .vk-a2-row:hover .vk-a2-row__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: title/badge + sub + desc, tight stack */
body.vk .vk-a2-row__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
body.vk .vk-a2-row__top {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}
body.vk .vk-a2-row__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: #1A1813;
}
body.vk .vk-a2-row__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(200, 134, 11, 0.12);
    border: 1px solid rgba(200, 134, 11, 0.24);
    color: #8A5A0A;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
body.vk .vk-a2-row__sub {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9A8F76;
    margin: 0;
}
body.vk .vk-a2-row__desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: #5A5340;
    margin: 2px 0 0;
    max-width: 62ch;
}

/* right side: meta + cta, pinned */
body.vk .vk-a2-row__aside {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
    padding-left: 12px;
}
body.vk .vk-a2-row__meta {
    display: none; /* shown from 1024px up — keeps mobile/tablet rows tight */
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(30, 27, 20, 0.04);
    border: 1px solid rgba(30, 27, 20, 0.10);
    font-size: 12px;
    font-weight: 600;
    color: #5A5340;
    white-space: nowrap;
}
body.vk .vk-a2-row__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1A1813;
    white-space: nowrap;
}
body.vk .vk-a2-row__cta-label { display: none; } /* label appears from 640px up */
body.vk .vk-a2-row__arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #1A1813;
    color: #F7B500;
    box-shadow: 0 3px 10px -3px rgba(26, 24, 19, 0.5);
    transition: transform .3s cubic-bezier(.2,.7,.15,1), background .3s ease, color .3s ease;
}
/* The arrow glyphs use stroke="currentColor" on the <path> itself, which
   resolves against `color` — NOT the `stroke` CSS property on an ancestor
   <svg> (that only affects elements that inherit stroke, and an explicit
   stroke="currentColor" attribute always wins over inheritance). Setting
   `stroke` here alone left the hover state gold-on-gold (invisible). Force
   both svg and path to track `color` explicitly so it can never regress. */
body.vk .vk-a2-row__arrow svg,
body.vk .vk-a2-row__arrow svg path {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    color: inherit;
}
body.vk .vk-a2-row:hover .vk-a2-row__arrow {
    background: var(--btn-grad, linear-gradient(135deg, #FFD34D 0%, #F7B500 48%, #E8940A 100%));
    color: #1A1813;
    transform: translateX(3px);
}

/* ---- responsive ---- */
@media (min-width: 640px) {
    body.vk .vk-a2-row__cta-label { display: inline; }
}
@media (min-width: 1024px) {
    body.vk .vk-a2-row__meta { display: inline-flex; }
}

@media (max-width: 900px) {
    body.vk .vk-a2-row { padding: 16px 18px 16px 20px; gap: 14px; }
    body.vk .vk-a2-row__icon { width: 44px; height: 44px; border-radius: 12px; }
    body.vk .vk-a2-row__icon svg { width: 19px; height: 19px; }
    body.vk .vk-a2-row__title { font-size: 15.5px; }
    body.vk .vk-a2-row__desc { font-size: 12.5px; }
    body.vk .vk-a2-row__aside { gap: 10px; padding-left: 0; }
}
@media (max-width: 560px) {
    /* small-screen premium pass (2026-07): rows read as icon-left lists down
       to 900px, which is right for a scannable list — but on true small
       phones a full centered stack reads more premium and matches every
       other section's mobile treatment. Icon on top, title/badge/desc
       centered below, meta+CTA centered under that. */
    body.vk .vk-a2-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px 18px 18px;
    }
    body.vk .vk-a2-row__body { flex-basis: auto; order: 1; align-items: center; }
    body.vk .vk-a2-row__top { justify-content: center; }
    body.vk .vk-a2-row__desc { max-width: none; }
    body.vk .vk-a2-row__aside { order: 2; margin-left: 0; margin-top: 10px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    body.vk .vk-a2-row,
    body.vk .vk-a2-row__icon,
    body.vk .vk-a2-row__arrow { transition: none !important; }
    body.vk .vk-a2-row { opacity: 1 !important; transform: none !important; }
}