/* Report variant of the hero. Image is wide (20/9), text card overlays the
   bottom on desktop, sits below on mobile. Ported from cp-catapult. */

.cpc-hero.report {
  position: relative;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

@media (min-width: 1024px) {
  .cpc-hero.report {
    margin-bottom: 3rem;
  }
}

.cpc-hero.report::after {
  display: none;
}

@media (min-width: 1024px) {
  .cpc-hero.report::after {
    display: block;
  }
}

.cpc-hero.report .cpc-hero__column.right img {
  width: 100%;
  height: auto;
  aspect-ratio: 20 / 9;
  object-fit: cover;
  border-radius: 8px;
}

.cpc-hero.report .cpc-hero__column.left {
  background: #f6f1ef;
  padding: 2rem;
  width: 100%;
  position: relative;
  top: -1rem;
  gap: 0.5rem;
  border-radius: 0 0 8px 8px;
}

@media (min-width: 1024px) {
  .cpc-hero.report .cpc-hero__column.left {
    position: absolute;
    bottom: 3rem;
    top: auto;
    left: var(--wp--style--root--padding-left, 1.5rem);
    right: var(--wp--style--root--padding-right, 1.5rem);
    max-width: 900px !important;
    border-radius: 8px;
    gap: 1rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* When the report variant is active, the inner is just a single column on
   desktop (image only), with the text overlapping. So override the standard
   hero's flex direction. */

.cpc-hero.report .cpc-hero__inner {
  flex-direction: column;
}

.cpc-hero.report .cpc-hero__column {
  width: 100%;
}