/* ============================================================
   Correções de mobile — thiagomelomusic.com
   Criado 29/07/2026 · revisado 29/07/2026 (2ª passada)
   ------------------------------------------------------------
   O site nasceu do protótipo do Claude Design SEM nenhuma media
   query de layout: o responsivo dependia só de clamp() nos estilos
   inline + 4 ajustes por JS (_applyResponsive). No celular isso dava
   ~20px de respiro lateral (o mínimo do clamp) e deixava grids de
   2 colunas fixas sem colapsar.

   1ª passada mirava só os contêineres de max-width:84rem — mas o site
   tem 21 contêineres com OUTRAS larguras (52/50/46/44/60/64/62/42rem)
   que continuaram apertados. Esta versão mira o PADRÃO do contêiner
   (padding:0 clamp(...)), pegando todos.

   Age SOMENTE abaixo de 768px. Não altera o desktop.
   Reverter: apagar este arquivo e o <link> nas 8 páginas.
   ============================================================ */

@media (max-width: 768px) {

  /* 1. RESPIRO LATERAL — todo contêiner central do site usa o padrão
        `padding:0 clamp(1.25rem, 0.5rem+3vw, 3rem)`. Miramos o padrão,
        não a largura, para pegar os 62 contêineres de uma vez. */
  [style*="padding:0 clamp"] {
    padding-left: 26px !important;
    padding-right: 26px !important;
  }

  /* 2. GRIDS de 2 colunas fixas colapsam (os .tm-2col já colapsavam via JS) */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.1fr"],
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns:1.2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 3. GRIDS auto-fit: uma coluna, sem espremer */
  [style*="auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  /* 4. RESPIRO VERTICAL — NÃO mexer no padding das seções aqui.
        ⚠️ A versão anterior usava `max(56px, var(--tm-sec-pt, 0px))`; como essa
        variável nunca existiu, o cálculo virava `max(56px, 0px)` = 56px FIXO e
        ACHATAVA todas as seções no mobile (o original é 71–144px via
        --section-y). Era o oposto do pretendido. O clamp do design system já
        resolve o respiro vertical sozinho — aqui só garantimos os heros, que
        nascem sem padding-bottom nenhum. */
  section:first-of-type {
    padding-bottom: max(3rem, 8vw);
  }

  /* 5. IMAGENS nunca estouram a tela */
  img, video, iframe {
    max-width: 100%;
    height: auto;
  }

  /* 6. Blocos com largura mínima fixa (cards, players) não forçam
        rolagem horizontal */
  [style*="minmax("] {
    grid-template-columns: 1fr !important;
  }

  /* 7. Títulos longos quebram em vez de vazar */
  h1, h2, h3, h4 {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* 8. Nada de scroll horizontal na página */
  html, body {
    overflow-x: hidden;
  }
}

/* Telas bem estreitas (iPhone SE e similares) */
@media (max-width: 380px) {
  [style*="padding:0 clamp"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}