/**
 * CM Reality Show - the layout and the looks. Every colour and space is a --cm-rsh-* variable: defaults from config.php
 * (build_global_css_properties), a site's own values from its site-specific.css, the episodes-across choice inline from the panel.
 * 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 episode across, two from a 523px
 * wrapper (= its width on a 551px page, the zm tier), the panel's number from 950px (the zt tier starts at 1001px x 0.95 = 950.95);
 * the section pads more from 808px (zu).
 */
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show,
.wp-block-w4ya-cm-reality-show {
    box-sizing: border-box;
    display: block;
    clear: both;
    position: relative;
    background: var(--cm-rsh-bg);
    color: var(--cm-rsh-text);
}
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show *,
.wp-block-w4ya-cm-reality-show * { box-sizing: border-box; }

.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__inner,
.wp-block-w4ya-cm-reality-show .cm-rsh__inner { padding: var(--cm-rsh-section-pad) 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__inner,
.wp-block-w4ya-cm-reality-show .cm-rsh__inner,
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__inner p,
.wp-block-w4ya-cm-reality-show .cm-rsh__inner p { letter-spacing: normal; } /* the z width classes set a tracking on the wrapper AND on every p inside it (.zt95 p) */

/* The heading row: the words left, the all-episodes link right on their shared baseline; the link drops under the words when the row is narrow */
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__head,
.wp-block-w4ya-cm-reality-show .cm-rsh__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--cm-rsh-head-row-gap) var(--cm-rsh-gap); margin-bottom: var(--cm-rsh-head-gap); }
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__words > *,
.wp-block-w4ya-cm-reality-show .cm-rsh__words > * { margin: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show p.cm-rsh__kicker,
.wp-block-w4ya-cm-reality-show p.cm-rsh__kicker { letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--cm-rsh-accent); } /* p: outranks the tracking reset above */
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__title,
.wp-block-w4ya-cm-reality-show .cm-rsh__title { margin-top: 0.2em; color: var(--cm-rsh-text); font-weight: 600; line-height: 1.2; text-wrap: balance; }
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__lead,
.wp-block-w4ya-cm-reality-show .cm-rsh__lead { margin-top: 0.6em; max-width: 40em; line-height: 1.5; }
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__more,
.wp-block-w4ya-cm-reality-show .cm-rsh__more { font-weight: 600; color: var(--cm-rsh-accent); text-decoration: none; border-bottom: var(--cm-rsh-more-rule-width) solid var(--cm-rsh-more-rule); padding-bottom: var(--cm-rsh-more-rule-width); }

/* The episodes: one across, then two, then the panel's number (below); each card a link with the picture, the title and the line */
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__episodes,
.wp-block-w4ya-cm-reality-show .cm-rsh__episodes { display: grid; grid-template-columns: 1fr; gap: var(--cm-rsh-gap); margin: 0; padding: 0; list-style: none; }
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__link,
.wp-block-w4ya-cm-reality-show .cm-rsh__link { display: flex; flex-direction: column; gap: var(--cm-rsh-card-gap); color: var(--cm-rsh-text); text-decoration: none; }
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__link:hover .cm-rsh__ep-title,
.wp-block-w4ya-cm-reality-show .cm-rsh__link:hover .cm-rsh__ep-title { text-decoration: underline; }
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__link:focus-visible,
.wp-block-w4ya-cm-reality-show .cm-rsh__link:focus-visible { outline: 2px solid var(--cm-rsh-accent); outline-offset: 3px; border-radius: var(--cm-rsh-radius); }
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__frame,
.wp-block-w4ya-cm-reality-show .cm-rsh__frame {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--cm-rsh-border);
    border-radius: var(--cm-rsh-radius);
    overflow: hidden;
    background: var(--cm-rsh-frame-bg);
}
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__thumb,
.wp-block-w4ya-cm-reality-show .cm-rsh__thumb { display: block; width: 100%; height: 100%; object-fit: cover; } /* the 480x360 picture's bars are exactly what the 16:9 frame crops */
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__play,
.wp-block-w4ya-cm-reality-show .cm-rsh__play { position: absolute; inset: 0; margin: auto; width: var(--cm-rsh-badge-w); height: var(--cm-rsh-badge-h); background: var(--cm-rsh-badge); border-radius: var(--cm-rsh-badge-radius); }
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__play::after,
.wp-block-w4ya-cm-reality-show .cm-rsh__play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: calc(var(--cm-rsh-badge-h) * 0.22) 0 calc(var(--cm-rsh-badge-h) * 0.22) calc(var(--cm-rsh-badge-h) * 0.38); border-color: transparent transparent transparent var(--cm-rsh-badge-text); }
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__ep-title,
.wp-block-w4ya-cm-reality-show .cm-rsh__ep-title { font-weight: 600; line-height: 1.35; }
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__note,
.wp-block-w4ya-cm-reality-show .cm-rsh__note { line-height: 1.4; }

/* The canvas stand-in for an episode without a YouTube link or a title (the page prints neither) */
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__placeholder,
.wp-block-w4ya-cm-reality-show .cm-rsh__placeholder { opacity: 0.7; }
.editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__frame.cm-rsh__placeholder,
.wp-block-w4ya-cm-reality-show .cm-rsh__frame.cm-rsh__placeholder { display: flex; align-items: center; justify-content: center; border-style: dashed; background: transparent; padding: 1em; text-align: center; }

@container (min-width: 523px) {
    .editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__episodes,
    .wp-block-w4ya-cm-reality-show .cm-rsh__episodes { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 808px) {
    .editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__inner,
    .wp-block-w4ya-cm-reality-show .cm-rsh__inner { padding: var(--cm-rsh-section-pad-wide) 0; }
}
@container (min-width: 950px) {
    .editor-styles-wrapper .wp-block-w4ya-cm-reality-show .cm-rsh__episodes,
    .wp-block-w4ya-cm-reality-show .cm-rsh__episodes { grid-template-columns: repeat(var(--cm-rsh-across), 1fr); }
}