/* Ajustes responsivos do site Diversa.
   O template exportado usa só estilos inline, por isso os !important.
   Injetado em dist/ por tools/unbundle.py. */

/* Base: nada de scroll horizontal, imagens contidas.
   `clip` (e não `hidden`) para não quebrar o position:sticky da navbar. */
html, body { overflow-x: clip; }
img { max-width: 100%; }
/* âncoras (#a-diversa etc.) não ficam escondidas atrás da navbar fixa de 72px */
section[id] { scroll-margin-top: 72px; }

/* ───────── Navbar: hambúrguer (só < 900px) ───────── */
.dv-burger {
  display: none;
  position: fixed; top: 14px; right: 16px; z-index: 101;
  width: 44px; height: 44px; padding: 0;
  background: var(--color-lime); border: 2px solid var(--color-ink); border-radius: 12px;
  cursor: pointer; box-shadow: 3px 3px 0 var(--color-ink);
}
.dv-burger span {
  display: block; width: 20px; height: 3px; margin: 3px auto;
  background: var(--color-ink); border-radius: 2px;
  transition: transform 160ms ease-out, opacity 160ms ease-out;
}
.dv-nav-open ~ .dv-burger span:nth-child(1),
body.dv-nav-open .dv-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.dv-nav-open .dv-burger span:nth-child(2) { opacity: 0; }
body.dv-nav-open .dv-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 899px) {
  .dv-burger { display: block; }
  nav[role="navigation"] { padding: 0 20px !important; }
  nav[role="navigation"] > a img { height: 26px !important; }

  /* container dos links + CTA vira dropdown */
  nav[role="navigation"] > div {
    display: none !important;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch !important; gap: 0 !important;
    background: var(--color-white);
    border-bottom: 2px solid var(--color-ink);
    box-shadow: 0 12px 24px rgba(17,17,17,0.12);
  }
  body.dv-nav-open nav[role="navigation"] > div { display: flex !important; }
  nav[role="navigation"] > div > a {
    padding: 18px 24px; font-size: 15px !important;
    border-top: 1px solid rgba(17,17,17,0.08);
  }
  nav[role="navigation"] > div > a:last-child {
    margin: 12px 20px 20px; text-align: center; padding: 16px 24px;
    border-top: none; border-radius: 999px !important;
  }
}

/* ───────── Seções ───────── */
@media (max-width: 767px) {
  /* padding lateral menor e respiro vertical mais curto */
  section, footer { padding-left: 20px !important; padding-right: 20px !important; }
  section:not(:first-of-type) { padding-top: 56px !important; padding-bottom: 56px !important; }
  footer { padding-top: 44px !important; }

  /* Hero */
  section:first-of-type { min-height: 88svh !important; }
  section:first-of-type > div[style*="z-index"] { padding: 64px 0 56px !important; }
  section:first-of-type h1 { font-size: clamp(36px, 11vw, 52px) !important; }
  section:first-of-type p { font-size: 16px !important; margin-bottom: 28px !important; }

  /* Todos os grids de colunas viram uma coluna
     (o runtime re-serializa o style, então o seletor é solto de propósito) */
  section div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* A Diversa: número em cima, alinhado à esquerda */
  #a-diversa > div { gap: 36px !important; }
  #a-diversa > div > div:first-child { text-align: left !important; }
  #a-diversa > div > div:first-child > div:first-child { font-size: 88px !important; }

  /* Como atuamos: células empilhadas, divisória embaixo */
  #como-atuamos div[style*="grid-template-columns"] > div {
    border-right: none !important;
    border-bottom: 2px solid rgba(255,255,255,0.08);
  }
  #como-atuamos div[style*="grid-template-columns"] > div:last-child { border-bottom: none; }
  #como-atuamos div[style*="grid-template-columns"] { gap: 0 !important; }

  /* Cards: sombra menor pra não vazar na borda */
  section div[style*="repeat(3"] > div { padding: 26px 22px !important; }

  /* Títulos de seção */
  section h2 { font-size: clamp(24px, 7vw, 32px) !important; }
  #contato h2 { font-size: clamp(34px, 10vw, 48px) !important; }
  #contato { padding-top: 64px !important; }
  #contato form { padding: 22px 18px !important; box-shadow: 4px 4px 0 var(--color-ink) !important; }
  #form-submit { width: 100%; }

  /* Credibilidade: foto acima do texto, sombra menor */
  section > div[style*="1fr 1fr"] > div:first-child { box-shadow: 4px 4px 0 var(--color-ink) !important; }

  /* Footer */
  footer > div > div:first-child { flex-direction: column; gap: 32px !important; }
  footer > div > div:first-child > div:last-child { gap: 32px !important; }
}