/**
 * CM TxtImg SideBySide 2 - the layout and the looks. Every colour and space is a --cm-tis2-* variable: defaults from config.php
 * (build_global_css_properties); the panels' colours and fonts print inline on the elements over them. Sizes are the cm-fse classes. Two-selector rule.
 * The section spans the page so its colour runs edge to edge (white by default; the whole-block Background panel prints over it); the inner wrapper
 * carries the width classes (the sibling blocks' width) and is the container (cm-cqi-container) the grid queries: one column (the 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 photo box taking the
 * words' height (cover) when the words run taller than its ratio; the promises sit two across once the words column (its own container) is 26em wide.
 */
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2,
.wp-block-w4ya-cm-txtimg-sidebyside2 {
    box-sizing: border-box;
    display: block;
    clear: both;
    position: relative;
    background: var(--cm-tis2-bg);
    color: var(--cm-tis2-text);
}
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 *,
.wp-block-w4ya-cm-txtimg-sidebyside2 * { box-sizing: border-box; }

.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__inner,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__inner,
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__inner p,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__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-txtimg-sidebyside2 .cm-tis2__grid,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__grid { display: grid; grid-template-columns: 1fr; gap: var(--cm-tis2-gap) var(--cm-tis2-column-gap); align-items: stretch; padding: var(--cm-tis2-section-pad) 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__grid > *,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__grid > * { min-width: 0; }

/* The photo box: a rounded frame with a hairline at the block's ratio; the photos stack inside it (cm-alpha ui-fader: absolute, cover, the first visible).
   Width from its track (justify-self: stretch), never from its stretched height through the ratio (the visit-us lesson, 2026-10-21). */
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__photo,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__photo { justify-self: stretch; border: 1px solid var(--cm-tis2-border); border-radius: var(--cm-tis2-radius); overflow: hidden; }
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--r54 .cm-tis2__photo,
.wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--r54 .cm-tis2__photo { aspect-ratio: 5 / 4; }
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--r45 .cm-tis2__photo,
.wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--r45 .cm-tis2__photo { aspect-ratio: 4 / 5; }
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--r11 .cm-tis2__photo,
.wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--r11 .cm-tis2__photo { aspect-ratio: 1 / 1; }

/* The words column: a flex column so the promises can sit centred in the room when there is no lead */
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__words,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__words { display: flex; flex-direction: column; justify-content: center; container-type: inline-size; } /* the promises query this column's width */
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--no-photo .cm-tis2__words,
.wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--no-photo .cm-tis2__words { max-width: var(--cm-tis2-words-max); } /* no photo: the words still read as a column, not a banner */
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__words > *,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__words > * { margin: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 p.cm-tis2__kicker,
.wp-block-w4ya-cm-txtimg-sidebyside2 p.cm-tis2__kicker { letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--cm-tis2-accent); } /* p: outranks the tracking reset above */
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__title,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__title { margin-top: 0.2em; font-weight: 600; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; }
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__lead,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__lead { margin-top: 0.6em; max-width: 40em; line-height: 1.5; }

/* The promises: an icon, a bold line and a sentence each, a hairline above each; one across, two across from a 26em-wide words column (below) */
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__promises,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__promises { display: grid; grid-template-columns: 1fr; gap: var(--cm-tis2-promise-gap) var(--cm-tis2-gap); margin-top: var(--cm-tis2-gap); padding: 0; list-style: none; }
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--no-lead .cm-tis2__promises,
.wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--no-lead .cm-tis2__promises { margin: auto 0; padding: var(--cm-tis2-gap) 0; } /* no lead: centred in the room between the title and the tag line (the auto margins split the spare room; the padding keeps the gaps when there is none) */
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--no-lead .cm-tis2__promises + .cm-tis2__tagline,
.wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--no-lead .cm-tis2__promises + .cm-tis2__tagline { margin-top: 0; } /* the promises' padding is the gap above the tag line then, so the room splits evenly (without promises the tag line keeps its margin) */
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__promise,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__promise { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6em; align-items: start; border-top: 1px solid var(--cm-tis2-rule); padding-top: 0.6em; }
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__promise > *,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__promise > * { margin: 0; grid-column: 2; }
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__icon,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__icon { grid-column: 1; grid-row: 1 / span 2; display: inline-flex; font-size: var(--cm-tis2-icon-size); line-height: 1; color: var(--cm-tis2-accent); } /* the icon is decoration (aria-hidden): the bold line carries the meaning */
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__heading,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__heading { font-weight: 600; line-height: 1.3; }
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__text,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__text { margin-top: 0.15em; line-height: 1.45; }

/* The tag line: the bar beside it (its own colour element, painted with currentColor), the words italic */
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__tagline,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__tagline { display: flex; gap: 1em; margin-top: var(--cm-tis2-gap); padding: 0; border: 0; font-style: italic; line-height: 1.5; }
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__bar,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__bar { flex: none; width: var(--cm-tis2-bar-width); border-radius: 2px; color: var(--cm-tis2-bar); background: currentColor; }
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__quote,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__quote { margin: 0; padding: 0.2em 0; }

/* The canvas stand-ins for a missing photo, title or promise words (the page prints none of them) */
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__placeholder,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__placeholder { opacity: 0.7; }
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__title.cm-tis2__placeholder,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__title.cm-tis2__placeholder { border: 1px dashed var(--cm-tis2-border); border-radius: 4px; padding: 0.2em 0.4em; }
.editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__photo.cm-tis2__placeholder,
.wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__photo.cm-tis2__placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: auto; min-height: 6em; border-style: dashed; padding: 1em; text-align: center; } /* a small dashed box, not a photo-sized one: the page prints no box at all (audit) */

/* Two promises across once the words column is 26em wide (its nearest container 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-txtimg-sidebyside2 .cm-tis2__promises,
    .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__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-txtimg-sidebyside2 .cm-tis2__grid,
    .wp-block-w4ya-cm-txtimg-sidebyside2 .cm-tis2__grid { grid-template-columns: var(--cm-tis2-photo-col) var(--cm-tis2-words-col); padding: var(--cm-tis2-section-pad-wide) 0; }
    .editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--photo-right .cm-tis2__grid,
    .wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--photo-right .cm-tis2__grid { grid-template-columns: var(--cm-tis2-words-col) var(--cm-tis2-photo-col); }
    .editor-styles-wrapper .wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--no-photo .cm-tis2__grid,
    .wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--no-photo .cm-tis2__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-txtimg-sidebyside2.cm-tis2--photo-right .cm-tis2__photo,
    .wp-block-w4ya-cm-txtimg-sidebyside2.cm-tis2--photo-right .cm-tis2__photo { order: 2; }
}