/* product-hero.css */

.product-hero .hero-banner-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    color: #fff;
    aspect-ratio: 1440 / 328;
    width: 100%;
}

.product-hero .hero-banner-container.bg-accent {
    background: #f6f3f2;
}

.product-hero .hero-banner-container.bg-primary {
    background: #fff;
}

.product-hero .hero-banner-container.bg-brand {
    background: #002c5f;
}

.product-hero .hero-banner-container .btn {
    text-decoration: none;
}

.product-hero .hero-banner-container .button-primary {
    background: #002c5f;
    color: #fff;
}

.product-hero .hero-banner-container .button-secondary {
    background: transparent;
    color: #002c5f;
    border: 1px solid #002c5f;
}

.product-hero .hero-banner-container.bg-brand .button-primary,
.product-hero .hero-banner-container.image .button-primary,
.product-hero .hero-banner-container.video .button-primary {
    background: #fff;
    color: #000;
}

.product-hero .hero-banner-container .btn.caretLink,
.product-hero .hero-banner-container .btn.textLink {
    background: none;
    padding: 0;
    border: none;
    min-width: auto;
    height: auto;
    color: #002c5f;
}

.product-hero .hero-banner-container .btn.textLink {
    text-decoration: underline;
}

.product-hero .hero-banner-container.bg-brand .btn.caretLink,
.product-hero .hero-banner-container.image .btn.caretLink,
.product-hero .hero-banner-container.video .btn.caretLink,
.product-hero .hero-banner-container.bg-brand .btn.textLink,
.product-hero .hero-banner-container.image .btn.textLink,
.product-hero .hero-banner-container.video .btn.textLink {
    background: none;
    color: #fff;
}

.product-hero .hero-banner-container.bg-brand .button-secondary,
.product-hero .hero-banner-container.image .button-secondary,
.product-hero .hero-banner-container.video .button-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
}

.product-hero .hero-banner-container.dark .eyebrow {
    color: #5d5d5c;
}

.product-hero .hero-banner-container.dark .title,
.product-hero .hero-banner-container.dark .subheading {
    color: #000;
}

.product-hero .hero-content {
    z-index: 2;
    display: flex;
    gap: 8px;
    max-width: 1912px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    flex-direction: column;
    padding: 64px 80px;
    min-height: 320px;
	justify-content: center;
}

.product-hero .hero-content.image {
    margin: 0;
    background: linear-gradient(90deg, rgba(0 0 0 / 54%) 0%);
}


.product-hero .eyebrow {
    color: #fff;
    font-family: "HyundaiSansText-Bold";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}

.product-hero .title {
    color: #fff;
    font-family: "HyundaiSansHead-Medium";
    font-size: 48px;
    font-weight: 500;
    line-height: 133.333%;
}

.product-hero .subheading {
    color: #fff;
    font-family: "HyundaiSansText-Regular";
    font-size: 18px;
    font-style: normal;
    line-height: 155.556%;
    font-weight: 400;
}

/* Hero Image Container */
.product-hero .hero-media-container {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1440 / 328;
}

.product-hero .hero-media-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* please don't remove this style */
}


.product-hero .hero-media-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient Overlay */
.gradient-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            90deg,
            rgba(0 0 0 / 62%) 0%,
            rgba(0 0 0 / 54%) 32%,
            rgba(0 0 0 / 0%) 100%
        ),
        linear-gradient(90deg, rgba(0 0 0 / 54%) 0%, rgba(0 0 0 / 0%) 100%),
        linear-gradient(90deg, rgba(0 0 0 / 0%) 0%, rgba(0 0 0 / 0%) 100%);
    top: 0;
    left: 0;
}

.hero-image-container .gradient-overlay {
    display: none;
}

.hero-image-container + .gradient-overlay {
    min-height: 320px;
    position: relative;
    background: linear-gradient(
            90deg,
            rgba(0 0 0 / 54%) 0%,
            rgba(0 0 0 / 0%) 100%
        );
    height: -webkit-fill-available;
    height: -moz-available;         /* Firefox older versions */
    height: fill-available;         /* Older spec */
    height: stretch;

}

.product-hero .hero-content-container {
    display: flex;
    gap: 4px;
    flex-direction: column;
    align-items: flex-start;
}

