/* The Shift — Portrait Split
   Two-column layout: portrait image (left) + timeline (right).
   Shared timeline primitives live in assets/shift-journey.css. */

/* The section relies on the global .container class for its
   horizontal gutter, which only paints 16px side padding on mobile.
   Other sections on the same page (journey-hero, feature-cards-grid)
   layer container + container_padding_x for ~32px total. Add scoped
   padding here so the section matches that visual gutter at mobile
   widths. Desktop is unchanged — .container already widens to
   --container-padding (36px) above 1024px, plenty of room. */
@media (max-width: 1023px) {
  .sj-split-wrap > .sj-section > .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

.sj-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 1024px) {
  .sj-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-4xl);
  }
}

.sj-split__media {
  margin: 0;
}
@media (min-width: 1024px) {
  /* Image stays in view while the reader scrolls through the timeline. */
  .sj-split__media {
    position: sticky;
    top: var(--space-xl);
  }
}

.sj-split__frame {
  /* Mobile: landscape so the image doesn't tower above the timeline.
     At a 375px viewport the 4:3 ratio lands ~375x280 instead of
     375x469 (which is what 4:5 would produce). Tablet stays 4:3 (capped
     below); desktop (1024+) reverts to the original 4:5 editorial portrait. */
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: color-mix(in srgb, var(--clr-neutral-light) 90%, var(--clr-primary) 10%);
}

@media (min-width: 1024px) {
  .sj-split__frame { aspect-ratio: 4 / 5; border-radius: var(--radius-3xl); }
}
/* Tablet: keep the 4:3 frame and cap it at the same 643px, centred, that
   content-image-split uses, so the portrait doesn't fill the whole viewport
   (it was ~736x920 at 768px). Desktop keeps the sticky 4:5 portrait. */
@media (min-width: 768px) and (max-width: 1023px) {
  .sj-split__media {
    width: 100%;
    max-width: 643px;
    margin-left: auto;
    margin-right: auto;
  }
}
.sj-split__frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Empty / placeholder state when no image is set. Outline-only frame
   matching the mock's "just shows dimensions" treatment. */
.sj-split__frame--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  border: 1px dashed color-mix(in srgb, var(--clr-primary) 18%, transparent);
  background: transparent;
}

.sj-split__placeholder-caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--clr-text-muted);
  text-align: center;
  max-width: 420px;
}

/* Inside the split, the timeline fills its grid column — disable the
   standalone centering and max-width from the shared stylesheet. */
.sj-split .sj-journey {
  max-width: none;
  margin-inline: 0;
}

/* Heading, intro and drop copy now render as block-driven richtext
   wrappers (.rte) rather than bare h2/p/blockquote. Collapse the
   richtext children's outer margins so spacing stays as tight as the
   prior hand-tuned layout: the header owns the gap below it, the
   timeline owns the gap between stops. */
.sj-journey__heading.rte > :first-child,
.sj-journey__intro.rte > :first-child,
.sj-journey__drop.rte > :first-child { margin-top: 0; }
.sj-journey__intro.rte > :last-child,
.sj-journey__drop.rte > :last-child { margin-bottom: 0; }
/* Heading keeps its original 16px bottom rhythm between heading and intro. */
.sj-journey__heading.rte > :last-child { margin-bottom: var(--space-md); }

/* Richtext typography normalization: heading/intro/drop blocks store text as
   <h2>/<p> (often without classes). Typography lives on the wrapper element
   (see shift-journey.css); force any inner richtext tag to inherit so it
   renders at the intended size/weight/family/color regardless of the tag. */
.sj-journey__heading > *,
.sj-journey__heading h1, .sj-journey__heading h2, .sj-journey__heading h3,
.sj-journey__heading h4, .sj-journey__heading h5, .sj-journey__heading h6,
.sj-journey__heading p,
.sj-journey__intro > *,
.sj-journey__intro h1, .sj-journey__intro h2, .sj-journey__intro h3,
.sj-journey__intro h4, .sj-journey__intro h5, .sj-journey__intro h6,
.sj-journey__intro p,
.sj-journey__drop > *,
.sj-journey__drop h1, .sj-journey__drop h2, .sj-journey__drop h3,
.sj-journey__drop h4, .sj-journey__drop h5, .sj-journey__drop h6,
.sj-journey__drop p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  line-height: inherit;
  color: inherit;
}

/* Drop statement defaults to the same typography as the question blocks
   (serif --font-primary, matching size/weight). The drop's inner tags are
   forced to `inherit` above, so we set the type on the blockquote wrapper
   and the children pick it up. */
.sj-journey__drop {
  font-family: var(--font-primary);
  font-size: var(--font-size-lg);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--clr-text-primary);
}

@media (min-width: 1024px) {
  .sj-journey__drop {
    font-size: var(--font-size-xl);
  }
}