/* Estúdio 9J — responsive overrides
   Componentes React setam estilos inline; aqui usamos seletores específicos
   com !important pra ajustar tablet/mobile sem reescrever o JSX. */

/* ─── Tablet (até 1100px) ──────────────────────────────────────── */
@media (max-width: 1100px) {
  /* Grids marcados explicitamente */
  main section [data-grid-collapse] { grid-template-columns: 1fr !important; }

  /* Grids 2-col / multi-col genéricos */
  main section [style*="grid-template-columns: 1.4fr"],
  main section [style*="grid-template-columns: 1.45fr"],
  main section [style*="grid-template-columns: 1.6fr"],
  main section [style*="grid-template-columns: 1fr 1"],
  main section [style*="grid-template-columns: repeat(3"],
  main section [style*="grid-template-columns: repeat(4"],
  main section [style*="grid-template-columns: 280px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Cards com min-height fixo grande */
  main section article[style*="min-height: 460"],
  main section article[style*="min-height: 320"],
  main section article[style*="min-height: 260"] { min-height: auto !important; }

  /* Sticky perde sentido quando colunas viraram 1 */
  main section [style*="position: sticky"] { position: static !important; }

  /* Section padding mais apertado */
  main > section { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* Header gutter menor */
  header > div { padding-left: 24px !important; padding-right: 24px !important; }

  /* Hero: ratio do vídeo melhor em coluna única */
  main > section#top [style*="aspect-ratio: 4/3"] { aspect-ratio: 16/9 !important; }
}

/* ─── Mobile (até 720px) ──────────────────────────────────────── */
@media (max-width: 720px) {
  main > section { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Container gutters */
  main > section > div:first-child { padding-left: 20px !important; padding-right: 20px !important; }

  /* Headlines fluidas */
  main section h1,
  main section h2 {
    font-size: clamp(32px, 9vw, 56px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.03em !important;
  }
  main section h3 { font-size: clamp(20px, 5.5vw, 30px) !important; }

  /* Cards: padding e min-height */
  main section article { padding: 24px !important; min-height: auto !important; }

  /* Section paddings inline */
  main > section[style*="padding: 110px"],
  main > section[style*="padding: 120px"],
  main > section[style*="padding: 96px"] { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Margins/gaps gigantes inline */
  main section [style*="margin-bottom: 56px"],
  main section [style*="margin-bottom: 64px"],
  main section [style*="margin-bottom: 72px"] { margin-bottom: 28px !important; }
  main section [style*="gap: 56px"],
  main section [style*="gap: 64px"],
  main section [style*="gap: 72px"],
  main section [style*="gap: 80px"] { gap: 28px !important; }
  main section [style*="margin-top: 56px"],
  main section [style*="margin-top: 64px"],
  main section [style*="margin-top: 72px"] { margin-top: 28px !important; }

  /* CTAs grandes encolhem */
  main section button[style*="padding: 20px 32px"],
  main section a[style*="padding: 20px 32px"] { padding: 14px 22px !important; font-size: 12px !important; }
  main section button[style*="padding: 18px 28px"],
  main section a[style*="padding: 18px 28px"] { padding: 14px 20px !important; font-size: 12px !important; }

  /* Header compacto */
  header > div {
    padding-left: 16px !important; padding-right: 16px !important;
    padding-top: 12px !important; padding-bottom: 12px !important;
  }
  header nav { gap: 10px !important; }
  header nav button[style*="padding: 11px 18px"] { padding: 8px 12px !important; font-size: 10px !important; }

  /* Display sizes (Hero principal) */
  main section [style*="font-size: 88"],
  main section [style*="font-size: 72"],
  main section [style*="font-size: 64"] { font-size: clamp(32px, 9vw, 56px) !important; }
  main section [style*="font-size: 56"],
  main section [style*="font-size: 48"] { font-size: clamp(28px, 7vw, 44px) !important; }
  main section [style*="font-size: 44"],
  main section [style*="font-size: 40"] { font-size: clamp(24px, 6vw, 36px) !important; }
  main section [style*="font-size: 32"] { font-size: clamp(20px, 5vw, 28px) !important; }
  main section [style*="font-size: 24"] { font-size: clamp(18px, 4.5vw, 22px) !important; }

  /* Footer */
  footer [style*="grid-template-columns: 1.4fr"] { grid-template-columns: 1fr !important; gap: 28px !important; padding-bottom: 36px !important; }
  footer [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; gap: 24px !important; }
  footer > div { padding-top: 56px !important; padding-bottom: 36px !important; }
  footer > div > div:first-child { padding-left: 20px !important; padding-right: 20px !important; }

  /* FAQ grid (280px 1fr → coluna única) */
  main section#duvidas [style*="grid-template-columns: 280px"] { grid-template-columns: 1fr !important; }

  /* Localização — mapa: encolher altura mínima */
  main section#localizacao [style*="min-height: 520"] { min-height: 320px !important; }

  /* Personalização: dots progress não fazem mais sentido enormes */
  main section#cenario [style*="font-size: 56"] { font-size: 32px !important; }

  /* Tags & kickers — manter legíveis mas não tomar largura */
  main section [style*="letter-spacing: 0.22em"] { letter-spacing: 0.15em !important; }
}

/* ─── Mobile pequeno (até 420px) ──────────────────────────────── */
@media (max-width: 420px) {
  main section h1,
  main section h2 { font-size: clamp(26px, 9vw, 36px) !important; }
  main > section > div:first-child { padding-left: 16px !important; padding-right: 16px !important; }
  header > div { padding-left: 14px !important; padding-right: 14px !important; }

  /* CTAs em coluna única - largura cheia */
  main section button,
  main section a[href][style*="display: inline-flex"] {
    /* já são inline-flex; ok manter */
  }
}