/* =====================================================================
   mobile.css — correcções de ecrã estreito

   ══ O PROBLEMA QUE ISTO RESOLVE (2026-08) ══

   O projecto tem 46 grelhas declaradas em atributos style= inline:

       <div style="display:grid;grid-template-columns:repeat(3,1fr)">

   Uma media query mira classes; não alcança um atributo style. Por isso
   estas grelhas ficavam com 3 ou 4 colunas em telemóvel — cada coluna
   com cerca de 100px — e o texto ficava ilegível. Nenhuma quantidade de
   @media nos outros ficheiros as podia corrigir.

   A saída é mirar o próprio atributo com selectores de atributo, o que
   funciona porque os valores usados no projecto são poucos e repetidos:
   "1fr 1fr" (26×), "repeat(3,1fr)" (12×), "repeat(4,1fr)" (4×)…

   O !important é necessário: um atributo style tem sempre mais peso do
   que uma folha de estilo. É a única forma de o sobrepor sem editar as
   46 ocorrências à mão — o que seria mais frágil, não menos.

   ══ BREAKPOINTS ══

   O projecto tem nove: 500, 600, 640, 760, 768, 782, 860, 900, 1000px.
   Isto não os unifica — seria uma refactorização com risco. Usa 900px
   (o mais frequente) e 600px, e limita-se a corrigir o que parte.

   PARA REVERTER: apagar a linha deste ficheiro no base.php.
   ===================================================================== */

@media (max-width: 900px) {

  /* ── Grelhas inline: tudo para uma coluna ────────────────────────
     Cobre os valores que existem no projecto, um a um. Um selector
     genérico [style*="grid-template-columns"] apanharia também as
     grelhas auto-fit, que já se adaptam sozinhas e não devem ser
     forçadas a uma coluna. */
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:220px 1fr"],
  [style*="grid-template-columns: 220px 1fr"],
  [style*="grid-template-columns:240px 1fr"],
  [style*="grid-template-columns: 240px 1fr"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns:1fr 280px"],
  [style*="grid-template-columns: 1fr 280px"],
  [style*="grid-template-columns:1fr 420px"],
  [style*="grid-template-columns: 1fr 420px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── minmax com mínimo maior do que o ecrã ───────────────────────
     minmax(320px, 1fr) num ecrã de 360px com 40px de padding não cabe
     e transborda para o lado. */
  [style*="minmax(320px"],
  [style*="minmax(340px"],
  [style*="minmax(300px"],
  [style*="minmax(280px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Larguras fixas ──────────────────────────────────────────────
     Modais e painéis do ATS com width em px fixos. */
  .modal-box,
  [style*="width:460px"], [style*="width: 460px"],
  [style*="width:500px"], [style*="width: 500px"],
  [style*="width:400px"], [style*="width: 400px"],
  [style*="width:680px"], [style*="width: 680px"] {
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* ── Tabelas do ATS ──────────────────────────────────────────────
     21 tabelas com 5 a 8 colunas. Em vez de as reconstruir como
     cartões — o que mudaria a leitura em computador — deixa-se rolar
     na horizontal, com o toque nativo. */
  /* Rola na horizontal em vez de espremer. O wrapper é que rola — a
     tabela mantém-se `table`, senão perde o table-layout:fixed e as
     larguras do <colgroup> deixam de valer. */
  .ats-table-wrap,
  .ats-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ats-table {
    display: table;
    min-width: 860px;   /* abaixo disto as colunas ficam ilegíveis */
  }

  /* ── Nada transborda ─────────────────────────────────────────────
     Uma imagem ou um bloco largo empurra a página e cria a barra de
     rolamento horizontal que faz o site "abanar" ao deslizar. */
  html, body { overflow-x: hidden; }
  img, video, iframe, table, pre { max-width: 100%; }
}

@media (max-width: 600px) {

  /* Também as de duas colunas. Acima dos 600 ainda cabem. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="minmax(268px"],
  [style*="minmax(210px"],
  [style*="minmax(240px"] {
    grid-template-columns: 1fr !important;
  }

  /* Padding lateral: 24px de cada lado num ecrã de 360 deixa 312px
     úteis. Em telemóvel pequeno, 16px chegam. */
  .tj-container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Botões lado a lado passam a empilhados e a toda a largura —
     mais fáceis de acertar com o polegar. */
  .rs-hero-new__ctas { flex-direction: column; align-items: stretch; }
  .rs-hero-new__ctas .rs-hero-cta { width: 100%; justify-content: center; }
}