/* AEKE .sg — rich-text section: a heading, sometimes a paragraph and a link.
 *
 * A port of the theme's `rich-text.css`. The smallest section on the page and the
 * most repeated — four of them on aeke.com's home page alone, and the one above the
 * media grid is a single `<h3>` with no body at all.
 *
 * MEASURED AGAINST THE LIVE SITE (the "Real Training. Smarter Results." instance):
 *   heading `.h4` size — 28/36 at 768 and up, weight 600, white, centred — inside a
 *   580px column centred in the page grid, with the section's own padding-bottom at
 *   70px and its top padding disabled.
 *
 * `--color-bg` defaults to the page ground and `--color-heading` to white, which is
 * what makes a `.rich-text--transparent-true` block read as part of the page rather
 * than as a panel.
 */

.rich-text {
  isolation: isolate;
  border-radius: var(--block-border-radius);
  background: var(--color-rich-bg, transparent);
  color: var(--color-rich-text, var(--color-body));
}

/* The section wrapper is a block formatting context, which is what the theme's
   `.shopify-section` is. Without it the block loses 20px of height.
 *
 * The heading carries the theme's `margin-bottom: 20px` (see `typography.css`), and
 * the block has no padding-bottom when its bottom spacing is disabled. So the margin
 * escapes `.rich-text__inner`, then `.rich-text`, and collapses into whatever the next
 * section's margin happens to be — larger, and therefore the 20px vanishes entirely.
 *
 * Measured on the live page: the wrapper is 132px tall around a 112px block, and 56px
 * around a 36px one. `isolation: isolate` on `.rich-text` does **not** do this — that
 * is a stacking context, not a formatting context, and margins collapse straight
 * through it. `display: flow-root` is the one that contains them.
 */
.rich-text-section {
  display: flow-root;
}

.rich-text__inner {
  max-width: 580px;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
}

.rich-text__inner img,
.rich-text__inner .thb-placeholder {
  margin-bottom: 30px;
}

/* A body copy block, when there is one. */
.rich-text .rte {
  margin-bottom: 35px;
}

.rich-text .rte p:last-child {
  margin-bottom: 0;
}

/* Copy that upstream does NOT wrap in `.rte` — the support page's four hand-built contact cards,
   which sit directly in `.rich-text__inner` with their boxes styled inline. Measured: their
   paragraphs keep a 20px bottom margin, against the 30px the `.rte` rhythm gives a prose body. The
   selector deliberately excludes `.rte`, because a `.rte` body sits at the same level. */
.rich-text__inner > p,
.rich-text__inner > *:not(.rte) p {
  margin-bottom: 20px;
}

/* The width of the text column. `medium` is the default and needs no rule. */
.rich-text.text-width-small .rich-text__inner  { max-width: 400px; }
.rich-text.text-width-large .rich-text__inner  { max-width: 800px; }
.rich-text.text-width-xlarge .rich-text__inner { max-width: 1000px; }

/* `grid` is the theme's widest text measure short of `full`: the content row itself, capped at
   `--grid-width-row`. The K1's two widest headings use it, and without the rule they fell back
   to the 580px default and wrapped. */
.rich-text.text-width-grid .rich-text__inner   { max-width: var(--grid-width-row); }

/* Some rich-text blocks carry artwork under the copy — the K1's "Make Fitness Feel Effortless"
   is 672 of its section's 1067 pixels. Full width of the inner, no radius: it is a diagram, not
   a card, and upstream gives it neither. */
.rich-text__inner > img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 35px;
}

/* The theme's second text measure, measured on the K1's four-paragraph block: 15px/24px with
   20px between paragraphs. Left at body size (17px/27.2px, 30px between) that block rendered
   253px against the live 204, which is the whole of the section's 49px surplus. */
.rich-text .rte.text-size-small {
  font-size: 15px;
  line-height: 24px;
}

.rich-text .rte.text-size-small p {
  margin-bottom: 20px;
}

.rich-text .rte.text-size-small > :last-child {
  margin-bottom: 0;
}
/* No cap at all — the text spans the row. aeke.com's S1 Pro page uses this for one block out of
   five, where the column measures 1540px against 1000px for the rest. */
.rich-text.text-width-full .rich-text__inner   { max-width: 100%; }

/* Where the column sits inside the grid it is given. */
.rich-text.text-position-left .rich-text__inner  { margin-left: 0; }
.rich-text.text-position-right .rich-text__inner { margin-right: 0; }

/* Text alignment, for the blocks that are not centred. */
.rich-text.text-left .rich-text__inner   { text-align: left; }
.rich-text.text-center .rich-text__inner { text-align: center; }
.rich-text.text-right .rich-text__inner  { text-align: right; }

.rich-text .rich-text__inner h1,
.rich-text .rich-text__inner h2,
.rich-text .rich-text__inner h3,
.rich-text .rich-text__inner h4,
.rich-text .rich-text__inner h5,
.rich-text .rich-text__inner h6 {
  color: var(--color-rich-heading, var(--color-heading));
}

/* An opaque panel insets its content; a transparent one does not. */
.rich-text--transparent-false .rich-text__inner {
  max-width: 620px;
  padding: 20px;
}

@media (min-width: 48em) {
  .rich-text--transparent-false .rich-text__inner {
    padding: 45px;
  }
}