/* MK Hero Video v1.3.2
   Separate from the original mod_mk_hero.
   Video + static campaign typography over the moving image. */

.mk-hero-video {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
}

.mk-hero-video *,
.mk-hero-video *:before,
.mk-hero-video *:after {
    box-sizing: border-box;
}

.mk-hero-video__stage {
    position: relative;
    width: 100%;
    min-height: 420px;
    overflow: hidden;
    background: #e8e5e1;
}

.mk-hero-video__poster-wrap,
.mk-hero-video__poster,
.mk-hero-video__video {
    display: block;
    width: 100%;
    height: 100%;
}

.mk-hero-video__poster-wrap,
.mk-hero-video__video {
    position: absolute;
    inset: 0;
}

.mk-hero-video__poster {
    object-fit: cover;
    object-position: center center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.mk-hero-video__video {
    z-index: 2;
    border: 0;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 180ms ease;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    pointer-events: none;
}

/* Never present the hero as a native video player. */
.mk-hero-video__video::-webkit-media-controls,
.mk-hero-video__video::-webkit-media-controls-panel,
.mk-hero-video__video::-webkit-media-controls-play-button,
.mk-hero-video__video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
}

.mk-hero-video.is-video-playing .mk-hero-video__video {
    opacity: 1;
}

.mk-hero-video__clickzone {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: block;
}

