/*
================================================

Space Vanta Theme 1.0

Module:
Bundle Hero

File:
public/bundle-template/bundle-hero/hero-layout.css

Version:
3.3

Responsibility:
Bundle Hero Layout / Structure / Dimensions

Brand visual styling:
public/brand/bundle/hero.css

Update:
- Adaptive Main Image Structure
- Desktop Thumbnail Scale Increase
- Mobile Thumbnail Size Preserved

================================================
*/


/* =================================================
   1. Hero Root
================================================= */

.sv-bundle-hero {
    position: relative;

    width: 100%;
}


/* =================================================
   2. Hero Container
================================================= */

.sv-bundle-hero__container {
    display: grid;

    grid-template-columns:
        minmax(0, 440px) minmax(280px, 420px);

    column-gap: 76px;

    width: 100%;
    max-width: 1060px;

    margin: 0 auto;

    padding: 64px 40px 72px;

    align-items: start;
}


/* =================================================
   3. Hero Media
================================================= */

.sv-bundle-hero__media {
    position: relative;

    width: 100%;
    max-width: 440px;

    /*
   * The Hero Frame keeps a stable spatial height.
   *
   * This preserves the existing relationship between
   * the Main Image and the Hero Content column.
   */
    aspect-ratio: 1 / 1;

    min-width: 0;

    overflow: hidden;
}


/* =================================================
   4. Main Image
================================================= */

.sv-bundle-hero__image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

    /*
   * Preserve the complete uploaded image.
   *
   * The Frame defines the Hero dimensions.
   * The uploaded image adapts inside that Frame.
   */
    object-fit: contain;

    object-position: center;
}


/* =================================================
   5. Image Switching State
================================================= */

.sv-bundle-hero__image.is-switching {
    opacity: 0.72;
}


/* =================================================
   6. Hero Content
================================================= */

.sv-bundle-hero__content {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    align-self: start;

    margin: 0;
    padding: 0;
}


/* =================================================
   7. Title Structure
================================================= */

.sv-bundle-hero__title {
    display: block;

    width: 100%;

    margin: 0;
}


/* =================================================
   8. Description Structure
================================================= */

.sv-bundle-hero__description {
    display: block;

    width: 100%;

    margin: 20px 0 0;
}


/* =================================================
   9. Hero CTA Structure
================================================= */

.sv-bundle-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;

    margin-top: 28px;

    cursor: pointer;
}


/* =================================================
   10. Feature Navigation
================================================= */

.sv-bundle-hero__features {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    /*
   * Thumbnail navigation remains directly below
   * the Explore Bundle CTA.
   *
   * This position is intentionally preserved.
   */
    margin-top: 24px;
}


/* =================================================
   11. Feature Item
================================================= */

.sv-bundle-hero__feature {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}


/* =================================================
   12. Feature Image
================================================= */

.sv-bundle-hero__feature-image {
    display: block;

    /*
   * Desktop:
   * Increase visual weight from the previous 64px.
   *
   * Mobile remains 48px below.
   */
    width: 72px;
    height: 72px;

    /*
   * Preserve the complete thumbnail image.
   *
   * Brand frame treatment is applied in:
   * public/brand/bundle/hero.css
   */
    object-fit: contain;

    object-position: center;
}


/* =================================================
   13. Desktop
================================================= */

@media (min-width: 769px) {

    .sv-bundle-hero__media {
        justify-self: start;
    }


    .sv-bundle-hero__content {
        justify-self: start;
    }

}


/* =================================================
   14. Tablet
================================================= */

@media (min-width: 769px) and (max-width: 1100px) {

    .sv-bundle-hero__container {
        grid-template-columns:
            minmax(0, 1fr) minmax(260px, 0.82fr);

        column-gap: 48px;

        max-width: 980px;

        padding-left: 32px;
        padding-right: 32px;
    }


    .sv-bundle-hero__media {
        max-width: 420px;
    }

}


/* =================================================
   15. Mobile
================================================= */

@media (max-width: 768px) {

    .sv-bundle-hero__container {
        display: flex;
        flex-direction: column;

        gap: 28px;

        max-width: none;

        padding: 40px 20px 48px;
    }


    .sv-bundle-hero__media {
        width: min(100%, 430px);

        max-width: 430px;

        margin: 0 auto;
    }


    .sv-bundle-hero__content {
        width: 100%;
    }


    .sv-bundle-hero__description {
        margin-top: 16px;
    }


    .sv-bundle-hero__button {
        margin-top: 24px;
    }


    .sv-bundle-hero__features {
        margin-top: 22px;

        gap: 10px;
    }


    /*
   * Mobile Thumbnail remains unchanged.
   */
    .sv-bundle-hero__feature-image {
        width: 48px;
        height: 48px;
    }

}


/* =================================================
   16. Reduced Motion
================================================= */

@media (prefers-reduced-motion: reduce) {

    .sv-bundle-hero__image {
        transition: none;
    }

}