/* Research index grid */
.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-lg);
}

/* Research card — extends feature-card via link wrapper */
a.research-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.research-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.research-card__read-more {
  display: inline-block;
  margin-block-start: var(--space-sm);
}

/* Research entry (show page) */
.research-entry {
  max-inline-size: 48rem;
  margin-inline: auto;
}

.research-entry__breadcrumb {
  margin-block-end: var(--space-lg);
}

.research-entry__back-link {
  text-decoration: none;
}

.research-entry__back-link:hover {
  text-decoration: underline;
}

.research-entry__header {
  margin-block-end: var(--space-xl);
}

.research-entry__category-badge {
  display: inline-block;
  padding-inline: var(--space-sm);
  padding-block: var(--space-xs);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  margin-block-end: var(--space-md);
}

.research-entry__category-badge[data-variant="the_problem"] {
  background: color-mix(in srgb, #dc2626 12%, transparent);
  color: #dc2626;
}

.research-entry__category-badge[data-variant="the_solution"] {
  background: color-mix(in srgb, #16a34a 12%, transparent);
  color: #16a34a;
}

.research-entry__category-badge[data-variant="cognitive_science"] {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
}

/* Prose styling for rendered markdown body */
.prose h2 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-block: var(--space-xl) var(--space-md);
}

.prose h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-block: var(--space-lg) var(--space-sm);
}

.prose p {
  margin-block-end: var(--space-md);
  line-height: 1.7;
}

.prose ul,
.prose ol {
  margin-block-end: var(--space-md);
  padding-inline-start: var(--space-lg);
}

.prose li {
  margin-block-end: var(--space-xs);
  line-height: 1.6;
}

.prose blockquote {
  border-inline-start: 3px solid var(--color-accent);
  padding-inline-start: var(--space-md);
  margin-block: var(--space-md);
  color: var(--theme-text-secondary, inherit);
  font-style: italic;
}

.prose code {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: 0.875em;
}

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
}