/* Correcções de telemóvel comuns a todos os modelos.
 *
 * Os desenhos vieram compostos numa tela de 1280 e não trazem breakpoints —
 * a única media query de origem desliga o cursor personalizado no toque. A
 * maior parte aguenta o estreitamento sozinha, porque usa `clamp()` e
 * grelhas `auto-fit`. O que não aguenta está aqui, e está aqui em vez de
 * espalhado por dezasseis ficheiros para não voltar a perder-se numa
 * regeneração, como já aconteceu com o motor de animação.
 *
 * Usa-se `!important` de propósito: o que se corrige são estilos em linha,
 * que de outra forma ganhavam sempre.
 */

@media (max-width: 759px) {
  /* ===== carril horizontal de ecrã inteiro =====
     Na Linha Nove a página inteira era um carril: 812 px de altura fixa,
     scroll vertical nenhum e 1822 px de percurso na horizontal. No
     telemóvel isso lê-se como um site partido — desliza-se para cima e não
     acontece nada. Abaixo de tablet o carril desenrola-se numa coluna, que
     é como o conteúdo se lê num ecrã estreito. */
  :is(div, section, main):has(> [data-hscroll], > * > [data-hscroll]) {
    height: auto !important;
    min-height: 0 !important;
  }
  [data-hscroll] {
    position: static !important;
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    inset: auto !important;
    /* A coluna de navegação lateral é `position: fixed` e continua por cima
       do conteúdo depois de o carril passar a estático. O recuo que o
       `inset` lhe reservava tem de sobreviver como margem, senão o texto
       fica por baixo dela — foi o que aconteceu ao "Outono no 26", com as
       primeiras letras escondidas atrás da coluna. */
    margin: 0 0 0 clamp(56px, 6vw, 84px) !important;
  }
  [data-hscroll] > * {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 72vh;
    border-left: 0 !important;
    border-top: 1px solid rgba(16, 16, 18, 0.14);
    padding-top: clamp(40px, 7vh, 72px) !important;
    padding-bottom: clamp(40px, 7vh, 72px) !important;
  }
  [data-hscroll] > :first-child {
    border-top: 0;
  }

  /* ===== grelhas de faixas fixas =====
     Tabelas de índice e de preços com quatro a seis colunas fixas: a 375 px
     as colunas de texto ficam com trinta pixéis e partem palavra a palavra.
     Passam a duas faixas — rótulo e valor — que é a leitura que sobra num
     ecrã estreito. */
  [style*="grid-template-columns:56px"],
  [style*="grid-template-columns:84px"],
  [style*="grid-template-columns:76px"],
  [style*="grid-template-columns:70px"],
  [style*="grid-template-columns:100px"],
  [style*="grid-template-columns:48px"],
  [style*="grid-template-columns:54px"] {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
    row-gap: 6px;
  }

  /* Alvos de toque: o mínimo confortável é 44 px, e vários botões destes
     desenhos ficavam nos 24. Não se mexe no aspecto — só na área. */
  a,
  button,
  [role="button"],
  [data-acao],
  summary {
    min-height: 40px;
  }
  :is(a, button, [role="button"], [data-acao]):not(:has(img, picture, svg)) {
    display: inline-flex;
    align-items: center;
  }

  /* O crédito do rodapé está em absoluto no canto inferior direito e ao
     telemóvel aterra em cima dos controlos. Passa a faixa centrada no fundo,
     onde não disputa espaço com nada. */
  [data-credito] {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    text-align: center;
    padding: 5px 12px calc(5px + env(safe-area-inset-bottom));
  }

  /* Forja: a navegação é uma coluna fixa no canto inferior esquerdo, com
     138 px de altura. Em ecrã largo fica muito abaixo do herói; a 375 o
     título "LEVANTA MAIS peso." desce até lá e o "peso." em contorno aterra
     por cima do "01 BOX" e do "02 AULAS", ilegíveis os dois. Deitada numa
     linha rente ao fundo, ocupa 20 px de altura e o título passa-lhe por
     cima sem lhe tocar. */
  [style*="bottom:20px"][style*="z-index:70"][style*="flex-direction:column"] {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 16px !important;
    right: clamp(14px, 3vw, 40px);
    bottom: 10px !important;
  }

  /* Casa do Cais: o herói é 100vh com o conteúdo encostado ao fundo, e a
     barra de reserva é fixa e tem 136 px. Em ecrã largo sobra altura para as
     duas coisas; a 375 a última linha do texto — "Pequeno-almoço servido no
     cais, ao nascer do sol" — fica por baixo da barra. O recuo devolve-lhe
     o espaço. */
  [style*="min-height:100vh"][style*="justify-content:flex-end"] {
    padding-bottom: clamp(155px, 20vh, 195px) !important;
  }

  /* Casa do Cais: a barra de topo é uma linha só que não quebra, e o bloco
     da marca encolhe até aos 94 px — "CASA DO CAIS" parte em três linhas e
     o crédito em quatro, encostados ao logótipo. Deixando a barra quebrar e
     travando o encolhimento do bloco, a marca fica com a largura de que
     precisa e os links passam para a linha de baixo. */
  nav:has([data-credito]) {
    flex-wrap: wrap !important;
  }
  /* As duas regras seguintes ficam presas ao caso da barra de topo. Soltas,
     o `flex: none` impedia o bloco do crédito de encolher no Estúdio Bruma,
     onde ele *precisa* de encolher, e a página passava a transbordar 37 px. */
  nav:has([data-credito]) div:has(> [data-credito]) {
    flex: none !important;
  }
  nav:has([data-credito]) [data-credito] {
    white-space: nowrap;
  }
}