/* SPACEREL interior-page heroes. The homepage uses a separate hero layout. */
.interior-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  isolation: isolate;
  overflow: hidden;
  background: #111315;
  color: #f4f3ef;
}
/* The minimum is a floor; both copy and in-flow artwork can grow the grid. */
.interior-hero--with-media { min-height: var(--internal-hero-min, 380px); }
.interior-hero .breadcrumb,
.interior-hero .page-heading {
  grid-column: 1;
  position: relative;
  z-index: 2;
  background: transparent;
  color: #f4f3ef;
}
body.reading-surfaces:not(.homepage) #main-content .page-hero-shell .interior-hero :is(.breadcrumb, .page-heading) {
  background: transparent;
  color: #f4f3ef;
}
.interior-hero .breadcrumb {
  grid-row: 1;
  padding-top: clamp(24px, 2.7vw, 38px);
}
.interior-hero .page-heading {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 0;
  padding-top: clamp(24px, 2.5vw, 45px);
  padding-bottom: clamp(40px, 4vw, 70px);
}
.interior-hero .page-heading h1 {
  position: relative;
  max-width: min(1120px, 100%);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.interior-hero .page-heading :is(.page-intro, .research-hero-intro) {
  color: #c3cbd3;
  max-width: min(680px, 40vw);
}
.interior-hero .page-heading :is(.eyebrow, .policy-updated),
.interior-hero .page-heading .article-meta { color: #b9c0c5; }
.interior-hero .page-heading .reliability-hero-links .text-link { color: #f4f3ef; }

/* Keep the right-aligned, overlapping artwork in the sizing grid. Its intrinsic
   height contributes to both rows, including when it is taller than the copy. */
.interior-hero .interior-hero-media {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: relative;
  justify-self: end;
  align-self: center;
  z-index: 0;
  width: 62%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}
.interior-hero .interior-hero-media > picture,
.interior-hero .interior-hero-media > .cms-hero-media {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  background: transparent;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 100%);
}
.interior-hero .interior-hero-media > picture > img,
.interior-hero .interior-hero-media .cms-hero-poster {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: right center;
}

/* Text above artwork on phones / tablets; no squeezed or overflowing media. */
@media (max-width: 1100px) {
  .interior-hero { display: flex; flex-direction: column; }
  .interior-hero .breadcrumb { flex: none; }
  .interior-hero .page-heading {
    flex: none;
    min-height: 0;
    padding-top: clamp(34px, 6vw, 60px);
    padding-bottom: clamp(38px, 6vw, 72px);
  }
  .interior-hero .page-heading :is(.page-intro, .research-hero-intro) {
    max-width: min(780px, 100%);
  }
  .interior-hero .interior-hero-media {
    position: relative;
    inset: auto;
    flex: none;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
  }
  .interior-hero .interior-hero-media > picture,
  .interior-hero .interior-hero-media > .cms-hero-media {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 100%);
  }
  .interior-hero .interior-hero-media > picture > img,
  .interior-hero .interior-hero-media .cms-hero-poster,
  .interior-hero .interior-hero-media .cms-hero-video {
    object-fit: contain;
    object-position: center;
  }
}
@media (max-width: 760px) {
  .interior-hero .page-heading h1 {
    max-width: 100%;
    font-size: clamp(2.4rem, 9vw, 4.5rem);
  }

  /* Mobile image only: full-bleed artwork without contain letterboxing.
     Let the image set its own height so no left/right strips appear when
     the uploaded image and hero-frame aspect ratios differ. */
  .interior-hero .interior-hero-media--image {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: auto;
  }
  .interior-hero .interior-hero-media--image > picture {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
  }
  .interior-hero .interior-hero-media--image > picture > img {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: cover;
  }
}
/* Informational movies use a separate content column, never a background.
   This variant is added only by interior templates with an uploaded animation.
   Keep the frame stable across poster/loading/playback and legacy aspect ratios. */
.interior-hero--animation .interior-hero-layout {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  min-width: 0;
  padding-block: clamp(32px, 4vw, 64px);
}
/* Reset the full-width reading-surface heading gutters inside this container. */
body:not(.homepage) #main-content .page-hero-shell .interior-hero.interior-hero--animation .interior-hero-layout > .page-heading {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.interior-hero--animation .page-heading h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.interior-hero--animation .page-heading :is(.page-intro, .research-hero-intro) {
  max-width: 100%;
}
.interior-hero--animation .interior-hero-media--video {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  inset: auto;
  align-self: center;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  background: #111315;
}
.interior-hero--animation .interior-hero-media--video > .cms-hero-media {
  -webkit-mask-image: none;
  mask-image: none;
}
.interior-hero--animation .interior-hero-media--video :is(.cms-hero-poster, .cms-hero-video) {
  object-fit: contain;
  object-position: center;
}
@media (max-width: 1100px) {
  .interior-hero--animation .interior-hero-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .interior-hero--animation .interior-hero-media--video {
    grid-column: 1;
    grid-row: 2;
  }
}

@media print {
  .interior-hero { display: block; min-height: 0; background: #fff; color: #111; }
  .interior-hero .interior-hero-media { display: none; }
  .interior-hero--animation .interior-hero-layout { display: block; padding-block: 24px; }
  body.reading-surfaces:not(.homepage) #main-content .page-hero-shell .interior-hero :is(.page-heading, .breadcrumb) {
    min-height: 0;
    background: transparent;
    color: #111;
  }
  .interior-hero .page-heading :is(.page-intro, .research-hero-intro, .eyebrow, .article-meta, .policy-updated) {
    max-width: 100%;
    color: #222;
  }
}