/* O site em tela estreita.
 *
 * POR QUE ESTE ARQUIVO EXISTE. O site e escrito com `style=` inline em cada
 * elemento, e style inline nao comporta @media: nao ha onde dizer "no celular,
 * diferente". Esta folha e esse lugar. Ela e carregada por todas as paginas --
 * as geradas pelo <link> de build/gerar.py:cabeca(), as escritas a mao pelo
 * mesmo <link> que build/nav.py garante.
 *
 * POR QUE TANTO !important. Declaracao inline vence qualquer seletor de folha,
 * com uma excecao: declaracao !important de folha do autor. E a unica chave que
 * abre essa porta, e por isso ela aparece em quase toda regra daqui. Nao e
 * desleixo de especificidade; e o mecanismo.
 *
 * ENGANCHE POR CLASSE, NUNCA POR PEDACO DO style. Da para casar
 * [style*="grid-template-columns: 1fr 1fr"], e por um tempo funciona. Mas o
 * runtime do site reescreve os atributos em memoria (`display:grid` vira
 * `display: grid`), entao o seletor passa a depender da formatacao de um script
 * que nao e nosso -- some sem erro no dia em que ele mudar o espacamento. As
 * classes vem dos geradores em build/.
 *
 * O CORTE E 860px. Abaixo disso a barra de seis celulas nao cabe sem espremer
 * os rotulos; acima, o desenho de mesa continua inteiro.
 */

/* ------------------------------------------------------ barra e menu ---- */

/* O botao do menu so existe no celular; o painel so abre por ele. */
.barra-mob { display: none; }
.menu-mob { display: none; }

@media (max-width: 860px) {
  /* A barra passa a ser logo | acao | menu. As celulas de navegacao saem da
     barra e reaparecem dentro do painel -- os links continuam no HTML, que e
     o que importa para quem le a pagina e para a busca. */
  .barra-nav {
    grid-template-columns: auto 1fr auto !important;
    height: 64px !important;
  }
  .barra-cel { display: none !important; }
  .barra-mob { display: flex !important; }
  .menu-mob { display: block; }

  /* A celula lime encolhe: no celular ela divide a barra com o logo e o botao
     do menu, e o rotulo inteiro nao cabe em 390px. */
  .barra-cta {
    padding: 0 14px !important;
    font-size: 13px !important;
  }
  .barra-logo { padding: 0 16px !important; }
  .barra-logo img { height: 22px !important; }
}

/* Aberto em celular e girado para mesa: o painel nao pode sobrar na tela. */
@media (min-width: 861px) {
  .menu-mob { display: none !important; }
}

/* ---------------------------------------------------------- as grades ---- */

/* A maioria das grades nao precisa de regra aqui: elas foram trocadas por
 * `repeat(auto-fit, minmax(N, 1fr))` nos geradores, que se dobra sozinha em
 * qualquer largura -- na mesa da o mesmo numero de colunas de antes, no tablet
 * da duas, no celular da uma. Sem ponto de corte, sem !important.
 *
 * O que sobra aqui sao os casos em que auto-fit nao serve.
 */

@media (max-width: 760px) {
  /* DUAS COLUNAS. Nao da para resolver com auto-fit: as grades de dentro do
     container e as secoes de largura total pediriam minimos diferentes, e a
     secao sangrada acompanha a janela -- num monitor de 1920px um minimo
     pensado para 1280px vira tres ou quatro colunas. Entao aqui e corte mesmo.
     Vale para as simetricas (1fr 1fr) e para as de proporcao (1.15fr .85fr e
     as irmas): no celular todas viram uma coluna so. */
  .g2 { grid-template-columns: 1fr !important; }

  /* O RODAPE: coluna da marca mais as de links. Empilha. */
  .g-rodape { grid-template-columns: 1fr !important; }

  /* A LISTA DO BLOG era data | titulo | seta, com 112px fixos na data. Em
     390px sobravam 114px para o titulo -- a data ocupava tanto quanto o nome
     do artigo. Agora a data sobe para uma linha propria e o titulo fica com a
     largura toda. */
  .g-blog { grid-template-columns: 1fr auto !important; gap: 4px 14px !important; }
  .g-blog > :first-child { grid-column: 1 / -1 !important; }
}

