/* RPA · Guide step. Number · title · instructions · optional screenshot on a bone mat ·
   optional Tip / Careful note. Shared atoms (.rpa-plate, .rpa-display, .rpa-prose,
   .rpa-figure, .rpa-caption, .rpa-eyebrow) are styled in the theme. */

.elementor-widget-rpa-guide-step { container-type: inline-size; width: 100%; }

.rpa-guide-step {
  --_rule: var(--rpa-c-rule, var(--rpa-rule));
  --_rule-strong: var(--rpa-c-rule-strong, var(--rpa-rule-strong));
  --_muted: var(--rpa-c-muted, var(--rpa-slate));
  --_mat: var(--rpa-bone);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(2rem, 5cqi, 4rem);
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  border-block-start: 1px solid var(--_rule);
}

.rpa-guide-step__number {
  margin: 0 0 0.9rem;
  font-size: var(--rpa-step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rpa-guide-step .rpa-guide-step__title {
  margin: 0 0 1.1rem;
  font-size: var(--rpa-step-2);
  line-height: 1.14;
  max-width: 34ch;
  text-wrap: balance;
}

.rpa-guide-step__body { max-width: 60ch; }
.rpa-guide-step__body > :last-child { margin-block-end: 0; }
.rpa-guide-step__body li { margin-block-end: 0.5em; }

/* Note */
.rpa-guide-step__note {
  margin: 1.75rem 0 0;
  padding: 1rem 1.25rem 1.1rem;
  max-width: 60ch;
  background: var(--_mat);
  border: 1px solid var(--_rule);
  border-inline-start: 2px solid var(--rpa-petrol);
}
.rpa-guide-step__note--careful { border-inline-start-color: var(--rpa-ink); }
.rpa-guide-step__note-label { margin: 0 0 0.4rem; color: var(--rpa-petrol-deep); }
.rpa-guide-step__note--careful .rpa-guide-step__note-label { color: var(--rpa-ink); }
.rpa-guide-step__note--careful .rpa-guide-step__note-label::before { content: "! "; }
.rpa-guide-step__note-text {
  margin: 0;
  color: var(--rpa-ink);
  font-size: calc(var(--rpa-step-0) * 0.94);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Screenshot */
.rpa-guide-step .rpa-guide-step__figure { margin: 0; min-width: 0; }
.rpa-guide-step__shot {
  padding: clamp(0.75rem, 2.5cqi, 1.5rem);
  background: var(--_mat);
  border: 1px solid var(--_rule);
}
.rpa-guide-step .rpa-guide-step__shot .rpa-guide-step__img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--_rule);
  box-shadow: 0 1px 0 var(--_rule);
}
.rpa-guide-step__caption { margin-block-start: 0.75rem; color: var(--_muted); }


.rpa-guide-step__zoom { display: block; cursor: zoom-in; }
.rpa-guide-step__zoom:focus-visible { outline: 2px solid var(--rpa-c-focus, var(--rpa-indigo)); outline-offset: 3px; }

/* Tall, narrow screenshots sit beside the text once the column is wide enough. */
@container (min-width: 760px) {
  .rpa-guide-step--beside { grid-template-columns: minmax(0, 1fr) minmax(16rem, 23rem); align-items: start; }
}
.rpa-guide-step--below .rpa-guide-step__figure { max-width: 60rem; }

@media print {
  .rpa-guide-step { break-inside: avoid; }
}