/* =================================================================
   Willow — course chapter pages (guide-*-NN-*.html)

   Lifted out of 62 near-identical inline <style> blocks across the three
   courses (personal-branding 14, social-media-fundamentals 38,
   six-pillars 10). Loaded after blog.css, whose .blog-* article layout
   these chapters reuse.

   NOTES on two inconsistencies reconciled while consolidating:

   - Disabled pager link. personal-branding and social-media-fundamentals
     shipped `.ch-pager [aria-disabled="true"]` at opacity 0.4 with a dashed
     border; six-pillars shipped `.ch-pager a.prev[aria-disabled="true"]` at
     opacity 0.45 with no border. Only ONE disabled link exists in the whole
     site (guide-six-pillars-00-introduction), so the first rule was dead CSS
     and 0.45 is the value that actually renders. Kept 0.45 and no border so
     nothing changes visually, but widened the selector back to any disabled
     child so a future disabled `next` is covered too.

   - .blog-body img was declared only by the 52 personal-branding and
     social-media-fundamentals chapters. The six-pillars chapters have no
     images in their article bodies, so applying it to all 62 is a no-op
     for them.
   ================================================================= */

.blog-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  margin: 12px 0;
  border: 1px solid var(--rule);
}

/* chapter pager */
.ch-pager {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ch-pager a {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ch-pager a:hover { border-color: var(--ink); transform: translateY(-2px); }
.ch-pager a.next { text-align: right; }
.ch-pager .dir { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.ch-pager .lbl { font-size: 17px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); line-height: 1.2; }
.ch-pager a:hover .lbl { color: var(--blue); }
.ch-pager [aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.cta-card { margin-top: 72px; }

@media (max-width: 720px) {
  .ch-pager { grid-template-columns: 1fr; }
}