/* ═══════════════════════════════════════════════════════════════════════════
   SMJ — Content Pages (section builder)   v6.20.155
   Scoped to body.smj-pg-content and loaded only where [smj_page] is present.

   NO HARDCODED DESIGN. Every colour, font, size, radius and spacing value
   resolves through an existing Theme Control token, with the same fallback
   chain the rest of the plugin uses. Change a global Theme Control value and
   these pages follow automatically.
   ═══════════════════════════════════════════════════════════════════════════ */

body.smj-pg-content .smj-cpage{
  max-width: var(--smj-container-w, 1100px);
  margin-inline: auto;
  padding: var(--smj-section-spacing, 32px) 16px calc(var(--smj-section-spacing, 32px) + 16px);
  font-family: var(--smj-body-font, inherit);
  font-size: var(--smj-body-size, 15px);
  line-height: var(--smj-line-height, 1.7);
  color: var(--smj-text, #111827);
}

/* ── Headings ───────────────────────────────────────────────────────────── */
body.smj-pg-content .smj-cpage__h{
  font-family: var(--smj-heading-font, var(--smj-body-font, inherit));
  font-weight: var(--smj-heading-weight, 800);
  color: var(--smj-heading-color, var(--smj-text, #111827));
  line-height: 1.25;
  margin: 0 0 12px;
}
body.smj-pg-content .smj-cpage__h--h1{ font-size: var(--smj-heading-size, 32px); margin-bottom: 14px; }
body.smj-pg-content .smj-cpage__h--h2{ font-size: calc(var(--smj-heading-size, 32px) * .68); margin-top: 8px; }
body.smj-pg-content .smj-cpage__h--h3{ font-size: calc(var(--smj-heading-size, 32px) * .55); }
body.smj-pg-content .smj-cpage__h.is-center{ text-align: center; }

/* ── Text ───────────────────────────────────────────────────────────────── */
body.smj-pg-content .smj-cpage__text{ margin: 0 0 22px; }
body.smj-pg-content .smj-cpage__text.is-center{ text-align: center; max-width: 760px; margin-inline: auto; }
body.smj-pg-content .smj-cpage__text p{ margin: 0 0 12px; }
body.smj-pg-content .smj-cpage__text a,
body.smj-pg-content .smj-cpage__splittext a{
  color: var(--smj-primary, #1e6eff);
  text-decoration: underline; text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
body.smj-pg-content .smj-cpage__text ul,
body.smj-pg-content .smj-cpage__splittext ul{ margin: 0 0 14px; padding-left: 22px; }

/* ── Standalone image ───────────────────────────────────────────────────── */
body.smj-pg-content .smj-cpage__figure{ margin: 0 0 26px; }
body.smj-pg-content .smj-cpage__img{
  display: block; width: 100%; height: auto;
  border-radius: var(--smj-radius, 12px);
}
body.smj-pg-content .smj-cpage__cap{
  margin-top: 8px; font-size: 12.5px; text-align: center;
  color: var(--smj-text-muted, #64748b);
}

/* ── Image + Text split ─────────────────────────────────────────────────── */
body.smj-pg-content .smj-cpage__split{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* minmax(0,…) so long words cannot force overflow */
  align-items: center;
  gap: 28px;
  margin: 0 0 34px;
}
/* Image on the right: reorder visually without changing DOM order, so the
   text still precedes the image for screen readers and on mobile. */
body.smj-pg-content .smj-cpage__split--right .smj-cpage__splitmedia{ order: 2; }
body.smj-pg-content .smj-cpage__splittext{ min-width: 0; }
body.smj-pg-content .smj-cpage__splittext p{ margin: 0 0 12px; }
body.smj-pg-content .smj-cpage__splittext > *:last-child{ margin-bottom: 0; }
body.smj-pg-content .smj-cpage__imgph{
  display: block; width: 100%; aspect-ratio: 4 / 3;
  background: var(--smj-light-section, #f4f6f8);
  border: 1px dashed var(--smj-border, #e2e8f0);
  border-radius: var(--smj-radius, 12px);
}

/* ── Button ─────────────────────────────────────────────────────────────── */
body.smj-pg-content .smj-cpage__btnwrap{ margin: 0 0 26px; }
body.smj-pg-content .smj-cpage__btnwrap.is-center{ text-align: center; }
body.smj-pg-content .smj-cpage__btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--smj-btn-pad-y, 12px) var(--smj-btn-pad-x, 24px);
  border-radius: var(--smj-btn-radius, 999px);
  background: var(--smj-btn-bg, var(--smj-primary, #1e6eff));
  color: var(--smj-btn-text, #fff);
  font-family: var(--smj-body-font, inherit);
  font-size: var(--smj-btn-size, 14px);
  font-weight: 600; line-height: 1; text-decoration: none;
}
body.smj-pg-content .smj-cpage__btn:hover{
  background: var(--smj-btn-hover-bg, var(--smj-btn-bg, var(--smj-primary, #1e6eff)));
  color: var(--smj-btn-hover-text, #fff);
  filter: brightness(.96);
}

/* ── CTA band ───────────────────────────────────────────────────────────── */
body.smj-pg-content .smj-cpage__cta{
  text-align: center;
  padding: 30px 22px;
  margin: 8px 0 26px;
  background: var(--smj-light-section, #f6f8fa);
  border: 1px solid var(--smj-border, #e8ebee);
  border-radius: var(--smj-radius, 12px);
}
body.smj-pg-content .smj-cpage__ctattl{
  margin: 0 0 8px;
  font-family: var(--smj-heading-font, var(--smj-body-font, inherit));
  font-size: calc(var(--smj-heading-size, 32px) * .62);
  font-weight: var(--smj-heading-weight, 800);
  color: var(--smj-heading-color, var(--smj-text, #111827));
  line-height: 1.3;
}
body.smj-pg-content .smj-cpage__ctatxt{
  margin: 0 auto 16px; max-width: 640px;
  color: var(--smj-text-muted, #64748b);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px){
  body.smj-pg-content .smj-cpage__split{ gap: 22px; }
}
@media (max-width: 700px){
  /* Single column. order:2 is cleared so the image never jumps above its
     heading on mobile — reading order stays title → text → image. */
  body.smj-pg-content .smj-cpage__split{ grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  body.smj-pg-content .smj-cpage__split--right .smj-cpage__splitmedia{ order: 0; }
  body.smj-pg-content .smj-cpage__h--h1{ font-size: calc(var(--smj-heading-size, 32px) * .78); }
  body.smj-pg-content .smj-cpage__cta{ padding: 22px 16px; }
  body.smj-pg-content .smj-cpage__btn{ width: 100%; }
}