/* ==========================================================================
   ACP-SG
   Associação Cidade Praia Salto Grande

   COMPONENTE: NOSSO PROPÓSITO
   ========================================================================== */


/* ==========================================================================
   VARIÁVEIS LOCAIS
   ========================================================================== */

.proposito-componente {

    --proposito-bg: #f3f0e7;
    --proposito-card: #ffffff;

    --proposito-green: var(--cor-primaria);
    --proposito-green-dark: var(--cor-agua-escura);
    --proposito-teal: var(--cor-agua);

    --proposito-text: #263c35;
    --proposito-text-soft: #60716c;

    width: 100%;

    padding: 100px 0;

    background: var(--proposito-bg);

    color: var(--proposito-text);
}


/* ==========================================================================
   CONTAINER
   ========================================================================== */

.proposito-componente__container {

    width: min(1240px, calc(100% - 80px));

    margin-inline: auto;
}


/* ==========================================================================
   CABEÇALHO
   ========================================================================== */

.proposito-componente__heading {

    max-width: 900px;

    margin: 0 auto 52px;

    text-align: left;
}


/* ==========================================================================
   LABEL
   ========================================================================== */

.proposito-componente__label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

    color: var(--proposito-green-dark);

    font-size: .70rem;

    font-weight: 800;

    letter-spacing: .19em;

    line-height: 1.4;

    text-transform: uppercase;
}


.proposito-componente__label::before {

    content: "";

    width: 26px;

    height: 2px;

    background: var(--proposito-teal);
}


/* ==========================================================================
   TÍTULO
   ========================================================================== */

.proposito-componente__title {

    max-width: 760px;

    margin: 0 0 20px;

    color: var(--proposito-green);

    font-size: clamp(2.5rem, 4.5vw, 4rem);

    font-weight: 800;

    letter-spacing: -.045em;

    line-height: 1.04;
}


/* ==========================================================================
   DESCRIÇÃO
   ========================================================================== */

.proposito-componente__description {

    max-width: 760px;

    margin: 0;

    color: var(--proposito-text-soft);

    font-size: 1rem;

    line-height: 1.75;
}


/* ==========================================================================
   GRADE
   ========================================================================== */

.proposito-componente__grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;
}


/* ==========================================================================
   CARD
   ========================================================================== */

.proposito-componente__card {

    min-width: 0;

    min-height: 295px;

    padding: 34px 28px;

    background: var(--proposito-card);

    border: 1px solid rgba(38, 60, 53, .05);

    border-radius: 5px;

    box-shadow:
        0 8px 22px rgba(35, 61, 52, .035);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.proposito-componente__card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 14px 30px rgba(35, 61, 52, .08);
}


/* ==========================================================================
   ÍCONE
   ========================================================================== */

.proposito-componente__icon {

    display: grid;

    place-items: center;

    width: 54px;

    height: 54px;

    margin-bottom: 24px;

    border-radius: 50%;

    background: #edf2e9;

    color: var(--proposito-teal);

    font-size: 1.15rem;
}


/* ==========================================================================
   TÍTULO DO CARD
   ========================================================================== */

.proposito-componente__card-title {

    margin: 0 0 15px;

    color: var(--proposito-text);

    font-size: 1.05rem;

    font-weight: 800;

    line-height: 1.3;
}


/* ==========================================================================
   TEXTO DO CARD
   ========================================================================== */

.proposito-componente__card-text {

    margin: 0;

    color: var(--proposito-text-soft);

    font-size: .88rem;

    line-height: 1.75;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1000px) {

    .proposito-componente {

        padding: 80px 0;
    }


    .proposito-componente__container {

        width: min(100% - 48px, 820px);
    }


    .proposito-componente__grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .proposito-componente__card {

        min-height: 270px;
    }

}


/* ==========================================================================
   TABLET PEQUENO
   ========================================================================== */

@media (max-width: 700px) {

    .proposito-componente {

        padding: 65px 0;
    }


    .proposito-componente__container {

        width: calc(100% - 36px);
    }


    .proposito-componente__heading {

        margin-bottom: 38px;
    }


    .proposito-componente__title {

        font-size:
            clamp(2.25rem, 9vw, 3.3rem);
    }


    .proposito-componente__description {

        font-size: .95rem;
    }


    .proposito-componente__grid {

        gap: 15px;
    }


    .proposito-componente__card {

        min-height: 0;

        padding: 28px 22px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 520px) {

    .proposito-componente {

        padding: 55px 0;
    }


    .proposito-componente__container {

        width: calc(100% - 28px);
    }


    .proposito-componente__heading {

        margin-bottom: 32px;
    }


    .proposito-componente__label {

        margin-bottom: 13px;

        font-size: .63rem;

        letter-spacing: .17em;
    }


    .proposito-componente__label::before {

        width: 22px;
    }


    .proposito-componente__title {

        font-size: 2.3rem;

        line-height: 1.05;
    }


    .proposito-componente__description {

        font-size: .92rem;

        line-height: 1.65;
    }


    .proposito-componente__grid {

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .proposito-componente__card {

        min-height: 0;

        padding: 27px 24px;
    }


    .proposito-componente__icon {

        width: 50px;

        height: 50px;

        margin-bottom: 20px;
    }

}


/* ==========================================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .proposito-componente *,
    .proposito-componente *::before,
    .proposito-componente *::after {

        transition-duration: .01ms !important;

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;
    }

}