/* ========================================= */
/* 1. סטיילינג כללי לעמוד ארכיון פעילויות */
/* ========================================= */

.activities-archive-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* כותרות סקשן */
.activities-section-title {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
    color: #059669; /* צבע כותרת ירוק כהה */
}


/* ========================================= */
/* 2. סטיילינג לאזור ראש העמוד (Hero Section) - צבע טורקיז */
/* ========================================= */

.activity-hero-section {
    /* צבע טורקיז-ירוק */
    background: linear-gradient(to bottom right, #f0fff4, #f8fcf0); 
    padding: 80px 0; 
    text-align: center;
    margin-bottom: 40px;
}

.activity-hero-section .hero-title {
    font-size: 2.5rem; 
    font-weight: 700; 
    color: #333; 
    margin-bottom: 1.5rem;
}

.activity-hero-section .hero-description {
    font-size: 1.25rem; 
    color: #4b5563; 
    max-width: 600px; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

/* אייקונים וסטטיסטיקות - צבע ראשי ירוק-טורקיז */
.activity-hero-section .stat-icon-wrapper {
    background-color: rgba(16, 185, 129, 0.2); /* #10b981 בהירות */
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    width: 64px;
    height: 64px;
}

.activity-hero-section .stat-icon {
    width: 32px; 
    height: 32px; 
    color: #10b981; /* Primary Green */
}

.activity-hero-section .stat-number {
    font-size: 1.875rem; 
    font-weight: 700; 
    color: #333; 
    margin-bottom: 0.5rem;
}

.activity-hero-section .stat-label {
    color: #4b5563;
}

/* רספונסיביות ל-Hero Section */
@media (min-width: 768px) {
    .activity-hero-section .hero-title {
        font-size: 3rem;
    }
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========================================= */
/* 3. סטיילינג לכרטיס פעילות מודרני (3 עמודות) */
/* ========================================= */

.activity-grid {
    /* הגדרת גריד רספונסיבי (1 עמודה, 2 בדסקטופ ביניים, 3 בדסקטופ מלא) */
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* ברירת מחדל: עמודה אחת */
    gap: 32px; /* gap-8 */
}

/* דסקטופ ביניים (כ-768px ומעלה - מדמה md:grid-cols-2) */
@media (min-width: 768px) {
    .activity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* דסקטופ מלא (כ-1024px ומעלה - מדמה lg:grid-cols-3) */
@media (min-width: 1024px) {
    .activity-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* סטיילינג לכרטיס הבודד (Card) */
.activity-card {
    /* rounded-lg border bg-card text-card-foreground shadow-sm */
    border: 1px solid #e5e7eb; /* Light Gray border */
    border-radius: 0.5rem; /* rounded-lg */
    background-color: #ffffff; /* White background */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* shadow-sm */
    transition: all 0.3s ease-in-out; /* transition-all duration-300 */
    position: relative;
}

.activity-card:hover {
    /* hover:shadow-lg transition-all duration-300 hover:-translate-y-1 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transform: translateY(-4px); /* hover:-translate-y-1 */
}

/* תמונה ו-Aspect Ratio */
.activity-image-wrapper {
    /* aspect-video overflow-hidden rounded-t-lg */
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

.activity-image {
    /* w-full h-full object-cover transition-transform duration-300 group-hover:scale-105 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.activity-card:hover .activity-image {
    transform: scale(1.05);
}

/* אזור כותרת וסטטוס */
.activity-header-content {
    /* flex flex-col space-y-1.5 p-6 */
    padding: 1.5rem; /* p-6 */
}

.activity-status-row {
    /* flex items-center justify-between */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.activity-title {
    /* font-semibold tracking-tight text-xl */
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #333;
    margin: 0;
}

/* כפתור הסטטוס (Badge) */
.activity-status-badge {
    /* inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold... */
    display: inline-flex;
    align-items: center;
    border-radius: 9999px; /* rounded-full */
    padding: 0.25rem 0.625rem; /* px-2.5 py-0.5 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    text-transform: capitalize;
}

/* סטיילינג לסטטוס 'פעיל' */
.status-active {
    /* bg-primary text-primary-foreground hover:bg-primary/80 */
    background-color: #10b981; /* Primary Green - בהיר יותר מהמתנדבים */
    color: white; 
}

/* סטיילינג לסטטוס 'בתכנון' */
.status-planned {
    /* bg-secondary text-secondary-foreground hover:bg-secondary/80 (נשתמש בצהוב) */
    background-color: #ffc107; /* Yellow */
    color: #333;
}

/* אזור התוכן הראשי (מתחת לכותרת) */
.activity-main-content {
    /* p-6 pt-0 */
    padding: 1.5rem;
    padding-top: 0;
    text-align: right;
}

.activity-excerpt {
    /* text-muted-foreground mb-4 leading-relaxed */
    color: #6b7280; /* Gray/Muted foreground */
    margin-bottom: 1rem; /* mb-4 */
    line-height: 1.625; /* leading-relaxed */
}

/* כפתור למידע נוסף */
.activity-read-more {
    /* w-full, bg-primary, h-10 px-4 py-2 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 2.5rem; /* h-10 */
    padding: 0.5rem 1rem; /* px-4 py-2 */
    border-radius: 0.375rem; /* rounded-md */
    background-color: #059669; /* Darker Green */
    color: white;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    text-decoration: none;
    transition: background-color 0.3s ease;
}
 .activity-read-more:visited {
    color: white;
}

.activity-read-more:hover {
    background-color: #047857; /* Darker hover */
}