/* RPA · Image + text. Shared atoms (.rpa-eyebrow, .rpa-display, .rpa-prose, .rpa-figure,
   .rpa-caption, .rpa-plate, .rpa-btn) are styled in the theme. */

.rpa-split-feature {
  --_rule: var(--rpa-c-rule, var(--rpa-rule));
  --_rule-strong: var(--rpa-c-rule-strong, var(--rpa-rule-strong));
  --_surface: var(--rpa-c-surface, var(--rpa-paper));
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4rem) clamp(2.5rem, 7vw, 8rem);
  align-items: center;
}

/* ---- media */
.rpa-split-feature__media { position: relative; min-width: 0; }
.rpa-split-feature__figure.rpa-split-feature__figure { aspect-ratio: 4 / 5; width: 100%; }
.rpa-split-feature--ratio-1-1 .rpa-split-feature__figure.rpa-split-feature__figure { aspect-ratio: 1; }
.rpa-split-feature--ratio-16-9 .rpa-split-feature__figure.rpa-split-feature__figure { aspect-ratio: 16 / 9; }

.rpa-split-feature .rpa-split-feature__figure > img,
.rpa-split-feature .rpa-split-feature__inset > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* No image chosen yet: an empty plate, drawn on purpose. */
.rpa-split-feature__figure--empty {
  border: 1px solid var(--_rule);
  border-radius: var(--rpa-radius);
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--_rule) calc(50% - 0.5px), var(--_rule) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    color-mix(in srgb, var(--rpa-c-text, var(--rpa-ink)) 3%, transparent);
}

/* Inset: matted in the page colour so it reads as a second print laid over the first. */
.rpa-split-feature--has-inset .rpa-split-feature__media { padding-block-end: 12%; padding-inline-end: 12%; }
.rpa-split-feature--has-inset.rpa-split-feature--image-right .rpa-split-feature__media { padding-inline: 12% 0; }
.rpa-split-feature__inset.rpa-split-feature__inset {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 44%;
  aspect-ratio: 1;
  border: clamp(6px, 0.8vw, 12px) solid var(--_surface);
  border-block-end-width: 0;
  border-inline-end-width: 0;
  box-sizing: border-box;
}
.rpa-split-feature--image-right .rpa-split-feature__inset.rpa-split-feature__inset {
  inset-inline: 0 auto;
  border-inline-width: 0 clamp(6px, 0.8vw, 12px);
}
.rpa-split-feature__caption { max-width: 48ch; }
.rpa-split-feature--has-inset .rpa-split-feature__caption {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  max-width: 52%;
  padding: 0;
}
.rpa-split-feature--has-inset.rpa-split-feature--image-right .rpa-split-feature__caption { inset-inline: auto 0; text-align: end; }

/* ---- content */
.rpa-split-feature__content { min-width: 0; }
.rpa-split-feature__eyebrow {
  padding-block-end: 1rem;
  margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-block-end: 1px solid var(--_rule-strong);
}
.rpa-split-feature__title {
  font-size: var(--rpa-step-4);
  max-width: 14ch;
  margin: 0 0 clamp(1.25rem, 1rem + 1vw, 2rem);
}
.rpa-split-feature--title-medium .rpa-split-feature__title { font-size: var(--rpa-step-3); max-width: 22ch; line-height: 1.08; }
.rpa-split-feature__body { max-width: 52ch; }

.rpa-split-feature__list {
  list-style: none;
  margin: clamp(1.75rem, 1rem + 2vw, 2.75rem) 0 0;
  padding: 0;
  display: grid;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  border-block-start: 1px solid var(--_rule);
}
.rpa-split-feature__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  padding-block: 0.85rem;
  border-block-end: 1px solid var(--_rule);
  font-size: var(--rpa-step-0);
  line-height: 1.4;
}
.rpa-split-feature__cta { margin-block-start: clamp(1.75rem, 1rem + 2vw, 2.75rem); }

@media (min-width: 640px) {
  .rpa-split-feature__list--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two columns: the top rule must not bridge the gap between them. */
  .rpa-split-feature__list--cols-2 { border-block-start: 0; }
  .rpa-split-feature__list--cols-2 .rpa-split-feature__item:nth-child(-n + 2) { border-block-start: 1px solid var(--_rule); }
}

@media (min-width: 900px) {
  .rpa-split-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .rpa-split-feature--ratio-16-9 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rpa-split-feature--image-right .rpa-split-feature__media { order: 2; }
  .rpa-split-feature--image-right { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .rpa-split-feature--image-right.rpa-split-feature--ratio-16-9 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Stacked layout: the inset's parallax drift (±40px on a phone) carried it down beside the text
   column's eyebrow rule. When the text sits directly underneath, the inset stays where it is laid
   out, and the text starts a little further down so the two prints read as one group. */
@media (max-width: 899.98px) {
  .rpa-split-feature .rpa-split-feature__inset.rpa-split-feature__inset { translate: none !important; }
  .rpa-split-feature--has-inset .rpa-split-feature__media { margin-block-end: clamp(0.5rem, 3vw, 1.5rem); }
}

/* 640–899px: stacked, a 4:5 picture at full column width is taller than the screen and the page
   reads picture → three lines → picture. Portrait and square pictures go BESIDE the text here
   (narrower picture column, never taller than 70% of the screen); 16:9 stays stacked — it is
   already a landscape strip. The checklist sets in one column in the narrower text column. */
@media (min-width: 640px) and (max-width: 899.98px) {
  .rpa-split-feature:not(.rpa-split-feature--ratio-16-9) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(1.75rem, 5vw, 3rem);
    align-items: start;
  }
  .rpa-split-feature--image-right:not(.rpa-split-feature--ratio-16-9) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .rpa-split-feature--image-right:not(.rpa-split-feature--ratio-16-9) .rpa-split-feature__media { order: 2; }
  .rpa-split-feature:not(.rpa-split-feature--ratio-16-9) .rpa-split-feature__figure.rpa-split-feature__figure { max-height: 70vh; max-height: 70svh; }
  /* the narrow picture column has no room for the caption beside the inset: it goes underneath */
  .rpa-split-feature--has-inset:not(.rpa-split-feature--ratio-16-9) .rpa-split-feature__caption { position: static; max-width: 50%; padding-block-start: 0.6rem; text-align: start; }
  .rpa-split-feature:not(.rpa-split-feature--ratio-16-9) .rpa-split-feature__list--cols-2 { grid-template-columns: minmax(0, 1fr); border-block-start: 1px solid var(--_rule); }
  .rpa-split-feature:not(.rpa-split-feature--ratio-16-9) .rpa-split-feature__list--cols-2 .rpa-split-feature__item:nth-child(-n + 2) { border-block-start: 0; }
}
/* Below 640px the stacked picture is capped too, so it never outgrows a short screen. */
@media (max-width: 639.98px) {
  .rpa-split-feature__figure.rpa-split-feature__figure { max-height: 80vh; max-height: 80svh; }
}
/* Stacked or narrow: a closing link must never sit flush against whatever follows (the next
   block's picture read as its caption). The widget guarantees its own breathing room. */
@media (max-width: 899.98px) {
  .rpa-split-feature:has(.rpa-split-feature__cta) { padding-block-end: clamp(1.5rem, 1rem + 3vw, 3rem); }
}