/* Shared hero heading of public subpages and the member portal. */

.subpage-heading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 22.625rem;
  padding-block: 2rem;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse at 90% 28%, #d9eee6, transparent 54%), radial-gradient(ellipse at 8% 0%, #faeee2, transparent 40%), var(--paper);
}

/* Artwork does not affect the shared heading height; long or zoomed text can expand it. */
.subpage-art {
  position: absolute;
  inset: -2rem max(var(--gutter), calc((100% - 1320px) / 2)) -2rem auto;
  z-index: -1;
  width: clamp(300px, 36vw, 480px);
  pointer-events: none;
}

.subpage-illustration {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  scale: 0.8;
  transform-origin: right center;
}

@media (max-width: 1199px) {
  .subpage-art {
    inset-block: 0;
    width: min(420px, calc(100% - var(--gutter) * 2));
    opacity: 0.12;
  }
}

@media (min-width: 1200px) {
  .subpage-heading .container > * {
    max-width: calc(100% - min(36vw, 480px) - 2rem);
  }
}

.subpage-heading h1 {
  max-width: 950px;
  margin-bottom: 1.5rem;
  font-size: clamp(2.7rem, 5.8vw, 5rem);
}

.subpage-heading .eyebrow {
  color: var(--accent);
}

.subpage-intro {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
}

@media (max-width: 760px) {
  .subpage-heading {
    min-height: 28rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .subpage-heading .container > * {
    animation: entrance 600ms var(--motion-ease) backwards;
  }

  .subpage-heading h1 {
    animation-delay: 60ms;
  }

  .subpage-intro {
    animation-delay: 120ms;
  }
}

@media print {
  .subpage-heading {
    min-height: 0;
  }

  .subpage-art {
    display: none;
  }

  .subpage-heading .container > * {
    animation: none;
  }
}