/*!
 * AGENT CATEGORY v4 — "Dark Blob Grid" (2026-07)
 * Replaces v3 "Blob Rail" (agents-cards-v3.css, auto-scrolling marquee —
 * rejected: no slider wanted) with a static responsive grid. Each of the 4
 * cards now carries the HERO's own dark/gold blob-graphic background
 * (black card, full-bleed gold + charcoal organic blobs, dot-grid), filling
 * the card edge-to-edge rather than sitting as a light card with a small
 * decorative accent — the same "black yellow graphics" language as
 * hero-v6.css, just condensed per-card instead of per-section.
 * Scoped to .vk-agents--v4 / .a4-*. v3/v2 kept on disk for rollback.
 *
 * No JS: entrance fade handled by the site-wide [data-reveal] rule in
 * wickets-home.css, same as every other section.
 */

body.vk .vk-agents--v4 .vk-agents__grid { display: block; max-width: none; padding: 0; }

/* full width, edge to edge, same as the hero section — only the heading
   text keeps the standard reading gutter; the card band itself touches
   both sides of the viewport like the hero's photo does. */
body.vk .vk-agents--v4 {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.vk-agents--v4 .vk-section__head {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--vk-pad);
}

.a4-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    margin-top: clamp(8px, 1.4vw, 18px);
}

/* ---- card shell: solid dark ground, the blobs are the "full width" bg ---- */
.a4-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 280px;
    padding: 26px 22px 22px;
    background: linear-gradient(165deg, #211D14 0%, #17150F 62%, #0E0C09 100%);
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(23, 21, 15, 0.18);
    transition: transform .4s cubic-bezier(.2,.7,.15,1), box-shadow .4s ease;
}
.a4-card:hover, .a4-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 24px 46px rgba(23, 21, 15, 0.34);
}
.a4-card:focus-visible { outline: 2.5px solid #F7B900; outline-offset: 2px; }

/* full-bleed blob graphics — the hero's own black+gold language, per card */
.a4-card__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.a4-blob {
    position: absolute;
    border-radius: 46% 54% 55% 45% / 52% 44% 56% 48%;
    filter: blur(2px);
}
.a4-blob--gold {
    width: 78%; height: 62%; right: -24%; bottom: -22%;
    background: linear-gradient(150deg, #FFCF3D 0%, #E8AE00 55%, #C49300 100%);
    opacity: .95;
}
.a4-blob--gold2 {
    width: 46%; height: 40%; left: -14%; top: -16%;
    background: radial-gradient(closest-side, rgba(247, 181, 0, 0.30), transparent 72%);
    border-radius: 60% 40% 35% 65% / 55% 60% 40% 45%;
}
.a4-dots {
    position: absolute; z-index: 0; inset: auto -6% -6% auto;
    width: 90px; height: 90px;
    background-image: radial-gradient(rgba(255, 255, 255, 0.30) 1.4px, transparent 2px);
    background-size: 13px 13px;
    -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}

/* ---- content, sits above the blobs ---- */
.a4-card__top { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.a4-card__icon {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 15px;
    background: #17150F;
    color: #F7B900;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    transition: transform .4s cubic-bezier(.2,.7,.15,1);
}
.a4-card__icon svg { width: 21px; height: 21px; display: block; }
.a4-card:hover .a4-card__icon { transform: scale(1.08) rotate(-4deg); }
.a4-card__badge {
    display: inline-flex; align-items: center;
    padding: 4px 11px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
    color: #FFFFFF;
    font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; white-space: nowrap;
}

.a4-card__title { position: relative; z-index: 2; font-size: 18px; font-weight: 800; line-height: 1.3; margin: 0; color: #FFFFFF; }
.a4-card__sub {
    position: relative; z-index: 2;
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: #FFD666; margin: -8px 0 0;
}
.a4-card__desc { position: relative; z-index: 2; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); margin: 0; flex: 1 1 auto; }

.a4-card__foot {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 4px; padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.18);
}
.a4-card__meta { font-size: 12px; font-weight: 700; color: #FFD666; white-space: nowrap; }
.a4-card__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #FFFFFF; white-space: nowrap; }
.a4-card__arrow {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 9px;
    background: #F7B900; color: #1A1813;
    transition: transform .3s cubic-bezier(.2,.7,.15,1);
}
.a4-card__arrow svg, .a4-card__arrow svg path { width: 13px; height: 13px; stroke: currentColor; color: inherit; }
.a4-card:hover .a4-card__arrow { transform: translateX(3px); background: #FFCA2A; }

/* the desktop 4-across row is edge-to-edge (zero radius on the outer two
   corners), reading as one continuous band like the hero photo. Once the
   grid wraps to 2 or 1 columns every card has an "outer" edge, so bring
   back a normal gutter + full corner radius instead of a wall of square
   corners touching the screen edge on every row. */
@media (min-width: 1081px) {
    .a4-card:first-child { border-radius: 0 24px 24px 0; }
    .a4-card:last-child { border-radius: 24px 0 0 24px; }
}
@media (max-width: 1080px) {
    .a4-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 0 var(--vk-pad); }
}
@media (max-width: 560px) {
    .a4-grid { grid-template-columns: 1fr; }
    .a4-card { min-height: 0; padding: 22px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .a4-card { transition: none !important; }
}