/*
 * Compatibility bridge for article HTML saved before the TG editor contract.
 *
 * This file is loaded only when the article wrapper has
 * [data-legacy-editor-content]. It deliberately never shares selectors with
 * [data-tg-editor-content], so old CKEditor classes cannot affect a new post.
 * Saving a legacy post in the TG editor removes the need for this file.
 */

.article-body-content.content-rich-text[data-legacy-editor-content] {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.article-body-content.content-rich-text[data-legacy-editor-content] :where(figure.image, figure[class*="image-style-"]) {
  display: table;
  clear: both;
  width: auto;
  max-width: 100%;
  margin-block: 1.5em;
}

.article-body-content.content-rich-text[data-legacy-editor-content] :where(figure.image, figure[class*="image-style-"]) > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: 14px;
}

.article-body-content.content-rich-text[data-legacy-editor-content] figure.image[data-tg-size] > img {
  width: 100%;
  max-width: 100%;
}

.article-body-content.content-rich-text[data-legacy-editor-content] figure.image[data-tg-size="25"] { width: 25%; }
.article-body-content.content-rich-text[data-legacy-editor-content] figure.image[data-tg-size="50"] { width: 50%; }
.article-body-content.content-rich-text[data-legacy-editor-content] figure.image[data-tg-size="75"] { width: 75%; }
.article-body-content.content-rich-text[data-legacy-editor-content] figure.image[data-tg-size="100"] { width: 100%; }

.article-body-content.content-rich-text[data-legacy-editor-content] :where(figure, img).image-style-align-left {
  margin-inline: 0 auto;
}

.article-body-content.content-rich-text[data-legacy-editor-content] :where(figure, img).image-style-align-center {
  margin-inline: auto;
}

.article-body-content.content-rich-text[data-legacy-editor-content] :where(figure, img).image-style-align-right {
  margin-inline: auto 0;
}

.article-body-content.content-rich-text[data-legacy-editor-content] :where(.image-style-side, .image-style-wrap-text) {
  float: right;
  max-width: min(50%, 420px);
  margin: .4em 0 1em 1.5em;
}

.article-body-content.content-rich-text[data-legacy-editor-content] .image-style-break-text {
  clear: both;
}

.article-body-content.content-rich-text[data-legacy-editor-content] figure.image.image-style-inline {
  display: inline-table;
  clear: none;
  width: auto;
}

.article-body-content.content-rich-text[data-legacy-editor-content] figure.image figcaption {
  display: table-caption;
  caption-side: bottom;
  padding: .65em .25em 0;
  color: var(--gray-600);
  font-size: .88em;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

/* CKEditor sometimes wrapped tables in an extra figure/div. The current
 * table renderer still enhances the inner semantic <table>; these rules only
 * keep the old wrapper from overflowing before it is re-saved. */
.article-body-content.content-rich-text[data-legacy-editor-content] :is(figure.table, .table-responsive) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.article-body-content.content-rich-text[data-legacy-editor-content] :is(figure.table, .table-responsive) table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

@media (max-width: 640px) {
  .article-body-content.content-rich-text[data-legacy-editor-content] :where(figure.image, figure[class*="image-style-"]) {
    max-width: 100%;
  }

  .article-body-content.content-rich-text[data-legacy-editor-content] :where(.image-style-side, .image-style-wrap-text) {
    float: none;
    max-width: 100%;
    margin: 1.25em auto;
  }

  .article-body-content.content-rich-text[data-legacy-editor-content] figure.image figcaption {
    overflow-wrap: anywhere;
  }
}