/* Ajustes de responsividade mobile.
   Convivem com os estilos inline dos templates: usamos classes como
   "gancho" e !important quando é preciso vencer um style="" inline
   (mesmo padrão já usado no menu mobile em _layout.html). */

/* Padding lateral das seções (hoje fixo em 48px) some parte em telas
   estreitas — em ~375px de largura, 96px de padding é ~25% da tela. */
@media (max-width: 640px) {
  .wrap, .band {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Grids largos (3-4 colunas de cards) ganham um estágio intermediário
   de 2 colunas em telas de tablet antes de colapsar para 1. Esse bloco
   precisa vir ANTES do de 600px abaixo: como os dois usam !important
   com a mesma especificidade, em telas de celular (onde as duas
   condições batem ao mesmo tempo) vence a regra declarada por último —
   e quem deve vencer ali é sempre o colapso para 1 coluna. */
@media (max-width: 860px) {
  .grid-wide {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Grids de N colunas (2, 3, 4 ou proporções assimétricas tipo 1.4fr 1fr
   / 220px 1fr) colapsam para 1 coluna em telas de celular. */
@media (max-width: 600px) {
  .grid-collapse {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* Seções split texto+imagem/logo (hero do carrossel, "próximo simpósio",
   heros de entrevista/evento/notícia): empilha e corrige a proporção do
   lado da imagem, que hoje depende de aspect-ratio/min-height pensado
   para 2 colunas. .hero-text/.hero-media marcam explicitamente qual lado
   é qual (a ordem no HTML varia de template pra template). */
@media (max-width: 760px) {
  .hero-split {
    aspect-ratio: auto !important;
  }
  .hero-split .hero-text {
    padding: 24px 20px !important;
  }
  .hero-split .hero-media {
    aspect-ratio: 16 / 9;
    min-height: 0 !important;
  }
}

/* Títulos de página: 52-56px fixo estoura em telas pequenas. */
.h1-hero {
  font-size: clamp(30px, 8vw, 56px);
}