/*
 * Conteúdo das PÁGINAS PERSONALIZADAS — o HTML que o Centralizador gera a partir do editor
 * visual do cliente (App\Libraries\ConteudoRico). Só classes com prefixo `rico-`.
 *
 * ⚠️ **Arquivo próprio, carregado pelos CINCO layouts.** Não pode morar no `fix.css`: as skins
 * não o carregam, então a regra valeria só na `complete` e falharia calada nas outras quatro —
 * foi a cicatriz das personalizações por .env. Também não entra no `personalizacoes.css`, que
 * é de outra feature (as chaves CUSTOM_*).
 *
 * O contrato das classes é do gerador; mudar nome aqui sem mudar lá quebra páginas já
 * publicadas — e o cliente não tem como saber por quê.
 */

/* ---- Cartões: "MISSÃO / VISÃO / VALORES" lado a lado ------------------------------- */

/* `auto-fit` + `minmax` em vez de 3 colunas fixas: o cliente pode marcar 2, 3 ou 5 cartões,
   e a grade se ajusta sozinha — inclusive caindo para uma coluna no celular, sem media query. */
.rico-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
    margin: 1.75rem 0;
    clear: both; /* uma grade nunca sobe ao lado de uma imagem flutuante acima dela */
}

.rico-cartao {
    background: var(--card-bg-color, #fff);
    border: 1px solid rgba(0, 0, 0, .08);
    border-left: 3px solid var(--main-primary-color, #114358);
    border-radius: .5rem;
    padding: 1.25rem 1.25rem 1rem;
}

.rico-cartao > :first-child { margin-top: 0; }
.rico-cartao > :last-child  { margin-bottom: 0; }

.rico-cartao h2,
.rico-cartao h3,
.rico-cartao h4 {
    color: var(--main-primary-color, #114358);
    margin-bottom: .5rem;
}

/* ---- Imagem ao lado do texto ------------------------------------------------------- */

/* ⭐ FLOAT, não `text-align`: o pedido do cliente é "a foto ao lado do texto". Alinhar o bloco
   deslocaria a foto e deixaria o texto embaixo dela, que é outra coisa. */
/* ⭐ Quem flutua é o `<img>`, não o parágrafo. O cliente costuma escrever o texto logo depois
   da foto, na MESMA linha; flutuando o parágrafo, esse caso — o mais comum — não funcionaria. */
.rico-img img,
.rico-al--centro img,
.rico-cartao img { max-width: 100%; height: auto; border-radius: .5rem; }

.rico-img--esq img,
.rico-img--dir img { max-width: 45%; margin-bottom: .75rem; }

.rico-img--esq img { float: left;  margin-right: 1.5rem; }
.rico-img--dir img { float: right; margin-left: 1.5rem; }

/* ---- Alinhamento de texto ---------------------------------------------------------- */

.rico-al--esq    { text-align: left; }
.rico-al--centro { text-align: center; }
.rico-al--dir    { text-align: right; }

/* ---- Celular: nada flutua ---------------------------------------------------------- */

/* Numa tela estreita não há espaço para texto ao lado: a foto vira bloco de largura inteira.
   Sem isto, 45% de uma tela de 360px deixa a foto minúscula e o texto em coluna de 4 palavras. */
@media (max-width: 48em) {
    .rico-img--esq img,
    .rico-img--dir img {
        float: none;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ---- Vídeo ------------------------------------------------------------------------- */

/* O player do YouTube vem do `partials/vehicle_video.php` (o MESMO da página do veículo) e é
   autocontido: proporção e posicionamento em `style` inline, para funcionar mesmo em skin cujo
   CSS ainda não subiu. Aqui só o espaçamento e o limite de largura. */
.rico-video,
.rico-video__player { margin: 1.5rem auto; max-width: 45rem; clear: both; }

/* Vídeo em ARQUIVO (mp4 no próprio site). `preload="metadata"` vem do gerador: sem isso o
   navegador baixaria o arquivo inteiro na abertura da página, gastando a banda do cliente
   com quem nem clicou em play. */
.rico-video-arquivo {
    display: block;
    width: 100%;
    max-width: 45rem;
    margin: 1.5rem auto;
    border-radius: .5rem;
    clear: both;
    background: #000;
}