/* How an article's blocks look, both on the public page and inside the editor canvas.
   Uses the site's --rs-* tokens, with fallbacks for pages that do not load site.css. */

.rs-article {
  --rs-article-width: 44rem;
  color: var(--rs-text, #1b1f24);
  font-family: var(--rs-font, Inter, system-ui, sans-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.rs-article > * {
  max-width: var(--rs-article-width);
  margin-left: auto;
  margin-right: auto;
}

.rs-article > * + * { margin-top: 1.1em; }
:where(.rs-article) p, :where(.rs-article) figure, :where(.rs-article) blockquote { margin: 0; }

.rs-article h2, .rs-article h3, .rs-article h4 {
  line-height: 1.25;
  font-weight: 650;
  margin-bottom: 0;
  scroll-margin-top: 5rem;
}
.rs-article h2 { font-size: 1.6rem; margin-top: 2em; }
.rs-article h3 { font-size: 1.3rem; margin-top: 1.6em; }
.rs-article h4 { font-size: 1.1rem; margin-top: 1.4em; }
.rs-article > :first-child { margin-top: 0; }

.rs-article a { color: var(--rs-brand, #1E7F56); text-decoration: underline; text-underline-offset: 2px; }
.rs-article a:hover { color: var(--rs-brand-hover, #176545); }

.rs-article ul, .rs-article ol { padding-left: 1.5em; margin-bottom: 0; }
.rs-article li + li { margin-top: .3em; }
.rs-article li > p { margin: 0; }

.rs-article blockquote {
  border-left: 4px solid var(--rs-brand, #1E7F56);
  padding: .25em 0 .25em 1.25em;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--rs-text-muted, #57606a);
}
.rs-article blockquote p { margin: 0; }

.rs-article hr {
  border: 0;
  border-top: 1px solid var(--rs-border-strong, #c4cbd2);
  margin-top: 2em;
  margin-bottom: 2em;
  opacity: 1;
}

.rs-article code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .9em;
  background: var(--rs-surface-sunken, #f3f5f7);
  border-radius: 4px;
  padding: .1em .35em;
}
.rs-article pre {
  background: var(--rs-gray-900, #1b1f24);
  color: #f0f3f6;
  border-radius: var(--rs-radius, 8px);
  padding: 1em 1.25em;
  overflow-x: auto;
  font-size: .9rem;
  line-height: 1.55;
}
.rs-article pre code { background: none; padding: 0; color: inherit; }

/* callout */
.rs-article .rs-b-callout {
  border-radius: var(--rs-radius, 8px);
  border: 1px solid var(--rs-info, #2563eb);
  border-left-width: 4px;
  background: var(--rs-info-soft, #eef4ff);
  padding: .9em 1.1em;
}
.rs-article .rs-b-callout[data-tone="tip"] { border-color: var(--rs-success, #1E7F56); background: var(--rs-success-soft, #e9f6ef); }
.rs-article .rs-b-callout[data-tone="warning"] { border-color: var(--rs-warning, #b7791f); background: var(--rs-warning-soft, #fff6e5); }
.rs-article .rs-b-callout > p + p { margin-top: .6em; }

/* images */
.rs-article .rs-b-image { margin-bottom: 0; }
.rs-article .rs-b-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rs-radius, 8px);
}
.rs-article .rs-b-image[data-width="wide"] { max-width: min(64rem, 100%); }
.rs-article .rs-b-image[data-width="full"] { max-width: none; }
.rs-article .rs-b-image[data-width="full"] img { border-radius: 0; }
.rs-article figcaption {
  margin-top: .5em;
  font-size: .875rem;
  color: var(--rs-text-muted, #57606a);
  text-align: center;
}

/* resized images: data-size is a percent of the space the image could fill */
.rs-article .rs-b-image[data-size] { width: calc(min(100%, var(--rs-article-width)) * var(--rs-size, 1)); }
.rs-article .rs-b-column > .rs-b-image[data-size] { width: calc(100% * var(--rs-size, 1)); }
.rs-article .rs-b-image[data-size="10"] { --rs-size: 0.1; }
.rs-article .rs-b-image[data-size="15"] { --rs-size: 0.15; }
.rs-article .rs-b-image[data-size="20"] { --rs-size: 0.2; }
.rs-article .rs-b-image[data-size="25"] { --rs-size: 0.25; }
.rs-article .rs-b-image[data-size="30"] { --rs-size: 0.3; }
.rs-article .rs-b-image[data-size="35"] { --rs-size: 0.35; }
.rs-article .rs-b-image[data-size="40"] { --rs-size: 0.4; }
.rs-article .rs-b-image[data-size="45"] { --rs-size: 0.45; }
.rs-article .rs-b-image[data-size="50"] { --rs-size: 0.5; }
.rs-article .rs-b-image[data-size="55"] { --rs-size: 0.55; }
.rs-article .rs-b-image[data-size="60"] { --rs-size: 0.6; }
.rs-article .rs-b-image[data-size="65"] { --rs-size: 0.65; }
.rs-article .rs-b-image[data-size="70"] { --rs-size: 0.7; }
.rs-article .rs-b-image[data-size="75"] { --rs-size: 0.75; }
.rs-article .rs-b-image[data-size="80"] { --rs-size: 0.8; }
.rs-article .rs-b-image[data-size="85"] { --rs-size: 0.85; }
.rs-article .rs-b-image[data-size="90"] { --rs-size: 0.9; }
.rs-article .rs-b-image[data-size="95"] { --rs-size: 0.95; }
.rs-article .rs-b-image[data-align="left"] { margin-left: max(0px, (100% - var(--rs-article-width)) / 2); margin-right: auto; }
.rs-article .rs-b-image[data-align="right"] { margin-left: auto; margin-right: max(0px, (100% - var(--rs-article-width)) / 2); }

/* wrapped images: from 640px a smaller image floats at the edge of the text and the text runs
   beside it; anything wide clears it. Below 640px the image just sits on that side. */
@media (min-width: 640px) {
  .rs-article .rs-b-image[data-align="left"] { float: left; margin-top: .3em; margin-right: 1.5em; margin-bottom: 1em; }
  .rs-article .rs-b-image[data-align="right"] { float: right; margin-top: .3em; margin-left: 1.5em; margin-bottom: 1em; }
  .rs-article .rs-b-column > .rs-b-image[data-align="left"] { margin-left: 0; }
  .rs-article .rs-b-column > .rs-b-image[data-align="right"] { margin-right: 0; }
  .rs-article > :is(h2, hr, table, pre, .rs-b-columns, .rs-b-embed, .rs-b-image:not([data-align])) { clear: both; }
  /* boxes with a border or background sit beside a wrapped image instead of running under it */
  .rs-article :is(.rs-b-callout, blockquote, ul, ol) { display: flow-root; }
  .rs-article::after { content: ""; display: block; clear: both; }
}

/* columns: side by side from 640px, stacked below */
.rs-article .rs-b-columns { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.rs-article .rs-b-column { min-width: 0; }
.rs-article .rs-b-column > * + * { margin-top: 1em; }
.rs-article .rs-b-column > h2, .rs-article .rs-b-column > h3, .rs-article .rs-b-column > h4 { margin-top: 0; }
@media (min-width: 640px) {
  .rs-article .rs-b-columns[data-layout="1-1"] { grid-template-columns: 1fr 1fr; }
  .rs-article .rs-b-columns[data-layout="2-1"] { grid-template-columns: 2fr 1fr; }
  .rs-article .rs-b-columns[data-layout="1-2"] { grid-template-columns: 1fr 2fr; }
  .rs-article .rs-b-columns[data-layout="1-1-1"] { grid-template-columns: 1fr 1fr 1fr; }
}

/* video */
.rs-article .rs-b-embed { position: relative; aspect-ratio: 16 / 9; margin-bottom: 0; }
.rs-article .rs-b-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--rs-radius, 8px);
}

/* tables */
.rs-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  display: block;
  overflow-x: auto;
}
@media (min-width: 640px) { .rs-article table { display: table; } }
.rs-article th, .rs-article td {
  border: 1px solid var(--rs-border, #d8dee4);
  padding: .5em .75em;
  text-align: left;
  vertical-align: top;
}
.rs-article th { background: var(--rs-surface-sunken, #f3f5f7); font-weight: 600; }
.rs-article td > p, .rs-article th > p { margin: 0; }