/* Layout glue for the page documents (sjmd.js) — only what the design code
   (synerjoy-design/components/bundle.css) has no block for: text next to a
   ticket / aside, photos inside text, the site's own embeds. Design-code tokens
   only — no new colours, radii or fonts. ONE source: served to the article
   editor as /sjmd.css, imported in place by the landing (vite.config.ts). */

/* text + ::ticket / :::aside on the right, riding along on scroll */
.sj-with-aside { display: grid; gap: var(--space-11); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .sj-with-aside { grid-template-columns: minmax(0, 1fr) 360px; }
  .sj-with-aside > aside, .sj-with-aside > .sj-embed { position: sticky; top: calc(var(--layout-header) + var(--space-8)); }
}

/* a photo inside text: ![alt](file), {float="left|right"} wraps the text */
.sj-figure { margin: 0; }
.sj-figure img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: cover; border-radius: var(--radius-2xl); }
.sj-figure--left, .sj-figure--right { max-width: 45%; }
.sj-figure--left { float: left; margin: 6px var(--space-7) var(--space-3) 0; }
.sj-figure--right { float: right; margin: 6px 0 var(--space-3) var(--space-7); }
.sj-text::after { content: ""; display: block; clear: both; }
@media (max-width: 640px) {
  .sj-figure--left, .sj-figure--right { float: none; max-width: 100%; margin: 0; }
}

/* the site's own embeds (carousel / video / social) and CMS-data placeholders */
.sj-embed:empty { display: none; }
.sj-embed > img { display: inline-block; width: calc(25% - 6px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); margin: 0 8px 8px 0; }

/* blocks of one section stack in the wrap with no gap of their own: a text run
   next to Points / Columns / Cards, or two of those in a row, needs air */
.sj-body .sj-section > .sj-wrap > * + * { margin-top: var(--space-8); }

/* the design code's `.sj-text ul` (a column with markers) must not reach the
   Tags / Lines blocks when they sit inside a text column */
.sj-text ul.sj-tags { flex-direction: row; flex-wrap: wrap; padding-left: 0; }
.sj-text ul.sj-tags li::marker, .sj-text ul.sj-lines li::marker { content: ""; }
.sj-text ul.sj-lines { padding-left: 0; }