/* =============================================================================
   22 · IMAGEM — O QUADRO, E SOBRETUDO O VAZIO
   ACIGRA × Data-Robotics · 01/09/2026

   POR QUE ESTE ARQUIVO É SOZINHO E NÃO UM PEDAÇO DO CSS DE CADA TELA
   Três telas desenham o mesmo quadro: a vitrine do Balcão, a agenda pública de
   eventos e a página de inscrição. Colar o mesmo bloco em três folhas produz
   três vazios diferentes na primeira vez que alguém ajustar um só. Ele é
   AUTOSSUFICIENTE: as seis cores nascem aqui, e o que ele pede emprestado da
   folha da tela (`--fundo`, `--linha`, `--r`) vem com valor de reserva, para a
   página da rua não ficar sem quadro se carregar sozinha.

   O VAZIO É O CASO NORMAL, E NÃO A EXCEÇÃO
   A maioria das ofertas e dos eventos NÃO vai ter foto. Uma grade em que metade
   dos quadros está quebrada é pior que grade sem foto nenhuma — então o cartão
   sem imagem foi desenhado primeiro: a cor da categoria e as iniciais da
   empresa, do tamanho de um logotipo. Ele tem de ficar bom o bastante para
   ninguém sentir falta.

   CLARO POR PADRÃO, ESCURO QUANDO O SISTEMA PEDIR, E NENHUMA COR NASCE SÓ NO
   BLOCO ESCURO — cada uma das seis existe primeiro na luz.
   Zero fonte remota. Zero imagem de fundo.
   ========================================================================== */

:root{
  /* As seis cores do vazio. Escolhidas para conviver com o azul da casa
     (#2B54A4) e para aguentar texto branco por cima em qualquer uma delas —
     é isso que faz a grade parecer uma coisa só, e não seis adesivos. */
  --im-c0:#2B54A4;   /* o azul da casa */
  --im-c1:#1B7F4B;   /* verde */
  --im-c2:#8A5A00;   /* âmbar */
  --im-c3:#6B3FA0;   /* roxo */
  --im-c4:#0E6E82;   /* petróleo */
  --im-c5:#A3402A;   /* terracota */
  --im-ini:#FFFFFF;
}

@media (prefers-color-scheme: dark){
  :root{
    /* As mesmas seis, mais fundas: um bloco de cor viva ocupando um terço do
       cartão cega no escuro. Nenhuma cor nova aparece aqui. */
    --im-c0:#2D4C86; --im-c1:#1C6B45; --im-c2:#74501A;
    --im-c3:#5B3A83; --im-c4:#14596A; --im-c5:#8A3B2B;
    --im-ini:#F2F6FC;
  }
}

/* A página pública de inscrição traz `data-tema="claro"` no <html> porque ela
   não passa pela casca e obedeceria ao tema do sistema de quem abre. Repetimos
   a paleta clara com especificidade maior, exatamente como `eventos.css` faz —
   e, como lá, nenhuma cor nasce nesta regra: as seis já existem em :root. */
:root[data-tema="claro"]{
  --im-c0:#2B54A4; --im-c1:#1B7F4B; --im-c2:#8A5A00;
  --im-c3:#6B3FA0; --im-c4:#0E6E82; --im-c5:#A3402A;
  --im-ini:#FFFFFF;
}

/* ── o quadro ─────────────────────────────────────────────────────────────
   `aspect-ratio` reserva a altura ANTES de a imagem chegar; `object-fit:cover`
   preenche o quadro sem deformar ninguém. A cor do vazio fica no fundo do
   quadro mesmo quando há foto: é o que o olho vê enquanto ela carrega, em vez
   de um retângulo branco piscando. */
.im{
  position:relative; display:block; width:100%;
  aspect-ratio:16/9;
  border-radius:calc(var(--r, 14px) - 4px);
  overflow:hidden;
  background:var(--im-c0);
  border:1px solid var(--linha, #DFE5EE);
  margin-bottom:12px;
}
.im img{ width:100%; height:100%; object-fit:cover; display:block; border:0 }

.im--vazio{ display:flex; align-items:center; justify-content:center }
.im__ini{
  font-size:38px; font-weight:800; letter-spacing:.06em; line-height:1;
  color:var(--im-ini); opacity:.94;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.im--c0{background:var(--im-c0)}
.im--c1{background:var(--im-c1)}
.im--c2{background:var(--im-c2)}
.im--c3{background:var(--im-c3)}
.im--c4{background:var(--im-c4)}
.im--c5{background:var(--im-c5)}

/* ── a tira, para o cartão largo ──────────────────────────────────────────
   Na agenda de eventos o cartão ocupa a largura toda da página. Um banner 16/9
   com 1.080 px de largura teria 600 px de altura — o cartão viraria pôster e a
   agenda deixaria de ser lista. Então, no cartão largo, a imagem vira uma tira
   à esquerda do texto. No celular ela volta a ser o quadro de cima. */
.im--faixa{ flex:0 0 208px; width:208px; margin:0 16px 0 0 }
.im--faixa .im__ini{ font-size:30px }
.im-linha{ display:flex; gap:0; align-items:flex-start }
.im-linha__texto{ flex:1 1 auto; min-width:0 }

/* ── a capa, no alto da página de inscrição ───────────────────────────────
   Aqui a imagem é o convite, e ela pode ser grande. O teto de altura existe
   para o formulário não sumir abaixo da dobra num monitor baixo — e sumir
   abaixo da dobra já custou caro nesta plataforma. */
.im--capa{ aspect-ratio:16/9; margin-bottom:18px }
.im--capa .im__ini{ font-size:52px }

/* ── os controles de quem sobe ────────────────────────────────────────────
   Ficam num bloco próprio, abaixo do quadro, e só aparecem para quem é dono —
   quem decide isso é o servidor, nunca o CSS. */
.im-acoes{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:-4px 0 12px }
.im-acoes .im-arquivo{ display:none }
.im-acoes label{
  font:inherit; font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:9px;
  cursor:pointer; border:1px solid var(--linha, #DFE5EE); background:transparent;
  color:var(--tinta-2, #41506B); display:inline-block;
}
.im-acoes label:hover{ border-color:var(--brand, #2B54A4); color:var(--brand, #2B54A4) }
.im-recado{ font-size:12px; color:var(--tinta-3, #6D7C93); line-height:1.45; flex:1 1 100%; margin-top:2px }
.im-recado.ok{ color:var(--ok, #1B7F4B); font-weight:600 }
.im-recado.ruim{ color:var(--ruim, #A32020); font-weight:600 }

@media (max-width:620px){
  .im-linha{ display:block }
  .im--faixa{ width:100%; margin:0 0 12px 0 }
  .im--capa{ border-radius:12px }
  .im__ini{ font-size:32px }
}