/* ============================================================
   CAMADA RESPONSIVA do redesign (injetada em todas as paginas).
   O export do Claude Design e desktop-first com styles inline.
   Inline perde para folha com !important, entao esta camada
   reorganiza o layout abaixo de 900px sem tocar nos arquivos.
   ============================================================ */

/* Decorativos largos (linha de 920px, marquee de logos de 2.121px)
   nao podem virar scroll horizontal da pagina inteira. */
html, body { overflow-x: clip; }

@media (max-width: 900px) {
  /* 1 · Toda grade multi-coluna empilha: cards deixam de dividir
     375px entre tres colunas com texto achatado, e blocos de motion
     ficam acima/abaixo do texto na ordem do documento. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* 2 · Fileiras HORIZONTAIS quebram linha. So elas: em container de coluna,
     flex-wrap:wrap muda o calculo do tamanho no eixo cruzado, o container
     passa a ser dimensionado pelo conteudo em vez de caber no pai, e o card
     estoura a propria borda. Foi exatamente o que cortou o primeiro card da
     secao depois da hero. */
  [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]),
  [style*="display: flex"]:not([style*="flex-direction:column"]):not([style*="flex-direction: column"]) {
    flex-wrap: wrap !important;
  }
  /* Excecoes: o marquee animado (quebrar mata a animacao) e a nav, que tem
     tratamento proprio. Mesma especificidade, entao a ordem decide. */
  [style*="max-content"], [style*="animation"] { flex-wrap: nowrap !important; }
  nav [style*="display:flex"], nav [style*="display: flex"] { flex-wrap: nowrap !important; }

  /* 3 · Midia nunca estoura a coluna. */
  img, svg, video, canvas { max-width: 100% !important; height: auto; }

  /* 4 · Filhos de grid/flex podem encolher (min-width:auto e o que
     empurra card para fora da pagina). */
  [style*="display:grid"] > *, [style*="display: grid"] > *,
  [style*="display:flex"] > *, [style*="display: flex"] > * { min-width: 0; }

  /* 5 · A animacao de entrada lateral vira vertical. O design revela cards
     com [data-reveal="right"], que comeca em translateX(46px): no desktop o
     card desliza de dentro da grade, no celular ele ja ocupa a largura toda
     e os 46px o jogam para fora da tela. Como html tem overflow-x clip, o
     resultado e um card cortado ate a animacao terminar.
     Especificidade em vez de !important de proposito: o framework encerra a
     animacao escrevendo transform inline, e inline vence isto, mas perderia
     para um !important e o card ficaria deslocado para sempre. */
  html body [data-reveal="right"] { transform: translateY(26px); }
  html body [data-reveal="left"]  { transform: translateY(26px); }

  /* 6 · Blocos de terminal rolam em vez de serem cortados. O design alinha as
     colunas do terminal com espacos que nao quebram, entao a linha nao cabe
     em 375px; o card tem overflow hidden e corta o texto no meio. Rolagem
     horizontal dentro do bloco preserva o alinhamento e a forma do card. */
  [style*="JetBrains Mono"] {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Barra fina e visivel: rolagem sem indicio nenhum e rolagem que ninguem
     descobre. Tres pixels bastam para dizer "arrasta". */
  [style*="JetBrains Mono"]::-webkit-scrollbar { height: 3px; }
  [style*="JetBrains Mono"]::-webkit-scrollbar-track { background: transparent; }
  [style*="JetBrains Mono"]::-webkit-scrollbar-thumb {
    background: rgba(122, 138, 255, .45);
    border-radius: 3px;
  }

  /* 7 · Respiro lateral nos containers largos. */
  [style*="max-width:1160px"], [style*="max-width: 1160px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}