/* component-theme-card.css
 * Variants: .c-theme--identity, .c-theme--learning, .c-theme--world
 * The 2px rule above the image is the only theme-colored surface on the card. */

.c-theme {
  text-decoration: none;
  color: var(--color-ink);
  display: flex; flex-direction: column;
  position: relative;
}
.c-theme__rule {
  height: 2px;
  margin-bottom: 16px;
  background: var(--color-ink-quiet);   /* default rule color (neutral) */
}
.c-theme--identity .c-theme__rule { background: var(--color-identity); }
.c-theme--learning .c-theme__rule { background: var(--color-learning); }
.c-theme--world    .c-theme__rule { background: var(--color-world); }

.c-theme__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.c-theme__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--motion-slow);
}
.c-theme:hover .c-theme__media img { transform: scale(1.03); }

.c-theme__meta { padding-top: 22px; }
.c-theme__idx {
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 14px;
}
.c-theme__idx-num {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--color-ink-muted);
}
.c-theme__title {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  margin: 0 0 8px;
}
.c-theme__verb {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  margin: 0 0 14px;
}
.c-theme__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink-muted);
  margin: 0 0 16px;
}