/*
 * Lista de guías: el índice de la sección «Guías» de la portada y el bloque «Otras
 * guías» al final de cada guía. Cada entrada dice para qué etapa sirve, qué enseña
 * y cuánto se tarda en leer.
 */
@layer components {
  .guides-list {
    border-block-start: 1px solid var(--color-line);
  }

  .guides-list__item {
    display: grid;
    gap: var(--space-2xs);
    padding-block: var(--space-m);
    border-block-end: 1px solid var(--color-line);
  }

  .guides-list__title {
    font-size: var(--step-2);
    line-height: var(--leading-heading);
  }

  .guides-list__link {
    color: var(--color-ink);
    text-decoration-line: none;
  }

  .guides-list__link:hover {
    text-decoration-line: underline;
    text-decoration-color: var(--color-accent-text);
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.16em;
  }

  .guides-list__summary {
    max-inline-size: 58ch;
    color: var(--color-ink-soft);
  }

  .guides-list__meta {
    color: var(--color-ink-soft);
    font-size: var(--step--1);
  }
}