/* =========================
   HERO (banner + conteúdo)
========================= */

.hero{
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  background: var(--surface);
  box-shadow: var(--shadow);

  /* ⚠️ NÃO use overflow:hidden aqui, senão pode cortar elementos internos */
  overflow: visible;
}

/* grid do conteúdo */
.hero .inner{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  padding: 22px;
}

@media (max-width: 860px){
  .hero .inner{
    grid-template-columns: 1fr;
    padding: 16px;
  }
}

/* =========================
   BANNER (imagem do evento)
========================= */

/* Use esse wrapper em volta do <img>:
   <div class="heroMedia">
     <img class="heroBanner" ...>
   </div>
*/
.heroMedia{
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;         /* ✅ aqui pode: corta só no arredondado */
  background: #fff;
}

/* imagem SEM cortar (contain) */
.heroBanner{
  width: 100%;
  height: 420px;
  display: block;

  object-fit: contain;      /* ✅ mostra inteira */
  background: #fff;         /* fundo onde sobrar espaço */
}

/* alturas melhores no mobile */
@media (max-width: 860px){
  .heroBanner{ height: 320px; }
}
@media (max-width: 520px){
  .heroBanner{ height: 240px; }
}

/* =========================
   SUMMARY (caixa da direita)
========================= */

.summary{
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(109,40,217,.06);
  padding: 12px;
  color: var(--text);
}

.summary b{ color: var(--brand); }

/* opcional: deixar a summary “respiro” melhor */
@media (max-width: 860px){
  .summary{ padding: 14px; }
}