/* =========================================================
   --- Activity Grid Specific Card Styles ---
   ========================================================= */

/* 1. Base Card Styling */
.activity-card {
    /* CRITICAL FIX: Forces the card to use your theme's 16px curve, overriding UIkit's 5px curve! */
    border-radius: var(--radius-soft) !important; 
    
    overflow: hidden; 
    transform: translateZ(0); 
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s ease;
    background-color: #FFFFFF;
    
    border-top: 5px solid var(--primary); 
}

/* 2. Alternating "Random" School Colors for the top border */
.infinite-item:nth-child(4n+1) .activity-card { border-top-color: var(--accent-yellow); }
.infinite-item:nth-child(4n+2) .activity-card { border-top-color: var(--primary); }
.infinite-item:nth-child(4n+3) .activity-card { border-top-color: var(--accent-purple); }
.infinite-item:nth-child(4n+4) .activity-card { border-top-color: var(--accent-green); }

/* 3. Hover Effects */
.activity-card:hover {
    transform: translateY(-8px); 
    box-shadow: var(--shadow-hover); 
    border-top-color: var(--primary) !important; 
}

/* 4. Safe Wrapper for Image */
.activity-card-img-wrap {
    overflow: hidden; 
    
    /* CRITICAL FIX: Matches the parent card's curve exactly, no math needed! */
    border-radius: var(--radius-soft) var(--radius-soft) 0 0 !important; 
    
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.activity-card-img-wrap img {
    width: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease; 
    
    /* Keeps the image tucked 1px under the border to hide anti-aliasing glitches */
    margin-top: -1px; 
    height: calc(220px + 1px);
}

/* 5. Image Zoom on Hover */
.activity-card:hover .activity-card-img-wrap img {
    transform: scale(1.05); 
}