/**
 * CM Call Rule - the layout and the looks. Every colour and space is a --cm-clr-* 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; the phone number is its size
 * class times --cm-clr-phone-scale, capped by a share of the band's width so it never wraps or leaves its column. 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 (cqi below is its width): under 808 px of it one column; from 808 the number and the sentence at the left, the ruled lines at
 * the right (--cm-clr-rows-width), bottoms level. 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-call-rule,
.wp-block-w4ya-cm-call-rule { box-sizing: border-box; display: block; clear: both; position: relative; overflow: clip; background: var(--cm-clr-bg); color: var(--cm-clr-text); }
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule *,
.wp-block-w4ya-cm-call-rule * { box-sizing: border-box; }

.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__inner,
.wp-block-w4ya-cm-call-rule .cm-clr__inner { padding: var(--cm-clr-pad) 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__inner,
.wp-block-w4ya-cm-call-rule .cm-clr__inner,
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__inner p,
.wp-block-w4ya-cm-call-rule .cm-clr__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-call-rule .cm-clr__inner :where(p, ul, li),
.wp-block-w4ya-cm-call-rule .cm-clr__inner :where(p, ul, li) { margin: 0; } /* the size classes and the theme carry margins */
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__inner :where(ul),
.wp-block-w4ya-cm-call-rule .cm-clr__inner :where(ul) { padding: 0; list-style: none; }

.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__frame,
.wp-block-w4ya-cm-call-rule .cm-clr__frame { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6em; padding-top: 0.85em; border-top: var(--cm-clr-rule-width) solid var(--cm-clr-rule); }
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__main,
.wp-block-w4ya-cm-call-rule .cm-clr__main { min-width: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule p.cm-clr__kicker,
.wp-block-w4ya-cm-call-rule p.cm-clr__kicker { font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-clr-kicker); } /* p: outranks the tracking reset above */
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__call,
.wp-block-w4ya-cm-call-rule .cm-clr__call { margin: 0.45em 0 0.4em; line-height: 1; }
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__call:first-child,
.wp-block-w4ya-cm-call-rule .cm-clr__call:first-child { margin-top: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__phone,
.wp-block-w4ya-cm-call-rule .cm-clr__phone { display: inline-block; color: var(--cm-clr-phone); font-weight: 700; text-decoration: none; white-space: nowrap; }
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__number,
.wp-block-w4ya-cm-call-rule .cm-clr__number { display: block; font-size: min(calc(1em * var(--cm-clr-phone-scale)), calc(100cqi / var(--cm-clr-phone-fit))); line-height: 1; letter-spacing: -0.01em; }
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__text,
.wp-block-w4ya-cm-call-rule .cm-clr__text { max-width: 26em; line-height: 1.5; }

/* The ruled lines: the first part at the left in bold, the second at the right */
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__row,
.wp-block-w4ya-cm-call-rule .cm-clr__row { display: flex; justify-content: space-between; gap: 1em; padding: 0.7em 0; border-top: 1px solid var(--cm-clr-hairline); line-height: 1.4; }
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__row:last-child,
.wp-block-w4ya-cm-call-rule .cm-clr__row:last-child { border-bottom: 1px solid var(--cm-clr-hairline); }
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__first,
.wp-block-w4ya-cm-call-rule .cm-clr__first { font-weight: 500; }
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__second,
.wp-block-w4ya-cm-call-rule .cm-clr__second { text-align: right; }

/* The canvas stand-ins: a line's part not typed yet, a band with nothing in it (the page prints neither) */
.editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__placeholder,
.wp-block-w4ya-cm-call-rule .cm-clr__placeholder { opacity: 0.7; border: 1px dashed currentColor; border-radius: 4px; padding: 0.3em 0.5em; }

@container (min-width: 808px) { /* the inner wrapper's own width */
    .editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__frame,
    .wp-block-w4ya-cm-call-rule .cm-clr__frame { grid-template-columns: minmax(0, 1fr) var(--cm-clr-rows-width); gap: var(--cm-clr-gap); align-items: end; }
    .editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__frame > :only-child,
    .wp-block-w4ya-cm-call-rule .cm-clr__frame > :only-child { grid-column: 1 / -1; }
    .editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__number,
    .wp-block-w4ya-cm-call-rule .cm-clr__number { font-size: min(calc(1em * var(--cm-clr-phone-scale-wide)), calc((100cqi - var(--cm-clr-rows-width) - var(--cm-clr-gap)) / var(--cm-clr-phone-fit))); }
    .editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__frame > .cm-clr__main:only-child .cm-clr__number,
    .wp-block-w4ya-cm-call-rule .cm-clr__frame > .cm-clr__main:only-child .cm-clr__number { font-size: min(calc(1em * var(--cm-clr-phone-scale-wide)), calc(100cqi / var(--cm-clr-phone-fit))); }
}
@container (min-width: 851px) { /* measured on the torso, not the inner wrapper (see the head comment) */
    .editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__inner,
    .wp-block-w4ya-cm-call-rule .cm-clr__inner { padding: var(--cm-clr-pad-wide) 0; }
    .editor-styles-wrapper .wp-block-w4ya-cm-call-rule .cm-clr__frame,
    .wp-block-w4ya-cm-call-rule .cm-clr__frame { border-top-width: var(--cm-clr-rule-width-wide); }
}
