/* /produtos/: filtro por modalidade (estilos do widget HTML do original). */

@layer pages {
  /* Original (template 121): título do topo em 50% da largura, três linhas no desktop. */
  @media (min-width: 1025px) {
    .hero__conteudo > .hero__titulo {
      max-width: 50%;
    }
  }

  /* Seção da lista: 100px do topo, 120px (80px no mobile) antes do CTA; 48px entre filtro e grade. */
  /* Padding, não margin: margin colapsaria com os 64px do topo do CTA do rodapé. */
  .lista-produtos {
    padding-block: 100px 120px;
  }

  @media (max-width: 767px) {
    .lista-produtos {
      padding-bottom: 80px;
    }
  }

  .filtro-produtos {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 48px;
  }

  .filtro-produtos__botao {
    padding: 12px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background: var(--cor-fundo-cinza);
    color: var(--cor-texto-suave);
    /* No original o botão herda a fonte do sistema do tema (font: inherit no widget HTML). */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 16px;
    line-height: 1.3;
    transition: background-color 0.2s, color 0.2s;
  }

  .filtro-produtos__botao:hover,
  .filtro-produtos__botao[aria-pressed="true"] {
    border-color: #1d385f;
    background: #1d385f;
    color: var(--cor-branco);
  }
}