/* Corelight homepage hero: decorative, responsive, and layout-stable. */
.cl-home--with-visual {
  align-items: start;
  column-gap: clamp(1.5rem, 4vw, 5rem);
  display: grid;
  grid-template-areas:
    "hero visual"
    "steps visual";
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.92fr);
  max-width: 96rem;
}

.cl-home--with-visual > .cl-home__hero {
  grid-area: hero;
  min-width: 0;
}

.cl-home--with-visual > .cl-home__steps {
  grid-area: steps;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.cl-home__visual {
  align-self: center;
  grid-area: visual;
  margin: clamp(0.5rem, 3vw, 2rem) 0 0;
  min-width: 0;
  pointer-events: none;
}

.cl-home__visual-image {
  display: block;
  filter: drop-shadow(0 1.4rem 2.4rem rgb(0 0 0 / 0.3));
  height: auto;
  margin-inline: auto;
  max-height: min(70vh, 48rem);
  object-fit: contain;
  width: 100%;
}

html[data-bs-theme="light"] .cl-home__visual-image,
html:not([data-bs-theme]) .cl-home__visual-image {
  filter: drop-shadow(0 1.2rem 2rem rgb(3 18 11 / 0.18));
}

@media (max-width: 63.99rem) {
  .cl-home--with-visual {
    grid-template-areas:
      "hero"
      "steps"
      "visual";
    grid-template-columns: minmax(0, 1fr);
    max-width: 78rem;
  }

  .cl-home__visual {
    margin: 1.25rem auto 0;
    width: min(100%, 32rem);
  }

  .cl-home__visual-image {
    max-height: 28rem;
  }
}

@media (max-width: 47.99rem) {
  .cl-home--with-visual > .cl-home__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .cl-home__visual {
    margin-top: 1rem;
    width: min(78vw, 22rem);
  }

  .cl-home__visual-image {
    max-height: 22rem;
  }
}

@media print {
  .cl-home--with-visual {
    display: block;
  }

  .cl-home__visual {
    display: none !important;
  }
}