/*
 * Stripe HDS tokens from stripe.com/en-ca modular-solutions-bento-card.
 * Bento root uses box-shadow: none — HDS shadow-* tokens exist for other UI,
 * not this card shell.
 */
.video-card {
    position: relative;
    --hds-color-core-neutral-0: #fff;
    --hds-color-core-neutral-50: #e5edf5; /* surface-border-quiet / stroke */
    /* Match Explore Video Library / site blue (#2563eb) */
    --hds-color-core-brand-25: #eff6ff;
    --hds-color-core-brand-400: #60a5fa;
    --hds-color-core-brand-600: #2563eb;
    --hds-color-core-magenta-350: #f44bcc;
    --hds-color-action-bg-solid: var(--hds-color-core-brand-600);
    /* Cool blue stroke spotlight (site accent) */
    --border-blue-core: #2563eb;
    --border-blue-mid: #93c5fd;
    /*
     * Fixed spotlight size — NOT % of card width.
     * Wide list cards are short: a huge circle floods top/bottom and never
     * reaches left/right evenly. ~15rem matches a soft local arc of perimeter.
     */
    --border-spotlight-size: 15rem;
    --card-duration: 800ms;
    --card-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
    /* --hds-space-core-radius-md / --card-radius-inner from HDS */
    --card-radius: 6px;
    --card-radius-inner: 5px;
    --card-mouse-x: 0px;
    --card-mouse-y: 0px;
    /* Transparent list row (YouTube search) — no card chrome */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.video-card::before {
    content: none;
    display: none;
}

/* Stroke / blue cursor outline disabled */
.video-card-border,
.video-card-border-color,
.video-card-border-color-gradient {
    display: none !important;
}

.video-card > :not(.video-card-border) {
    position: relative;
    z-index: 1;
}

/* Corner dialog-entry control removed — whole card is the hit target */

/* Title color — near-black like Stripe ink, not pure #000 */
.video-card .video-title {
    color: #0a2540 !important;
    transition: color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-card:hover .video-title {
    color: #0a2540 !important;
}

/* Locked / paywalled titles (muted) */
.video-card .video-title.video-title--locked {
    color: #697386 !important;
}

.video-card:hover .video-title.video-title--locked {
    color: #4f566b !important;
}

.video-card .right-side svg,
.video-card > .flex.justify-between.items-center > .flex.items-center.gap-3 svg {
    transition: color 0.2s ease;
}

.video-card:hover .right-side svg,
.video-card:hover > .flex.justify-between.items-center > .flex.items-center.gap-3 svg {
    color: #000 !important;
}