/* Page-specific styling for /solutions/training-phishing/ */

/* Hero background image for this page */
.hero--bg {
  background-image: url("../assets/img/man-in-office-trans.jpg");
  background-position: left center; /* keep subject left, copy on right */
}

.hero__copy {
  max-width: 460px;
  margin-left: auto; /* pushes copy to right */
}
.hero__copy h1 {
  font-size: 52px;
  line-height: 1.1;
  margin-bottom: 14px;
}
.hero__copy .lead {
  font-size: 32px;
  line-height: 1.45;
  max-width: 420px;
  font-weight: 500;
}

/* (form element styles are in /assets/css/forms.css) */
.value-form-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: start;
}
.value-form{
  display: flex;
  justify-content: flex-end;
}

.value-form .form-card{
  width: 100%;
  max-width: 460px;
}
.value-copy h2{
  max-width: 560px;
}

.value-copy p{
  max-width: 520px;
  font-size: 22px;
}

/* BENEFITS: anchor for overlapping image */
.benefits {
  position: relative;
  overflow: visible;
}

/* Anchor absolute positioning to the container */
.benefits__inner {
  position: relative;
}

/* Reserve a right-side lane WITHOUT shifting the container */
.benefits__content {
  max-width: calc(100% - 400px); /* match image width */
}

/* Woman image pinned bottom-right of the gray section */
.benefits__image {
  position: absolute;
  right: 100px;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}

.benefits__image img {
  display: block;
  width: 300px;
  height: auto;

  transform: translateY(130px); /* overlap into section above */
}

/* If the image overlaps the section above in a bad way */
.features {
  position: relative;
  z-index: 3;
}
.features h2 {
  margin-bottom: 48px;
}

/* Mobile: disable overlap and put image in normal flow */
@media (max-width: 900px) {
  .benefits__content {
    max-width: 100%;
  }

  .benefits__image {
    position: static;
    margin-top: 24px;
    display: flex;
    justify-content: center;
    pointer-events: auto;
  }

  .benefits__image img {
    width: 260px;
    transform: translateY(44px);
  }
  
  .value-form{
    justify-content: flex-start;
  }

  .value-form-grid{
    grid-template-columns: 1fr;
  }
}