/* okitoki-v4 — embedded video block (v3 video-block, it-tools video). */

.v-video { display: grid; justify-items: center; gap: var(--v-space-lg); }
/* Prose spans the frame width, left-aligned as on the current site. */
.v-video__text { width: 100%; max-width: var(--v-container-lg); }
.v-video__frame {
    width: 100%;
    max-width: var(--v-container-lg);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--v-radius-lg);
    background: rgb(var(--v-color-black));
    box-shadow: var(--v-shadow);
}
.v-video__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.v-section--primary .v-video__text { color: rgba(var(--v-color-white), .9); }
/* The wave image has transparent crests (up to ~8% of its height on each edge): pad the
 * blue video band so the heading and the buttons stay on the blue. */
/* Cover scaling makes the crests ~100px tall on narrow screens, hence the floor. */
.v-section--primary:has(> .v-section__part > .v-video) { padding-block: max(var(--v-section-gap), var(--v-space-3xl)); }