/* Image rendering for generated content. Own classes, token-based — does not
   fight the design-system component CSS. */

.lede-figure {
  margin: var(--space-5, 1.5rem) 0;
}
/* Cap the article hero to a wide banner so it doesn't push content below the
   fold — crop to 16:9 rather than render at full natural height. */
.lede-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 420px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg, 14px);
}
.lede-figure figcaption {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-muted, #6b716a);
  margin-top: var(--space-2, 0.5rem);
}

/* Home hero image (right column of the hero). */
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-lg, 0 20px 40px rgba(0,0,0,.12));
}

.card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 0 0;
}

/* Learn page table of contents — chip-style jump links. */
.learn-toc {
  margin: 0 auto var(--space-6, 2rem);
}
.learn-toc ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 0;
  margin: 0;
}
.learn-toc a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--color-border, #e5e1d6);
  border-radius: var(--radius-pill, 999px);
  color: var(--color-text-soft, #3c423b);
  text-decoration: none;
  font-size: var(--text-sm, 0.9rem);
  font-weight: 600;
}
.learn-toc a:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-brand-soft);
}