/* ========================================================================== */
/*  MISSIONS PAGE — Missionary Profiles                                       */
/* ========================================================================== */

.missionary-block {
    padding: var(--space-6);
    margin-bottom: var(--space-8);
}

.missionary-flex {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
}

.missionary-photo {
    text-align: center;
}

.missionary-photo img {
    width: 320px; /* Larger base size for clarity */
    max-width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: block;
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Desktop-only hover enhancement */
@media (hover: hover) and (pointer: fine) {
    .missionary-photo img:hover {
        transform: scale(1.06);
        box-shadow: var(--shadow-lg);
    }
}

.missionary-children {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.4;
    margin-top: var(--space-3);
}

.missionary-info {
    flex: 1;
}

.missionary-name {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.missionary-region {
    color: var(--color-primary-700);
    margin-bottom: var(--space-4);
}

.missionary-description {
    margin-bottom: var(--space-4);
    line-height: 1.6;
}

.recent-letters {
    margin-top: var(--space-2);
    padding-left: 1.2rem;
}

.recent-letters li {
    margin-bottom: 0.35rem;
}

/* ========================================================================== */
/*  PHILOSOPHY BLOCK + ANIMATION                                              */
/* ========================================================================== */

.missions-philosophy {
    border-radius: 8px;
}

/* Fade-in animation */
.fade-in {
    opacity: 0;
    transform: translateY(12px);
    animation: fadeInUp 0.7s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================================================== */
/*  RESPONSIVE                                                                */
/* ========================================================================== */

@media (max-width: 768px) {
    .missionary-flex {
        flex-direction: column;
        text-align: center;
    }

    .missionary-photo img {
        width: 100%; /* Full-width on mobile for best clarity */
        max-width: 360px; /* Prevent overly large scaling */
    }

    .missionary-info {
        text-align: left;
    }
}