/* Vitrine — camada de responsividade dos Templates Premium.
 *
 * POR QUE ESTE ARQUIVO EXISTE: cada template premium é uma peça de design
 * cinematográfica com CSS próprio, escrito para telas grandes. Reescrever os 10
 * à mão arriscaria estragar o visual que é o produto. Em vez disso, esta camada
 * entra DEPOIS do CSS de cada um e só age em telas pequenas, corrigindo os
 * problemas que a auditoria em navegador real encontrou:
 *
 *   • conteúdo mais largo que a tela (o pior: +169px de rolagem lateral)
 *   • blocos posicionados/absolutos escapando para fora da área visível
 *   • tipografia gigante fixa que não encolhe
 *   • grids de várias colunas espremidos
 *
 * REGRA DE OURO: nada aqui vale acima de 900px — o desktop continua idêntico.
 */

/* ------------------------------------------------------------------
   1) Nenhuma landing page pode rolar de lado. `clip` (e não `hidden`)
   preserva o position: sticky das cenas cinematográficas.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  /* Mídia nunca estoura a coluna. */
  img,
  video,
  canvas,
  iframe,
  image-slot {
    max-width: 100%;
    height: auto;
  }

  /* Faixas/carrosséis horizontais (o div.sg-track que vazava 169px):
     em vez de empurrar a página, rolam dentro de si mesmos. */
  [class*='track'],
  [class*='carousel'],
  [class*='marquee'],
  [class*='slider'] {
    max-width: 100%;
  }

  /* Tabelas e blocos largos rolam no próprio contêiner. */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  /* Item de grade encolhe abaixo do conteúdo. Sem isto a coluna já empilhada
     (1fr) continuava do tamanho da linha mais comprida dela: no curso, a lista de
     módulos passava 31px da borda direita em 375px e cortava os títulos. */
  [style*='grid-template-columns'] > *,
  [class*='grid'] > * {
    min-width: 0;
  }
}

