/* widgets/snps/gene-research-card — one catalog article in the /research list
 * (Figma "Gene Research Card", node 134:4186). rsid + description, a wrapping
 * meta row, a body excerpt, 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);
  border: var(--stroke-weight-1) solid transparent;
}
.gene-research-card:hover { border-color: var(--border-default); }

/* Head — rsid + gene/variant description 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);
}
.gene-research-card__desc {
  font-size: var(--font-size-14);
  color: var(--text-secondary);
}

/* Meta — wrapping label/value pairs. */
.gene-research-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  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);
}

/* Excerpt — opening lines of the article body. */
.gene-research-card__excerpt {
  font-size: var(--font-size-16);
  line-height: 1.25rem; /* Note: Figma 20px line-height on 16px body */
  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); }