/* =========================================================
   GG HERO – NO OVERLAP, MAX IMAGE SIZE (RESPONSIVE)
   WITH PRONOUNCED WHOLE-MODULE FADE-IN ANIMATION
   ========================================================= */

/* Page horizontal safety */
html, body{
  overflow-x: clip;
}
@supports not (overflow-x: clip){
  html, body{ overflow-x: hidden; }
}

/* ---------------------------------------------------------
   BASE
--------------------------------------------------------- */
.gg-hero{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.gg-hero *{
  box-sizing:border-box;
}

.gg-hero__box{
  background: var(--gg-box-bg, #ffffff);
  border-radius:26px;
  padding:32px 20px;
  text-align:center;
}

/* ---------------------------------------------------------
   MOBILE-FIRST (STACKED)
--------------------------------------------------------- */
.gg-hero__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}

.gg-hero__text{
  max-width:520px;
  width:100%;
}

.gg-hero__title{
  font-size:28px;
  line-height:1.15;
}
.gg-hero__desc{
  font-size:18px;
  line-height:1.35;
  margin-top:14px;
}
.gg-hero__cta{
  font-size:18px;
  margin-top:18px;
}

/* Image block (NO overlap, max size) */
.gg-hero__media{
  width:100%;
  max-width:720px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.gg-hero__img{
  display:block;
  width:100%;
  height:auto;
  max-width: var(--gg-img-maxw-mobile, none);
  max-height: var(--gg-img-maxh-mobile, none);
  object-fit: contain;
  pointer-events:none;
}

/* ---------------------------------------------------------
   TABLET (2:1:2)
--------------------------------------------------------- */
@media (min-width: 768px){
  .gg-hero__box{
    padding:44px 40px;
    text-align:left;
  }

  .gg-hero__inner{
    display:grid;
    grid-template-columns: 2fr 1fr 2fr;
    align-items:center;
    gap:0;
  }

  .gg-hero__text{
    max-width:none;
  }

  .gg-hero__media{
    grid-column:3;
    width:100%;
    max-width:none;
    justify-content:flex-end;
  }

  .gg-hero__img{
    width:100%;
    height:auto;
    max-width: var(--gg-img-maxw-desktop, none);
    max-height: var(--gg-img-maxh-desktop, none);
  }

  .gg-hero__title{ font-size:32px; }
  .gg-hero__desc{ font-size:20px; margin-top:16px; }
  .gg-hero__cta{ font-size:20px; margin-top:22px; }
}

/* ---------------------------------------------------------
   DESKTOP (3:1:3)
--------------------------------------------------------- */
@media (min-width: 992px){
  .gg-hero__box{
    padding:60px;
  }

  .gg-hero__inner{
    grid-template-columns: 3fr 1fr 3fr;
  }

  .gg-hero__title{ font-size:36px; }
  .gg-hero__desc{
    font-size:22px;
    line-height:1.25;
    margin-top:24px;
  }
  .gg-hero__cta{
    font-size:22px;
    margin-top:32px;
    text-align:center;
  }
}

/* =========================================================
   WHOLE-MODULE FADE-IN ANIMATION
   Applied to anything with .gg-fade-target
   ========================================================= */

/* Initial hidden state */
.gg-fade-target{
  opacity:0;
  transform: translateY(20px);
  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
  will-change: opacity, transform;
}

/* When JS adds .is-visible */
.gg-fade-target.is-visible{
  opacity:1;
  transform:none;
}

/* Safety: if JS never runs, show content */
html:not(.gg-anim-enabled) .gg-fade-target{
  opacity:1;
  transform:none;
}