/**
 * CM Two Doors - the layout and the looks. Every colour and space is a --cm-twd-* 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's colour spans the page; the inner wrapper carries the width classes (the sibling blocks' width) and is the container
 * (cm-cqi-container) the panels query: the two panels go side by side from an 808px wrapper (the zu tier: 851 x 0.95 = 808.45). The
 * section's own padding is on the inner wrapper, and a container cannot query itself: that rule measures the torso (the page's width), so
 * it uses 851. A panel with a link is a door: the link's words are the link, its ::before covers the whole panel (its ::after is the arrow).
 */
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors,
.wp-block-w4ya-cm-two-doors {
    box-sizing: border-box;
    display: block;
    clear: both;
    position: relative;
    background: var(--cm-twd-bg);
    color: var(--cm-twd-text);
}
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors *,
.wp-block-w4ya-cm-two-doors * { box-sizing: border-box; }

.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__inner,
.wp-block-w4ya-cm-two-doors .cm-twd__inner { padding: var(--cm-twd-section-pad) 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__inner,
.wp-block-w4ya-cm-two-doors .cm-twd__inner,
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__inner p,
.wp-block-w4ya-cm-two-doors .cm-twd__inner p { letter-spacing: normal; } /* the z width classes set a tracking on the wrapper AND on every p inside it (.zu95 p) */

/* The heading: the kicker over the title */
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__head,
.wp-block-w4ya-cm-two-doors .cm-twd__head { margin-bottom: var(--cm-twd-head-gap); }
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__head > *,
.wp-block-w4ya-cm-two-doors .cm-twd__head > * { margin: 0; } /* the size classes carry a margin */
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors p.cm-twd__kicker,
.wp-block-w4ya-cm-two-doors p.cm-twd__kicker { letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--cm-twd-accent); } /* p: outranks the tracking reset above */
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__title,
.wp-block-w4ya-cm-two-doors .cm-twd__title { margin-top: 0.2em; color: var(--cm-twd-text); font-weight: 600; line-height: 1.2; text-wrap: balance; }

/* The panels: one per row, side by side from an 808px wrapper (below); each a white card with its picture across the top */
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__duo,
.wp-block-w4ya-cm-two-doors .cm-twd__duo { display: grid; grid-template-columns: 1fr; gap: var(--cm-twd-duo-gap); }
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__panel,
.wp-block-w4ya-cm-two-doors .cm-twd__panel { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--cm-twd-panel-bg); border: 1px solid var(--cm-twd-border); border-radius: var(--cm-twd-radius); }
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__photo,
.wp-block-w4ya-cm-two-doors .cm-twd__photo { aspect-ratio: var(--cm-twd-photo-ratio); overflow: hidden; background: var(--cm-twd-photo-bg); }
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__image,
.wp-block-w4ya-cm-two-doors .cm-twd__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__photo--contain .cm-twd__image,
.wp-block-w4ya-cm-two-doors .cm-twd__photo--contain .cm-twd__image { object-fit: contain; } /* a drawing sits whole in the strip on the box's own colour */
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__body,
.wp-block-w4ya-cm-two-doors .cm-twd__body { display: flex; flex: 1; flex-direction: column; gap: var(--cm-twd-body-gap); padding: var(--cm-twd-body-pad); }
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__body > *,
.wp-block-w4ya-cm-two-doors .cm-twd__body > * { margin: 0; } /* the size classes carry a margin; the gap spaces them */
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__panel-title,
.wp-block-w4ya-cm-two-doors .cm-twd__panel-title { color: var(--cm-twd-text); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__text,
.wp-block-w4ya-cm-two-doors .cm-twd__text { line-height: 1.5; overflow-wrap: anywhere; }
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__chips,
.wp-block-w4ya-cm-two-doors .cm-twd__chips { display: flex; flex-wrap: wrap; gap: var(--cm-twd-chip-gap); padding: 0; list-style: none; }
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__chip,
.wp-block-w4ya-cm-two-doors .cm-twd__chip { margin: 0; padding: var(--cm-twd-chip-pad); border: 1px solid var(--cm-twd-border); border-radius: var(--cm-twd-radius-pill); line-height: 1.3; overflow-wrap: anywhere; }
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__go,
.wp-block-w4ya-cm-two-doors .cm-twd__go { align-self: flex-start; color: var(--cm-twd-accent); font-weight: 600; line-height: 1.2; text-decoration: none; }
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__chips,
.wp-block-w4ya-cm-two-doors .cm-twd__chips,
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__go,
.wp-block-w4ya-cm-two-doors .cm-twd__go { margin-top: auto; } /* the tags (or the link line alone) take the spare room above them, so both panels' feet line up whatever each one holds */
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__chips + .cm-twd__go,
.wp-block-w4ya-cm-two-doors .cm-twd__chips + .cm-twd__go { margin-top: 0; } /* after the tags, the gap alone */
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__go::after,
.wp-block-w4ya-cm-two-doors .cm-twd__go::after { content: var(--cm-twd-go-arrow); }
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors a.cm-twd__go::before,
.wp-block-w4ya-cm-two-doors a.cm-twd__go::before { content: ""; position: absolute; inset: 0; } /* the whole panel is the door (the panel is the positioned ancestor) */

/* The canvas stand-ins for a panel's missing picture, title, words or link (the page prints none of them) */
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__placeholder,
.wp-block-w4ya-cm-two-doors .cm-twd__placeholder { opacity: 0.7; border: 1px dashed var(--cm-twd-border); border-radius: var(--cm-twd-radius); padding: 0.3em 0.5em; }
.editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__photo.cm-twd__placeholder,
.wp-block-w4ya-cm-two-doors .cm-twd__photo.cm-twd__placeholder { display: flex; align-items: center; justify-content: center; border-radius: 0; padding: 1em; text-align: center; }

@container (min-width: 808px) { /* measured on the inner wrapper */
    .editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__duo,
    .wp-block-w4ya-cm-two-doors .cm-twd__duo { grid-template-columns: repeat(2, 1fr); }
    .editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__duo > :only-child,
    .wp-block-w4ya-cm-two-doors .cm-twd__duo > :only-child { grid-column: 1 / -1; } /* one panel alone takes the whole row */
}
@container (min-width: 851px) { /* measured on the torso, not the inner wrapper (see the head comment) */
    .editor-styles-wrapper .wp-block-w4ya-cm-two-doors .cm-twd__inner,
    .wp-block-w4ya-cm-two-doors .cm-twd__inner { padding: var(--cm-twd-section-pad-wide) 0; }
}