/**
 * CM Film Band - the layout and the looks. Every colour and space is a --cm-flm-* 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; the headline is its size
 * class times a scale variable per layout. Two-selector rule.
 * The section spans the page and has NO colour and NO clip of its own: .cm-flm__ground carries the ground's colour and holds the words
 * and the frame; in the "under" layout the frame is pulled down over the ground's bottom edge by a SHARE of its own height
 * (--cm-flm-overhang-share), and .cm-flm__under, the next strip in normal flow, makes the room with the same expression as its top
 * padding, so the block after this one is never covered. The expression reads the frame's width as min(--cm-flm-frame-max, 100cqi):
 * both inner wrappers carry the same width classes and are containers of the same width.
 * The inner wrapper is the container the band measures: the "beside" columns stand side by side from 808 px of it. The ground's own
 * padding is set outside that container, and so measures the torso (the page's width): that rule uses 851.
 */
.editor-styles-wrapper .wp-block-w4ya-cm-film-band,
.wp-block-w4ya-cm-film-band { box-sizing: border-box; display: block; clear: both; position: relative; --cm-flm-over: calc(min(var(--cm-flm-frame-max), 100cqi) * 0.5625 * var(--cm-flm-overhang-share)); }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band *,
.wp-block-w4ya-cm-film-band * { box-sizing: border-box; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--dark,
.wp-block-w4ya-cm-film-band.cm-flm--dark { --cm-flm-bg: var(--cm-flm-dark-bg); --cm-flm-title: var(--cm-flm-dark-title); --cm-flm-text: var(--cm-flm-dark-text); --cm-flm-kicker: var(--cm-flm-dark-kicker); --cm-flm-rule: var(--cm-flm-dark-rule); }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--tinted,
.wp-block-w4ya-cm-film-band.cm-flm--tinted { --cm-flm-bg: var(--cm-flm-tinted-bg); --cm-flm-title: var(--cm-flm-tinted-title); --cm-flm-text: var(--cm-flm-tinted-text); --cm-flm-kicker: var(--cm-flm-tinted-kicker); --cm-flm-rule: var(--cm-flm-tinted-rule); }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--plain,
.wp-block-w4ya-cm-film-band.cm-flm--plain { --cm-flm-bg: var(--cm-flm-plain-bg); --cm-flm-title: var(--cm-flm-plain-title); --cm-flm-text: var(--cm-flm-plain-text); --cm-flm-kicker: var(--cm-flm-plain-kicker); --cm-flm-rule: var(--cm-flm-plain-rule); }

.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__ground,
.wp-block-w4ya-cm-film-band .cm-flm__ground { padding: var(--cm-flm-pad) 0; background: var(--cm-flm-bg); color: var(--cm-flm-text); border-top: 1px solid var(--cm-flm-rule); border-bottom: 1px solid var(--cm-flm-rule); }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--under.cm-flm--framed .cm-flm__ground,
.wp-block-w4ya-cm-film-band.cm-flm--under.cm-flm--framed .cm-flm__ground { padding-bottom: 0; border-bottom: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__inner,
.wp-block-w4ya-cm-film-band .cm-flm__inner,
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__inner p,
.wp-block-w4ya-cm-film-band .cm-flm__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-film-band .cm-flm__inner :where(p, h1, h2),
.wp-block-w4ya-cm-film-band .cm-flm__inner :where(p, h1, h2) { margin: 0; } /* the size classes and the theme carry margins */
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__row,
.wp-block-w4ya-cm-film-band .cm-flm__row { display: flow-root; } /* the frame's negative margin shortens the row; it never collapses out through it */

/* The words */
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__words,
.wp-block-w4ya-cm-film-band .cm-flm__words { min-width: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__words,
.wp-block-w4ya-cm-film-band .cm-flm__words,
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__caption,
.wp-block-w4ya-cm-film-band .cm-flm__caption { overflow-wrap: break-word; } /* a word longer than the band breaks rather than leave it */
.editor-styles-wrapper .wp-block-w4ya-cm-film-band p.cm-flm__kicker,
.wp-block-w4ya-cm-film-band p.cm-flm__kicker { font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-flm-kicker); } /* p: outranks the tracking reset above */
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__title,
.wp-block-w4ya-cm-film-band .cm-flm__title { margin-top: 0.3em; color: var(--cm-flm-title); font-weight: 500; line-height: 1.12; letter-spacing: 0; text-wrap: balance; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__title:first-child,
.wp-block-w4ya-cm-film-band .cm-flm__title:first-child { margin-top: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__title-text,
.wp-block-w4ya-cm-film-band .cm-flm__title-text { display: block; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__lead,
.wp-block-w4ya-cm-film-band .cm-flm__lead { margin-top: 0.8em; line-height: 1.55; color: var(--cm-flm-text); }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__lead:first-child,
.wp-block-w4ya-cm-film-band .cm-flm__lead:first-child { margin-top: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__closing,
.wp-block-w4ya-cm-film-band .cm-flm__closing { margin-top: 0.8em; font-weight: 500; line-height: 1.55; color: var(--cm-flm-text); }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__closing:first-child,
.wp-block-w4ya-cm-film-band .cm-flm__closing:first-child { margin-top: 0; }

/* The frame: the still, the label and the length on a dark backing, the play badge */
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__frame,
.wp-block-w4ya-cm-film-band .cm-flm__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--cm-flm-frame-radius); background: var(--cm-flm-frame-bg); text-decoration: none; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__frame:focus-visible,
.wp-block-w4ya-cm-film-band .cm-flm__frame:focus-visible { outline: 3px solid var(--cm-flm-focus-outer); outline-offset: 3px; box-shadow: 0 0 0 3px var(--cm-flm-focus-inner); }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__frame .cm-flm__image,
.wp-block-w4ya-cm-film-band .cm-flm__frame .cm-flm__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__label,
.wp-block-w4ya-cm-film-band .cm-flm__label,
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__length,
.wp-block-w4ya-cm-film-band .cm-flm__length { position: absolute; top: var(--cm-flm-badge-inset); padding: 0.3em 0.75em; border-radius: 4px; background: var(--cm-flm-badge-bg); font-weight: 500; line-height: 1.35; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__label,
.wp-block-w4ya-cm-film-band .cm-flm__label { left: var(--cm-flm-badge-inset); max-width: 58%; color: var(--cm-flm-label-text); letter-spacing: 0.12em; text-transform: uppercase; overflow-wrap: anywhere; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__length,
.wp-block-w4ya-cm-film-band .cm-flm__length { right: var(--cm-flm-badge-inset); color: var(--cm-flm-badge-text); white-space: nowrap; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__play,
.wp-block-w4ya-cm-film-band .cm-flm__play { position: absolute; inset: 0; margin: auto; width: var(--cm-flm-play-width); aspect-ratio: 86 / 60; background: var(--cm-flm-play); border-radius: 18% / 26%; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__play::after,
.wp-block-w4ya-cm-film-band .cm-flm__play::after { content: ""; position: absolute; inset: 28% 35% 28% 39%; background: var(--cm-flm-play-text); clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* The canvas stand-ins (the page prints none) */
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__placeholder,
.wp-block-w4ya-cm-film-band .cm-flm__placeholder { opacity: 0.75; border: 1px dashed currentColor; border-radius: 4px; padding: 0.3em 0.5em; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__row > .cm-flm__placeholder:not(:first-child),
.wp-block-w4ya-cm-film-band .cm-flm__row > .cm-flm__placeholder:not(:first-child) { margin-top: 1em; }

/* "Film under the words": the words centred, the frame under them hanging over the ground's bottom edge, the caption in the strip under it */
.editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--under .cm-flm__words,
.wp-block-w4ya-cm-film-band.cm-flm--under .cm-flm__words { max-width: var(--cm-flm-words-max); margin: 0 auto; text-align: center; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--under .cm-flm__title-text,
.wp-block-w4ya-cm-film-band.cm-flm--under .cm-flm__title-text { display: block; max-width: var(--cm-flm-title-max); margin-left: auto; margin-right: auto; font-size: calc(1em * var(--cm-flm-title-scale-under)); }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--under .cm-flm__lead,
.wp-block-w4ya-cm-film-band.cm-flm--under .cm-flm__lead { max-width: var(--cm-flm-lead-max); margin-left: auto; margin-right: auto; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--under .cm-flm__frame,
.wp-block-w4ya-cm-film-band.cm-flm--under .cm-flm__frame { z-index: 1; width: min(100%, var(--cm-flm-frame-max)); margin: var(--cm-flm-frame-gap) auto calc(-1 * var(--cm-flm-over)); border: var(--cm-flm-frame-rim-width) solid var(--cm-flm-frame-rim); box-shadow: var(--cm-flm-frame-shadow); }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--under .cm-flm__frame:first-child,
.wp-block-w4ya-cm-film-band.cm-flm--under .cm-flm__frame:first-child { margin-top: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--under .cm-flm__frame:focus-visible,
.wp-block-w4ya-cm-film-band.cm-flm--under .cm-flm__frame:focus-visible { box-shadow: 0 0 0 3px var(--cm-flm-focus-inner), var(--cm-flm-frame-shadow); }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__under,
.wp-block-w4ya-cm-film-band .cm-flm__under { background: var(--cm-flm-under-bg); color: var(--cm-flm-under-text); }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__room,
.wp-block-w4ya-cm-film-band .cm-flm__room { padding: calc(var(--cm-flm-over) + var(--cm-flm-under-gap)) 0 var(--cm-flm-under-pad); text-align: center; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__room:empty,
.wp-block-w4ya-cm-film-band .cm-flm__room:empty { padding-bottom: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__caption,
.wp-block-w4ya-cm-film-band .cm-flm__caption { max-width: var(--cm-flm-caption-max); margin: 0 auto; line-height: 1.5; }

/* "Film beside the words": one column (the words, then the frame) until the band is 808 px wide, then two equal columns */
.editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--beside .cm-flm__row,
.wp-block-w4ya-cm-film-band.cm-flm--beside .cm-flm__row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--cm-flm-stack-gap); }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--beside .cm-flm__title-text,
.wp-block-w4ya-cm-film-band.cm-flm--beside .cm-flm__title-text { font-size: calc(1em * var(--cm-flm-title-scale-beside)); }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--beside .cm-flm__frame,
.wp-block-w4ya-cm-film-band.cm-flm--beside .cm-flm__frame { border: 1px solid var(--cm-flm-frame-line); }
.editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--beside .cm-flm__row:not(:has(> .cm-flm__frame)) > .cm-flm__words,
.wp-block-w4ya-cm-film-band.cm-flm--beside .cm-flm__row:not(:has(> .cm-flm__frame)) > .cm-flm__words { max-width: var(--cm-flm-solo-max); } /* the words alone (no film yet) keep a readable line */

@container (min-width: 808px) { /* the inner wrapper's own width */
    .editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--under .cm-flm__title-text,
    .wp-block-w4ya-cm-film-band.cm-flm--under .cm-flm__title-text { font-size: calc(1em * var(--cm-flm-title-scale-under-wide)); }
    .editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--beside .cm-flm__row:has(> .cm-flm__words):has(> .cm-flm__frame),
    .wp-block-w4ya-cm-film-band.cm-flm--beside .cm-flm__row:has(> .cm-flm__words):has(> .cm-flm__frame) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cm-flm-gap); }
    .editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--beside .cm-flm__title-text,
    .wp-block-w4ya-cm-film-band.cm-flm--beside .cm-flm__title-text { font-size: calc(1em * var(--cm-flm-title-scale-beside-wide)); }
}
@container (min-width: 851px) { /* measured on the torso, not the inner wrapper (see the head comment) */
    .editor-styles-wrapper .wp-block-w4ya-cm-film-band .cm-flm__ground,
    .wp-block-w4ya-cm-film-band .cm-flm__ground { padding: var(--cm-flm-pad-wide) 0; }
    .editor-styles-wrapper .wp-block-w4ya-cm-film-band.cm-flm--under.cm-flm--framed .cm-flm__ground,
    .wp-block-w4ya-cm-film-band.cm-flm--under.cm-flm--framed .cm-flm__ground { padding-bottom: 0; }
}