.product-hero .button-container {
    display: flex;
    align-items: center;
    align-content: center;
    gap: 8px 16px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.product-hero .hero-banner-container.bg-brand .eyebrow,
.product-hero .hero-banner-container.bg-brand .title,
.product-hero .hero-banner-container.bg-brand .subheading,
.product-hero .hero-banner-container.image .eyebrow,
.product-hero .hero-banner-container.image .title,
.product-hero .hero-banner-container.image .subheading,
.product-hero .hero-banner-container.video .eyebrow,
.product-hero .hero-banner-container.video .title,
.product-hero .hero-banner-container.video .subheading {
    color: #fff;
}

/* Video Control Button - New Design */
.product-hero .video-control-container {
    position: absolute;
    bottom: 64px;
    right: 80px;
    z-index: 3;
}

.product-hero .video-control-btn {
    align-self: stretch;
    padding: 4px 8px;
    background: rgb(0 0 0 / 54%);
    border-radius: 4px;
    border: none;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #fff;
}

.product-hero .video-control-btn:hover {
    background: rgb(0 0 0 / 70%);
}

.video-control-content {
    display: flex;
    align-items: center;
    gap: 4px;
}

.product-hero .video-control-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.product-hero .video-control-text {
    color: white;
    font-size: 12px;
    font-family: "HyundaiSansText-Bold";
    font-weight: 700;
    line-height: 16px;
}

.product-hero .video-placeholder-container {
    display: none;
}

.product-hero-wrapper p {
    margin: 0;
}

.product-hero .hero-banner-container.hide {
    display: none;
}

/* Tablet */
@media (max-width: 1199px) and (min-width: 768px) {
    .product-hero .hero-banner-container {
        aspect-ratio: 768 / 240;
    }

    .product-hero .title {
        font-size: 40px;
        line-height: 120%;
        max-width: 500px;
    }

    .product-hero .subheading {
        font-size: 18px;
        max-width: 500px;
    }

  

    .product-hero .hero-content {
        max-width: 500px;
        min-height: 240px;
        padding: 0;
        margin: unset;
    }

    .product-hero .video-control-container {
        bottom: 32px;
        right: 40px;
    }

    .product-hero .hero-media-container {
        aspect-ratio: 768 / 244;
    }
    
    .product-hero .hero-media-container img,
    .product-hero .hero-media-container video {
        object-fit: cover;

    }  
     
        .product-hero .hero-content.image,
        .product-hero .hero-content.bg-accent,
        .product-hero .hero-content.bg-blue,
        .product-hero .hero-content.bg-primary,
        .product-hero .hero-content.bg-hyundaiLightSand , 
        .product-hero .hero-content.video {
            min-height: 240px;
            padding: 32px 40px;
            height: -webkit-fill-available;
            height: -moz-available;         /* Firefox older versions */
            height: fill-available;         /* Older spec */
            height: stretch;
        }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
    .product-hero .title {
        font-size: 32px;
        line-height: 125%;
    }

    .product-hero.subheading {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 137.5%;
        max-width: 100%;
    }

    .product-hero .hero-content-container {
        gap: 2px;
    }

    .product-hero .hero-content {
        gap: 4px;
        width: 100%;
        margin: unset;
        padding: unset;
        justify-content: flex-end;
    }

    .product-hero .hero-content.image {
        background: none;
        min-height: unset;
    }

    .product-hero .hero-banner-container {
        padding: 64px 16px 24px;
        flex-direction: column;
        aspect-ratio: 375 / 324;
    }

    .gradient-overlay {
        background: linear-gradient(
                90deg,
                rgba(0 0 0 / 54%) 0%,
                rgba(0 0 0 / 0%) 100%
            ),
            linear-gradient(
                90deg,
                rgba(0 0 0 / 62%) 0%,
                rgba(0 0 0 / 54%) 32%,
                rgba(0 0 0 / 0%) 100%
            );
    }

    .product-hero .hero-image-container .gradient-overlay {
        background: linear-gradient(
        to top,
        rgba(0 0 0 / 54%) 0%,      /* Bottom: 54% opacity */
        rgba(0 0 0 / 54%) 32%,     /* Maintain 54% until 32% height */
        rgba(0 0 0 / 0%) 100%      /* Top: Fade to transparent */);
        display: block;
    }

    .product-hero .hero-image-container + .gradient-overlay {
        display: none;
    }

    .product-hero  .eyebrow {
        line-height: 128.571%;
        font-size: 14px;
    }

    .product-hero .button-container {
        margin-top: 12px;
    }

    .product-hero .video-control-container {
        top: 24px;
        right: 16px;
    }

    .product-hero .video-control-btn {
        padding: 8px;
    }

    .product-hero .video-control-icon {
        width: 14px;
        height: 14px;
    }

    .product-hero .video-control-icon svg {
        width: 14px;
        height: 14px;
    }

    .product-hero .video-control-text {
        display: none;
    }

    .product-hero .video-placeholder-container {
        height: 102px;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .product-hero .hero-media-container {
        aspect-ratio: 375 / 324;
    }

    .product-hero .hero-media-container img,
    .product-hero .hero-media-container video {
        object-fit: cover;
    } 

    .product-hero .hero-media-container img {
      height: 100%;
    }

    .product-hero .hero-banner-container.image {
        min-height: 240px;
        padding-top: 166px;
    }

    .product-hero .hero-content.bg-accent,
    .product-hero .hero-content.bg-blue,
    .product-hero .hero-content.bg-primary,
    .product-hero .hero-content.bg-hyundaiLightSand , 
    .product-hero .hero-content.video {
        min-height: unset;
    }

}