/**
 * Shared rich-text ("prose") styles.
 *
 * Applied in THREE places so the editor, the live preview and the public
 * render are 1:1:
 *   1. Tiptap editor mount points (.tiptap-editor-container.prose → .ProseMirror)
 *   2. Dialog preview panels (.tiptap-preview-content.prose)
 *   3. Public block renders (.rich-text-block.prose, .text-with-image-content.prose,
 *      event descriptions in EventDialog)
 *
 * Keep every rule here element-scoped under .prose. Do NOT re-style these
 * elements in component-scoped CSS or app.css — that is what caused the
 * editor/site divergence this file fixes.
 */

.prose {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
}

.prose h1 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: 2.5rem;
  margin: 0.5em 0 0.3em;
  text-align: inherit;
}

.prose h2 {
  font-weight: 400;
  font-size: 1.75rem;
  margin: 0.5em 0 0.3em;
  text-align: inherit;
}

.prose h3 {
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0.5em 0 0.3em;
  text-align: inherit;
}

.prose p {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0 0 0.6em;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* Blank paragraphs authors add in the editor keep their height when rendered
   (saved HTML contains a truly empty <p></p>, which would otherwise collapse). */
.prose p:empty {
  min-height: 1.6em;
}

.prose ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin: 0 0 0.6em;
}

.prose ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin: 0 0 0.6em;
}

.prose li {
  line-height: 1.7;
}

.prose a {
  color: inherit;
  text-decoration: underline;
}

.prose blockquote {
  border-left: 4px solid var(--mud-palette-primary, #4E567E);
  background-color: rgba(78, 86, 126, 0.06);
  color: rgba(0, 0, 0, 0.65);
  font-style: italic;
  margin: 0.75em 0;
  padding: 0.5em 1em;
  border-radius: 0 4px 4px 0;
}

.prose mark {
  border-radius: 2px;
  padding: 0 2px;
}

.prose hr {
  margin: 1.5rem 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

/* Tiptap YouTube embeds: responsive 16:9 instead of a fixed-size iframe */
.prose div[data-youtube-video] {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin: 0.75em 0;
}

.prose div[data-youtube-video] iframe {
  width: 100%;
  height: 100%;
  border: 0;
}