/* -------------------------------------------- toque e corpo de texto ---- */

@media (max-width: 760px) {
  /* ALVOS DE TOQUE. O rodape tem dezenove links de texto empilhados com 23px
   * de altura cada -- no dedo, isso e um alvo que erra. Eles nao tem padding
   * no `style=` inline, entao aqui nao precisa de !important: basta dar corpo
   * ao link. 10px de cada lado levam os 23px para 43px.
   *
   * O `:not([aria-label])` deixa de fora os icones de rede social, que ja sao
   * quadrados de 36px e ganhariam uma altura estranha. */
  footer a:not([aria-label]) {
    display: inline-block;
    padding-block: 10px;
  }

  /* CORPO DE TEXTO MIUDO. A regra vale so para o rodape, e de proposito.
   *
   * O resto do texto abaixo de 14px do site e olho de secao: caixa alta,
   * espacado, em 11 ou 12px. Isso e desenho, nao descuido -- e rotulo, nao
   * texto de leitura, e aumentar derrubaria a hierarquia que o sistema visual
   * construiu. O que sobra de verdade e a letra legal do rodape, que e para
   * ler. */
  footer p, footer span { font-size: 13px !important; }

  /* O seletor de idioma dentro do painel do menu: tres alvos de 30px lado a
   * lado viram tres alvos de 44px. */
  .menu-mob [role="group"] a { padding: 12px 14px !important; }
}

/* ------------------------------------------------ o que o PR #5 deixou ---- */

@media (max-width: 760px) {
  /* ALVOS DE TOQUE, A PARTE QUE FALTOU. O rodape ja tinha sido resolvido, mas
   * sobraram 80 links abaixo de 40px no site todo -- quase todos o mesmo
   * desenho: o link de texto com seta ("Ver recurso ->", "Ler historias de
   * sucesso ->", "<- Blog Linte"), que e `display:inline-flex` com fonte de
   * 11px e fecha em 18px de altura. Dezoito pixels e menos da metade do dedo.
   *
   * POR QUE `min-height` E NAO `padding`. Estes links ja sao inline-flex com
   * `align-items:center` no style inline, entao min-height centraliza o texto
   * na caixa nova sem tocar em espacamento nenhum. E, por definicao, min-height
   * nao faz nada em elemento `display:inline` -- o link no meio de um paragrafo
   * de texto corrido continua exatamente como esta, que e o certo: ali o alvo e
   * a linha, nao um botao. A mesma regra que conserta um caso e inofensiva no
   * outro, sem precisar distinguir os dois por seletor.
   *
   * POR QUE NAO ENGANCHAR EM `.scp3`. E onde a medicao aponta, e seria errado:
   * `scp3` nao existe no HTML deste repositorio. E classe que o runtime do site
   * cria sozinho ao aplicar `style-hover`, com nome sequencial -- vira `.scp4`
   * no dia em que alguem inserir um hover antes dele na pagina, e a regra
   * morre sem dar erro. O atributo `style-hover`, que e nosso, tambem nao
   * serve: o runtime o consome e o remove do elemento antes de o CSS ver. */
  a { min-height: 44px; }

  /* A DATA DO BLOG. Sao 100 spans de 12.5px, um por artigo, e por isso a lista
   * do blog sozinha respondia por 109 dos 163 trechos miudos do site. A data e
   * o unico texto em caixa baixa daquela linha, entao aqui ela sobe para 13px.
   * O gancho e `.g-blog`, classe posta por build/blog.py -- nossa, estavel.
   *
   * O SELETOR MIRA O PRIMEIRO FILHO, NAO TODO SPAN. `.g-blog span` tambem pega
   * a seta do fim da linha, que e span: ela encolhia de 14px para 13px e, com
   * ela, a segunda coluna da grade. O desenho continuava certo, mas a medicao
   * de build/mobile.py passava a acusar 90 grades estreitas no blog, porque a
   * lista PERDOADAS de la guarda larguras exatas (`2c/14`) e nao tolerancia.
   * Mirar na data e ao mesmo tempo o certo -- a seta nao pediu para mudar. */
  .g-blog > :first-child { font-size: 13px !important; }
}