/* Styles for article content written in the FameFeed editor.
   Used both inside the editor (.ql-editor) and on public pages (.article-body). */

.article-body img, .ql-editor img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---- Images with caption + alignment ---- */
.article-body figure.ff-figure, .ql-editor figure.ff-figure {
  margin: 22px auto; max-width: 100%; text-align: center;
}
.article-body figure.ff-figure img, .ql-editor figure.ff-figure img { display: block; margin: 0 auto; }
.article-body figure.ff-figure figcaption, .ql-editor figure.ff-figure figcaption {
  font-size: 13px; line-height: 1.5; color: var(--muted, #777); margin-top: 7px;
}
.article-body figure.ff-align-wide img, .ql-editor figure.ff-align-wide img { width: 100%; }
.article-body figure.ff-align-left, .ql-editor figure.ff-align-left {
  float: left; max-width: 46%; margin: 6px 22px 14px 0; text-align: left;
}
.article-body figure.ff-align-right, .ql-editor figure.ff-align-right {
  float: right; max-width: 46%; margin: 6px 0 14px 22px; text-align: left;
}
.article-body::after { content: ""; display: block; clear: both; }
@media (max-width: 600px) {
  .article-body figure.ff-align-left, .article-body figure.ff-align-right,
  .ql-editor figure.ff-align-left, .ql-editor figure.ff-align-right {
    float: none; max-width: 100%; margin: 20px auto; text-align: center;
  }
}

/* ---- Video & social embeds (responsive) ---- */
.article-body iframe.ff-embed, .ql-editor iframe.ff-embed {
  display: block; width: 100%; border: 0; border-radius: 8px; margin: 22px auto; background: #000;
}
iframe.ff-embed-16x9 { aspect-ratio: 16 / 9; height: auto; }
iframe.ff-embed-tall { max-width: 360px; aspect-ratio: 9 / 16; height: auto; }
iframe.ff-embed-ig { max-width: 440px; height: 660px; background: #fff; }
iframe.ff-embed-fbpost { max-width: 520px; height: 620px; background: #fff; }
iframe.ff-embed-tweet { max-width: 560px; height: 580px; background: #fff; }

/* ---- Text ---- */
.article-body h2, .ql-editor h2 { font-size: 1.45em; line-height: 1.35; margin: 1.5em 0 .5em; }
.article-body h3, .ql-editor h3 { font-size: 1.2em; line-height: 1.4; margin: 1.3em 0 .4em; }
.article-body blockquote, .ql-editor blockquote {
  border-left: 4px solid var(--primary, #E4032C); margin: 22px 0; padding: 6px 18px;
  color: var(--muted, #555); font-style: italic;
}
.article-body hr, .ql-editor hr { border: 0; border-top: 1px solid var(--border, #ddd); margin: 28px 0; }
.article-body a { color: var(--primary, #E4032C); text-decoration: underline; }
.article-body ul, .article-body ol { padding-left: 1.4em; }

/* Quill alignment / indent classes */
.article-body .ql-align-center { text-align: center; }
.article-body .ql-align-right { text-align: right; }
.article-body .ql-align-justify { text-align: justify; }
.article-body .ql-indent-1 { padding-left: 3em; }
.article-body .ql-indent-2 { padding-left: 6em; }
.article-body .ql-indent-3 { padding-left: 9em; }

/* ---- Safety net for pasted / older content (Word, Google Docs, other sites) ----
   Keeps one odd paste from breaking the page layout or fonts. */
.article-body { overflow-wrap: break-word; word-wrap: break-word; }
.article-body h1, .article-body h2, .article-body h3,
.article-body h4, .article-body h5, .article-body h6 { font-weight: 800; font-family: inherit; }
/* A body H1 must never outshine the page title (the real H1), so show it at section-heading size */
.article-body h1 { font-size: 1.45em; line-height: 1.35; margin: 1.5em 0 .5em; }
.article-body h4, .article-body h5, .article-body h6 { font-size: 1.05em; line-height: 1.45; margin: 1.2em 0 .4em; }
/* Pasted inline fonts/sizes never override the site typography */
.article-body span[style], .article-body font { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; }
.article-body p, .article-body li { font-family: inherit; }
.article-body pre { overflow-x: auto; max-width: 100%; }
.article-body table { display: block; max-width: 100%; overflow-x: auto; }
.article-body * { max-width: 100%; }