/* ------------------------------------------------------------------
   2) Celular: tipografia que cabe e colunas que empilham.
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  /* Títulos gigantes viram grandes — sem sumir com a hierarquia. */
  h1 { font-size: clamp(28px, 8.5vw, 44px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(23px, 6.8vw, 34px) !important; line-height: 1.18 !important; }
  h3 { font-size: clamp(19px, 5.4vw, 26px) !important; line-height: 1.25 !important; }

  /* Piso de leitura: texto de corpo nunca abaixo de 13px no celular.
     Escopado em parágrafos e itens de lista para não mexer em selos,
     eyebrows e legendas, onde o tamanho miúdo é intencional. */
  p,
  li {
    font-size: max(13px, 1em) !important;
    line-height: 1.6 !important;
  }

  /* Selos, eyebrows e legendas ficam miúdos DE PROPÓSITO — mas no celular
     alguns caem para 9px, e aí não é mais estilo, é ilegível. Piso de 11px
     apenas para eles, sem tocar na hierarquia (o `max` preserva quem já é
     maior; `span`/`small` dentro de título ficam de fora). */
  span:not(h1 span):not(h2 span):not(h3 span):not(h4 span),
  small,
  figcaption,
  label {
    font-size: max(11px, 1em) !important;
  }

  /* Palavra/URL comprida não rasga o bloco. */
  h1, h2, h3, h4, p, li, a, span {
    overflow-wrap: break-word;
  }

  /* Selo e chip "sem quebra" (ex.: "Entrega: seu primeiro anúncio reescrito"
     dentro do módulo aberto) passavam da borda da tela. No celular eles quebram
     a linha. Botão e link de ação ficam de fora: CTA em duas linhas é pior. */
  div[style*='nowrap'],
  span[style*='nowrap'],
  div[style*='nowrap'] span {
    white-space: normal !important;
  }

  /* Qualquer grade de várias colunas vira uma só. Os templates declaram as
     colunas no estilo do elemento; esta regra vence por especificidade de
     media query + !important, e só no celular. */
  [style*='grid-template-columns'],
  [class*='grid'] {
    grid-template-columns: 1fr !important;
  }

  /* Botões/links de ação viram alvo de dedo. */
  a[class*='btn'],
  button,
  [role='button'] {
    min-height: 44px;
  }

  /* Blocos decorativos posicionados que saíam da tela: presos ao pai. */
  [style*='position:absolute'],
  [style*='position: absolute'] {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Ajustes de uma família específica de templates (marcada com data-tpl no
   <html>). Ficam escopados de propósito: o resto deste arquivo vale para
   TODOS os templates, e uma regra de menu não pode escapar para os outros.
   --------------------------------------------------------------------------- */

/* Vortexi: a barra de topo tem altura fixa e cinco links + relógio + botão.
   Em 390px o flex espremia os links em colunas de uma letra que vazavam por
   cima da barra (era o que aparecia empilhado no topo). No celular fica a
   marca e a ação principal — as seções seguem a um scroll de distância. */
@media (max-width: 700px) {
  html[data-tpl='vortexi'] nav > div:first-of-type,
  html[data-tpl='vortexi'] nav span[class*='clock'],
  html[data-tpl='vortexi'] nav time {
    display: none !important;
  }
  html[data-tpl='vortexi'] nav {
    gap: 10px !important;
    justify-content: space-between !important;
  }
  html[data-tpl='vortexi'] nav > * {
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }
  /* O relógio é enfeite de cenário; no celular ele só rouba a largura do
     botão, que então quebrava em duas linhas e passava da altura da barra. */
  html[data-tpl='vortexi'] nav > div:last-of-type > span:first-child {
    display: none !important;
  }
  html[data-tpl='vortexi'] nav > div:last-of-type button {
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 0 12px !important;
    height: 34px !important;
  }
}

/* Signature (curso, advogados, clínica, saas, solar): a barra de topo é uma
   linha flex sem quebra e SEM tratamento de celular — a única media query dos
   cinco arquivos (960px) apenas esconde os links do meio. Nada mais cede: a
   barra mantém `padding:14px 28px` e `gap:26px` em qualquer tela, a marca é
   `nowrap` e o botão é `flex:none`. A 375px sobram 319px para 359px de
   conteúdo, e o botão de conversão vazava até 60px para fora da tela.

   Ancorado em `.sg-nav-links` — a única classe presente nos cinco — para não
   tocar no markup: os templates são servidos exatamente como o designer
   entregou. Dentro do bloco da marca a ordem varia (advogados não tem símbolo),
   mas o SELO é sempre o último span e o NOME é sempre o penúltimo. */
@media (max-width: 600px) {
  html[data-tpl='signature'] div:has(> .sg-nav-links) {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 12px !important;
  }
  html[data-tpl='signature'] div:has(> .sg-nav-links) > div:first-child {
    min-width: 0 !important;
  }
  /* O selo ("SIGNATURE") é enfeite de família de template: não diz nada ao
     visitante e custa ~85px, quase o tamanho do botão. No celular ele sai. */
  html[data-tpl='signature'] div:has(> .sg-nav-links) > div:first-child > span:last-child {
    display: none !important;
  }
  /* Se ainda faltar espaço, quem cede é o nome da marca, com reticências — o
     botão chega inteiro, porque é ele que converte. */
  html[data-tpl='signature'] div:has(> .sg-nav-links) > div:first-child > span:nth-last-child(2) {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Só no celular de verdade (não no tablet): o botão perde um pouco de corpo
   para caber ao lado de marcas longas sem cortar o nome. "Almeida & Rocha" +
   "Consulta confidencial" é o par mais apertado dos cinco. */
@media (max-width: 600px) {
  html[data-tpl='signature'] div:has(> .sg-nav-links) > a:last-child {
    font-size: 12.5px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
}

/* ---------------------------------------------------------------------------
   3) TABLET: nem celular, nem desktop.
   Os premium declaram um breakpoint único em 960px, então um iPad de 768px já
   recebia o layout de telefone inteiro: tipografia de celular e cartões
   empilhados numa tela com 768px de largura. Esta faixa devolve ao tablet o que
   cabe nele. Nada aqui vale em telas de celular (≤600px) nem acima de 900px.

   Por que `html` na frente de cada seletor: as regras de 960px dentro dos
   templates usam `!important`, e o <style> deles é movido para o <head> em
   runtime pelo motor — ou seja, chega DEPOIS deste arquivo. Com !important dos
   dois lados quem decide é a especificidade, e `html .cr-mods` (0,1,1) vence
   `.cr-mods` (0,1,0).
   --------------------------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 900px) {
  /* Tipografia intermediária. Vortexi fica de fora: ele não tem breakpoint
     nenhum porque é 100% fluido em clamp() — já escala certo sozinho, e
     rebaixá-lo aqui destruiria o efeito de cartaz que é o template. */
  html:not([data-tpl='vortexi']) h1 {
    font-size: clamp(40px, 6.6vw, 58px) !important;
    line-height: 1.1 !important;
  }
  html:not([data-tpl='vortexi']) h2 {
    font-size: clamp(30px, 4.6vw, 40px) !important;
    line-height: 1.16 !important;
  }
  html:not([data-tpl='vortexi']) h3 {
    font-size: clamp(22px, 3.2vw, 28px) !important;
    line-height: 1.24 !important;
  }

  /* Grades de cartão: com ~350px por coluna o cartão respira, e o tablet deixa
     de ser uma coluna única e comprida. Grade de 3 ou 4 no desktop vira 2. */
  html .av-areas,
  html .av-proc,
  html .av-socios,
  html .lm-esp,
  html .lm-time,
  html .lm-equipe,
  html .lm-rev,
  html .cr-mods,
  html .cr-autor,
  html .sv-cases,
  html .sv-quotes,
  html .sv-vs,
  html .sx-tabs-body,
  html .sg-grid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}