/* NOTE: VIDEO HERO (inc/new/sections/video-hero.php). Phones and tablets: the video on top, title and card
   under it on black. Desktop (1100px and up): the video fills the section, about 90% of the screen high (more
   if the card needs it); the title on the left and the card floating on the right are centered vertically on
   each other, about two thirds down the video (four fifths on screens wider than the video).
   Under it (.kmd-video-hero-details): product photo next to the color picker and services. */

.kmd-video-hero {
    position: relative;
    background: var(--kmd-premium-ink);
    color: var(--kmd-white);
}

.kmd-video-hero__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--kmd-black);
}

.kmd-video-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kmd-video-hero__toggle {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: var(--kmd-white);
    cursor: pointer;
}

.kmd-video-hero__toggle:hover {
    background: rgba(0, 0, 0, .7);
}

.kmd-video-hero__toggle[aria-pressed="false"] .kmd-video-hero__icon-play,
.kmd-video-hero__toggle[aria-pressed="true"] .kmd-video-hero__icon-pause {
    display: none;
}

.kmd-video-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-block: 28px 40px;
}

.kmd-video-hero__intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kmd-video-hero .kmd-breadcrumbs ol {
    color: var(--kmd-dark-text);
}

.kmd-video-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kmd-video-hero__title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.15;
}

.kmd-video-hero__subtitle {
    max-width: 620px;
    color: var(--kmd-dark-text);
    font-size: 18px;
    line-height: 1.5;
}

.kmd-video-hero__reviews {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    color: var(--kmd-white);
    font-size: 14px;
}

.kmd-video-hero__reviews:hover {
    color: var(--kmd-white);
}

.kmd-video-hero__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background: var(--kmd-white);
    color: var(--kmd-ink);
}

@media screen and (min-width: 1100px) {
    .kmd-video-hero {
        min-height: 90vh;
        min-height: 90svh;
    }

    .kmd-video-hero__media {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }

    /* darker towards the bottom left, where the title sits */
    .kmd-video-hero__media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .15) 55%, rgba(0, 0, 0, 0) 100%),
            linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 45%);
        pointer-events: none;
    }

    .kmd-video-hero__toggle {
        right: auto;
        left: max(var(--kmd-gutter), calc((100% - var(--kmd-container)) / 2 + var(--kmd-gutter)));
        bottom: 24px;
    }

    /* title and card share the middle row, centered on each other; the empty rows above and below split the
       free height 2:1, so the pair sits about two thirds down the video */
    .kmd-video-hero__inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 680px) 380px;
        grid-template-rows: 2fr auto 1fr;
        align-items: center;
        justify-content: space-between;
        column-gap: 48px;
        row-gap: 0;
        min-height: 90vh;
        min-height: 90svh;
        padding-block: 48px 88px;
    }

    .kmd-video-hero__intro,
    .kmd-video-hero__card {
        grid-row: 2;
    }

    .kmd-video-hero__intro {
        text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
    }

    .kmd-video-hero__title {
        font-size: 48px;
    }

    .kmd-video-hero__card {
        box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    }
}

/* a wider row on large screens, so the title and the card sit closer to the edges of the video */
@media screen and (min-width: 1440px) {
    .kmd-video-hero__inner {
        max-width: 1400px;
    }

    .kmd-video-hero__toggle {
        left: calc((100% - 1400px) / 2 + var(--kmd-gutter));
    }
}

/* screens wider than the video (1920px): the section gets taller, so the pair moves lower, about four
   fifths down (free height split 4:1) */
@media screen and (min-width: 1921px) {
    .kmd-video-hero__inner {
        grid-template-rows: 4fr auto 1fr;
    }
}

/* NOTE: UNDER THE VIDEO, laid out like the product hero body (css/new/product-hero.css) */

.kmd-video-hero-details__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
}

.kmd-video-hero-details__media {
    flex: 1 1 520px;
    min-width: 0;
}

.kmd-video-hero-details__aside {
    display: flex;
    flex: 1 1 380px;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* the product photo sits at the left edge of its frame (desktop, next to the aside); centered when the columns
   stack, like on the other product pages */
.kmd-video-hero-details .kmd-product-gallery__main {
    justify-content: flex-start;
}

.kmd-video-hero-details .kmd-product-gallery__main img {
    object-position: left center;
}

@media screen and (max-width: 899px) {
    .kmd-video-hero-details .kmd-product-gallery__main {
        justify-content: center;
    }

    .kmd-video-hero-details .kmd-product-gallery__main img {
        object-position: center;
    }
}

/* desktop: two equal columns, the photo on the left and, on the right, the color picker, the services and
   then the gallery thumbnails (moved out of the photo column; on phones they stay under the photo) */
@media screen and (min-width: 900px) {
    .kmd-video-hero-details__inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto auto 1fr;
        align-items: start;
        gap: 20px 40px;
    }

    .kmd-video-hero-details__media,
    .kmd-video-hero-details .kmd-product-gallery,
    .kmd-video-hero-details__aside {
        display: contents;
    }

    .kmd-video-hero-details .kmd-product-gallery__main {
        grid-column: 1;
        grid-row: 1 / -1;
    }

    .kmd-video-hero-details__aside > *,
    .kmd-video-hero-details .kmd-product-gallery__thumbs {
        grid-column: 2;
    }

    .kmd-video-hero-details .kmd-product-gallery__thumbs {
        order: 1;
    }
}

@media screen and (max-width: 767px) {
    .kmd-video-hero-details__media,
    .kmd-video-hero-details__aside {
        flex-basis: 100%;
    }

    .kmd-video-hero__title {
        font-size: 28px;
    }

    .kmd-video-hero__subtitle {
        font-size: 16px;
    }

    .kmd-video-hero__card {
        margin-inline: calc(var(--kmd-gutter) * -1);
        padding: 20px var(--kmd-gutter);
    }
}