/* Article card — auto-loaded for the article-card snippet
   (site/snippets/article-card.php). The full feature card from the Figma author
   panel: accent gradient, bookmark, centred title + byline, meta line, abstract
   excerpt, topic pills. Mirrors the landing centre feature, scaled to a column. */

.article-card {
  position: relative;
  background: var(--color-white);
  border-bottom: var(--border);
}

/* Accent gradient bar (issue colour → transparent), full-bleed at the top. */
.article-card__accent {
  display: block;
  height: var(--article-accent-height);
  background: linear-gradient(to top, transparent, var(--dot, #ccc));
}

/* Bookmark pinned top-right, over the accent bar (Figma 312:12425). */
.article-card__bookmark {
  position: absolute;
  top: calc(var(--article-accent-height) + var(--space-xs));
  right: var(--space-s);
  z-index: 1;
  line-height: 0;
  color: var(--color-fg);
}
.article-card__bookmark:hover {
  color: var(--color-muted);
}

.article-card__body {
  display: block;
  padding: 0 var(--space-s) var(--space-s);
}
.article-card__body:hover {
  text-decoration: none;
}

.article-card__title {
  margin-top: var(--space-2xs);
  padding-inline: var(--space-l); /* keep the centred title clear of the bookmark */
  font-size: var(--fs-subheading);
  line-height: var(--leading-tight);
  text-align: center;
}
.article-card__body:hover .article-card__title {
  text-decoration: underline;
}

.article-card__author {
  margin-top: var(--space-3xs);
  font-size: var(--fs-subtext);
  text-align: center;
}

/* Meta line: issue context + accent dot on the left, year / language right. */
.article-card__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-s);
  font-size: var(--fs-meta);
  --fa-serif: 0;
}
.article-card__meta-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.article-card__meta-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}
.article-card__ctx {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3xs);
  min-width: 0;
}
.article-card__ctx-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  clip-path: var(--shape, var(--shape-circle));
  background: var(--dot, #ccc);
}

.article-card__abstract {
  margin-top: var(--space-s);
  font-size: var(--fs-small);
  line-height: 1.1;
  hyphens: auto;
  /* Clamp to a few lines, matching the Figma's fixed-height excerpt. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-s);
}
/* Feature-card pills (Figma 312:12418): translucent fill + inset shadow, no
   border — the same look the landing feature uses, distinct from the bordered
   sidebar .tag. */
.article-card__tags .tag {
  --fa-serif: 0;
  padding: var(--space-2xs) var(--space-s);
  font-size: var(--fs-meta);
  white-space: nowrap;
  border: 0;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.01);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.25);
}