/* Shared content-block styles for the EditorJS v2 renderer.
   Used by lessons (course/lesson.html) and the public home page (Phase 3).
   Declarations are verbatim copies of the inline rules currently in
   course/lesson.html; scoped under .content-blocks so any page that wraps
   its rendered blocks in a .content-blocks container gets identical styling.
   Embed/video blocks carry their own inline styles and need nothing here. */

/* Rich text wrapper */
.content-blocks .section-text { margin-bottom: 36px; }

/* Rich text typography (the .lesson-html content emitted by text blocks) */
.content-blocks .lesson-html p  { font-size:1.05rem; line-height:1.75; color:#3a3028; margin-bottom:1em; }
.content-blocks .lesson-html h1 { font-size:1.7rem;  font-weight:700; color:#2a2018; margin:1.2em 0 .5em; }
.content-blocks .lesson-html h2 { font-size:1.35rem; font-weight:700; color:#2a2018; margin:1.1em 0 .5em; }
.content-blocks .lesson-html h3 { font-size:1.1rem;  font-weight:700; color:#2a2018; margin:1em 0 .4em; }
.content-blocks .lesson-html ul,
.content-blocks .lesson-html ol { padding-left:1.6em; margin-bottom:1em; }
.content-blocks .lesson-html li { font-size:1.02rem; line-height:1.75; color:#3a3028; margin-bottom:0; }
.content-blocks .lesson-html blockquote {
  border-left:4px solid #3D7A78; padding:.6em 1.2em;
  margin:1.2em 0; background:#f0f9f8; border-radius:0 8px 8px 0;
  font-style:italic; color:#3a6a68;
}
.content-blocks .lesson-html a { color:#3D7A78; text-decoration:underline; }
.content-blocks .lesson-html a:hover { color:#2a5a58; }
.content-blocks .lesson-html img {
  max-width:100%; height:auto; border-radius:8px;
  display:block; margin:1em auto;
}
.content-blocks .lesson-html iframe.ql-video {
  display:block; width:100%; max-width:720px;
  aspect-ratio:16/9; border:none; border-radius:10px;
  margin:1.2em auto;
}
.content-blocks .lesson-html strong { font-weight:700; }
.content-blocks .lesson-html em     { font-style:italic; }

/* Per-block editable title */
.content-blocks .block-title {
  font-family:'Playfair Display', Georgia, serif; color:#C1644F;
  font-size:1.1rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  text-align:left; margin:0 0 16px;
}

/* Image block */
.content-blocks .lesson-image-figure { margin: 28px auto; max-width: 720px; }
.content-blocks .lesson-image-figure img {
  max-width: 100%; height: auto; border-radius: 8px;
  display: block; margin: 0 auto;
}
.content-blocks .lesson-image-caption {
  text-align: center; font-size: .85rem; color: #8a7a68;
  margin-top: 8px; font-style: italic;
}

/* Separator (mystical SVG divider, served as an <img>) */
.content-blocks .lesson-divider-svg {
  display: block; width: 100%; max-width: 600px;
  height: auto; margin: 36px auto;
}

/* Link Button (clickable button image linking to a URL) */
.content-blocks .lesson-link-button {
  display: block; width: 100%; max-width: 100%;
  margin: 28px auto; cursor: pointer; text-align: center;
  transition: transform .15s ease, opacity .15s ease;
}
.content-blocks .lesson-link-button:hover { transform: scale(1.03); opacity: .92; }
.content-blocks .lesson-link-button-img {
  display: block; width: 100%; height: auto; margin: 0 auto;
}