/* Match the translucent, centered awards on the Turing Tumble hero. */
#spinHome #hero { position: relative; }
#spinHome #hero, #BoBHome #hero {
    --hero-award-height: min(11vw, 12vh, 120px);
}
#spinHome #hero .hero-video-container { height: 100%; }
#spinHome #hero #hero-container,
#BoBHome #hero #hero-container {
    height: calc(100% - var(--hero-award-height) - 36px);
}
#spinHome #hero #hero-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3vh;
    transform: none;
}
#spinHome #hero #hero-container > .mx-auto { width: 90%; }
#spinHome #hero .hero-pic {
    margin-top: 0;
    padding-bottom: 0;
    height: 32vh;
}
#spinHome #hero .play-button {
    container-type: inline-size;
    width: min(380px, 78vw, 58vh);
    aspect-ratio: 450 / 173;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
}
#spinHome #hero .play-button-pic,
#spinHome #hero .play-button-hover-pic { width: 100%; }
#spinHome #hero .play-button-text {
    margin-top: 0;
    top: 16%;
    font-size: 6.2cqw;
}
#spinHome.fr #hero .play-button-text { font-size: 4.7cqw; }
#spinHome.de #hero .play-button-text { font-size: 5.3cqw; }
#BoBHome #hero .title-box {
    top: 50%;
    width: 100%;
    padding: 0 6%;
}
#BoBHome #hero .hero-pic { max-height: 23vh; object-fit: contain; }
#BoBHome #hero .hero-subtitle-pic { max-height: 12vh; object-fit: contain; }
#BoBHome #hero .spanish-hero-logo { max-height: 32vh; }
#BoBHome #hero .play-button { margin: 2vh 0 0; }
/* The French artwork has 137px of left padding in its 1739px canvas.
   Display the same 1594:500 sign area as the other translated buttons. */
#BoBHome.fr #hero .play-button-pic,
#BoBHome.fr #hero .play-button-hover-pic,
#BoBHome.fr #hero .play-button-pic-sizing {
    width: min(340px, 70vw, 41.444vh);
    aspect-ratio: 1594 / 500;
    height: auto;
    object-fit: cover;
    object-position: 94.48% center;
}
#BoBHome #hero .play-button-pic,
#BoBHome #hero .play-button-hover-pic,
#BoBHome #hero .play-button-pic-sizing {
    width: min(340px, 70vw, 50vh);
    min-width: 0;
    max-height: 13vh;
}
/* Full desktop: retain the original published hero dimensions. Compact
   sizing above is only needed on narrower or shorter windows. */
@media (min-width: 1200px) and (min-height: 800px) {
    #BoBHome #hero #hero-container { height: 100%; }
    #BoBHome #hero .title-box {
        top: 50%;
        width: 110%;
        padding: 4vw 10%;
    }
    #BoBHome #hero .hero-pic { max-height: 25vh; }
    #BoBHome #hero .hero-subtitle-pic { max-height: 18vh; }
    #BoBHome #hero .spanish-hero-logo { max-height: 43vh; }
    #BoBHome #hero .play-button { margin: 3vh 0; }
    #BoBHome #hero .play-button-pic,
    #BoBHome #hero .play-button-hover-pic,
    #BoBHome #hero .play-button-pic-sizing,
    #BoBHome.fr #hero .play-button-pic,
    #BoBHome.fr #hero .play-button-hover-pic,
    #BoBHome.fr #hero .play-button-pic-sizing {
        width: var(--play-button-pic-width);
        min-width: 170px;
        max-width: 450px;
        max-height: 18vh;
    }
}
.product-hero-awards {
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2.5vw, 40px);
    padding: 0 12px;
    z-index: 2;
}
.product-hero-award {
    position: relative;
    flex: 0 0 auto;
    height: min(11vw, 12vh, 120px);
    overflow: hidden;
    opacity: 0.75;
}
.product-hero-award-compact {
    height: min(9.9vw, 10.8vh, 108px);
}
.product-hero-award img {
    position: absolute;
    display: block;
    max-width: none;
}

#BoBHome.fr #hero .play-button-pic {filter:url(#spanish-sign-transparency);}
#BoBHome.fr #hero .play-button-hover-pic {filter:url(#spanish-sign-transparency) brightness(1.08);}