/**
 * CM Side Hero - the layout and the looks. Every colour and space is a --cm-sdh-* 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 title and the phone number
 * are their size class times a scale variable. 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. Narrow: one column, the words centred, the tall drawing under them. Wide: two columns, the words at the left and the wide
 * drawing at the right standing on the band's bottom edge. The two columns are the inner wrapper's OWN grid, and a container cannot query
 * itself: that rule measures the torso (the page's width), so it uses 851; what changes INSIDE the columns at the same moment measures the
 * inner wrapper (95% of the page), so it uses 808. The hours sit side by side only from 1100 px of the inner wrapper: under that the words
 * column is too narrow for two of them on one line.
 */
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero,
.wp-block-w4ya-cm-side-hero { box-sizing: border-box; display: block; clear: both; position: relative; overflow: clip; background: var(--cm-sdh-bg); color: var(--cm-sdh-text); text-align: center; }
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero *,
.wp-block-w4ya-cm-side-hero * { box-sizing: border-box; }

.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__inner,
.wp-block-w4ya-cm-side-hero .cm-sdh__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cm-sdh-gap); padding: var(--cm-sdh-pad) 0 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__inner:not(:has(> .cm-sdh__picture)),
.wp-block-w4ya-cm-side-hero .cm-sdh__inner:not(:has(> .cm-sdh__picture)) { padding-bottom: var(--cm-sdh-pad); } /* no drawing under the words */
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__inner,
.wp-block-w4ya-cm-side-hero .cm-sdh__inner,
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__inner p,
.wp-block-w4ya-cm-side-hero .cm-sdh__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-side-hero .cm-sdh__words > *,
.wp-block-w4ya-cm-side-hero .cm-sdh__words > * { margin: 0; } /* the size classes carry a margin */

.editor-styles-wrapper .wp-block-w4ya-cm-side-hero p.cm-sdh__kicker,
.wp-block-w4ya-cm-side-hero p.cm-sdh__kicker { margin-bottom: 0.5em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-sdh-kicker); } /* p: outranks the tracking reset above */
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__title,
.wp-block-w4ya-cm-side-hero .cm-sdh__title { color: var(--cm-sdh-text); font-weight: 500; line-height: 1.2; text-wrap: balance; }
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__title-text,
.wp-block-w4ya-cm-side-hero .cm-sdh__title-text { font-size: calc(1em * var(--cm-sdh-title-scale)); }
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__lead,
.wp-block-w4ya-cm-side-hero .cm-sdh__lead { max-width: var(--cm-sdh-lead-max); margin: 0.6em auto 0; line-height: 1.55; }
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__call,
.wp-block-w4ya-cm-side-hero .cm-sdh__call { margin: 0.35em 0 0; line-height: 1.1; }
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__phone,
.wp-block-w4ya-cm-side-hero .cm-sdh__phone { display: inline-block; color: var(--cm-sdh-phone); font-weight: 700; text-decoration: none; white-space: nowrap; }
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__number,
.wp-block-w4ya-cm-side-hero .cm-sdh__number { font-size: calc(1em * var(--cm-sdh-phone-scale)); }

/* The hours: stacked lines; a line with days has them in bold before its hours */
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__hours,
.wp-block-w4ya-cm-side-hero .cm-sdh__hours { display: flex; flex-direction: column; align-items: center; margin: 0.45em 0 0; padding: 0; list-style: none; line-height: 1.55; }
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__days,
.wp-block-w4ya-cm-side-hero .cm-sdh__days { font-weight: 500; }
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__days + .cm-sdh__time,
.wp-block-w4ya-cm-side-hero .cm-sdh__days + .cm-sdh__time { margin-left: 0.35em; }

/* The note: a boxed line with its icon at the left */
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__words > .cm-sdh__callout,
.wp-block-w4ya-cm-side-hero .cm-sdh__words > .cm-sdh__callout { display: flex; align-items: center; gap: 0.7em; margin-top: 1.2em; padding: 0.7em 1.1em; border: 1px solid var(--cm-sdh-note-border); border-radius: var(--cm-sdh-radius); background: var(--cm-sdh-note-bg); text-align: left; line-height: 1.45; }
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__callout-icon,
.wp-block-w4ya-cm-side-hero .cm-sdh__callout-icon { flex: none; display: flex; color: var(--cm-sdh-note-icon); font-size: 1.6em; }

