/* ===========================================================
   Arena Hall — ajustes responsivos (mobile)
   O site usa estilos inline; este arquivo sobrepõe via
   seletores de atributo/estrutura + !important. Só age até 820px.
   =========================================================== */

/* Menu hambúrguer: escondido no desktop */
.mnav { display: none; }

@media (max-width: 820px) {
  html, body { overflow-x: hidden; }

  /* 0) Títulos grandes não podem estourar a tela (ex.: "PROGRAMAÇÃO") */
  h1 { font-size: clamp(30px, 8.5vw, 44px) !important; }
  h1, h2, h3 { overflow-wrap: anywhere; max-width: 100%; }

  /* 1) Qualquer grid multi-coluna vira coluna única */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* 2) Header: some o nav; ficam logo + CTA compacto + hambúrguer */
  header > div { padding: 0 14px !important; gap: 10px !important; }
  header nav { display: none !important; }
  header > div > a[href*="wa.me"] { margin-left: auto; font-size: 11.5px !important; padding: 11px 15px !important; letter-spacing: 0.03em !important; white-space: nowrap; }

  .mnav { display: block; position: relative; }
  .mnav summary { list-style: none; display: flex; flex-direction: column; gap: 5px; padding: 12px 8px; cursor: pointer; }
  .mnav summary::-webkit-details-marker { display: none; }
  .mnav summary span { display: block; width: 26px; height: 2.5px; border-radius: 2px; background: #F4F4F0; }
  .mnav summary span:nth-child(3) { width: 18px; }
  .mnav .mnav-panel { position: absolute; right: -8px; top: calc(100% + 16px); z-index: 120; min-width: 250px; background: #101012; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 8px 20px; display: flex; flex-direction: column; box-shadow: 0 22px 48px rgba(0,0,0,0.55); }
  .mnav .mnav-panel a { color: #F4F4F0; text-decoration: none; font-size: 15px; font-weight: 600; padding: 14px 2px; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .mnav .mnav-panel a:last-child { border-bottom: 0; color: #30A64E; font-weight: 800; }

  /* 3) Hero (rotativo) da home: arte quase full-width, sem vão gigante */
  #inicio { height: 600px !important; min-height: 0 !important; }
  #inicio > div > a { padding: 20px 14px 200px !important; }
  #inicio > div > div a { font-size: 15px !important; padding: 16px 30px !important; white-space: nowrap; }
  #inicio > button { width: 44px !important; height: 44px !important; }
  #inicio > button:first-of-type { left: 8px !important; }
  #inicio > button:last-of-type { right: 8px !important; }

  /* 4) Campos com largura mínima fixa */
  input[style*="min-width"] { min-width: 0 !important; width: 100%; }

  /* 5) Respiro lateral menor */
  [style*="padding:0 32px"] { padding-left: 20px !important; padding-right: 20px !important; }
}