/* ==========================================================================
   List (list, chat 27; decisões 2.39 e 2.41).
   - Forma «Badge»: cada linha numa caixa amarela, o desenho do preçário do
     lab 10 (antes o bloco prices). As linhas escrevem-se como se leem.
   - Colunas (campo da intranet): uma lista só, partida em colunas por CSS,
     lida do princípio ao fim pelo leitor de ecrã. 2 a partir de 768px; 3 e 4
     a partir de 1024px.
   - Estilo «Badge» no editor de texto (`<span class="badge">`, coordenadas do
     lab 10): dentro de um parágrafo, sem a margem de cima do badge solto.
   ========================================================================== */
.list-badge { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.block-title + .list-badge { margin-top: 0; }
.list-badge__item { margin: 0; padding: var(--space-2) var(--space-3); color: var(--color-on-accent); background: var(--color-accent); line-height: var(--lh-body); }
.list-badge__item a { color: inherit; }

@media (min-width: 48em) {
  .list-cols[data-cols] { columns: 2; column-gap: var(--grid-gap); }
  .list-cols[data-cols] > li { break-inside: avoid; }
  .list-cols[data-cols] > li:first-child { margin-top: 0; }
  .list-badge[data-cols] { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: var(--space-2) var(--grid-gap); }
}
@media (min-width: 64em) {
  .list-cols[data-cols="3"] { columns: 3; }
  .list-cols[data-cols="4"] { columns: 4; }
  .list-badge[data-cols="3"] { grid-template-columns: repeat(3, max-content); }
  .list-badge[data-cols="4"] { grid-template-columns: repeat(4, max-content); }
}

.prose .badge { margin: 0; }