/* ============================================
   UNIVERSAL CARD HOVER EFFECTS
   Applied to all card elements across the site
   Unified with service card design
   ============================================ */

/* Base card styles - unified design */
.news-card,
.member-card,
.latest-card,
.quick-action-card,
.update-card {
    position: relative;
    overflow: hidden;
    background: white;
    border-radius: 20px;
    border: 2px solid #F3F8FC;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Top border animation - appears on hover */
.news-card::before,
.member-card::before,
.latest-card::before,
.quick-action-card::before,
.update-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--theme-primary) 0%, var(--theme-secondary) 100%);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    z-index: 1;
}

.news-card:hover::before,
.member-card:hover::before,
.latest-card:hover::before,
.quick-action-card:hover::before,
.update-card:hover::before {
    transform: scaleX(1);
}

/* Unified hover effect */
.news-card:hover,
.member-card:hover,
.latest-card:hover,
.quick-action-card:hover,
.update-card:hover {
    transform: translateY(-10px);
    border-color: var(--theme-primary);
    box-shadow: 0 20px 50px rgba(11, 127, 196, 0.16);
}

/* Icon rotation on hover for all cards with icons */
.news-card:hover .news-icon,
.member-card:hover .member-icon,
.latest-card:hover .latest-card-header i,
.quick-action-card:hover .quick-action-icon,
.update-card:hover .update-icon {
    transform: scale(1.1) rotate(-5deg);
}

/* Team member cards - image zoom effect */
.member-card .card-image {
    overflow: hidden;
}

.member-card .card-image img {
    transition: transform 0.8s ease;
}

.member-card:hover .card-image img {
    transform: scale(1.1);
}

/* Override update card specific styles to match unified design */
.update-card {
    background: white !important;
    backdrop-filter: none !important;
    border: 2px solid #F3F8FC !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

.update-card:hover {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 20px 50px rgba(11, 127, 196, 0.16) !important;
}