/**
 * CM Why People Come Back - the layout and the looks. Every colour and space is a --cm-wcb-* 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 so its colour runs edge to edge; the inner wrapper carries the width classes (the sibling blocks' width) and is the
 * container (cm-cqi-container) the grid queries: one column (photo above the words) until the wrapper is 808px wide (= its width on an 851px page,
 * the zu tier), then photo and words side by side; the promises sit two across once the words column (its own container) is 26em wide.
 */
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback,
.wp-block-w4ya-cm-why-comeback {
    box-sizing: border-box;
    display: block;
    clear: both;
    position: relative;
    background: var(--cm-wcb-bg);
    color: var(--cm-wcb-text);
}
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback *,
.wp-block-w4ya-cm-why-comeback * { box-sizing: border-box; }

.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__inner,
.wp-block-w4ya-cm-why-comeback .cm-wcb__inner,
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__inner p,
.wp-block-w4ya-cm-why-comeback .cm-wcb__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-why-comeback .cm-wcb__grid,
.wp-block-w4ya-cm-why-comeback .cm-wcb__grid { display: grid; grid-template-columns: 1fr; gap: var(--cm-wcb-gap) var(--cm-wcb-column-gap); align-items: center; padding: var(--cm-wcb-section-pad) 0; }

/* The photo: a rounded frame with a hairline, the picture filling it at the site's ratio */
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__photo,
.wp-block-w4ya-cm-why-comeback .cm-wcb__photo {
    aspect-ratio: var(--cm-wcb-photo-ratio);
    border: 1px solid var(--cm-wcb-border);
    border-radius: var(--cm-wcb-radius);
    overflow: hidden;
}
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__image,
.wp-block-w4ya-cm-why-comeback .cm-wcb__image { display: block; width: 100%; height: 100%; object-fit: cover; }

.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__words,
.wp-block-w4ya-cm-why-comeback .cm-wcb__words { container-type: inline-size; } /* the promises query this column's width, not the block's */
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback.cm-wcb--no-photo .cm-wcb__words,
.wp-block-w4ya-cm-why-comeback.cm-wcb--no-photo .cm-wcb__words { max-width: var(--cm-wcb-words-max); } /* no photo: the words still read as a column, not a banner */
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__words > *,
.wp-block-w4ya-cm-why-comeback .cm-wcb__words > * { margin: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__kicker,
.wp-block-w4ya-cm-why-comeback .cm-wcb__kicker { letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--cm-wcb-accent); }
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__title,
.wp-block-w4ya-cm-why-comeback .cm-wcb__title { margin-top: 0.2em; color: var(--cm-wcb-text); font-weight: 600; line-height: 1.2; text-wrap: balance; }
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__lead,
.wp-block-w4ya-cm-why-comeback .cm-wcb__lead { margin-top: 0.6em; max-width: 40em; line-height: 1.5; }

/* The promises: a bold line and a sentence each, a hairline above each; one across, two across from a 30em-wide words column (below) */
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__promises,
.wp-block-w4ya-cm-why-comeback .cm-wcb__promises {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cm-wcb-promise-gap) var(--cm-wcb-gap);
    margin-top: var(--cm-wcb-gap);
    padding: 0;
    list-style: none;
}
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__promise,
.wp-block-w4ya-cm-why-comeback .cm-wcb__promise { border-top: 1px solid var(--cm-wcb-rule); padding-top: 0.6em; }
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__promise > *,
.wp-block-w4ya-cm-why-comeback .cm-wcb__promise > * { margin: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__heading,
.wp-block-w4ya-cm-why-comeback .cm-wcb__heading { font-weight: 600; line-height: 1.3; color: var(--cm-wcb-text); }
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__text,
.wp-block-w4ya-cm-why-comeback .cm-wcb__text { margin-top: 0.15em; line-height: 1.45; }

/* The quote: a bar beside it, italic */
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__quote,
.wp-block-w4ya-cm-why-comeback .cm-wcb__quote { margin-top: var(--cm-wcb-gap); border-left: var(--cm-wcb-quote-bar-width) solid var(--cm-wcb-quote-bar); padding: 0.2em 0 0.2em 1em; font-style: italic; line-height: 1.5; }

/* The canvas stand-in for a missing photo or an empty promise (the page prints neither) */
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__placeholder,
.wp-block-w4ya-cm-why-comeback .cm-wcb__placeholder { opacity: 0.7; }
.editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__photo.cm-wcb__placeholder,
.wp-block-w4ya-cm-why-comeback .cm-wcb__photo.cm-wcb__placeholder { display: flex; align-items: center; justify-content: center; border-style: dashed; padding: 1em; text-align: center; }

/* Two promises across once the words column is 26em wide (the nearest container of the list is the words column; on a 1280 laptop beside a photo it is about 28em) */
@container (min-width: 26em) {
    .editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__promises,
    .wp-block-w4ya-cm-why-comeback .cm-wcb__promises { grid-template-columns: 1fr 1fr; }
}

/* The wide tier, by the inner wrapper's width: photo and words side by side (the photo's side from the block's setting), the section pads more */
@container (min-width: 808px) {
    .editor-styles-wrapper .wp-block-w4ya-cm-why-comeback .cm-wcb__grid,
    .wp-block-w4ya-cm-why-comeback .cm-wcb__grid { grid-template-columns: var(--cm-wcb-photo-col) var(--cm-wcb-words-col); padding: var(--cm-wcb-section-pad-wide) 0; }
    .editor-styles-wrapper .wp-block-w4ya-cm-why-comeback.cm-wcb--photo-right .cm-wcb__grid,
    .wp-block-w4ya-cm-why-comeback.cm-wcb--photo-right .cm-wcb__grid { grid-template-columns: var(--cm-wcb-words-col) var(--cm-wcb-photo-col); }
    .editor-styles-wrapper .wp-block-w4ya-cm-why-comeback.cm-wcb--no-photo .cm-wcb__grid,
    .wp-block-w4ya-cm-why-comeback.cm-wcb--no-photo .cm-wcb__grid { grid-template-columns: 1fr; } /* after the photo-right rule: same specificity, and no photo wins whatever the side */
    .editor-styles-wrapper .wp-block-w4ya-cm-why-comeback.cm-wcb--photo-right .cm-wcb__photo,
    .wp-block-w4ya-cm-why-comeback.cm-wcb--photo-right .cm-wcb__photo { order: 2; }
}