/* Stylesheet for the generated /learn/<slug>/ article pages (tools/learn-gen.mjs,
   SEO-02). Class-scoped (not data-route-scoped) so it can't bleed into the
   /learn/ grid page, which keeps its own styling from route.css. Modeled on
   the .legal long-form-content pattern already used by /privacy and /terms. */
@layer components {
  .lrn-crumbs { font-size: 14px; color: var(--gray-light, #8A8A8A); margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 760px; }
  .lrn-crumbs a { color: var(--gray-light, #8A8A8A); text-decoration: none; }
  .lrn-crumbs a:hover { color: var(--red-primary, #FF1A1A); text-decoration: underline; }
  .lrn-crumbs [aria-current="page"] { color: var(--white-bright, #F5F5F5); }

  .lrn-article { max-width: 760px; margin: 0 auto; padding: 0 0 8px; }
  .lrn-article-head { margin-bottom: 22px; }
  .lrn-article-cat { display: inline-block; font-family: var(--f-display, 'Graduate', sans-serif); font-size: 13px; letter-spacing: .14em; color: var(--red-primary, #FF1A1A); text-transform: uppercase; margin-bottom: 8px; }
  .lrn-article-title { font-family: var(--f-display, 'Graduate', sans-serif); font-size: clamp(26px, 4vw, 36px); line-height: 1.15; letter-spacing: .03em; color: var(--white-bright, #F5F5F5); margin: 0 0 10px; }
  .lrn-article-dek { color: #C8C8C8; font-size: 17px; line-height: 1.55; margin: 0 0 10px; }
  .lrn-article-meta { color: var(--gray-light, #8A8A8A); font-size: 14px; margin: 0; }

  .lrn-article-body h2, .lrn-article-body h3 { font-family: var(--f-display, 'Graduate', sans-serif); font-size: 20px; letter-spacing: .02em; color: var(--white-bright, #F5F5F5); margin: 28px 0 8px; }
  .lrn-article-body p, .lrn-article-body li { color: #C8C8C8; font-size: 16px; line-height: 1.65; }
  .lrn-article-body ul, .lrn-article-body ol { margin: 8px 0 14px 22px; }
  .lrn-article-body li { margin: 5px 0; }
  .lrn-article-body a { color: var(--red-primary, #FF1A1A); }
  .lrn-article-body a:hover { text-decoration: underline; }
  .lrn-article-body strong { color: var(--white-bright, #F5F5F5); }

  .lrn-related { max-width: 760px; margin: 36px auto 0; padding: 20px; border: 1px solid var(--gray-border, #2A2A2A); border-radius: 12px; background: var(--black-card, #0D0D0D); }
  .lrn-related h2 { font-family: var(--f-display, 'Graduate', sans-serif); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--white-bright, #F5F5F5); margin: 0 0 12px; }
  .lrn-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .lrn-related li { display: flex; flex-direction: column; }
  .lrn-related a { color: var(--white-bright, #F5F5F5); text-decoration: none; font-weight: 700; font-size: 16px; }
  .lrn-related a:hover { color: var(--red-primary, #FF1A1A); }
  .lrn-related span { color: var(--gray-light, #8A8A8A); font-size: 13px; letter-spacing: .06em; margin-top: 2px; }
  .lrn-related p { color: #A8A8A8; font-size: 14px; line-height: 1.5; margin: 4px 0 0; }

  .lrn-back-row { max-width: 760px; margin: 24px auto 0; padding-bottom: 48px; }
  .lrn-back-row a { color: var(--gray-light, #8A8A8A); text-decoration: none; font-size: 15px; }
  .lrn-back-row a:hover { color: var(--red-primary, #FF1A1A); }

  @media (max-width: 480px) {
    .lrn-article-title { font-size: 24px; }
  }
}