/* ============================================================
   SERVICE SECTION — Hover & Control Fixes
   New file: Does NOT modify landing_services.css
   
   Fixes:
   1. Hover overflow — padding gives cards room to lift
   2. User control — hover anywhere on container pauses marquee
   3. Card hover accent — blue glow border
   ============================================================ */


/* ─────────────────────────────────────────────
   1. HOVER OVERFLOW FIX
   overflow: hidden clips to the padding-box, so adding
   vertical padding gives cards room to lift on hover.
   Negative margin compensates to keep the same layout.
   We do NOT change overflow — it stays hidden.
   ───────────────────────────────────────────── */

.services-scroll-container {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    margin-top: -1.5rem;
    margin-bottom: -1.5rem;
}


/* ─────────────────────────────────────────────
   2. USER CONTROL — PAUSE ON HOVER
   Hover anywhere on the scroll container to freeze.
   More reliable than hovering only on the fast-moving track.
   ───────────────────────────────────────────── */

.services-scroll-container:hover .marquee-track {
    animation-play-state: paused;
}


/* ─────────────────────────────────────────────
   3. CARD HOVER — Accent colors
   ───────────────────────────────────────────── */

.service-story-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.service-story-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px -15px rgba(37, 99, 235, 0.18);
    border-color: rgba(37, 99, 235, 0.3);
    z-index: 10;
}

[data-theme="dark"] .service-story-card:hover {
    box-shadow: 0 20px 50px -15px rgba(37, 99, 235, 0.12);
    border-color: rgba(96, 165, 250, 0.3);
}


/* ─────────────────────────────────────────────
   4. REDUCED MOTION
   ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .service-story-card {
        transition: none !important;
    }
}