/**
 * Shared article body markup (public .rj-article-content + TinyMCE body.rj-article-content).
 * Columns: table layout for predictable % widths; responsive stack on narrow viewports.
 * Images: max-width 100% + optional rj-figure--* / data-rj-img-size variants.
 */

.rj-article-content {
  box-sizing: border-box;
}

.rj-article-content *,
.rj-article-content *::before,
.rj-article-content *::after {
  box-sizing: inherit;
}

/* --- Structured rows (local + reusable expanded) --- */

.rj-article-content .rj-row {
  margin: 1em 0;
}

.rj-article-content [data-rj-layout-type="columns"][data-rj-block="1"],
.rj-article-content [data-rj-reusable-render="1"][data-rj-layout-type="columns"] {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 1rem 0;
}

.rj-article-content [data-rj-layout-type="columns"][data-rj-block="1"] > [data-rj-col],
.rj-article-content [data-rj-reusable-render="1"][data-rj-layout-type="columns"] > [data-rj-col] {
  display: table-cell;
  vertical-align: top;
  min-width: 0;
  margin: 0;
}

/* Percent widths from layout JSON (existing + new articles) */
.rj-article-content [data-rj-col][data-rj-col-width="16"] { width: 16%; }
.rj-article-content [data-rj-col][data-rj-col-width="25"] { width: 25%; }
.rj-article-content [data-rj-col][data-rj-col-width="30"] { width: 30%; }
.rj-article-content [data-rj-col][data-rj-col-width="33"] { width: 33%; }
.rj-article-content [data-rj-col][data-rj-col-width="34"] { width: 34%; }
.rj-article-content [data-rj-col][data-rj-col-width="40"] { width: 40%; }
.rj-article-content [data-rj-col][data-rj-col-width="50"] { width: 50%; }
.rj-article-content [data-rj-col][data-rj-col-width="60"] { width: 60%; }
.rj-article-content [data-rj-col][data-rj-col-width="66"] { width: 66%; }
.rj-article-content [data-rj-col][data-rj-col-width="67"] { width: 67%; }
.rj-article-content [data-rj-col][data-rj-col-width="70"] { width: 70%; }
.rj-article-content [data-rj-col][data-rj-col-width="75"] { width: 75%; }
.rj-article-content [data-rj-col][data-rj-col-width="100"] { width: 100%; }

@media (max-width: 36rem) {
  .rj-article-content [data-rj-layout-type="columns"][data-rj-block="1"],
  .rj-article-content [data-rj-reusable-render="1"][data-rj-layout-type="columns"] {
    display: block;
    width: 100%;
    border-spacing: 0;
  }

  .rj-article-content [data-rj-layout-type="columns"][data-rj-block="1"] > [data-rj-col],
  .rj-article-content [data-rj-reusable-render="1"][data-rj-layout-type="columns"] > [data-rj-col] {
    display: block;
    width: 100% !important;
    padding-bottom: 0.75rem;
  }
}

/* Spacer rows */
.rj-article-content .rj-row--spacer[data-rj-spacer-size="sm"] {
  min-height: 0.75rem;
}

.rj-article-content .rj-row--spacer[data-rj-spacer-size="md"] {
  min-height: 1.25rem;
}

.rj-article-content .rj-row--spacer[data-rj-spacer-size="lg"] {
  min-height: 2rem;
}

/* --- Media: never overflow column / content width --- */

.rj-article-content img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.rj-article-content figure {
  margin: 1em 0;
  max-width: 100%;
}

.rj-article-content figure img {
  display: block;
  max-width: 100%;
  height: auto;
}

.rj-article-content figure iframe {
  max-width: 100%;
  border: 0;
}

/* Figure width caps: max-width:100% lets narrow columns shrink the used width */
.rj-article-content figure.rj-figure--content,
.rj-article-content figure.rj-figure--full {
  width: 100%;
  max-width: 100%;
}

.rj-article-content figure.rj-figure--sm {
  width: 280px;
  max-width: 100%;
}

.rj-article-content figure.rj-figure--md {
  width: 480px;
  max-width: 100%;
}

.rj-article-content figure.rj-figure--lg {
  width: 720px;
  max-width: 100%;
}

.rj-article-content figure.rj-figure--sm img,
.rj-article-content figure.rj-figure--md img,
.rj-article-content figure.rj-figure--lg img,
.rj-article-content figure.rj-figure--content img,
.rj-article-content figure.rj-figure--full img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Marker for tooling / future filters; sizing is driven by figure classes when present */
.rj-article-content img[data-rj-img-size="content"],
.rj-article-content img[data-rj-img-size="full"] {
  max-width: 100%;
  height: auto;
}