/* GENTELLE_V289K77R15Q_REFERENCE_HOMEPAGE_HERO
   Reference target: the approved Gentelle homepage screenshot supplied by the client.
   HOME HERO ONLY. The image spans the full hero stage; the copy card overlays the
   left side on desktop instead of consuming a separate grid column.
   Existing hero images, copy, slider behaviour, AI Room section and all non-home
   layouts stay authoritative. */

.gt-hbx-home > .gt-hbx-hero {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(9px, .85vw, 13px) clamp(20px, 2.25vw, 34px) 0 !important;
}

.gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-stage {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: clamp(305px, 23vw, 355px) !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  background: #f3f1ee !important;
  isolation: isolate !important;
}

.gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-slide,
html[dir="rtl"] .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-slide {
  position: absolute !important;
  inset: 0 !important;
  display: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f3f1ee !important;
}

.gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-slide.active {
  display: block !important;
}

.gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-slide img {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  scale: 1 !important;
}

.gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy {
  position: absolute !important;
  left: 5.6% !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  box-sizing: border-box !important;
  width: min(440px, 34%) !important;
  max-width: 440px !important;
  margin: 0 !important;
  padding: clamp(19px, 1.75vw, 25px) clamp(20px, 1.8vw, 26px) !important;
  background: rgba(255,255,255,.91) !important;
  background-color: rgba(255,255,255,.91) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[dir="rtl"] .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy {
  left: auto !important;
  right: 5.6% !important;
  text-align: right !important;
}

.gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy small {
  display: block !important;
  margin: 0 !important;
  font-size: clamp(9px, .72vw, 11px) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
}

.gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy h1 {
  max-width: 390px !important;
  margin: 8px 0 8px !important;
  font-size: clamp(29px, 2.45vw, 36px) !important;
  line-height: 1.08 !important;
  overflow-wrap: normal !important;
}

.gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy p {
  display: block !important;
  max-width: 390px !important;
  margin: 0 0 13px !important;
  font-size: clamp(12px, .94vw, 14px) !important;
  line-height: 1.48 !important;
}

.gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-dots,
html[dir="rtl"] .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-dots {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
}

/* Tablet: retain the overlay composition while giving the copy more width. */
@media (max-width: 1024px) and (min-width: 821px) {
  .gt-hbx-home > .gt-hbx-hero {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-stage {
    height: clamp(310px, 38vw, 390px) !important;
  }
  .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy {
    left: 4.5% !important;
    width: min(420px, 46%) !important;
    padding: 20px !important;
  }
  html[dir="rtl"] .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy {
    left: auto !important;
    right: 4.5% !important;
  }
  .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy h1 {
    font-size: clamp(28px, 3.6vw, 34px) !important;
  }
}

/* Mobile / small tablet: stack cleanly so copy never overlaps or becomes unreadable.
   The 1600x900 slide is shown in its native 16:9 shape with no crop/stretch. */
@media (max-width: 820px) {
  .gt-hbx-home > .gt-hbx-hero {
    padding: 8px clamp(10px, 2.4vw, 16px) 0 !important;
  }
  .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-stage {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }
  .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy,
  html[dir="rtl"] .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    order: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(18px, 4vw, 28px) clamp(16px, 4vw, 28px) 16px !important;
    background: #fff !important;
  }
  .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy h1 {
    max-width: 640px !important;
    font-size: clamp(27px, 6vw, 34px) !important;
    line-height: 1.1 !important;
  }
  .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy p {
    max-width: 640px !important;
    font-size: 13px !important;
  }
  .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-slide,
  html[dir="rtl"] .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-slide {
    position: relative !important;
    inset: auto !important;
    order: 2 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    display: none !important;
  }
  .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-slide.active {
    display: block !important;
  }
  .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-slide img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #f3f1ee !important;
  }
  .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-dots,
  html[dir="rtl"] .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-dots {
    bottom: 9px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 480px) {
  .gt-hbx-home > .gt-hbx-hero {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy,
  html[dir="rtl"] .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy {
    padding: 18px 14px 14px !important;
  }
  .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy h1 {
    font-size: clamp(25px, 7.4vw, 31px) !important;
  }
  .gt-hbx-home > .gt-hbx-hero .gt-hbx-hero-copy p {
    font-size: 12.5px !important;
  }
}