/* ── /learn/ index article list ──
   The same hairline row list already used on /learn/glossary/ and
   /learn/cre-101/. Replaces the .card/.grid-3 treatment this page used to
   share with /tools/, /templates/ and the homepage; those classes are not
   touched here and keep their card look everywhere else.

   Every value below is one already in use elsewhere on the site (noted per
   rule), so this file introduces no new colour, size or spacing unit. */

.learn-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.learn-item {
  border-bottom: 1px solid var(--grey-border);
}

.learn-item:last-child { border-bottom: none; }

/* The link, not the <li>, carries the padding, so the full row height is a
   single click target rather than just the text. */
.learn-row {
  display: block;
  padding: 20px 0; /* same row rhythm as .glossary-list-item / .cre101-index-item */
  text-decoration: none;
}

.learn-item:first-child .learn-row { padding-top: 0; }

/* Qualified with .section-content, not left as a bare class, because
   global.css sets `.section-content h1, .section-content h2` to the page-
   heading size (clamp(1.8rem, 3.2vw, 2.5rem) / 800 / -0.01em) and
   `.section-grey h2` to --text. Both are 0,1,1 and would beat a lone
   .learn-row-title at 0,1,0, so every row title would silently render at
   h1 size in grey. Same guard, and same reason, as .section-content
   .series-heading in global.css. letter-spacing and line-height are reset
   explicitly since the h2 rule sets both. */
.section-content .learn-row-title {
  font-size: 1.02rem; /* .card h3, the size these rows carried as cards */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--navy);
  margin: 0 0 6px;
}

.learn-row:hover .learn-row-title { text-decoration: underline; }

.learn-row-desc {
  font-size: 0.92rem; /* .cre101-index-body p */
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}