/**
 * CM Drawing And Text - the layout and the looks. Every colour and space is a --cm-dtx-* variable: defaults from config.php
 * (build_global_css_properties), a site's own values from its site-specific.css; the drawing's colours are the shared --cm-draw-*
 * variables. 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 the block's choices as classes
 * (--tinted, --right, --framed). The drawing and the words are the inner wrapper's own two columns, and a container cannot query itself:
 * the rules that lay the inner wrapper out measure the torso (the page's width), so they use 851. Under that the drawing sits above the words.
 */
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text,
.wp-block-w4ya-cm-drawing-text { box-sizing: border-box; display: block; clear: both; position: relative; overflow: clip; background: var(--cm-dtx-bg); color: var(--cm-dtx-text); }
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text *,
.wp-block-w4ya-cm-drawing-text * { box-sizing: border-box; }

.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__inner,
.wp-block-w4ya-cm-drawing-text .cm-dtx__inner { padding: var(--cm-dtx-pad) 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__inner,
.wp-block-w4ya-cm-drawing-text .cm-dtx__inner,
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__inner p,
.wp-block-w4ya-cm-drawing-text .cm-dtx__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-drawing-text .cm-dtx__inner :where(p, h2, h3, ul, ol, li, blockquote),
.wp-block-w4ya-cm-drawing-text .cm-dtx__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-drawing-text .cm-dtx__inner :where(ul, ol),
.wp-block-w4ya-cm-drawing-text .cm-dtx__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-drawing-text .cm-dtx__inner,
    .wp-block-w4ya-cm-drawing-text .cm-dtx__inner { padding: var(--cm-dtx-pad-wide) 0; }
}

.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text p.cm-dtx__kicker,
.wp-block-w4ya-cm-drawing-text p.cm-dtx__kicker { margin-bottom: 0.5em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-dtx-kicker); } /* p: outranks the tracking reset above */
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__title,
.wp-block-w4ya-cm-drawing-text .cm-dtx__title { color: var(--cm-dtx-text); font-weight: 500; line-height: 1.2; text-wrap: balance; }
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__placeholder,
.wp-block-w4ya-cm-drawing-text .cm-dtx__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-drawing-text:has(> .cm-dtx__inner--tinted),
.wp-block-w4ya-cm-drawing-text:has(> .cm-dtx__inner--tinted) { background: var(--cm-dtx-tint); }
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__inner,
.wp-block-w4ya-cm-drawing-text .cm-dtx__inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--cm-dtx-gap); }

/* The drawing: bare, or on a tinted panel */
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__picture,
.wp-block-w4ya-cm-drawing-text .cm-dtx__picture { line-height: 0; text-align: center; }
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__drawing,
.wp-block-w4ya-cm-drawing-text .cm-dtx__drawing { width: 100%; max-width: var(--cm-dtx-picture-max); height: auto; }
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__inner--framed > .cm-dtx__picture,
.wp-block-w4ya-cm-drawing-text .cm-dtx__inner--framed > .cm-dtx__picture { padding: 1.15em 1.15em 0; background: var(--cm-dtx-frame-bg); border-radius: var(--cm-dtx-radius); }
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__inner--framed .cm-dtx__drawing,
.wp-block-w4ya-cm-drawing-text .cm-dtx__inner--framed .cm-dtx__drawing { max-width: var(--cm-dtx-frame-max); }

/* The words */
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__text,
.wp-block-w4ya-cm-drawing-text .cm-dtx__text { margin-top: 0.4em; line-height: 1.55; }
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__text:first-child,
.wp-block-w4ya-cm-drawing-text .cm-dtx__text:first-child { margin-top: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__text--quote,
.wp-block-w4ya-cm-drawing-text .cm-dtx__text--quote { max-width: 30em; margin-top: 0.7em; padding-left: 0.8em; border-left: 3px solid var(--cm-dtx-quote-rule); font-style: italic; }
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__facts,
.wp-block-w4ya-cm-drawing-text .cm-dtx__facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.9em 1em; margin-top: 1.15em; }
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__fact,
.wp-block-w4ya-cm-drawing-text .cm-dtx__fact { line-height: 1.5; }
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__fact-label,
.wp-block-w4ya-cm-drawing-text .cm-dtx__fact-label { display: block; font-weight: 500; }
.editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__callout,
.wp-block-w4ya-cm-drawing-text .cm-dtx__callout { margin-top: 1.25em; padding: 1em 1.15em; background: var(--cm-dtx-callout-bg); border-radius: var(--cm-dtx-radius); line-height: 1.55; }

@container (min-width: 851px) { /* the inner wrapper's own columns: measured on the torso (see the head comment) */
    .editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__inner:has(> .cm-dtx__picture):has(> .cm-dtx__words),
    .wp-block-w4ya-cm-drawing-text .cm-dtx__inner:has(> .cm-dtx__picture):has(> .cm-dtx__words) { grid-template-columns: var(--cm-dtx-picture-width) minmax(0, 1fr); gap: var(--cm-dtx-gap-wide); }
    .editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__inner--right:has(> .cm-dtx__picture):has(> .cm-dtx__words),
    .wp-block-w4ya-cm-drawing-text .cm-dtx__inner--right:has(> .cm-dtx__picture):has(> .cm-dtx__words) { grid-template-columns: minmax(0, 1fr) var(--cm-dtx-picture-width); }
    .editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__inner--framed:has(> .cm-dtx__picture):has(> .cm-dtx__words),
    .wp-block-w4ya-cm-drawing-text .cm-dtx__inner--framed:has(> .cm-dtx__picture):has(> .cm-dtx__words) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__inner--framed.cm-dtx__inner--right:has(> .cm-dtx__picture):has(> .cm-dtx__words),
    .wp-block-w4ya-cm-drawing-text .cm-dtx__inner--framed.cm-dtx__inner--right:has(> .cm-dtx__picture):has(> .cm-dtx__words) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
    .editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__inner--right > .cm-dtx__picture,
    .wp-block-w4ya-cm-drawing-text .cm-dtx__inner--right > .cm-dtx__picture { order: 2; }
    .editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__drawing,
    .wp-block-w4ya-cm-drawing-text .cm-dtx__drawing { max-width: var(--cm-dtx-picture-width); }
    .editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__inner--framed > .cm-dtx__picture,
    .wp-block-w4ya-cm-drawing-text .cm-dtx__inner--framed > .cm-dtx__picture { padding: 1.4em 1.4em 0; }
    .editor-styles-wrapper .wp-block-w4ya-cm-drawing-text .cm-dtx__facts,
    .wp-block-w4ya-cm-drawing-text .cm-dtx__facts { gap: 0.85em 1.3em; }
}