/* ==========================================================
   REALEZA ACESSÓRIOS
   SOBRE.CSS v1
   Página institucional "Sobre a Realeza" (/sobre)
   /assets/css/sobre.css
========================================================== */

.sobre-secao {
    padding-top: 80px;
    padding-bottom: 80px;
}

.sobre-secao-inversa {
    background: var(--color-secondary);
}

.sobre-grid {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 60px;
    align-items: center;
}

.sobre-secao-inversa .sobre-grid {
    grid-template-columns: 1fr 480px;
}

.sobre-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.sobre-image img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

.sobre-content h2 {
    margin: 16px 0 20px;
}

.sobre-content p {
    color: var(--color-text-light);
    margin-bottom: 16px;
}

.sobre-content p:last-of-type {
    margin-bottom: 24px;
}

/* ==========================================================
   VALORES
========================================================== */

.sobre-valores {
    padding-top: 80px;
    padding-bottom: 80px;
}

.sobre-valores .section-header {
    text-align: center;
    margin-bottom: 48px;
}

/* .benefits-grid / .benefit-card viraram componente compartilhado em
   assets/css/layout.css (2026-08-01) — não redefinir aqui. */

/* ==========================================================
   MISSÃO E VISÃO (2026-08-01)
   Dois cards lado a lado, acima da grade de Valores já existente
   (.benefits-grid) — mesma seção ".sobre-valores" virou o lugar
   único de Missão + Visão + Valores no site, pra não duplicar
   discurso institucional em mais de um ponto da página.
========================================================== */

.mvv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 56px;
}

.mvv-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: var(--space-32);
    box-shadow: var(--shadow-default);
    text-align: center;
}

.mvv-card h3 {
    margin-bottom: var(--space-8);
}

.mvv-card p {
    color: var(--color-text-light);
    line-height: 1.7;
    margin: 0;
}

.mvv-valores-titulo {
    text-align: center;
    margin-bottom: var(--space-32);
}

/* .cta-final virou componente compartilhado em assets/css/layout.css
   (2026-08-01) — não redefinir aqui. */

/* ==========================================================
   O MARCO (depoimento da Vanessa, 2026-08-01)
   Bloco de citação centralizado, fundo destacado (mesmo tom do
   page-header) pra separar visualmente da seção de Valores logo
   acima e do CTA final logo abaixo.
========================================================== */

.sobre-marco {
    padding-top: 80px;
    padding-bottom: 80px;
    background: var(--color-secondary);
}

.sobre-marco-conteudo {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.sobre-marco-conteudo h2 {
    margin: 16px 0 40px;
}

.sobre-marco-texto {
    text-align: left;
}

.sobre-marco-texto p {
    color: var(--color-text);
    font-size: 17px;
    line-height: 1.85;
    margin-bottom: 20px;
}

.sobre-marco-texto p:last-child {
    margin-bottom: 0;
}

.sobre-marco-assinatura {
    margin-top: 32px;
    font-family: var(--font-title);
    font-size: 18px;
    font-style: italic;
    color: var(--color-title);
}

/* ==========================================================
   RESPONSIVO — TABLET (≤991px)
========================================================== */

@media (max-width: 991px) {

    .sobre-secao,
    .sobre-valores,
    .sobre-marco {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .sobre-grid,
    .sobre-secao-inversa .sobre-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* imagem sempre primeiro no visual, mesmo quando o HTML da versão
       "invertida" traz o texto antes — evita depender de reordenar
       o markup só por causa do empilhamento mobile */
    .sobre-secao-inversa .sobre-image {
        order: -1;
    }

    .mvv-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}

/* ==========================================================
   RESPONSIVO — MOBILE (≤600px)
========================================================== */

@media (max-width: 600px) {

    .sobre-secao,
    .sobre-valores,
    .sobre-marco {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .sobre-marco-texto p {
        font-size: 16px;
    }

}