/* 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%;
    box-sizing: border-box;
}

/* 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);
    /* 1 column on mobile */
    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 */
}

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

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

/* 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: Responsive - full width on mobile, constrained on larger screens */
    width: 100%;
    max-width: 100%;
    /* Full width on mobile */
    box-sizing: border-box;
}

/* Desktop: constrain card width */
@media (min-width: 1024px) {
    .missions-card {
        max-width: 305px;
    }
}

.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 */
}

@media (max-width: 1200px) {
    .missions-card__content {
        width: 100%;
        height: auto;
        min-height: 173px;
    }
}

@media (max-width: 992px) {
    .missions-section__header-bg {
        height: auto;
        min-height: 160px;
        padding: 40px 0 90px;
    }

    .missions-section__header-content {
        flex-direction: column;
        gap: 12px;
    }

    .missions-section__grid {
        margin-top: -70px;
        gap: 20px;
        justify-items: center;
    }

    .missions-card {
        max-width: 100%;
        width: 100%;
    }

    .missions-card__content {
        width: 100%;
        height: auto;
        min-height: 160px;
    }
}

@media (max-width: 767px) {
    .missions-section__header-bg {
        min-height: 140px;
        padding: 32px 0 80px;
    }

    .missions-section__container {
        padding: 0 16px;
        /* Ensure proper padding on mobile */
    }

    .missions-section__grid {
        margin-top: -50px;
        gap: 16px;
        grid-template-columns: 1fr;
        /* Force 1 column on mobile */
        width: 100%;
        justify-items: center;
    }

    .missions-card {
        padding: 24px 24px 32px 24px;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        /* Remove any margin */
    }

    .missions-card__title {
        font-size: 1.15rem;
    }

    .missions-card__description {
        font-size: 0.9rem;
    }

    .missions-card__content {
        width: 100%;
        height: auto;
        min-height: auto;
    }
}

@media (max-width: 576px) {
    .missions-section__header-bg {
        min-height: 120px;
        padding: 28px 0 70px;
    }

    .missions-section__container {
        padding: 0 12px;
        /* Tighter padding on small mobile */
    }

    .missions-section__grid {
        margin-top: -40px;
        gap: 12px;
        grid-template-columns: 1fr;
        /* Ensure 1 column on small mobile */
        width: 100%;
    }

    .missions-card {
        padding: 18px 16px 24px 16px;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        border-radius: 16px;
        /* Slightly smaller radius on mobile */
    }

    .missions-card__title {
        font-size: 1.1rem;
    }

    .missions-card__description {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .missions-card__content {
        width: 100%;
        height: auto;
        min-height: auto;
    }
}

.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;
}