/* The drawings: as wide as their column */
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__picture,
.wp-block-w4ya-cm-side-hero .cm-sdh__picture { min-width: 0; line-height: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__scene,
.wp-block-w4ya-cm-side-hero .cm-sdh__scene { display: block; width: 100%; height: auto; }
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__scene--wide,
.wp-block-w4ya-cm-side-hero .cm-sdh__scene--wide { display: none; }

/* The canvas stand-ins: an hours line with nothing typed, a band with nothing in it (the page prints neither) */
.editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__placeholder,
.wp-block-w4ya-cm-side-hero .cm-sdh__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: inside the two columns */
    .editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__words,
    .wp-block-w4ya-cm-side-hero .cm-sdh__words { text-align: left; }
    .editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__inner:has(> .cm-sdh__picture) .cm-sdh__words,
    .wp-block-w4ya-cm-side-hero .cm-sdh__inner:has(> .cm-sdh__picture) .cm-sdh__words { padding-bottom: var(--cm-sdh-words-bottom); } /* the drawing stands on the band's edge; the words keep their space */
    .editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__title-text,
    .wp-block-w4ya-cm-side-hero .cm-sdh__title-text { font-size: calc(1em * var(--cm-sdh-title-scale-wide)); }
    .editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__number,
    .wp-block-w4ya-cm-side-hero .cm-sdh__number { font-size: calc(1em * var(--cm-sdh-phone-scale-wide)); }
    .editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__lead,
    .wp-block-w4ya-cm-side-hero .cm-sdh__lead { margin-left: 0; margin-right: 0; }
    .editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__hours,
    .wp-block-w4ya-cm-side-hero .cm-sdh__hours { align-items: flex-start; }
    .editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__words > .cm-sdh__callout,
    .wp-block-w4ya-cm-side-hero .cm-sdh__words > .cm-sdh__callout { width: fit-content; }
    .editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__scene--wide,
    .wp-block-w4ya-cm-side-hero .cm-sdh__scene--wide { display: block; }
    .editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__scene--tall,
    .wp-block-w4ya-cm-side-hero .cm-sdh__scene--tall { display: none; }
}
@container (min-width: 1100px) { /* the inner wrapper's own width: room for two hours lines side by side */
    .editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__hours,
    .wp-block-w4ya-cm-side-hero .cm-sdh__hours { flex-direction: row; flex-wrap: wrap; }
    .editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__row--plain,
    .wp-block-w4ya-cm-side-hero .cm-sdh__row--plain { flex-basis: 100%; }
    .editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__row:not(.cm-sdh__row--plain) + .cm-sdh__row:not(.cm-sdh__row--plain)::before,
    .wp-block-w4ya-cm-side-hero .cm-sdh__row:not(.cm-sdh__row--plain) + .cm-sdh__row:not(.cm-sdh__row--plain)::before { content: "\00b7"; margin: 0 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-side-hero .cm-sdh__inner,
    .wp-block-w4ya-cm-side-hero .cm-sdh__inner { align-items: end; gap: var(--cm-sdh-gap-wide); padding-top: var(--cm-sdh-pad-wide); }
    .editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__inner:has(> .cm-sdh__picture),
    .wp-block-w4ya-cm-side-hero .cm-sdh__inner:has(> .cm-sdh__picture) { grid-template-columns: var(--cm-sdh-columns); }
    .editor-styles-wrapper .wp-block-w4ya-cm-side-hero .cm-sdh__inner:not(:has(> .cm-sdh__picture)),
    .wp-block-w4ya-cm-side-hero .cm-sdh__inner:not(:has(> .cm-sdh__picture)) { padding-bottom: var(--cm-sdh-pad-wide); }
}