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

Space Vanta Theme 1.0

Module:
Bundle Hero

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

Version:
3.2

Responsibility:
Bundle Hero Layout / Structure / Dimensions

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

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


/* =================================================
   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;

  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%;

  object-fit: cover;
}


/* =================================================
   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;

  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;

  width: 48px;
  height: 48px;

  object-fit: cover;

  border-radius: 50%;
}


/* =================================================
   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;
  }


  .sv-bundle-hero__feature-image {
    width: 42px;
    height: 42px;
  }

}


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

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

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

}