/**
 * CM Call Band - the layout and the looks. Every colour and space is a --cm-clb-* 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-clb-phone-scale (the band's one big thing). Two-selector rule.
 * The section spans the page and clips what it holds; the inner wrapper carries the width classes (the sibling blocks' width); the drawing
 * sits OUTSIDE the inner wrapper, edge to edge, keeping its bottom and middle and a least height (cropped at the sides on a narrow screen).
 * The inner wrapper's own padding and the number's scale are 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-band,
.wp-block-w4ya-cm-call-band {
    box-sizing: border-box;
    display: block;
    clear: both;
    position: relative;
    overflow: clip;
    background: var(--cm-clb-bg);
    color: var(--cm-clb-text);
    text-align: center;
}
.editor-styles-wrapper .wp-block-w4ya-cm-call-band *,
.wp-block-w4ya-cm-call-band * { box-sizing: border-box; }

.editor-styles-wrapper .wp-block-w4ya-cm-call-band .cm-clb__inner,
.wp-block-w4ya-cm-call-band .cm-clb__inner { padding: var(--cm-clb-pad) 0 0; --cm-clb-scale: var(--cm-clb-phone-scale); }
.editor-styles-wrapper .wp-block-w4ya-cm-call-band .cm-clb__inner:last-child,
.wp-block-w4ya-cm-call-band .cm-clb__inner:last-child { padding-bottom: var(--cm-clb-pad); } /* no drawing under the words */
.editor-styles-wrapper .wp-block-w4ya-cm-call-band .cm-clb__inner,
.wp-block-w4ya-cm-call-band .cm-clb__inner,
.editor-styles-wrapper .wp-block-w4ya-cm-call-band .cm-clb__inner p,
.wp-block-w4ya-cm-call-band .cm-clb__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-band .cm-clb__inner > *,
.wp-block-w4ya-cm-call-band .cm-clb__inner > * { margin: 0; } /* the size classes carry a margin */

.editor-styles-wrapper .wp-block-w4ya-cm-call-band p.cm-clb__kicker,
.wp-block-w4ya-cm-call-band p.cm-clb__kicker { margin-bottom: 0.5em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-clb-kicker); } /* p: outranks the tracking reset above */
.editor-styles-wrapper .wp-block-w4ya-cm-call-band .cm-clb__title,
.wp-block-w4ya-cm-call-band .cm-clb__title { color: var(--cm-clb-text); font-weight: 500; line-height: 1.2; text-wrap: balance; }
.editor-styles-wrapper .wp-block-w4ya-cm-call-band .cm-clb__call,
.wp-block-w4ya-cm-call-band .cm-clb__call { margin: 0.25em 0 0.45em; line-height: 1.1; }
.editor-styles-wrapper .wp-block-w4ya-cm-call-band .cm-clb__phone,
.wp-block-w4ya-cm-call-band .cm-clb__phone { display: inline-block; color: var(--cm-clb-phone); font-weight: 700; text-decoration: none; white-space: nowrap; }
.editor-styles-wrapper .wp-block-w4ya-cm-call-band .cm-clb__number,
.wp-block-w4ya-cm-call-band .cm-clb__number { font-size: calc(1em * var(--cm-clb-scale)); }

/* The hours: days at the left, hours at the right, the table itself centred */
.editor-styles-wrapper .wp-block-w4ya-cm-call-band .cm-clb__hours,
.wp-block-w4ya-cm-call-band .cm-clb__hours { display: inline-grid; grid-template-columns: auto auto; gap: var(--cm-clb-hours-gap); padding: 0; list-style: none; text-align: left; line-height: 1.5; }
.editor-styles-wrapper .wp-block-w4ya-cm-call-band .cm-clb__row,
.wp-block-w4ya-cm-call-band .cm-clb__row { display: contents; }
.editor-styles-wrapper .wp-block-w4ya-cm-call-band .cm-clb__time,
.wp-block-w4ya-cm-call-band .cm-clb__time { text-align: right; }

/* The drawing: edge to edge, its bottom on the band's bottom */
.editor-styles-wrapper .wp-block-w4ya-cm-call-band .cm-clb__scene,
.wp-block-w4ya-cm-call-band .cm-clb__scene { display: block; width: 100%; height: auto; min-height: var(--cm-clb-scene-min); margin: var(--cm-clb-scene-top) 0 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-call-band .cm-clb__scene:first-child,
.wp-block-w4ya-cm-call-band .cm-clb__scene:first-child { margin-top: 0; }

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

@container (min-width: 851px) { /* measured on the torso, not the inner wrapper (see the head comment) */
    .editor-styles-wrapper .wp-block-w4ya-cm-call-band .cm-clb__inner,
    .wp-block-w4ya-cm-call-band .cm-clb__inner { padding-top: var(--cm-clb-pad-wide); --cm-clb-scale: var(--cm-clb-phone-scale-wide); }
    .editor-styles-wrapper .wp-block-w4ya-cm-call-band .cm-clb__inner:last-child,
    .wp-block-w4ya-cm-call-band .cm-clb__inner:last-child { padding-bottom: var(--cm-clb-pad-wide); }
}
