/* widgets/snps/gene-research-card — one catalog article in the /research list
 * (Figma "Gene Research Card", node 134:4186). rsid + gene/variant title, a
 * wrapping meta row, the description, and a "Continue reading" button, in a
 * surface-1 card that links to the article. */

.gene-research-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-32);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-1);
}

/* Mobile: tighten the card padding from 32 to 24. */
@media (max-width: 47.999rem) {
  .gene-research-card { padding: var(--spacing-24); }
}

/* Head — rsid + the shared gene/variant title (body-sm) on one baseline. */
.gene-research-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-8);
}
.gene-research-card__rsid {
  font-family: var(--font-family-display);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-700);
  letter-spacing: var(--font-letter-spacing-tight);
  color: var(--text-primary);
}
/* Reuse the article's gene/variant label, but sized to the card (body-sm). */
.gene-research-card .snp-article-title-gene {
  font-family: var(--font-family-body);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-400);
  line-height: 1;
  letter-spacing: 0;
  color: var(--text-tertiary);
}

/* Meta — wrapping label/value pairs. */
.gene-research-card__meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--spacing-16);
  row-gap: var(--spacing-8);
  font-size: var(--font-size-14);
}
.gene-research-card__field {
  display: inline-flex;
  gap: var(--spacing-8);
}
.gene-research-card__field-label { color: var(--text-secondary); }
.gene-research-card__field-value {
  font-weight: var(--font-weight-600);
  color: var(--text-primary);
}
/* Tags — a 16px tag icon in place of a label, with plain (unbolded) values. */
.gene-research-card__field--tags { align-items: flex-start; }
.gene-research-card__tag-icon {
  flex-shrink: 0;
  width: var(--spacing-12);
  height: var(--spacing-12);
  color: var(--text-tertiary);
}
.gene-research-card__field--tags .gene-research-card__field-value {
  font-weight: var(--font-weight-400);
  color: var(--text-tertiary);
}

/* Description (body-md) — the article summary, below the meta row. */
.gene-research-card__desc {
  font-family: var(--font-family-body);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-400);
  line-height: 1.25;
  letter-spacing: var(--font-letter-spacing-normal);
  color: var(--text-secondary);
}

/* CTA — right-aligned "Continue reading" pill (Figma surface-2 button). */
.gene-research-card__cta {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  height: 2rem; /* Note: Figma button height */
  padding-inline: var(--spacing-16);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-2);
  color: var(--text-primary);
  font-family: var(--font-family-display);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  letter-spacing: var(--font-letter-spacing-tight);
}
.gene-research-card:hover .gene-research-card__cta { background-color: var(--background-hover); }
.gene-research-card__cta-icon { width: var(--spacing-16); height: var(--spacing-16); }