/* =========================================================
   Tríade Humana — Correções globais de responsividade mobile
   Carregado em index.html e em todas as páginas estáticas.
   Alvo: iPhone/Android 375–430px sem necessidade de zoom.
   ========================================================= */

/* Impede o iOS Safari de "auto-inflar" ou encolher texto e
   garante que 1rem = 16px sirva de base confiável. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Nunca deixa mídia estourar a largura da viewport. */
img, video, iframe, canvas, svg, picture, embed, object {
  max-width: 100%;
  height: auto;
}

/* Tabelas e blocos de código com scroll horizontal em vez de
   quebrar layout. */
table { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; word-wrap: break-word; }

/* Quebra palavras longas (URLs, e-mails) que causam overflow. */
p, li, a, span, h1, h2, h3, h4, h5, h6, td, th, dd, dt, blockquote, figcaption {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===========================================================
   Breakpoint mobile: ≤ 640px
   Usamos !important pontualmente porque muitos componentes
   herdados usam font-size inline/específico abaixo de 14px.
   =========================================================== */
@media (max-width: 640px) {
  /* Nada pode passar da largura da tela. */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  /* Tamanho mínimo legível em corpo de texto. */
  body,
  p, li, dd, dt, td, th,
  label, input, select, textarea, button,
  small, span, a, div, figcaption, blockquote,
  em, strong, i, b, cite, mark, sub, sup {
    font-size: max(14px, 1em) !important;
    line-height: 1.55;
  }

  /* Hierarquia responsiva com clamp() — legível de 320px a 640px
     sem depender de zoom manual. */
  h1 { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(19px, 5vw, 24px) !important; line-height: 1.25 !important; }
  h3 { font-size: clamp(17px, 4.5vw, 20px) !important; line-height: 1.3 !important; }
  h4 { font-size: clamp(15px, 4vw, 18px) !important; line-height: 1.35 !important; }
  h5 { font-size: max(14px, 1rem) !important; }
  h6 { font-size: max(14px, 0.95rem) !important; }

  /* Inputs em iOS: 16px evita o auto-zoom ao focar. */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* (Hierarquia h1–h6 já definida acima com clamp responsivo.) */



  /* Colapsa grids CSS de N colunas em 1 coluna. */
  [style*="grid-template-columns"],
  .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6,
  .sm\:grid-cols-2, .sm\:grid-cols-3, .sm\:grid-cols-4,
  .md\:grid-cols-2, .md\:grid-cols-3, .md\:grid-cols-4,
  .methods-grid, .cards-grid, .cards, .grid-2, .grid-3, .grid-4,
  .features-grid, .stats-grid, .plans-grid, .team-grid, .metrics-grid,
  .services-grid, .pricing-grid, .footer-grid, .partners-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Flex-rows que se acumulam viram coluna. */
  .row, .flex-row, .hstack {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Containers: reduz padding lateral para aproveitar espaço. */
  .container, .wrapper, main, section, article, header, footer {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  /* Larguras fixas viram fluidas. */
  [style*="width:"] { max-width: 100% !important; }

  /* Botões maiores para "thumb-friendly" (mínimo 44px). */
  button, .btn, [role="button"], a.btn {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Reduz margens/paddings verticais exagerados em heróis. */
  .hero, .section, section {
    padding-top: clamp(32px, 8vw, 64px) !important;
    padding-bottom: clamp(32px, 8vw, 64px) !important;
  }

  /* Navbars horizontais viram wrap ou hambúrguer visível. */
  nav ul, .nav-links, .menu {
    flex-wrap: wrap;
  }
}

/* Ajustes específicos para telas ultra-estreitas (≤380px). */
@media (max-width: 380px) {
  body { font-size: 15px !important; }
  h1 { font-size: 1.5rem !important; }
}

/* ===========================================================
   Piso de fonte mínimo estendido até 768px (tablets pequenos).
   Escopo restrito: SOMENTE font-size — sem tocar em layout,
   grid, padding ou flex direction (esses continuam no ≤640px).
   Objetivo: eliminar offenders <14px em 641–768px sem afetar
   o design responsivo já validado.
   =========================================================== */
@media (min-width: 641px) and (max-width: 768px) {
  body,
  p, li, dd, dt, td, th,
  label, small, span, a, div, figcaption, blockquote,
  em, strong, i, b, cite, mark, sub, sup,
  button, .btn, [role="button"] {
    font-size: max(14px, 1em) !important;
    line-height: 1.55;
  }

  /* Inputs em 16px também nessa faixa evita zoom automático no iOS landscape. */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Garante hierarquia mínima legível para headings em tablets pequenos. */
  h1 { font-size: clamp(22px, 4vw, 32px) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(19px, 3.2vw, 26px) !important; line-height: 1.25 !important; }
  h3 { font-size: max(17px, 1.1rem) !important; line-height: 1.3 !important; }
  h4 { font-size: max(16px, 1rem) !important; }
  h5 { font-size: max(15px, 0.95rem) !important; }
  h6 { font-size: max(14px, 0.9rem) !important; }
}