/*
 * .c-empty: what a list shows when there is nothing in it. A trazo illustration, a short title, one sentence
 * that says what to do next, and one action. Calm, never apologetic.
 *
 *   <section class="c-empty" aria-labelledby="vacio">
 *     <img class="c-empty__art" src="/assets/img/trazos/empty-state.svg" alt="" width="320" height="240">
 *     <h2 class="c-empty__title" id="vacio">Aún no hay negocios aquí</h2>
 *     <p class="c-empty__text">¿Conoces uno? Recomiéndalo y lo visitamos.</p>
 *     <a class="c-button c-button--primary" href="...">Recomendar un negocio</a>
 *   </section>
 */
.c-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md-space-3);
  padding: var(--md-space-7) var(--md-gutter);
  text-align: center;
  border-radius: var(--md-radius-lg);
  background: var(--md-color-surface-alt);
}

.c-empty__art {
  inline-size: min(100%, 15rem);
  block-size: auto;
  margin-block-end: var(--md-space-3);
}

.c-empty__title {
  font-size: clamp(var(--md-font-size-lg), 0.9rem + 2vw, var(--md-font-size-xl));
  max-inline-size: 20ch;
}

.c-empty__text {
  max-inline-size: 34ch;
  color: var(--md-color-ink-soft);
}

.c-empty .c-button {
  margin-block-start: var(--md-space-3);
}