/* Approved active-lifestyle hero. Scoped to the current homepage. */
.mpp-hero--active {
  width: 100%;
  height: auto;
  min-height: 640px;
  aspect-ratio: 1672 / 941;
  /* Use the same container width and inner gutters as the navigation. */
  padding: clamp(40px, 4vw, 72px) max(56px, calc((100% - var(--container-max)) / 2 + 56px));
  background: var(--color-cream);
  color: var(--color-ink);
}

.mpp-hero--active::before { display: none; }

.mpp-hero--active .mpp-hero__photo { z-index: -1; }
.mpp-hero--active .mpp-hero__photo picture { width: 100%; height: 100%; }
.mpp-hero--active .mpp-hero__photo img { object-position: 86% center; }

.mpp-hero--active .mpp-hero__copy {
  z-index: 1;
  width: min(44%, calc(644px - 4vw));
  max-width: 560px;
  min-width: 0;
}

.mpp-hero--active h1 {
  font-size: clamp(46px, 3.8vw, 64px);
  font-weight: 600;
  color: var(--color-ink);
}

.mpp-hero--active .mpp-hero__description {
  max-width: 360px;
  color: #333;
}

.mpp-hero--active .mpp-hero__primary {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
}

.mpp-hero--active .mpp-hero__primary:hover {
  background: #333;
  border-color: #333;
  color: #fff;
}

.mpp-hero--active .mpp-hero__secondary {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.mpp-hero--active .mpp-hero__secondary:hover {
  background: var(--color-ink);
  color: #fff;
}

.mpp-hero--active .mpp-hero__actions a:focus-visible {
  outline-color: var(--color-ink);
}

.mpp-hero--active .mpp-hero__retailer {
  display: block;
  color: #444;
}

/* Keep the full copy block above the kitchen countertop on desktop. */
@media (min-width: 1101px) {
  .mpp-hero--active .mpp-hero__copy {
    transform: translateY(clamp(-140px, -7.3vw, -80px));
  }
}

/* Separate copy and image before the desktop composition becomes cramped. */
@media (max-width: 1100px) {
  .mpp-hero--active {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    padding: 0;
  }

  .mpp-hero--active .mpp-hero__copy {
    width: 100%;
    max-width: none;
    padding: 48px 32px;
    background: var(--color-cream);
  }

  .mpp-hero--active h1 {
    max-width: 680px;
    font-size: clamp(48px, 6.3vw, 64px);
    line-height: 1.04;
  }

  .mpp-hero--active .mpp-hero__description { max-width: 42ch; }

  .mpp-hero--active .mpp-hero__photo {
    position: relative;
    inset: auto;
    z-index: auto;
    flex: none;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
}

@media (min-width: 701px) and (max-width: 850px) {
  .mpp-hero--active .mpp-hero__copy { padding-inline: 24px; }
}

@media (max-width: 700px) {
  .mpp-hero--active .mpp-hero__copy { padding: 40px 20px 36px; }
  .mpp-hero--active h1 { max-width: none; font-size: clamp(38px, 10.8vw, 56px); }
  .mpp-hero--active .mpp-hero__description { max-width: none; }
  .mpp-hero--active .mpp-hero__retailer { font-size: 13px; }
  .mpp-hero--active .mpp-hero__photo { aspect-ratio: 706 / 941; }
  .mpp-hero--active .mpp-hero__photo img { object-position: center; }
}