/*
 * Research Articles — MSEED Education
 *
 * Covers two surfaces:
 *   1. research-card molecule (archive card-grid): title + excerpt + Download PDF
 *   2. research-single download block (single article, below .blog-post content)
 *
 * The single article body reuses .blog-post / .blog-post__content typography
 * (see _blog.css); only the download action is defined here.
 *
 * BEM: .research-card / __body / __title / __link / __excerpt / __actions / __download
 *      .research-single / __download / __download-btn
 *
 * All values via var(--*). Breakpoints use raw px (custom props invalid in @media).
 */

/* ══════════════════════════════════════════════════════════════════════
   RESEARCH CARD
═══════════════════════════════════════════════════════════════════════ */

.research-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
  padding: var(--sp-5);
  background-color: var(--c-white);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  transition: box-shadow 200ms var(--ease), transform 200ms var(--ease);
}

.research-card:hover {
  box-shadow: var(--sh-pop);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .research-card {
    transition: box-shadow 200ms var(--ease);
  }

  .research-card:hover {
    transform: none;
  }
}

.research-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1 1 auto;   /* push actions to the bottom in equal-height rows */
}

.research-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink-900);
  margin: 0;

  /* Clamp at 3 lines — keeps grid rows even */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.research-card__link {
  color: inherit;
  text-decoration: none;
}

.research-card__link:hover {
  text-decoration: underline;
}

.research-card__link:focus-visible {
  outline: var(--outline-width) solid var(--c-blue-500);
  outline-offset: var(--outline-offset);
}

.research-card__excerpt {
  font-size: var(--fs-small);
  line-height: var(--lh-base);
  color: var(--c-ink-500);
  margin: 0;

  /* Clamp at 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.research-card__actions {
  margin-top: auto;   /* pin to card bottom */
}

.research-card__download {
  width: 100%;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .research-card {
    padding: var(--sp-4);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SINGLE — download action (below the article body)
═══════════════════════════════════════════════════════════════════════ */

.research-single__download {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line-200);
}