/* ══════════════════════════════════════════════════════════════════
   EASTech — site público: camada de telas estreitas

   Carregue SEMPRE depois do CSS de cada página. O site foi desenhado
   para desktop e tem quebras em 1200/1024/768/480px; abaixo disso ele
   estourava para o lado — títulos de 3rem, grades de largura fixa,
   mockups de 500px e o menu de 320px em tela de 240px.

   O alvo aqui é a faixa abaixo de 400px, com atenção especial a menos
   de 256px: largura de janela encaixada, relógio, ou celular com zoom
   de acessibilidade alto. Nada pode escapar pela lateral — a página
   inteira rola só na vertical.
   ══════════════════════════════════════════════════════════════════ */

/* Nada, em nenhuma largura, deve criar rolagem horizontal na página. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Mídia e incorporações nunca passam do container que as contém. */
img, svg, video, iframe, canvas { max-width: 100%; height: auto; }

/* Palavra longa (URL, e-mail, nome de tecnologia) quebra em vez de
   empurrar o bloco inteiro para fora. */
p, li, h1, h2, h3, h4, a, span, strong, td, dd, .badge-tech, .stack-tags { overflow-wrap: anywhere; }

/* Tabela e bloco de código rolam dentro do próprio quadro. */
table { display: block; max-width: 100%; overflow-x: auto; }
pre { max-width: 100%; overflow-x: auto; }

@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .btn-group { flex-wrap: wrap; gap: 10px; }
  .btn-group > a, .btn-group > button { flex: 1 1 100%; justify-content: center; text-align: center; }
}

@media (max-width: 400px) {
  .container { padding: 0 14px; }

  /* Os títulos do hero eram fixos em rem: em 380px a primeira palavra já
     saía da tela. clamp deixa a fonte acompanhar a largura. */
  h1 { font-size: clamp(1.5rem, 8.5vw, 2.2rem) !important; line-height: 1.18 !important; }
  h2 { font-size: clamp(1.25rem, 7vw, 1.8rem) !important; line-height: 1.22 !important; }
  h3 { font-size: clamp(1.05rem, 5.6vw, 1.35rem) !important; }
  .section-title p, .hero p, p { font-size: .95rem !important; }

  /* Toda grade vira coluna única: minmax com piso fixo é o que estoura
     nesta faixa. */
  .bento-grid, .process-grid, .trust-logos, .portfolio-display,
  .showcase-item, .expertise { grid-template-columns: 1fr !important; }

  .bento-card, .process-card, .slide-content { padding: 20px !important; }
  .card-large { grid-column: auto !important; grid-row: auto !important; }

  /* Mockup e visual do portfólio tinham largura fixa (500px, 320px). */
  .browser-mockup, .showcase-visual, .visual-glow, .portfolio-display > * {
    max-width: 100% !important; width: 100% !important;
  }
  .browser-screen { height: auto !important; min-height: 160px; }

  /* O menu lateral do celular era 320px: em 260px ele passava da tela. */
  .mobile-menu, nav.mobile, .nav-mobile { width: min(320px, 88vw) !important; max-width: 88vw !important; }

  /* Carrossel: setas e pontos ocupavam espaço que a imagem precisava. */
  .slider-container { min-height: 0 !important; }
  .slider-arrows { gap: 8px !important; }

  .trust-logo-box img { max-width: 96px !important; }
}

@media (max-width: 300px) {
  .container { padding: 0 10px; }

  header { height: 64px !important; }
  h1 { font-size: clamp(1.25rem, 9vw, 1.6rem) !important; }
  h2 { font-size: clamp(1.05rem, 7.5vw, 1.35rem) !important; }

  .bento-card, .process-card, .slide-content, .browser-mockup { padding: 14px !important; }
  .bento-icon, .icon-wrapper { width: 42px !important; height: 42px !important; font-size: 1.05rem !important; }

  /* Selo com letra de 0.75rem em 260px virava duas linhas de três letras. */
  .badge-tech, .badge-tech-mini { font-size: .62rem !important; padding: 3px 7px !important; }
  .step-number { font-size: 1.6rem !important; }

  /* Botão de rolagem lateral do carrossel sai: com o dedo o arraste
     continua funcionando, e em 260px as setas cobriam a imagem. */
  .slider-arrows { display: none !important; }

  /* Rodapé: colunas empilhadas e alinhadas à esquerda, sem max-width
     percentual que deixava sobra inútil de um lado. */
  footer .container > * { max-width: 100% !important; text-align: left !important; }
}

/* Quem prefere menos movimento não deve receber carrossel automático nem
   transição longa — vale para qualquer largura. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}