/* Block: cnm-connect
 * Extracted from theme CSS by wp-arch-agent.
 * Classes: btn, cnm-connect, home-connect, home-connect--researchers, home-connect--advisory
 */

.home-connect {
  display: flex;
  align-items: center;
  padding-block: 70px;
  color: var(--white, #fff);
}

.home-connect--researchers {
  background: var(--rust, #BF520E);
  overflow: hidden;
}

.home-connect--researchers .home-connect__inner {
  align-items: flex-start;
  justify-content: space-between;
  gap: 110px;
}

.home-connect--researchers .home-connect__body {
  padding-top: 33px;
  max-width: 693px;
}

.home-connect--researchers .home-connect__title {
  max-width: 598px;
}

.home-connect--researchers .home-connect__text {
  max-width: 693px;
}

/* The per-band button gaps (13 here, 19 on advisory) are retired — both bands
   share one `.home-connect__cta` rule, which lives in assets/css/home.css with
   the reasoning (BHL-281). Nothing is declared for it in this file any more, so
   that base rule reaches the homepage unopposed; do not reintroduce a per-band
   value here without changing it there too. */

.home-connect--advisory {
  min-height: 600px;
  background: var(--brand, #4C759C);
}

.home-connect--advisory .home-connect__body {
  max-width: 699px;
}

.home-connect--advisory .home-connect__text {
  margin-top: 19px;
}

.home-connect--advisory .home-connect__media {
  position: relative;
  width: 508px;
  height: 352px;
  overflow: hidden;
  isolation: isolate;
}

.home-connect--advisory .home-connect__media img {
  position: absolute;
  width: 130.7%;
  height: 112.8%;
  left: -15.1%;
  top: -5.9%;
  max-width: none;
}

.home-connect--advisory .home-connect__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--sky, #B8D8EB);
  opacity: 0.5;
  mix-blend-mode: color-burn;
  pointer-events: none;
}

.home-stats > .container,
.home-pillars > .container,
.home-connect--researchers > .container {
  max-width: calc(79.25rem + (var(--gutter) * 2));
}

@media (max-width: 1399px) {
  .home-connect--advisory .home-connect__media {
    width: 440px;
    height: 305px;
  }
}

@media (max-width: 991px) {
  .home-connect {
    padding-block: 56px;
  }
  
  .home-connect__inner,
    .home-connect--researchers .home-connect__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
  
  .home-connect--advisory .home-connect__inner {
    flex-direction: column-reverse;
  }
  
  .home-connect--researchers .home-connect__body {
    padding-top: 0;
  }
  
  /* Unscoped for the same reason as the desktop rule: stacked, both bands want
     the same 32px. Mirrors assets/css/home.css. */
  .home-connect__cta {
    margin-top: 32px;
  }
  
  /* Stacked, the band follows the same padding-driven rhythm as the
     researchers band: 56px top and bottom, height from the content. The 600px
     floor above is a DESKTOP measure — it exists because the 352px image sits
     beside the copy in a 460px content box, which padding alone leaves short.
     Once the two stack that reason is gone, but the floor stayed, and since
     .home-connect is align-items:center the surplus split evenly above and
     below the copy — the empty band reported in BHL-14. */
  .home-connect--advisory {
    min-height: 0;
  }

  .home-connect--advisory .home-connect__media {
    width: 100%;
    height: auto;
    max-width: 508px;
    /* height:auto alone collapses this box to ZERO: its img is
       position:absolute (the Figma crop above), so it contributes no height and
       the picture disappears on mobile. The ratio is the desktop crop's own
       508x352, so the same framing survives the stack. */
    aspect-ratio: 508 / 352;
  }
}