/* Video block — self-hosted player / ambient background.
 * kabdalis2 design system (tokens via body[data-dir], warm-direction fallbacks).
 *
 * The poster is rendered by the <video poster> attribute, so it fills the frame
 * (object-fit:cover) before the clip loads and is the fallback when autoplay is
 * blocked (reduced-motion / Save-Data / phones). view.js handles the loading. */

.kab-video {
    margin: 24px 0;
}

.kab-video__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;          /* overridden inline per the chosen ratio */
    overflow: hidden;
    background: var(--surface2, #f5f1ea);
}

.kab-video.is-rounded .kab-video__frame {
    border-radius: var(--radius, 14px);
}

.kab-video__el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--surface2, #f5f1ea);
}

/* Inline players are not cropped — show the whole frame (letterbox if needed).
 * Ambient backgrounds stay object-fit:cover so they always fill the frame. */
.kab-video--inline .kab-video__el {
    object-fit: contain;
    background: #000;
}

.kab-video__caption {
    margin: 10px 2px 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ink-soft, #564e42);
}

/* Editor placeholder (no video selected yet). */
.kab-video__placeholder {
    display: grid;
    place-items: center;
    border: 1px dashed var(--line, #e4ded2);
    background: var(--surface, #fffdf9);
}

/* Ambient clip when autoplay is suppressed — view.js adds .is-poster so the
 * poster reads as intentional stillness rather than a stalled player. */
.kab-video--bg.is-poster .kab-video__el {
    /* nothing to do beyond showing the poster; hook kept for future treatment */
}