/* Missions Section Styles (BEM) */

.missions-section {
    position: relative;
    width: 100%;
    /* Default background is white for the section as a whole */
    background-color: transparent;
    overflow: visible; /* Allow overlap */
}

/* Green Header Background Area */
.missions-section__header-bg {
    background-color: var(--missions-bg-color, #0e8040); /* Default green */
    color: var(--missions-text-color, #ffffff); /* Default white text */
    /* Remove padding based height calculation, use fixed height + flexbox */
    height: 210px;
    display: flex;
    align-items: flex-start; /* Align content to top */
    justify-content: center;
    padding-top: 50px; /* Adjust top padding to place text */
    width: 100%;
    box-sizing: border-box;
}

.missions-section__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    width: 100%;
}

/* Header Content */
.missions-section__header-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
/* ... title styles ... */

/* Grid - Negative Margin for Overlap */
.missions-section__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    width: 100%;
    /* 
       Header is 210px. 
       If we want cards to overlap, they need to move up.
       If cards are ~250px high and we want them to "overlay inside the green background",
       meaning they sit ON TOP of the green background but stick out?
       "the card should be overlay inside the the title green background"
       Usually means vertically centered on the edge or just overlapping.
       Let's assume a significant overlap.
       If header is 210px, and we pull up by 100px.
    */
    margin-top: -100px; 
    margin-bottom: 60px; /* Space after the section */
    position: relative;
    z-index: 10;
    justify-items: center; /* Center cards in their grid cells */
}

@media (min-width: 768px) {
    .missions-section__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .missions-section__grid {
        grid-template-columns: repeat(4, 1fr); /* Default 4 columns */
    }
}

/* Card */
.missions-card {
    background-color: #ffffff;
    border-radius: 20px; /* Radius: 20px */
    /* Padding: Top 30px, Right 30px, Bottom 40px, Left 30px */
    padding: 30px 30px 40px 30px; 
    /* Shadow: Drop shadow X=0 Y=4 Blur=70 Spread=0 #000000 10% */
    box-shadow: 0 4px 70px 0 rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    /* Remove fixed/min height on card itself, let content drive it or fit content */
    height: auto; 
    text-decoration: none;
    color: #333;
    position: relative;
    overflow: hidden;
    /* Width: Fixed (305px) */
    width: 100%; 
    max-width: 305px;
    box-sizing: border-box;
}

.missions-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 80px rgba(0, 0, 0, 0.15);
}

.missions-card__icon-wrapper {
    /* Gap: 10px (between icon and content, effectively bottom margin of icon wrapper) */
    margin-bottom: 10px; 
    display: flex;
    align-items: center;
    justify-content: flex-start;
}


.missions-card__icon {
    width: 48px;
    height: 48px;
    object-fit: cover; /* Changed to cover for better photo rendering in circle */
    border-radius: 50%; /* Make it round */
    /* Filter to ensure icon is red if it's an SVG loaded as img, 
       otherwise rely on the image itself being red */
}

/* If using font icons */
.missions-card__icon-wrapper i {
    font-size: 3rem;
    color: #ed2024; /* Red color */
}

.missions-card__content {
    /* Fixed dimensions for text place as requested: 245 x 173 */
    width: 245px;
    height: 173px;
    /* Ensure flex grow doesn't override height if we want it fixed/min */
    flex: 0 0 auto; 
    overflow-y: visible; /* Or hidden/auto depending on preference, visible allows spillover */
}

.missions-card__title {
    font-family: 'Lato', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
    line-height: 1.3;
}

.missions-card__description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}

/* Accessibility focus states */
.missions-card:focus-visible,
.missions-section__link:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}