/* Página Materiais gratuitos (/ferramentas-materiais/). Só o que é desta página.
   A base vem do previa.css. O cartão do material (.mat e .mat-btn) vem do previa-blog.css, ligado inteiro. Prefixo fm-.
   (O prefixo mt- já é do previa-case.css e do previa-bloco-tela.css.) */

/* topo: uma coluna (o .pg-topo padrão é grade de duas, feita para a ficha lateral) */
.fm-topo .caixa{grid-template-columns:minmax(0,1fr);gap:0}
.fm-topo .migalhas{margin-bottom:clamp(20px,3vw,34px)}
.fm-topo h1{margin-top:0}

/* a lista: uma seção só, sem categorias (Felipe, 12/10/2026). O título da seção fica só para leitor de tela. */
.fm-grupo.sec{padding-block:clamp(40px,5vw,72px) clamp(48px,6vw,88px)}
.fm-grupo .fm-lista{margin-top:0}

/* lista: o cartão .mat do blog, sem capa e com uma linha de apoio. Três colunas no computador, duas no tablet e uma no celular (dezoito cartões: nenhuma fileira fica com cartão sozinho).
   Sem carrossel: a lista mostra tudo. As regras abaixo também desfazem o cartão deitado que o blog usa entre 621 e 900px (ele conta com a capa). */
.fm-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(22px,2.8vw,32px)}
.fm-lista>li{display:flex}
.fm-lista .mat{flex:1 1 auto;display:flex;flex-direction:column;border:1px solid var(--linha);transition:border-color .15s ease}
.fm-lista .mat:hover{border-color:var(--roxo)}
.fm-lista .mat h3{align-self:auto;padding:22px 22px 0;margin-bottom:8px}
.fm-lista .mat p{padding:0 22px;margin-bottom:18px;font-size:1rem;line-height:1.5;color:var(--tinta-2);max-width:60ch}
.fm-lista .mat-btn{align-self:flex-start;justify-self:auto;margin:auto 22px 22px}
@media (min-width:1080px){
  .fm-lista{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  .fm-lista{grid-template-columns:minmax(0,1fr);gap:14px}
  .fm-lista .mat h3{padding:18px 18px 0}
  .fm-lista .mat p{padding:0 18px;margin-bottom:16px}
  .fm-lista .mat-btn{margin:auto 18px 18px}
}
/* o cartão que não é arquivo (análise de presença digital): o botão diz "Pedir análise" e não leva o ícone de baixar */
.fm-lista .mat-btn.fm-pedir::before{content:none}