/* ==========================================================================
   Lab 7 — Espaçador (spacer), como na intranet: espaço vazio ou filete
   entre dois blocos. Altura escolhida da escala (2.12), uma para desktop e
   outra para telemóvel. O espaço é um div com aria-hidden; o filete é um
   <hr>, com o traço a meio da altura (texto a 20%, como nos cards de ficheiro).
   Como na intranet, é espaço a mais: soma-se ao espaço normal entre blocos
   (0.21.0, chat 34; antes anulava-o e o espaço não crescia).
   ========================================================================== */

.spacer {
  --spacer-mobile: var(--space-6);
  --spacer-desktop: var(--space-6);
  --spacer: var(--spacer-mobile);
  display: block;
  height: var(--spacer);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
@media (min-width: 48em) { .spacer { --spacer: var(--spacer-desktop); } }

/* Filete: a altura escolhida fica acima e abaixo do traço */
.spacer--line {
  height: calc(2 * var(--spacer) + var(--border-width));
  color: inherit;
  background: linear-gradient(var(--color-divider), var(--color-divider)) center / 100% var(--border-width) no-repeat;
}

/* Altura em desktop */
.spacer--24 { --spacer-desktop: var(--space-4); }
.spacer--36 { --spacer-desktop: var(--space-5); }
.spacer--48 { --spacer-desktop: var(--space-6); }
.spacer--64 { --spacer-desktop: var(--space-7); }
.spacer--96 { --spacer-desktop: var(--space-8); }
.spacer--120 { --spacer-desktop: var(--space-9); }

/* Altura em telemóvel */
.spacer--m-24 { --spacer-mobile: var(--space-4); }
.spacer--m-36 { --spacer-mobile: var(--space-5); }
.spacer--m-48 { --spacer-mobile: var(--space-6); }
.spacer--m-64 { --spacer-mobile: var(--space-7); }
.spacer--m-96 { --spacer-mobile: var(--space-8); }
.spacer--m-120 { --spacer-mobile: var(--space-9); }