/* Marketing › Comunicação — a peça (modal · faixa · cartão do mural/prévia).
   Um CSS só para os quatro lugares: o que o marketing vê na prévia tem de ser o
   que a empresa vê na primeira tela. */

.com-peca { min-width: 0; }
.com-titulo { font-size: 1.25rem; font-weight: 700; color: #1a2a3a; margin: 0 0 .35rem; }
.com-frase  { font-size: .95rem; color: #41506a; margin: 0 0 .75rem; white-space: pre-wrap; }
.com-cta    { margin-top: .25rem; }
.com-capa-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Modal: a arte manda, o texto vem embaixo (ou ao lado) ─────────────── */
.com-modal .com-capa { border-radius: .6rem; overflow: hidden; background: #f3f5f8; }
.com-modal.com-lay-imagem_topo .com-capa { max-height: 340px; margin-bottom: 1rem; }
.com-modal.com-lay-imagem_topo .com-capa-img { max-height: 340px; }
.com-modal.com-lay-imagem_lado { display: flex; gap: 1.1rem; align-items: flex-start; }
.com-modal.com-lay-imagem_lado .com-capa { flex: 0 0 42%; max-height: 300px; }
.com-modal.com-lay-imagem_lado .com-texto { flex: 1 1 0; min-width: 0; }
.com-modal .com-titulo { font-size: 1.4rem; }

/* ── Painel lateral: o modal colado numa borda, altura cheia ────────── */
/* O Bootstrap não tem modal lateral (isso é o offcanvas, que não serve aqui:
   a peça precisa do backdrop e do foco preso do modal). São as únicas regras
   que mexem na largura do diálogo — por isso `classesDialogo` não põe
   `modal-sm/lg` junto: duas regras disputando a mesma largura dão resultado
   diferente conforme a ordem do CSS. */
.com-dlg-lateral { margin: 0; max-width: none; height: 100%; position: fixed; top: 0; bottom: 0; }
.com-dlg-lateral .modal-content { height: 100%; border-radius: 0; border: 0; }
.com-dlg-esquerda { left: 0; }
.com-dlg-direita  { right: 0; }
.com-dlg-t-pequeno { width: 340px; }
.com-dlg-t-medio   { width: 460px; }
.com-dlg-t-grande  { width: 620px; }
.com-dlg-t-cheio   { width: 100vw; }
/* A entrada desliza da borda escolhida, e não de cima como o modal comum. */
.modal.fade .com-dlg-esquerda { transform: translateX(-100%); }
.modal.fade .com-dlg-direita  { transform: translateX(100%); }
.modal.show .com-dlg-esquerda, .modal.show .com-dlg-direita { transform: none; }
@media (max-width: 575.98px) {
    /* No celular, painel estreito vira faixa de nada: ocupa a tela toda. */
    .com-dlg-lateral { width: 100vw; }
}

/* ── Faixa: uma linha larga no topo do conteúdo; nunca interrompe ──────── */
.com-faixas { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.com-faixa { position: relative; background: #fff; border: 1px solid #e3e8ef; border-left: 4px solid #0d6efd;
             border-radius: .6rem; padding: .85rem 2.4rem .85rem 1rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.com-faixa .com-peca { display: flex; gap: 1rem; align-items: center; }
.com-faixa .com-capa { flex: 0 0 auto; width: 104px; height: 68px; border-radius: .45rem; overflow: hidden; background: #f3f5f8; }
.com-faixa .com-texto { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .9rem; }
.com-faixa .com-titulo { font-size: 1rem; margin: 0; }
.com-faixa .com-frase { font-size: .86rem; margin: 0; flex: 1 1 14rem; }
.com-faixa .com-cta { margin: 0; }
.com-faixa-x { position: absolute; top: .55rem; right: .6rem; }

/* ── Cartão: o mural e a prévia ────────────────────────────────────────── */
.com-cartao { background: #fff; border: 1px solid #e3e8ef; border-radius: .7rem; overflow: hidden; height: 100%; }
.com-cartao .com-capa { max-height: 200px; overflow: hidden; background: #f3f5f8; }
.com-cartao .com-capa-img { max-height: 200px; }
.com-cartao .com-texto { padding: .9rem 1rem 1rem; }
.com-cartao.com-lay-imagem_lado { display: flex; }
.com-cartao.com-lay-imagem_lado .com-capa { flex: 0 0 38%; max-height: none; }

/* ── Cards com imagem e link ───────────────────────────────────────────── */
.com-cards { display: grid; gap: .6rem; margin: .85rem 0 .6rem; }
.com-cards-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.com-cards-linha { grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); }
/* Preferência da peça: repartir a largura disponível entre os cards.
   `auto-FIT` (e não `auto-fill`): as faixas vazias colapsam e os cards esticam
   para ocupar a linha — com um card só, ele fica com a largura inteira, que era
   o pedido. O `minmax(150px, 1fr)` é o que impede o contrário do preencher:
   medido num painel lateral de 340px, uma regra de "N colunas iguais" espremia
   dois cards em 149px cada; com auto-fit eles empilham, cada um com a largura
   toda. */
.com-cards-preencher { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.com-card { display: flex; flex-direction: column; border: 1px solid #e3e8ef; border-radius: .55rem; overflow: hidden;
            background: #fff; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
a.com-card:hover { box-shadow: 0 4px 12px rgba(16,24,40,.1); transform: translateY(-1px); text-decoration: none; }
.com-card-img { width: 100%; height: 92px; object-fit: cover; display: block; background: #f3f5f8; }
.com-card-txt { padding: .5rem .6rem .6rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.com-card-tit { font-size: .84rem; font-weight: 600; color: #1a2a3a; }
.com-card-sub { font-size: .76rem; color: #6c757d; }
.com-card-ir  { font-size: 1.1rem; line-height: 1; color: #0d6efd; margin-top: .1rem; }

.com-naomostrar { margin-right: auto; font-size: .85rem; }
.com-modal-rodape { display: flex; align-items: center; gap: .6rem; width: 100%; }

@media (max-width: 767.98px) {
    .com-modal.com-lay-imagem_lado, .com-cartao.com-lay-imagem_lado { display: block; }
    .com-faixa .com-peca { flex-wrap: wrap; }
    .com-faixa .com-capa { width: 100%; height: 120px; }
    .com-cards-linha { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ── Celular: os cards EMPILHAM ──────────────────────────────── */
/* Dois cards lado a lado num modal de ~310px ficam com 150px cada, e aí a arte
   é só um recorte: o card vira uma tira de imagem espremida com o título
   embaixo. Empilhados, cada um usa a largura inteira. E a imagem passa a ter
   PROPORÇÃO em vez de altura fixa — é o que deixa os cards homogêneos entre si
   quando as artes têm formatos diferentes (um banner largo ao lado de um logo). */
@media (max-width: 575.98px) {
    .com-cards, .com-cards-grade, .com-cards-preencher, .com-cards-linha {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
    }
    .com-card-img { height: auto; aspect-ratio: 16 / 9; }
    .com-card-txt { padding: .6rem .75rem .7rem; }
    .com-card-tit { font-size: .9rem; }
    .com-card-sub { font-size: .8rem; }
}