/*!
 * AGENT CATEGORY v5 — "Spotlight Ring" (2026-08)
 * Replaces v4 "Dark Blob Grid" (agents-cards-v4.css — organic full-bleed
 * gold blob shapes per card) with a cleaner, more precise dark card: a
 * single centered radial "spotlight" glow behind a ringed icon instead of
 * two random-positioned organic blobs + dot texture. Same dark/gold palette
 * and content (icon, badge, title, sub, desc, meta+CTA footer) — this is a
 * treatment change, not a content or layout change. Scoped to
 * .vk-agents--v5 / .a5-*. v2/v3/v4 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--v5 .vk-agents__grid { display: block; max-width: none; padding: 0; }

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

.a5-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: flat dark ground, no per-card blob art ---- */
.a5-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 280px;
    padding: 26px 22px 22px;
    background: linear-gradient(180deg, #17150F 0%, #0E0C09 100%);
    border: 1px solid rgba(247, 185, 0, .16);
    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, border-color .4s ease;
}
.a5-card:hover, .a5-card:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(247, 185, 0, .55);
    box-shadow: 0 24px 46px rgba(23, 21, 15, 0.34), 0 0 0 1px rgba(247, 185, 0, .1);
}
.a5-card:focus-visible { outline: 2.5px solid #F7B900; outline-offset: 2px; }

/* single centered spotlight glow, tied to the icon above it — replaces
   v4's two organic corner blobs + dot texture with one precise light
   source, the "cleaner/sharper" alternative to the old "soft/organic" look. */
.a5-card__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.a5-spotlight {
    position: absolute;
    top: 18px; left: 22px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(247, 185, 0, .28), transparent 72%);
    filter: blur(6px);
    opacity: .7;
    transition: opacity .4s ease, transform .4s ease;
}
.a5-card:hover .a5-spotlight { opacity: 1; transform: scale(1.08); }

/* ---- content, sits above the spotlight ---- */
.a5-card__top { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.a5-card__icon {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(23, 21, 15, .6);
    border: 1.5px solid rgba(247, 185, 0, .4);
    color: #F7B900;
    transition: transform .4s cubic-bezier(.2,.7,.15,1), background .4s ease, border-color .4s ease;
}
.a5-card__icon svg { width: 21px; height: 21px; display: block; }
.a5-card:hover .a5-card__icon {
    transform: scale(1.08) rotate(-4deg);
    background: rgba(247, 185, 0, .16);
    border-color: rgba(247, 185, 0, .8);
}
.a5-card__badge {
    display: inline-flex; align-items: center;
    padding: 4px 11px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    color: #FFFFFF;
    font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; white-space: nowrap;
}

.a5-card__title { position: relative; z-index: 2; font-size: 18px; font-weight: 800; line-height: 1.3; margin: 0; color: #FFFFFF; }
.a5-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;
}
.a5-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; }

.a5-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);
}
.a5-card__meta { font-size: 12px; font-weight: 700; color: #FFD666; white-space: nowrap; }
.a5-card__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #FFFFFF; white-space: nowrap; }
.a5-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);
}
.a5-card__arrow svg, .a5-card__arrow svg path { width: 13px; height: 13px; stroke: currentColor; color: inherit; }
.a5-card:hover .a5-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. 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 at the screen
   edge on every row. */
@media (min-width: 1081px) {
    .a5-card:first-child { border-radius: 0 24px 24px 0; }
    .a5-card:last-child { border-radius: 24px 0 0 24px; }
}
@media (max-width: 1080px) {
    .a5-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 0 var(--vk-pad); }
}
@media (max-width: 560px) {
    .a5-grid { grid-template-columns: 1fr; }
    .a5-card { min-height: 0; padding: 22px 20px 20px; }
}

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