/* ==========================================================================
   research.css — Research page layer
   Extends design-system.css with research-specific overrides.
   Loaded AFTER design-system.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Research articles: content area width constraint
   -------------------------------------------------------------------------- */

/* Individual articles get tighter measure for reading comfort */
.content-area {
  max-inline-size: min(50rem, 100%);
}

/* Research index gets wider for the card grid */
.content-area[style*="960"] {
  max-inline-size: min(60rem, 100%);
}

/* --------------------------------------------------------------------------
   Research article: enhanced typography for long-form
   -------------------------------------------------------------------------- */

/* Lead paragraph after article-meta */
.article-meta + p::first-line {
  font-weight: 500;
  color: var(--clr-text-bright);
}

/* Section anchors: offset for sticky header */
.content-area [id] {
  scroll-margin-block-start: 4rem;
}

/* --------------------------------------------------------------------------
   Research index: section numbering via counter
   -------------------------------------------------------------------------- */

.theme-section {
  counter-reset: research-card;
}

/* --------------------------------------------------------------------------
   Study hero banner images
   -------------------------------------------------------------------------- */

.study-hero {
  width: 100%;
  max-height: 400px;
  overflow: hidden;
  border-radius: 12px;
  margin: 2rem 0;
}

.study-hero img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}

/* Responsive refinements for research content */
@media (max-width: 40rem) {
  .content-area table {
    font-size: var(--step--2);
  }

  .content-area th,
  .content-area td {
    padding: var(--space-3xs) var(--space-2xs);
  }
}