/**
 * CM Icon Steps - the layout and the looks. Every colour and space is a --cm-ist-* variable: defaults from config.php
 * (build_global_css_properties), a site's own values from its site-specific.css. Sizes are the cm-fse classes. Two-selector rule.
 * The section spans the page; the inner wrapper carries the width classes (the sibling blocks' width) and is the container the band
 * measures: under 808 px of it the steps are stacked cards with the icon at the left, from 808 they sit in one row joined by a dotted line.
 * The inner wrapper's own padding is set on the inner wrapper, and a container cannot query itself: that rule measures the torso (the
 * page's width), so it uses 851.
 */
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps,
.wp-block-w4ya-cm-icon-steps { box-sizing: border-box; display: block; clear: both; position: relative; overflow: clip; background: var(--cm-ist-bg); color: var(--cm-ist-text); }
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps *,
.wp-block-w4ya-cm-icon-steps * { box-sizing: border-box; }

.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__inner,
.wp-block-w4ya-cm-icon-steps .cm-ist__inner { padding: var(--cm-ist-pad) 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__inner,
.wp-block-w4ya-cm-icon-steps .cm-ist__inner,
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__inner p,
.wp-block-w4ya-cm-icon-steps .cm-ist__inner p { letter-spacing: normal; } /* the z width classes set a tracking on the wrapper AND on every p inside it (.zt95 p) */
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__inner :where(p, h2, h3, ul, ol, li, blockquote),
.wp-block-w4ya-cm-icon-steps .cm-ist__inner :where(p, h2, h3, ul, ol, li, blockquote) { margin: 0; } /* the size classes and the theme carry margins */
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__inner :where(ul, ol),
.wp-block-w4ya-cm-icon-steps .cm-ist__inner :where(ul, ol) { padding: 0; list-style: none; }
@container (min-width: 851px) { /* measured on the torso, not the inner wrapper (see the head comment) */
    .editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__inner,
    .wp-block-w4ya-cm-icon-steps .cm-ist__inner { padding: var(--cm-ist-pad-wide) 0; }
}

.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps p.cm-ist__kicker,
.wp-block-w4ya-cm-icon-steps p.cm-ist__kicker { margin-bottom: 0.5em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-ist-kicker); } /* p: outranks the tracking reset above */
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__title,
.wp-block-w4ya-cm-icon-steps .cm-ist__title { color: var(--cm-ist-text); font-weight: 500; line-height: 1.2; text-wrap: balance; }
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__placeholder,
.wp-block-w4ya-cm-icon-steps .cm-ist__placeholder { opacity: 0.7; border: 1px dashed currentColor; border-radius: 4px; padding: 0.3em 0.5em; } /* the canvas stand-ins (the page prints none) */
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__kicker,
.wp-block-w4ya-cm-icon-steps .cm-ist__kicker,
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__title,
.wp-block-w4ya-cm-icon-steps .cm-ist__title { text-align: center; }

/* The steps: stacked cards on a narrow band */
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__steps,
.wp-block-w4ya-cm-icon-steps .cm-ist__steps { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9em; margin-top: 1.5em; }
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__step,
.wp-block-w4ya-cm-icon-steps .cm-ist__step { display: flex; align-items: flex-start; gap: 0.9em; padding: 1.1em; background: var(--cm-ist-card-bg); border: 1px solid var(--cm-ist-card-border); border-radius: var(--cm-ist-radius); text-align: left; }
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__disc,
.wp-block-w4ya-cm-icon-steps .cm-ist__disc { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: var(--cm-ist-disc); height: var(--cm-ist-disc); border: 2px solid var(--cm-ist-disc-border); border-radius: 50%; background: var(--cm-ist-disc-bg); color: var(--cm-ist-icon); font-size: calc(var(--cm-ist-disc) * 0.46); line-height: 1; }
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__disc .cm-icon,
.wp-block-w4ya-cm-icon-steps .cm-ist__disc .cm-icon { stroke-width: 2; }
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__words,
.wp-block-w4ya-cm-icon-steps .cm-ist__words { min-width: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps p.cm-ist__label,
.wp-block-w4ya-cm-icon-steps p.cm-ist__label { letter-spacing: 0.12em; text-transform: uppercase; }
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__name,
.wp-block-w4ya-cm-icon-steps .cm-ist__name { margin: 0.1em 0 0.2em; font-weight: 500; line-height: 1.25; }
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__text,
.wp-block-w4ya-cm-icon-steps .cm-ist__text { line-height: 1.55; }
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__note,
.wp-block-w4ya-cm-icon-steps .cm-ist__note { display: flex; align-items: center; justify-content: center; gap: 0.6em; margin-top: 1.2em; line-height: 1.4; }
.editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__tick,
.wp-block-w4ya-cm-icon-steps .cm-ist__tick { flex: none; display: flex; color: var(--cm-ist-tick); font-size: 1.45em; }

@container (min-width: 808px) { /* the inner wrapper's own width */
    .editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__steps,
    .wp-block-w4ya-cm-icon-steps .cm-ist__steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.25em; margin-top: 2.1em; }
    .editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__steps::before,
    .wp-block-w4ya-cm-icon-steps .cm-ist__steps::before { content: ""; position: absolute; left: 8%; right: 8%; top: calc(var(--cm-ist-disc-wide) / 2); border-top: 3px dotted var(--cm-ist-line); opacity: 0.55; }
    .editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__step,
    .wp-block-w4ya-cm-icon-steps .cm-ist__step { flex-direction: column; align-items: center; gap: 0.75em; padding: 0 1.1em 1.4em; background: none; border: 0; border-radius: 0; text-align: center; }
    .editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__step.cm-ist__placeholder,
    .wp-block-w4ya-cm-icon-steps .cm-ist__step.cm-ist__placeholder { border: 1px dashed currentColor; }
    .editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__disc,
    .wp-block-w4ya-cm-icon-steps .cm-ist__disc { width: var(--cm-ist-disc-wide); height: var(--cm-ist-disc-wide); font-size: calc(var(--cm-ist-disc-wide) * 0.46); }
    .editor-styles-wrapper .wp-block-w4ya-cm-icon-steps .cm-ist__note,
    .wp-block-w4ya-cm-icon-steps .cm-ist__note { margin-top: 1.4em; }
}