/* ==========================================================================
   MISSION.CSS — Component .mission
   Bloc de frase impactant. Fons fosc + tipografia gran + pes lleuger.
   Signatura visual del projecte.
   ========================================================================== */

.mission {
        background-color: var(--color-bg-dark);
        color: var(--color-text-main);
        padding: var(--spacing-section-lg);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
}

.mission__content {
        max-width: 800px;
        margin: 0 auto;
}

/* Tipografia característica: gran, lleugera, impactant */
.mission__content h2 {
        font-family: var(--font-heading);
        font-size: 2.8rem;
        font-weight: 300;
        /* Lleuger — signatura del projecte */
        line-height: 1.3;
        color: var(--color-text-main);
        letter-spacing: -0.5px;
}

/* Variant sobre fons clar */
.mission--light {
        background-color: var(--color-cream);
        color: var(--color-text-body);
}

.mission--light .mission__content h2 {
        color: var(--color-black-soft);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
        .mission {
                padding: 6rem 1.5rem;
        }

        .mission__content h2 {
                font-size: 1.9rem;
        }
}

@media (max-width: 480px) {
        .mission__content h2 {
                font-size: 1.6rem;
        }
}