/* =========================================================================
   Brazil Day ATX — Festa do 07 · Cultura Brasil Austin (CBA)
   Faixa de apoio institucional — City of Austin
   (Economic Development Department + brasão oficial)

   Autocontido de propósito: as páginas do BDATX usam 4 folhas de estilo
   diferentes (landing, tickets, invitation e o <style> inline dos promoters),
   então nada aqui depende de token de página. Só das classes .coa-*.

   ⚠️ Os logos são tinta ESCURA sobre fundo transparente. Sem superfície clara
   o wordmark "Economic Development" simplesmente some. Por isso:
     • páginas claras (landing creme, invitation paper) → sem fundo nenhum;
     • páginas escuras (tickets, promoters) → `--band`, que faz a SEÇÃO virar
       uma faixa clara de ponta a ponta. Os logos continuam sem cartão em volta.
   O brasão traz o próprio disco branco embutido no PNG, então ele fecha certo
   nos dois casos.
   ========================================================================= */

.coa-support{
  --coa-label:#0c2a6b;
  --coa-note:#5a6172;
  --coa-hair:rgba(7,27,77,.16);

  padding:clamp(40px,6vw,68px) 18px;
  text-align:center;
}

/* Páginas de fundo escuro: a faixa inteira vira a superfície clara. */
.coa-support--band{ background:#fff; }

.coa-support__inner{ max-width:760px; margin:0 auto; }

.coa-support__label{
  display:block;
  margin:0 0 20px;
  font-family:"Oswald","Inter",system-ui,-apple-system,sans-serif;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--coa-label);
}

.coa-support__lockup{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  gap:clamp(20px,5vw,44px);
}

.coa-support__logo{ display:block; width:auto; }
.coa-support__logo--edd{  height:clamp(40px,7.8vw,62px); }
.coa-support__logo--seal{ height:clamp(56px,11vw,90px); }

.coa-support__rule{
  flex:none;
  width:1px;
  min-height:46px;
  align-self:stretch;
  background:var(--coa-hair);
}

.coa-support__note{
  max-width:56ch;
  margin:20px auto 0;
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:.86rem;
  line-height:1.6;
  color:var(--coa-note);
}

/* No celular os dois logos empilham — e aí sobra largura pra eles crescerem,
   senão viram dois selinhos tímidos no meio da tela. */
@media (max-width:520px){
  .coa-support__lockup{ flex-direction:column; gap:18px; }
  .coa-support__rule{ width:64px; height:1px; min-height:0; align-self:center; }
  .coa-support__logo--edd{  height:52px; }
  .coa-support__logo--seal{ height:84px; }
}