/* ==========================================================================
   Lab 12 — Glossário (glossary): lista de definições numa só <dl>, por ordem
   do conteúdo. Cada termo é um <div> com <dt> e <dd> (válido em <dl>), com
   âncora própria (A11Y-98). O índice da página (anchors) mostra as letras e
   cada letra liga ao primeiro termo dessa letra.
   3 colunas a partir de 1024px, 2 a partir de 768px, 1 em telemóvel.
   Filete por baixo de cada termo, como no site atual. Sem negrito.
   Espaço por baixo em margem: na quebra de coluna a margem cai e as colunas
   começam todas à mesma altura.
   ========================================================================== */

.glossary__list { margin: 0; column-gap: var(--grid-gap); }
@media (min-width: 48em) { .glossary__list { columns: 2; } }
@media (min-width: 64em) { .glossary__list { columns: 3; column-gap: var(--space-6); } }

.glossary__item {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-divider);
  break-inside: avoid;
  scroll-margin-top: calc(var(--header-offset, 0px) + var(--anchors-bar, 0px) + var(--space-4));
}

.glossary__term { font-size: var(--text-body-xl); line-height: var(--lh-heading); letter-spacing: var(--ls-body); }
.glossary__definition { margin: var(--space-2) 0 0; }
.glossary__definition p { margin: 0; }
.glossary__note, .glossary__source { margin-top: var(--space-2); font-size: var(--text-body-md); color: var(--color-text-muted); }
.glossary__definition .glossary__note, .glossary__definition .glossary__source { margin-top: var(--space-2); }