.mk-hero-video__top-shade {
    position: absolute;
    z-index: 4;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.mk-hero-video--gradient-soft .mk-hero-video__top-shade {
    opacity: 1;
    background: linear-gradient(
        180deg,
        rgba(7, 10, 13, 0.72) 0%,
        rgba(7, 10, 13, 0.36) 25%,
        rgba(7, 10, 13, 0) 54%
    );
}

/* Exact final desktop fog length from MK Hero Header Balance v4: 224px. */
.mk-hero-video--gradient-medium .mk-hero-video__top-shade {
    opacity: 1;
    background-image: linear-gradient(
        180deg,
        rgba(2, 7, 11, .99) 0%,
        rgba(2, 7, 11, .95) 17%,
        rgba(2, 7, 11, .78) 38%,
        rgba(2, 7, 11, .51) 60%,
        rgba(2, 7, 11, .23) 80%,
        rgba(2, 7, 11, 0) 100%
    );
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 224px;
}

/* Video crop controls. */
.mk-hero-video__video--desktop-left-top { object-position: left top; }
.mk-hero-video__video--desktop-left-center { object-position: left center; }
.mk-hero-video__video--desktop-left-bottom { object-position: left bottom; }
.mk-hero-video__video--desktop-center-top { object-position: center top; }
.mk-hero-video__video--desktop-center-center { object-position: center center; }
.mk-hero-video__video--desktop-center-bottom { object-position: center bottom; }
.mk-hero-video__video--desktop-right-top { object-position: right top; }
.mk-hero-video__video--desktop-right-center { object-position: right center; }
.mk-hero-video__video--desktop-right-bottom { object-position: right bottom; }

/* Clean campaign typography over the moving video.
   Intentionally no panel, no shadow, no button and no decorative effects. */
.mk-hero-video__overlay {
    position: absolute;
    z-index: 6;
    /* One desktop copy block: title and description share the same width and anchor. */
    width: 620px;
    max-width: calc(100% - 96px);
    margin: 0;
    padding: 0;
    pointer-events: auto;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

/* The campaign copy itself is a real link when a destination is configured.
   On mobile this is intentionally the only clickable hero area, so a swipe/tap on the video
   never competes with Safari media behaviour. */
.mk-hero-video__overlay-link {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    pointer-events: auto;
}

.mk-hero-video__overlay-link:hover,
.mk-hero-video__overlay-link:focus,
.mk-hero-video__overlay-link:active {
    color: inherit !important;
    text-decoration: none !important;
    background: transparent !important;
}

.mk-hero-video__overlay-title {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: inherit !important;
    font-family: "GothamProMedium", "GothamProBold", Arial, Helvetica, sans-serif !important;
    font-size: clamp(38px, 3.55vw, 54px) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: 1.04 !important;
    letter-spacing: .025em !important;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
}

.mk-hero-video__overlay-text {
    display: block !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: inherit !important;
    font-family: "GothamProLight", "GothamProRegular", Arial, Helvetica, sans-serif !important;
    font-size: clamp(17px, 1.5vw, 23px) !important;
    font-weight: 300 !important;
    font-style: normal !important;
    line-height: 1.28 !important;
    letter-spacing: .015em !important;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased !important;
}

.mk-hero-video__overlay--desktop-white { color: #fff !important; }
.mk-hero-video__overlay--desktop-black { color: #0b0b0b !important; }

.mk-hero-video__overlay--desktop-right-lower {
    right: 5.5%;
    bottom: 7.5%;
    text-align: right;
}

.mk-hero-video__overlay--desktop-center-lower {
    left: 50%;
    bottom: 7.5%;
    transform: translateX(-50%);
    text-align: center;
}

.mk-hero-video__overlay--desktop-left-lower {
    left: 5.5%;
    bottom: 7.5%;
    text-align: left;
}

.mk-hero-video__overlay--desktop-right-center {
    right: 5.5%;
    top: 58%;
    transform: translateY(-50%);
    text-align: right;
}

.mk-hero-video__overlay--desktop-center-center {
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.mk-hero-video__overlay--desktop-left-center {
    left: 5.5%;
    top: 58%;
    transform: translateY(-50%);
    text-align: left;
}

@media (max-width: 860px) {
    .mk-hero-video__stage {
        min-height: 520px;
    }

    /* Exact final mobile fog length from MK Hero Header Balance v4: 178px. */
    .mk-hero-video--gradient-medium .mk-hero-video__top-shade {
        background-image: linear-gradient(
            180deg,
            rgba(2, 7, 11, .82) 0%,
            rgba(2, 7, 11, .68) 24%,
            rgba(2, 7, 11, .43) 52%,
            rgba(2, 7, 11, .19) 76%,
            rgba(2, 7, 11, 0) 100%
        );
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% 178px;
    }

    .mk-hero-video--gradient-soft .mk-hero-video__top-shade {
        background: linear-gradient(
            180deg,
            rgba(7, 10, 13, 0.72) 0%,
            rgba(7, 10, 13, 0.36) 22%,
            rgba(7, 10, 13, 0) 48%
        );
    }

    .mk-hero-video__video--mobile-left-top { object-position: left top; }
    .mk-hero-video__video--mobile-left-center { object-position: left center; }
    .mk-hero-video__video--mobile-left-bottom { object-position: left bottom; }
    .mk-hero-video__video--mobile-center-top { object-position: center top; }
    .mk-hero-video__video--mobile-center-center { object-position: center center; }
    .mk-hero-video__video--mobile-center-bottom { object-position: center bottom; }
    .mk-hero-video__video--mobile-right-top { object-position: right top; }
    .mk-hero-video__video--mobile-right-center { object-position: right center; }
    .mk-hero-video__video--mobile-right-bottom { object-position: right bottom; }

    .mk-hero-video__overlay {
        width: calc(100% - 48px);
        max-width: none;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .mk-hero-video__overlay-title {
        font-size: clamp(25px, 7vw, 32px) !important;
        font-weight: 500 !important;
        line-height: 1.05 !important;
        letter-spacing: .018em !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        color: inherit !important;
    }

    .mk-hero-video__overlay-text {
        margin-top: 10px !important;
        font-family: "GothamProRegular", "Gotham Pro Regular", Arial, Helvetica, sans-serif !important;
        font-size: clamp(12px, 3.6vw, 15px) !important;
        font-weight: 400 !important;
        line-height: 1.32 !important;
        letter-spacing: 0.02em !important;
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        color: inherit !important;
    }


    .mk-hero-video__overlay--mobile-white { color: #fff !important; }
    .mk-hero-video__overlay--mobile-black { color: #0b0b0b !important; }

    /* On phones the hero is visual media, not a giant invisible navigation button. */
    .mk-hero-video__clickzone {
        pointer-events: none !important;
    }

    .mk-hero-video__overlay--mobile-right-lower {
        right: 20px;
        bottom: 7.2%;
        left: auto;
        top: auto;
        transform: none;
        text-align: right;
    }

    .mk-hero-video__overlay--mobile-center-lower {
        left: 50%;
        right: auto;
        bottom: 7.2%;
        top: auto;
        transform: translateX(-50%);
        text-align: center;
    }

    .mk-hero-video__overlay--mobile-left-lower {
        left: 20px;
        right: auto;
        bottom: 7.2%;
        top: auto;
        transform: none;
        text-align: left;
    }

    .mk-hero-video__overlay--mobile-right-center {
        right: 20px;
        left: auto;
        top: 60%;
        bottom: auto;
        transform: translateY(-50%);
        text-align: right;
    }

    .mk-hero-video__overlay--mobile-center-center {
        left: 50%;
        right: auto;
        top: 60%;
        bottom: auto;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .mk-hero-video__overlay--mobile-left-center {
        left: 20px;
        right: auto;
        top: 60%;
        bottom: auto;
        transform: translateY(-50%);
        text-align: left;
    }
}