/*
@file-header

Finalidade: Estiliza a seção 'about' do site, definindo o layout do grid de introdução (texto e imagem), a aparência dos pilares (missão, visão, valores) e a responsividade para diferentes tamanhos de tela.

Criado por: Fernando Paulo de Santis
E-mail: fpsantis@gmail.com
Site: https://santis.net.br
*/

/* ==========================================================
   4. SEÇÃO about
   ========================================================== */

#about {
    background-color: var(--color-bg-light);
    padding: 80px 0;
    text-align: center;
}



/* 4.1. Grid de Introdução */
.about-intro-grid {
    display: flex;
    flex-direction: column-reverse; /* Inverte a ordem no mobile: imagem abaixo do texto */
    gap: 30px;
    text-align: left;
    margin-bottom: 60px;
    align-items: center;
}

.about-intro-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-light);
    margin: 0;
}

.about-intro-image img {
    width: 100%;
    max-width: 450px;
    display: block;
    aspect-ratio: 1 / 1; /* Garante que a imagem seja sempre renderizada como um quadrado */
    object-fit: cover; /* Preenche o espaço quadrado sem distorcer a imagem */
    margin: 0 auto;
}

/* 4.2. Pilares (Missão, Visão, Valores) */
.pilares-divisor {
    margin-bottom: 40px;
}

.pilares-titulo {
    font-size: 1.8rem;
    color: var(--color-primary);
    text-align: center;
}

.pilares-grid {
    display: flex; /* Alterado para flex para permitir centralização */
    flex-direction: column; /* Mantém o empilhamento no mobile */
    gap: 30px;
    justify-content: center; /* Centraliza os itens */
    flex-wrap: wrap; /* Permite que os itens quebrem a linha se necessário */
}

.pilar-box {
    background-color: var(--color-bg-light);
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    border-top: 4px solid var(--color-accent);
    box-shadow: 0 4px 15px var(--shadow-color-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1; /* Permite que o card cresça para preencher o espaço disponível */
    min-width: 280px; /* Define uma largura mínima para evitar que fiquem muito estreitos */
}

.pilar-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px var(--shadow-color-dark);
}

.pilar-icon svg {
    color: var(--color-primary);
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
}

.pilar-box h4 {
    font-size: 1.4rem;
    color: var(--color-primary);
    margin: 0 0 10px 0;
}

.pilar-box p {
    line-height: 1.6;
    color: var(--color-text-light);
    margin: 0;
}

@media (min-width: 768px) {
    #about .section-title {
        font-size: 2.5rem;
    }

    .about-intro-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 60px;
        align-items: center;
    }

    .pilares-grid {
        flex-direction: row; /* Alinha os pilares lado a lado no desktop */
    }
}

@media (min-width: 992px) {
    .about-intro-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 60px;
        align-items: center;
    }

    .pilares-grid {
        flex-direction: row; /* Mantém o alinhamento em linha */
    }
}