/*
  Entopy System Intro v1.0.0
  This widget covers section 01 only: title, supporting copy and optional divider.
*/

.entopy-system-intro{
  --system-colour: #1d3557;
  --system-divider: rgba(29, 53, 87, 0.18);
  --system-text-soft: rgba(29, 53, 87, 0.8);

  --section-padding-top: 100px;
  --section-padding-right: 0px;
  --section-padding-bottom: 40px;
  --section-padding-left: 0px;

  --grid-label-width: 240px;
  --grid-gap: 28px;

  --title-max-width: 980px;
  --copy-max-width: 320px;
  --copy-padding-top: 10px;
  --divider-margin-top: 32px;

  --title-x-offset: 0px;
  --title-y-offset: 0px;
  --copy-x-offset: 0px;
  --copy-y-offset: 0px;

  --font-headline: clamp(42px, 5vw, 60px);
  --font-body: clamp(15px, 1.1vw, 15px);

  width: 100%;
  padding:
    var(--section-padding-top)
    var(--section-padding-right)
    var(--section-padding-bottom)
    var(--section-padding-left);
  box-sizing: border-box;
  overflow: hidden;
  font-family: Montserrat, Arial, sans-serif;
  color: var(--system-colour);
}

.entopy-system-intro *,
.entopy-system-intro *::before,
.entopy-system-intro *::after{
  box-sizing: border-box;
}

.entopy-system-intro-grid{
  display: grid;
  grid-template-columns: var(--grid-label-width) repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.entopy-system-intro-title-wrap{
  grid-column: 1 / 4;
  transform: translate(var(--title-x-offset), var(--title-y-offset));
}

.entopy-system-intro-heading{
  display: block;
  margin: 0;
  max-width: var(--title-max-width);
  font-size: var(--font-headline);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: var(--system-colour);
}

.entopy-system-intro-copy-wrap{
  grid-column: 4 / 5;
  transform: translate(var(--copy-x-offset), var(--copy-y-offset));
}

.entopy-system-intro-copy{
  padding-top: var(--copy-padding-top);
  max-width: var(--copy-max-width);
}

.entopy-system-intro-copy p{
  margin: 0;
  font-size: var(--font-body);
  line-height: 1.5;
  font-weight: 400;
  color: var(--system-text-soft);
}

.entopy-system-intro-divider{
  height: 1px;
  background: var(--system-divider);
  margin: var(--divider-margin-top) 0 0;
}

.entopy-system-intro-reveal{
  opacity: 0;
  transform: translateY(18px);
  will-change: transform, opacity;
}

.entopy-system-intro.is-visible .entopy-system-intro-reveal{
  animation: entopyIntroFade 0.9s cubic-bezier(0.22,1,0.36,1) forwards;
}

.entopy-system-intro.is-visible .entopy-system-intro-delay-1{ animation-delay: 0.1s; }
.entopy-system-intro.is-visible .entopy-system-intro-delay-2{ animation-delay: 0.2s; }
.entopy-system-intro.is-visible .entopy-system-intro-delay-3{ animation-delay: 0.3s; }

.entopy-system-intro-no-reveal .entopy-system-intro-reveal,
.entopy-system-intro-editor-no-reveal .entopy-system-intro-reveal,
.elementor-editor-active .entopy-system-intro-reveal,
.elementor-editor-preview .entopy-system-intro-reveal{
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@keyframes entopyIntroFade{
  from{
    opacity: 0;
    transform: translateY(18px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1024px){
  .entopy-system-intro{
    --section-padding-top: 80px;
    --section-padding-bottom: 36px;
    --grid-label-width: 180px;
    --grid-gap: 22px;
    --font-headline: clamp(36px, 5.2vw, 56px);
  }
}

@media (max-width: 767px){
  .entopy-system-intro{
    --section-padding-top: 48px;
    --section-padding-bottom: 32px;
    --grid-gap: 18px;
    --copy-padding-top: 0px;
    --font-headline: clamp(32px, 10vw, 42px);
  }

  .entopy-system-intro-grid{
    grid-template-columns: 1fr;
  }

  .entopy-system-intro-title-wrap,
  .entopy-system-intro-copy-wrap{
    grid-column: auto;
    max-width: none;
  }

  .entopy-system-intro-heading{
    line-height: 1.05;
  }

  .entopy-system-intro-copy{
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .entopy-system-intro-reveal{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}