/* =========================================================
   Home Hero (Final layout)
   - Car full-bleed to right edge
   - Car closer to text
   - 3-line headline forced
   - Overlay: white @ 70%
   ========================================================= */

.home-hero{
  position: relative;

  color: var(--gc-text);
  isolation: isolate;
  z-index: 20;

  background: var(--home-hero-bg) center / cover no-repeat;

  /* Enough space so next section won't visually invade */
  padding: clamp(44px, 6vw, 92px) 0;
	 /* overflow: hidden;
  min-height: clamp(520px, 68vh, 820px);*/
}

.home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255, 255, 255, 0.80);
  z-index: 0;
}

.home-hero__inner{
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;

  padding-left: var(--space-sm);
  padding-right: 0; /* important for right full-bleed */

  display: flex;
  align-items: center;

  /* IMPORTANT: make car closer to text */
  gap: clamp(10px, 1.6vw, 22px);
}

/* LEFT CONTENT */
.home-hero__content{

  min-width: 0;
}

.home-hero__title{
  margin: 0 0 var(--space-sm);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
 
}

.home-hero__title .line{
  display:block; /* force 3 lines */
}

.home-hero__subtext{
  margin: 0 0 var(--space-md);
  color: var(--gc-text);
  font-weight: 500;
  max-width: 62ch;
}

.text-red{ color:var(--gc-red); }

/* Buttons */
.home-hero__actions{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-sm);
}

/* RIGHT MEDIA = full bleed to viewport edge */
.home-hero__media{
  flex: 1;
  position: relative;
  width:100%;

  /* FULL BLEED trick (push to viewport edge) */
  margin-right: calc(50% - 50vw);

  /* make it sit tighter with no internal spacing */
  padding-right: 0 !important;

  /* pull car slightly LEFT to be closer to text */
  transform: translateX(-18px);

  /* ✅ added: prevent weird clipping + keep image responsive */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.home-hero__car{
  /* ✅ updated: fully responsive sizing (no cut/clip on resize) */
  width: 100%;
  max-width:860px;
  height: auto;

  /* cap height relative to viewport so it won’t exceed hero and get clipped */
  max-height: min(620px, 62vh);

  object-fit: contain;
  display: block;

  margin-left: auto;
  margin-right: 0; /* hug right edge */

  transform: translateY(8px);
  /* filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));*/
}

/* Tablet */
@media (max-width: 1024px){

  .home-hero__content{
    flex-basis: 58%;
  }
  .home-hero__media{
    transform: translateX(-10px);
  }
  .home-hero__car{
    width: 100%;
    max-width: min(760px, 56vw);
    max-height: min(560px, 58vh);
  }
}

/* Mobile: hide car + prevent next section/form from overlapping */
@media (max-width: 1014px){
  .home-hero{
    padding-top: clamp(36px, 7vw, 74px);
    overflow: visible;
  }

  .home-hero__inner{
    padding-right: var(--space-md);
    flex-direction: column;
    align-items: flex-start;
  }

  .home-hero__content{
    flex: 1 1 100%;
    width: 100%;
    padding-right: 0;
  }

  .home-hero__media{
    display:none;
  }

  .home-hero__actions{
    width: 100%;
  }

  .home-hero__actions .btn{
    width: 100%;
    justify-content: center;
  }
}