/* * Shea Initiative Impact Card - Complete Stylesheet
 * Includes Split-Header Layout & Responsive Grid
 */

/* 1. Base Card Container */
.impact-card { 
    width: 100%; 
    background: #ffffff; 
    border-radius: 20px; 
    overflow: hidden; 
    box-shadow: 0 20px 50px rgba(88, 42, 41, 0.1); 
    border: 1px solid #efe8e0; 
    margin: 40px auto; 
    font-family: 'Inter', sans-serif; 
}

/* 2. Split Header Section (Title Left, Content Right) */
.card-header { 
    background: linear-gradient(135deg, #539633 0%, #3f7225 100%); 
    color: #ffffff; 
    padding: 40px 40px; 
    position: relative; 
    overflow: hidden; 
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align bottom edges for a modern look */
    gap: 50px;
}

/* Background Leaf Pattern */
.header-background { 
    position: absolute; 
    top: 0; 
    right: -20px; 
    width: 300px; 
    height: 100%; 
    opacity: 0.15; 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="white" d="M50,10 C70,10 90,30 90,50 C90,70 70,90 50,90 C30,90 10,70 10,50 C10,30 30,10 50,10 Z M50,25 C60,25 70,35 70,45 C70,55 60,65 50,65 C40,65 30,55 30,45 C30,35 40,25 50,25 Z"/></svg>'); 
    background-repeat: repeat; 
    background-size: 80px; 
    pointer-events: none;
}

/* Header Left Content */
.header-left {
    flex: 1.2;
    position: relative;
    z-index: 2;
}

.tagline {
    display: inline-block;
    background: white;
    color: rgba(88, 42, 41, 0.9);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.card-header h1 { 
    font-size: clamp(32px, 5vw, 48px); 
    line-height: 1.1;
    margin: 0; 
    color: #ffffff;
}

/* Header Right Content */
.header-right {
    flex: 1;
    position: relative;
    z-index: 2;
}

.header-right p { 
    font-size: 18px; 
    line-height: 1.6; 
    opacity: 0.95; 
    margin: 0;
    max-width: 500px;
    font-weight: 400;
}

/* 3. Metrics Grid */
.stats-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 20px; 
    padding: 40px; 
    background-color: #ffffff; 
}

.stat-card { 
    background: #ffffff; 
    border-radius: 12px; 
    padding: 30px 15px; 
    text-align: center; 
    border: 1px solid #f2ede7; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

.stat-card:hover { 
    transform: translateY(-8px); 
    border-color: #539633; 
    box-shadow: 0 10px 25px rgba(83, 150, 51, 0.1);
}

.stat-icon { 
    width: 55px; 
    height: 55px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: 0 auto 20px; 
    font-size: 50px; 
    color: #539633; 
    background-color: #f1f8ee; 
}

.stat-value { 
    /*font-family: 'Playfair Display', serif; */
    font-size: 32px; 
    font-weight: 700; 
    color: #582a29; 
    margin-bottom: 8px; 
}

.stat-label { 
    font-size: 18px; 
    color: #666666; 
    font-weight: 500; 
    line-height: 1.4;
}

.stat-note { 
    font-size: 11px; 
    color: #539633; 
    font-weight: 700; 
    text-transform: uppercase; 
    margin-top: 15px; 
    letter-spacing: 0.5px;
}

/* 4. Impact Statement Section (Custom Field Data) */
.impact-statement {
    padding: 45px 40px; 
    background-color: #fcfaf7; 
    border-top: 1px solid #f2ede7; 
}

.impact-statement h3 { 
    font-family: 'Playfair Display', serif; 
    color: #582a29; 
    margin-bottom: 15px; 
    font-size: 24px; 
    display: flex;
    align-items: center;
    gap: 12px;
}

.impact-text { 
    font-size: 17px; 
    line-height: 1.7; 
    color: #4a4a4a; 
}

/* 5. Card Footer */
.card-footer { 
    padding: 30px 40px; 
    background-color: #ffffff; 
    border-top: 1px solid #f2ede7; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.location { 
    font-size: 14px; 
    color: #888888; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.learn-more { 
    background-color: #582a29; 
    color: #ffffff; 
    border: none; 
    padding: 14px 32px; 
    border-radius: 8px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: background 0.3s ease; 
    font-size: 15px;
}

.learn-more:hover { 
    background-color: #3d1d1c; 
}

/* 6. Responsive Design (Mobile Stacking) */
@media (max-width: 850px) { 
    .card-header { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 25px;
        padding: 45px 25px;
    }
    
    .header-right p { 
        max-width: 100%; 
        font-size: 16px; 
    }

    .stats-grid { 
        grid-template-columns: repeat(2, 1fr); 
        padding: 25px; 
    }
}

@media (max-width: 500px) {
    .stats-grid { 
        grid-template-columns: 1fr; 
    }
    
    .card-footer {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}