/* Project card: thumbnail, summary, stretched-link Open control, links. */
@layer components {
  .project-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      'thumb'
      'summary';
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    transition: border-color 150ms ease;
  }

  .project-card:hover,
  .project-card:focus-within,
  .project-card:target {
    border-color: var(--color-rule-strong);
  }

  .project-card .project-thumbnail {
    grid-area: thumb;
    width: 100%;
    height: auto;
    border: 0;
    border-bottom: 1px solid var(--color-rule);
    border-radius: 0;
    aspect-ratio: 4 / 3;
  }

  .project-card__summary {
    grid-area: summary;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3) var(--space-4);
  }

  .project-card p {
    margin: 0;
  }

  .project-card .project-description {
    color: var(--color-fg);
    font-size: var(--fs-base);
    line-height: var(--leading-snug);
  }

  .project-card__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .project-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-3);
  }

  /* Stretched link: the Open control's overlay covers the whole card so any
     click opens the project website. The Article link sits above the overlay
     via a higher z-index and stays independently clickable. */
  .project-card__open::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Cover the whole card, not the Open button's pill radius. The card's own
       overflow:hidden + border-radius clips this to the rounded card shape. */
    border-radius: 0;
  }

  .project-card__open {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    min-height: 36px;
    padding: 0.25em 0.85em;
    border: 1px solid var(--color-rule-strong);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-link);
    font-size: var(--fs-caption);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition:
      background-color 150ms ease,
      border-color 150ms ease,
      color 150ms ease;
  }

  .project-card:hover .project-card__open,
  .project-card:focus-within .project-card__open {
    border-color: var(--color-link);
    background: var(--color-callout-bg);
    color: var(--color-link-hover);
  }

  .project-article-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    min-height: 36px;
    color: var(--color-link);
    font-size: var(--fs-caption);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }

  .project-article-link:hover,
  .project-article-link:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
  }

  .project-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
  }

  .project-links a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--color-link);
  }

  .project-links a:hover,
  .project-links a:focus-visible {
    color: var(--color-link-hover);
  }

  .project-links a .download-indicator {
    margin-left: 0.25em;
    color: var(--color-muted);
    font-size: 0.85em;
  }
}