/* ==========================================================================
   NoyonPress — Hero Video Section  |  hero-video.css
   ========================================================================== */

/* ── Elementor widget wrapper reset ── */
.elementor-widget-np_hero_video,
.elementor-widget-np_hero_video > .elementor-widget-container {
    display: block;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0;
    font-size: 0;
}

/* ── Section wrapper ── */
.np-hero-video {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    /* min-height set by Elementor slider control */
}

/* ── <video> — full cover, no interaction ── */
.np-hero-video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    pointer-events: none;   /* belt */
    z-index: 0;
}

/*
 * ── Controls blocker ──────────────────────────────────────────────────────
 *
 * The only 100% cross-browser way to suppress native video controls is to
 * prevent the browser from ever receiving mouse/touch events on the <video>.
 * CSS ::-webkit-media-controls pseudo-selectors are unreliable in Chrome 108+
 * and completely unavailable in Firefox.
 *
 * This transparent <div class="np-hero-video__blocker"> sits in the exact same
 * stacking position as the video (z-index 1, below the overlay at z-index 2)
 * and absorbs all pointer events — the video element never gets hover or focus,
 * so controls never appear.
 */
.np-hero-video__blocker {
    position: absolute;
    inset: 0;
    z-index: 1;             /* above video (0), below overlay (2) */
    cursor: default;
    /* pointer-events: auto is the default — intentionally NOT set to none */
}

/* ── Color/gradient overlay ── */
.np-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #000;
    opacity: 0.45;
    pointer-events: none;
}

/* ── Content layer ── */
.np-hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: 100%;
    font-size: initial;
    line-height: initial;
}

.np-hero-inner {
    width: 100%;
    max-width: 1200px;
}

/* ── Mobile: poster-only mode ── */
@media (max-width: 767px) {
    .np-hero-video--no-mobile-video .np-hero-video__media,
    .np-hero-video--no-mobile-video .np-hero-video__blocker {
        display: none;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .np-hero-video__media { animation: none !important; }
}