/*!
 * Your Community, Your AI — article reading rhythm
 * © 2026 My Digital Sovereignty Ltd · CC BY 4.0
 *
 * Loaded on top of the shared course.css design system by the AI-articles
 * route template (src/routes/aiArticles.js → buildPage()). The shared system
 * applies a global *{margin:0} reset, so marked-rendered article bodies need
 * their long-form measure, line-height and vertical rhythm restored here.
 * Mirrors claude-course/css/course-extras.css so the series reads as one family.
 */

.module-card { padding: clamp(var(--space-6), 4.5vw, var(--space-12)); }

/* Reading measure ~66ch — comfortable line length for prose */
.module-card > p,
.module-card > ul,
.module-card > ol,
.module-card > blockquote,
.module-card > h2,
.module-card > h3,
.module-card > h4 { max-width: 66ch; }

/* Paragraphs: airier line-height + real spacing between them */
.module-card p { margin-block: 0 var(--space-5); line-height: 1.75; }

/* Heading rhythm: more space above than below, so sections breathe */
.module-card h1 { font-size: var(--text-2xl); line-height: 1.15; margin-bottom: var(--space-2); max-width: 22ch; }
.module-card h2 { margin-block: var(--space-10) var(--space-4); line-height: 1.2; }
.module-card h3 { margin-block: var(--space-8) var(--space-3); line-height: 1.25; }
.module-card h4 { margin-block: var(--space-6) var(--space-3); }

/* Lists: indented, spaced, readable */
.module-card ul,
.module-card ol { margin-block: 0 var(--space-5); padding-left: 1.5em; }
.module-card li { margin-block: var(--space-3) 0; line-height: 1.75; padding-left: 0.15em; }
.module-card li > p { margin-block: 0; }

/* Blockquotes — set off as a distinct, calm panel */
.module-card blockquote {
  max-width: 72ch; margin-block: var(--space-6); padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--color-primary); background: var(--color-surface-2);
  border-radius: var(--radius-md); font-style: normal; color: var(--color-text);
}
.module-card blockquote p { margin-block: 0 var(--space-3); }
.module-card blockquote p:last-child { margin-bottom: 0; }

/* Thematic breaks as quiet section dividers */
.module-card hr { margin-block: var(--space-10); border: 0; border-top: 1px solid var(--color-divider); }

/* Inline emphasis */
.module-card strong { font-weight: 700; color: var(--color-text); }

/* Tables (marked-rendered) */
.module-card table { width: 100%; border-collapse: collapse; margin-block: var(--space-4) var(--space-6); font-size: var(--text-sm); }
.module-card th, .module-card td { border: 1px solid var(--color-border); padding: var(--space-3); text-align: left; vertical-align: top; }
.module-card th { background: var(--color-surface-offset); font-weight: 700; }

/* Inline code + code blocks */
.module-card code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
  background: var(--color-surface-offset); padding: 2px 6px; border-radius: var(--radius-sm); }
.module-card pre { background: var(--color-surface-offset); border: 1px solid var(--color-border);
  padding: var(--space-4); border-radius: var(--radius-md); overflow-x: auto; margin-block: var(--space-4) var(--space-6); }
.module-card pre code { background: none; padding: 0; }

/* Article links stay readable in-flow */
.module-card a { color: var(--color-primary); word-break: break-word; }

/* Meta tags: edition chip + position chip */
.module-card .module-meta { margin-bottom: var(--space-6); }
.tag.edition { background: color-mix(in oklab, var(--edition, var(--color-primary)) 20%, var(--color-surface));
  color: var(--edition, var(--color-primary)); }

/* ---- language switcher (header) ---- */
.lang-switch { display: inline-flex; gap: .3rem; align-items: center; font-size: var(--text-sm); margin-right: var(--space-2); }
.lang-switch a { text-decoration: none; opacity: .65; padding: 0 .15rem; color: var(--color-text); }
.lang-switch a:hover { opacity: 1; }
.lang-switch a[aria-current="page"] { opacity: 1; font-weight: 700; color: var(--color-primary); }
.lang-switch .sep { opacity: .35; }

/* ---- breadcrumb under the meta ---- */
.article-crumb { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.article-crumb a { color: var(--color-text-muted); }

/* ---- Watermarked hero figure (matches the course photo byline) ---- */
.module-card .course-figure {
  position: relative; margin: var(--space-6) 0 var(--space-8); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-md); max-width: none;
}
.module-card .course-figure img { display: block; width: 100%; height: auto; }
.module-card .course-figure.hero { aspect-ratio: 16 / 7; }
.module-card .course-figure.hero img { height: 100%; object-fit: cover; }
.module-card .course-figure::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.30)); pointer-events: none;
}
.module-card .course-figure .figure-credit {
  position: absolute; right: 0.8rem; bottom: 0.55rem; z-index: 1;
  font-size: 0.68rem; letter-spacing: .03em; color: rgba(255,255,255,0.78);
}

/* ---- Glossary call-to-action card (surfaces the 296-term glossary) ---- */
.glossary-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  margin-top: var(--space-6); padding: var(--space-5) var(--space-6);
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 8%, var(--color-surface)), var(--color-surface));
  border: 1px solid color-mix(in oklab, var(--color-primary) 26%, var(--color-border));
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.glossary-cta .gc-body { flex: 1 1 240px; }
.glossary-cta h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.glossary-cta p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

/* ---- prev/next module nav ---- */
.module-nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-8);
  padding-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.module-nav a { text-decoration: none; font-weight: 600; }
.module-nav .nav-next { margin-left: auto; text-align: right; }

@media (max-width: 860px) {
  .module-card .course-figure.hero { aspect-ratio: 16 / 9; }
}