/**
 * Cause Cards - Shared Component Styles
 *
 * Image-based cause cards used across public pages (homepage, cause index,
 * cause show "Explore Other Causes" section, etc.).
 *
 * This file lives in public/css/ so it can be directly linked by any layout
 * regardless of whether it uses Vite or Tailwind CDN.
 */

/* ==========================================================================
   Cause Image Cards
   ========================================================================== */

.home-cause-card {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 202px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #4B5563;
    background-clip: padding-box;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.home-cause-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
}

.home-cause-card-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0) 100%);
}

.home-cause-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}