/* ============================================================
   REFRESH GLOBAL — INDEX PAGE VIDEO DEMONSTRATION SECTION
   ------------------------------------------------------------
   Location:
     /Views/Home/Index.cshtml

   Purpose:
     • Displays product demonstration videos in an elegant grid
     • Provides premium hover animations and accent effects
     • Ensures consistent tile layout, spacing, and alignment
     • Creates an enterprise-grade cinematic feel
     • Fully responsive (stack on mobile → 3 columns desktop)

   Notes:
     • Video thumbnails stored under:
         ~/Content/hero/index/youtube-video/
     • This CSS is specific to the Index page only
     • Matches corporate UI language (radius, shadows, transitions)
   ============================================================ */



/* ============================================================
   1️⃣ VIDEO CARD CONTAINER (.video-thumb-card)
   ------------------------------------------------------------
   • White card with soft shadow
   • Rounded corners for premium feel
   • Smooth hover elevation + zoom animation
   • Overflow hidden to allow accent animation
   ============================================================ */
.video-thumb-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

    /* Hover elevation */
    .video-thumb-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    }



/* ============================================================
   2️⃣ VIDEO ACCENT BAR (Left Accent Strip)
   ------------------------------------------------------------
   • Thin vertical accent for enterprise visual identity
   • Expands on hover for cinematic effect
   ============================================================ */
.video-accent {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, #005bbb, #00a6ff);
    transition: width 0.35s ease;
}

/* Accent expands on hover */
.video-thumb-card:hover .video-accent {
    width: 12px;
}



/* ============================================================
   3️⃣ VIDEO THUMBNAIL IMAGE
   ------------------------------------------------------------
   • Full-width responsive image
   • Subtle zoom on hover for cinematic feel
   ============================================================ */
.video-thumb-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.45s ease;
}

/* Zoom effect */
.video-thumb-card:hover img {
    transform: scale(1.06);
}



/* ============================================================
   4️⃣ VIDEO TITLE
   ------------------------------------------------------------
   • Strong, bold, enterprise typography
   • Slight spacing for clean hierarchy
   ============================================================ */
.video-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.35rem;
}



/* ============================================================
   5️⃣ VIDEO DESCRIPTION TEXT
   ------------------------------------------------------------
   • Soft, readable, secondary text
   • Comfortable line height for enterprise readability
   ============================================================ */
.video-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.55;
    margin-bottom: 0;
}



/* ============================================================
   6️⃣ SECTION TITLE
   ------------------------------------------------------------
   • Matches typography scale of other Index sections
   • Clean, bold, centered
   ============================================================ */
#videos .section-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1a1a1a;
}



/* ============================================================
   7️⃣ RESPONSIVE BEHAVIOR
   ------------------------------------------------------------
   • Adjust thumbnail height on smaller screens
   • Maintain cinematic aspect ratio
   ============================================================ */
@media (max-width: 768px) {
    .video-thumb-card img {
        height: 180px;
    }
}