.vlp-spec-content-padding.none {
  background-color: transparent;
}

.vlp-spec-content-padding.accent {
  background-color: #E4DCD3;
}

.vlp-spec-content-padding.primary {
  background-color: #fff;
}

.vlp-spec-content-padding.brand {
  background-color: #002C5F;
}

.vlp-spec-content-padding.subdued {
  background-color: #F6F3F2;
}


.vlp-spec-content-padding.brand .vlp-spec-eyebrow,
.vlp-spec-content-padding.brand .vlp-specs-title,
.vlp-spec-content-padding.brand .vlp-spec-description {
  color: #fff;
}

.vlp-spec-content-padding.brand .vlp-spec-button button {
  border: 1px solid white;
}


/* Base Container */
.vlp-spec-specs-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
  padding: 0 80px 64px;
    max-width: 1912px;
    margin: 0 auto;
}

.vlp-spec-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 740px;
}

.vlp-spec-upper-content {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Wrapper to control layout */
.vlp-spec-inner {
  display: flex;
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: auto;
}

/* Media (Image) */
.vlp-spec-media {
  flex: 1;
  position: relative;
  z-index: 1;
}

.vlp-spec-media img {
  width: 80%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content Overlay */
.vlp-spec-content-padding {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgb(255 255 255 / 90%);
  z-index: 2;
  padding: 40px 64px;
  min-height: 440px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Typography */
.vlp-spec-eyebrow-title-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.vlp-spec-eyebrow {
  font-family: 'HyundaiSansText-Medium';
  font-weight: 700;
  font-size: 16px;
  line-height: 125%;
  color: #5D5D5C;
}

.vlp-specs-title {
  font-family: "HyundaiSansHead-Medium";
  font-weight: 500;
  font-size: 40px;
  line-height: 120%;
  color: #000;
}

.vlp-spec-description {
  font-family: 'HyundaiSansText-Regular';
  font-weight: 400;
  font-size: 16px;
  line-height: 125%;
  color: #000;
}

.vlp-spec-title-options {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.vlp-spec-button button {
  background-color: #002C5F;
  color: #fff;
  border: none;
  padding: 16px 24px;
  font-size: 16px;
  height: 48px;
  min-width: 140px;
  cursor: pointer;
  font-family: "HyundaiSansHead-Medium";
  line-height: 125%;
  font-style: normal;
  font-weight: 500;
}

/* ====== Layout Variants ====== */

/* IMAGE LEFT */
.vlp-spec-specs-container.imageleft img {
  margin-left: auto;
}

.vlp-spec-specs-container.imageleft .vlp-spec-content-padding {
  left: 0%;
  right: auto;
  margin-top: 40px;
  margin-bottom: 40px;
  top:41%;
}

/* IMAGE RIGHT */
.vlp-spec-specs-container.imageright .vlp-spec-inner {
  flex-direction: row-reverse;
}

.vlp-spec-specs-container.imageright .vlp-spec-content-padding {
  right: 0%;
  left: auto;
  align-items: flex-end;
}

/* IMAGE TOP */
.vlp-spec-specs-container.imagetop img {
  width: 100%;
}

.vlp-spec-specs-container.imagetop .vlp-spec-content-padding {
  align-items: center;
  transform: translateY(-40px); /* was -80px → reduce overlap */
  width: calc(100% - 120px); /* keeps 60px margin on left/right */
  max-width: 100%;
  min-height: unset;
  position: relative;
  top: -40px; /* was -80px → match translate reduction */
  z-index: 4;
  margin: 0 60px -80px; /* was -160px → less bottom pull */
  box-sizing: border-box;
}

.vlp-spec-specs-container.imagetop .vlp-spec-upper-content {
  flex-direction: column;
}

.vlp-spec-specs-container.imagetop .vlp-spec-media {
  width: 100%;
  position: unset;
}



/* IMAGE STACKED — NO OVERLAP */

/* IMAGE STACKED — OVERLAPPING IMAGE ABOVE FULL-WIDTH CONTENT */

.vlp-spec-specs-container.imagestacked .vlp-spec-upper-content {
  flex-direction: column-reverse;
  width: 100%;
  align-items: unset;
}

.vlp-spec-specs-container.imagestacked {
  display: flex;
  justify-content: center;
  padding: 0 0 64px;
  position: relative;
  background-color: #fff;
}

.vlp-spec-specs-container.imagestacked .vlp-spec-inner {
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* IMAGE OVERLAPPING FROM TOP */
.vlp-spec-specs-container.imagestacked .vlp-spec-media {
  position: unset;
}

.vlp-spec-specs-container.imagestacked .vlp-spec-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  padding: 0 80px;
}

/* ✅ Gradient background variations — top 30% color fade */
.vlp-spec-specs-container.imagestacked .vlp-spec-media.none img {
  background: linear-gradient(to bottom, transparent 0% 30%, transparent 30% 100%);
}

.vlp-spec-specs-container.imagestacked .vlp-spec-media.accent img {
  background: linear-gradient(to bottom, #E4DCD3 0% 30%, transparent 30% 100%);
}

.vlp-spec-specs-container.imagestacked .vlp-spec-media.primary img {
  background: linear-gradient(to bottom, #FFF 0% 30%, transparent 30% 100%);
}

.vlp-spec-specs-container.imagestacked .vlp-spec-media.brand img {
  background: linear-gradient(to bottom, #002C5F 0% 30%, transparent 30% 100%);
}

.vlp-spec-specs-container.imagestacked .vlp-spec-media.subdued img {
  background: linear-gradient(to bottom, #F6F3F2 0% 30%, transparent 30% 100%);
}

/* image satcked */
.vlp-spec-specs-container.imagestacked .vlp-spec-content-padding {
  transform: none;
  position: unset;
  max-width: unset;
  min-height: unset;
  padding: 64px 80px;
  width: 100%;
}


/* INTERNAL CONTENT STYLING */
.vlp-spec-specs-container.imagestacked .vlp-spec-content-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 32px;
}




/* Mobile and Tablet styles */
@media (max-width: 1199px) and (min-width: 768px) {
  .vlp-spec-specs-container.imagetop,
  .vlp-spec-specs-container.imageright {
    padding: 0 0 32px;
  }

  .vlp-spec-specs-container.imageleft {
  padding: 0 0 32px;
  }
  

  .vlp-spec-specs-container.imagetop .vlp-spec-content-padding {
    align-items: center;
    transform: translateY(-40px);
    width: calc(100% - 80px);
    max-width: 100%;
    min-height: unset;
    position: relative;
    top: -40px;
    z-index: 4;
    margin: 0 40px -80px;
    box-sizing: border-box;
    padding: 40px 32px;
  }
  
  .vlp-spec-specs-container.imagetop .vlp-spec-title-options{
    max-width: 740px;
  }

  /* imageleft */
  .vlp-spec-specs-container.imageleft img {
    margin-left: unset;
    width: 100%;
  }

  .vlp-spec-specs-container.imageleft .vlp-spec-content-padding {
    margin-bottom: -8%;
    padding: 40px 32px;
    min-height: 320px;
    text-align: left;
    left: unset;
    position: unset;
    transform: translateY(-19%);
    margin-top: unset;
    width: calc(100% - 80px);
    margin-left:40px;
    margin-right: 40px;
    max-width: 100%;
  }

  .vlp-spec-specs-container.imageleft .vlp-spec-upper-content {
    flex-direction: column;
  }

  .vlp-spec-specs-container.imageleft .vlp-spec-media {
    width: 100%;
  }

  /* imageright */
  .vlp-spec-specs-container.imageright img {
    margin-left: unset;
    width: 100%;
  }

  .vlp-spec-specs-container.imageright .vlp-spec-content-padding {
    margin-bottom: -8%;
    padding: 40px 32px;
    min-height: 320px;
    text-align: left;
    left: unset;
    position: unset;
    transform: translateY(-19%);
    margin-top: unset;
    width: calc(100% - 80px);
    margin-left: 40px;
    margin-right: 40px;
    max-width: 100%;
  }

  .vlp-spec-specs-container.imageright .vlp-spec-upper-content {
    flex-direction: column;
  }

  .vlp-spec-specs-container.imageright .vlp-spec-media {
    width: 100%;
  }


  .vlp-spec-specs-container.imagestacked {
    padding: 0 0 32px;
  }

  .vlp-spec-specs-container.imagestacked .vlp-spec-content-block {
    margin: unset;
    text-align: left;
  }

  .vlp-spec-specs-container.imagestacked .vlp-spec-media img {
    padding: 0 40px;
  }
  
  .vlp-spec-specs-container.imagestacked .vlp-spec-content-padding {
    padding: 32px 40px;
  }
}

/* Responsive */
@media (max-width: 767px) {
  /* image top */
  .vlp-spec-specs-container.imagetop,
  .vlp-spec-specs-container.imageleft,
  .vlp-spec-specs-container.imageright {
    padding: 0;
  }

  .vlp-spec-specs-container.imagetop .vlp-spec-content-padding {
    align-items: center;
    transform: translateY(-32px);
    width: calc(100% - 32px);
    max-width: 100%;
    min-height: unset;
    position: relative;
    top: -32px;
    z-index: 4;
    margin: 0 16px -64px;
    box-sizing: border-box;
    left: 0;
    text-align: left;
    padding: 32px 24px;
  }

  .vlp-spec-title-options {
    gap: 24px;
  }

  .vlp-specs-title {
    color: var(--text-primary, #000);
    font-size: var(--font-size-4xl, 32px);
    font-style: normal;
    font-weight: 500;
    line-height: 125%;
    margin-bottom: 0;
  }

  .vlp-spec-description {
    font-size: 14px;
    line-height: 128.571%;
    font-style: normal;
  }

  .vlp-spec-eyebrow-title-container {
    gap: 4px
  }

  .vlp-spec-copy {
    gap: 4px;
  }



  /* imageleft */
  .vlp-spec-specs-container.imageleft img {
    margin-left: unset;
    width: 100%;
  }

  .vlp-spec-specs-container.imageleft .vlp-spec-content-padding {
    margin-bottom: -5%;
    padding: 32px 24px;
    min-height: 320px;
    text-align: left;
    max-width: 740px;
    left: unset;
    position: unset;
    transform: translateY(-13%);
    margin-top: unset;
  }

  .vlp-spec-specs-container.imageleft .vlp-spec-upper-content {
    flex-direction: column;
  }

  .vlp-spec-specs-container.imageleft .vlp-spec-media {
    width: 100%;
  }

  /* image right */


  .vlp-spec-specs-container.imageright img {
    margin-left: unset;
    width: 100%;
  }

  .vlp-spec-specs-container.imageright .vlp-spec-content-padding {
    margin-bottom: -5%;
    padding: 32px 40px;
    min-height: 320px;
    text-align: left;
    max-width: 740px;
    left: unset;
    position: unset;
    transform: translateY(-13%);
    margin-top: unset;
  }

  .vlp-spec-specs-container.imageright .vlp-spec-upper-content {
    flex-direction: column;
  }

  .vlp-spec-specs-container.imageright .vlp-spec-media {
    width: 100%;
  }


  .vlp-spec-specs-container.imagestacked {
    padding: 0 0 24px;
  }

  .vlp-spec-specs-container.imagestacked .vlp-spec-media img {
    padding: 0 16px;
  }

  .vlp-spec-specs-container.imagestacked .vlp-spec-content-padding {
    padding: 24px 16px;
  }

  .vlp-spec-specs-container.imagestacked .vlp-spec-eyebrow-title-container {
    text-align: center;
  }

  .vlp-spec-content-padding {
    width: 90%;
    padding: 32px 24px;
    text-align: center;
    align-items: center;
    left: 50%;
    transform: translateX(-50%);
  }
}