/* Article card — auto-loaded for the article-card snippet
   (site/snippets/article/article-card.php). The full feature card from the Figma author
   panel: accent gradient, bookmark, centred title + byline, meta line, abstract
   excerpt, topic pills. Only title and byline are links. As a search result
   also the query marked and excerpts of the matches. 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 {
  padding: 0 var(--space-s) var(--space-s);
}

.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__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 {
  --dot-size: var(--dot-size-small);
  flex: none;
}

.article-card__abstract {
  margin-top: var(--space-s);
  font-size: var(--fs-small);
  line-height: var(--leading-tight);
  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;
}

/* Excerpts of matches outside the printed fields, each under a thin rule. */
.article-card__excerpt {
  display: block;
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: var(--border-thin);
  font-size: var(--fs-small);
  line-height: var(--leading-tight);
  hyphens: auto;
}
.article-card__excerpt:not([href]):hover {
  text-decoration: none;
}
.article-card__excerpt-text,
.article-card__excerpt-next {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card__excerpt--text .article-card__excerpt-text {
  -webkit-line-clamp: 3;
}
/* Another block's text as written, its lines kept. */
.article-card__excerpt--block .article-card__excerpt-text {
  -webkit-line-clamp: 4;
  white-space: pre-line;
}
.article-card__excerpt--heading .article-card__excerpt-text {
  font-size: 1.5em;
}
.article-card__excerpt-next {
  margin-top: var(--space-2xs);
  -webkit-line-clamp: 2;
}

/* A query word, marked on the server. */
.article-card mark {
  color: inherit;
  background: var(--color-accent);
}

.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;
  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);
}