/* Blog-only styling.
 *
 * Deliberately NOT in legal.css, which backs privacy, terms, about, contact,
 * both 404s and all 12 guides — a "restyle the blog" edit there silently
 * restyles the legal pages (root CLAUDE.md, 2026-08-14). guide.css carries the
 * article shell the blog reuses; this file adds only the index listing.
 */

.bl-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.bl-card a {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--line, rgba(0, 0, 0, 0.12));
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}

.bl-card a:hover,
.bl-card a:focus-visible {
  border-color: var(--green, #13532F);
  transform: translateY(-1px);
}

.bl-date {
  display: block;
  font-size: .82rem;
  opacity: .62;
  margin-bottom: 6px;
  /* A date is a Latin-digit run even on the Arabic page when it is rendered
   * from an ISO string. Forcing LTR keeps "2026-09-22" from reordering, and
   * .font-latin (not [dir=ltr]) is what keeps the RTL letter-spacing reset
   * from firing on it — see the 2026-09-19 gotcha. */
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir='rtl'] .bl-date { text-align: right; }

.bl-card h2 {
  margin: 0 0 8px;
  font-size: 1.28rem;
  line-height: 1.32;
  border: 0;
  padding: 0;
}

.bl-card p {
  margin: 0 0 10px;
  opacity: .82;
  font-size: .96rem;
  line-height: 1.6;
}

.bl-more {
  font-size: .88rem;
  font-weight: 600;
  color: var(--green, #13532F);
}

html.dark .bl-card a { border-color: rgba(255, 255, 255, 0.14); }
html.dark .bl-more { color: #8FD3A8; }
html.dark .bl-card a:hover { border-color: #8FD3A8; }

/* The index has no table of contents, so the two-column guard in guide.css
 * (.lp-shell:has(> .g-toc)) correctly leaves it single-column. Nothing to add
 * here — noted so nobody "fixes" the missing sidebar. */

/* "Latest articles" on the guides hub. The hub links blog.css for these two
 * rules only; the cards themselves reuse .bl-list/.bl-card above. */
.g-latest-h {
  margin-top: 44px;
  border: 0;
  padding: 0;
}

.g-latest-all {
  margin-top: 16px;
  font-weight: 600;
}