function initMinimalVideoControls(root = document) {
    const wraps = root.querySelectorAll('[data-video-minimal="1"]');

    wraps.forEach((wrap) => {
        const video = wrap.querySelector("video");
        const btn = wrap.querySelector(".video-block__play");
        if (!video || !btn) return;

        const hide = () => btn.classList.add("is-hidden");
        const show = () => btn.classList.remove("is-hidden");

        // Initial state: if already playing (rare), hide overlay
        if (!video.paused && !video.ended) {
            hide();
        } else {
            show();
        }

        btn.addEventListener("click", async () => {
            try {
                await video.play();
            } catch (e) {
                // If playback fails (browser policy), keep overlay visible
                show();
            }
        });

        video.addEventListener("play", hide);
        video.addEventListener("pause", show);
        video.addEventListener("ended", show);

        // Optional: clicking the video toggles pause/play
        video.addEventListener("click", () => {
            if (video.paused || video.ended) {
                video.play().catch(() => {});
            } else {
                video.pause();
            }
        });
    });
}

document.addEventListener("DOMContentLoaded", () => initMinimalVideoControls());