/* Article list (+ timeline variant), project-list grid, entry thumbnails. */
@layer components {
  .article-list,
  .project-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .project-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-4);
    align-items: stretch;
  }

  .article-list > li {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(6rem, 8rem);
    grid-template-areas: 'date content thumb';
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-6);
    border-top: 1px solid var(--color-rule);
  }

  .article-list > li:first-child {
    border-top: 0;
  }

  .article-list time {
    grid-area: date;
    color: var(--color-muted);
    font-size: var(--fs-caption);
    text-align: end;
  }

  .article-list > li > article {
    grid-area: content;
    min-width: 0;
    padding-right: var(--space-3);
  }

  .article-list h3,
  .project-list h3 {
    font-size: var(--fs-base);
    line-height: var(--leading-snug);
  }

  .project-list h3 {
    color: var(--color-fg);
    font-weight: var(--weight-semibold);
  }

  .article-list .entry-title {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: var(--color-fg);
    font-weight: var(--weight-semibold);
    text-decoration: none;
  }

  .article-list .entry-title:hover {
    color: var(--color-link-hover);
  }

  .article-list p,
  .project-list p {
    margin: var(--space-1) 0 0;
    color: var(--color-muted);
    font-size: var(--fs-base);
    line-height: var(--leading-snug);
  }

  .entry-thumbnail {
    display: block;
    overflow: hidden;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--color-code-bg);
    aspect-ratio: 4 / 3;
    transition: border-color 150ms ease;
  }

  .entry-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  a.entry-thumbnail {
    text-decoration: none;
  }

  a.entry-thumbnail:hover,
  a.entry-thumbnail:focus-visible {
    border-color: var(--color-rule-strong);
  }

  .article-list > li:focus-within .entry-thumbnail {
    border-color: var(--color-rule-strong);
  }

  .article-thumbnail {
    grid-area: thumb;
    align-self: center;
  }

  .article-list--timeline {
    --timeline-date-column: 6.25rem;
    --timeline-marker-column: 1.125rem;
    --timeline-marker-offset: 0.5625rem;
    --timeline-gap: var(--space-4);
    --timeline-date-offset: 1.125rem;
    --timeline-dot-top: 50%;
    --timeline-marker-center: calc(
      var(--timeline-date-column) + var(--timeline-gap) + var(--timeline-marker-offset)
    );
  }

  .article-list--timeline > li {
    position: relative;
    grid-template-columns:
      var(--timeline-date-column) var(--timeline-marker-column) minmax(0, 1fr)
      minmax(6rem, 8rem);
    grid-template-areas: 'date marker content thumb';
    column-gap: var(--timeline-gap);
    border-top: 0;
  }

  .article-list--timeline > li::before,
  .article-list--timeline > li::after {
    content: '';
    position: absolute;
    left: var(--timeline-marker-center);
    z-index: 0;
    pointer-events: none;
  }

  .article-list--timeline > li::before {
    inset-block: 0;
    width: 1px;
    transform: translateX(-50%);
    background: var(--color-rule-medium);
  }

  .article-list--timeline > li:first-child::before {
    inset-block-start: var(--timeline-dot-top);
  }

  .article-list--timeline > li:last-child::before {
    inset-block-end: calc(100% - var(--timeline-dot-top));
  }

  .article-list--timeline > li:only-child::before {
    content: none;
  }

  .article-list--timeline > li::after {
    top: var(--timeline-dot-top);
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--color-bg);
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-rule-strong);
    transform: translate(-50%, -50%);
  }

  .article-list--timeline > li > article,
  .article-list--timeline time,
  .article-list--timeline .entry-thumbnail {
    position: relative;
    z-index: 1;
  }

  .article-list--timeline time {
    justify-self: end;
    align-self: center;
    width: max-content;
    min-block-size: 0;
    margin-inline-end: calc(-1 * var(--timeline-date-offset));
    padding-inline-end: 4px;
    display: inline-block;
    color: var(--color-muted);
    font-size: var(--fs-sm);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    top: 5px;
    transform: rotate(-45deg);
    transform-origin: right center;
  }
}
