/* Compact hero treatment is deliberately limited to the Wagtail Capabilities,
   Resources and Industries trees. The homepage and unrelated internal pages are untouched.
   Loaded after page-surfaces.css and capability-theme.css to avoid overrides. */

/* These are minimums, not fixed heights. Long titles, intros and metadata
   can increase the hero without clipping or overlapping the next section. */
body.hero-tree-capabilities {
  --compact-hero-min: 500px;
}
body.hero-tree-resources {
  --compact-hero-min: 480px;
}
body.hero-tree-industries {
  --compact-hero-min: 500px;
}
body.hero-tree-capabilities #main-content .page-hero-shell,
body.hero-tree-resources #main-content .page-hero-shell,
body.hero-tree-industries #main-content .page-hero-shell {
  min-height: 0;
}
body.hero-tree-capabilities #main-content .interior-hero--with-media,
body.hero-tree-resources #main-content .interior-hero--with-media,
body.hero-tree-industries #main-content .interior-hero--with-media {
  min-height: var(--compact-hero-min);
}
/* The core-capability theme has a more specific 610px floor; override it
   only inside the selected Capabilities tree. */
body.hero-tree-capabilities.capability-overview #main-content .interior-hero--with-media {
  min-height: var(--compact-hero-min);
}

/* The image no longer contributes its intrinsic height to the grid. The
   breadcrumb and real text are the sizing content. Preserving bottom/right
   framing prevents losing bottom-of-image subject matter and watermarks. */
@media (min-width: 1101px) {
  body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
    .interior-hero:not(.interior-hero--animation) .interior-hero-media--image {
    position: absolute;
    inset: 0 0 0 auto;
    width: 62%;
    height: 100%;
    min-height: 0;
    align-self: stretch;
    justify-self: end;
  }
  body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
    .interior-hero:not(.interior-hero--animation) .interior-hero-media--image > picture,
  body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
    .interior-hero:not(.interior-hero--animation) .interior-hero-media--image > picture > img {
    width: 100%;
    height: 100%;
  }
  body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
    .interior-hero:not(.interior-hero--animation) .interior-hero-media--image > picture > img {
    object-fit: cover;
    object-position: right bottom;
  }
}

/* Trim whitespace while retaining the existing typography hierarchy and
   keeping the editable optional scroll link inside the hero. */
body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
  .interior-hero:not(.interior-hero--animation) .breadcrumb {
  padding-top: clamp(20px, 2vw, 30px);
}
body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
  .interior-hero:not(.interior-hero--animation) .page-heading {
  padding-top: clamp(22px, 2.2vw, 36px);
  padding-bottom: clamp(34px, 3vw, 52px);
  justify-content: center;
}
body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
  .page-heading .eyebrow {
  margin-bottom: 18px;
}
body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
  .page-heading h1 {
  font-size: clamp(2.4rem, 3.6vw, 4.15rem);
  line-height: 1.1;
}
body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
  .page-heading .page-intro {
  margin-top: 22px;
  line-height: 1.62;
  font-size: clamp(1rem, 1.15vw, 1.16rem);
}
body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
  .page-heading .hero-section-scroll {
  margin-top: 22px;
}

/* Image-free index headings are compact too, within only the selected trees. */
body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
  .page-hero-shell:not(:has(.interior-hero)) > .page-heading {
  min-height: var(--compact-hero-min);
  padding-block: clamp(38px, 3vw, 52px);
}

/* Image-free Research & Development pages render their breadcrumb before the
   special research hero. Keep both inside a single charcoal surface, including
   the full-width gutters and the small-screen stacking layout. */
body.hero-tree-capabilities.research-page #main-content .research-hero-shell {
  background: #111315;
  color: #f4f3ef;
  color-scheme: dark;
  min-height: 0;
}
body.hero-tree-capabilities.research-page #main-content .research-hero-shell > .breadcrumb {
  background: transparent;
  color: #b9c0c5;
  max-width: calc(var(--container) + var(--gutter)*2);
  padding-inline: var(--gutter);
  padding-top: clamp(20px, 2vw, 30px);
}
body.hero-tree-capabilities.research-page #main-content .research-hero-shell .research-hero {
  background: #111315;
}
body.hero-tree-capabilities.research-page #main-content .research-hero-shell .research-hero-inner {
  min-height: 0;
  padding-block: clamp(38px, 4vw, 58px);
}
body.hero-tree-capabilities.research-page #main-content .research-hero-shell .research-hero .eyebrow {
  margin-bottom: 18px;
}
body.hero-tree-capabilities.research-page #main-content .research-hero-shell .research-hero h1 {
  font-size: clamp(2.4rem, 3.6vw, 4.15rem);
  line-height: 1.1;
}
body.hero-tree-capabilities.research-page #main-content .research-hero-shell .research-hero-intro {
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.62;
  margin: 22px 0 24px;
}

/* Resources carry a publication date, byline and reading time. Leave that
   metadata in flow rather than imposing a fixed hero height. */
body.hero-tree-resources #main-content .page-heading .article-meta {
  margin-top: 18px;
}

@media (max-width: 1100px) {
  body.hero-tree-capabilities { --compact-hero-min: 0px; }
  body.hero-tree-resources { --compact-hero-min: 0px; }
  body.hero-tree-industries { --compact-hero-min: 0px; }

  body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
    .interior-hero:not(.interior-hero--animation) .page-heading {
    padding-top: 28px;
    padding-bottom: 38px;
  }

  /* Keep the existing stacked-media layout, but prevent a portrait/large
     image from adding an excessive second hero panel. */
  body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
    .interior-hero:not(.interior-hero--animation) .interior-hero-media--image {
    height: clamp(190px, 25vw, 275px);
    max-height: 275px;
    min-height: 0;
    overflow: hidden;
  }
  body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
    .interior-hero:not(.interior-hero--animation) .interior-hero-media--image > picture,
  body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
    .interior-hero:not(.interior-hero--animation) .interior-hero-media--image > picture > img {
    height: 100%;
    width: 100%;
  }
  body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
    .interior-hero:not(.interior-hero--animation) .interior-hero-media--image > picture > img {
    object-fit: cover;
    object-position: right bottom;
  }

  body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
    .page-hero-shell:not(:has(.interior-hero)) > .page-heading {
    min-height: 0;
  }
}

/* Smaller mobile artwork maintains the bottom edge and existing fade. */
@media (max-width: 760px) {
  body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
    .interior-hero:not(.interior-hero--animation) .interior-hero-media--image {
    height: clamp(150px, 43vw, 200px);
    max-height: 200px;
  }
  body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
    .interior-hero:not(.interior-hero--animation) .page-heading {
    padding-top: 22px;
    padding-bottom: 30px;
  }
  body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
    .page-heading h1 {
    font-size: clamp(2.2rem, 8.2vw, 3.3rem);
  }
  body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) #main-content
    .page-heading .page-intro {
    font-size: 1rem;
    line-height: 1.65;
  }
}

/* Videos remain uncropped: keep the media's own ratio, play/pause behaviour
   and shared poster dimensions instead of forcing cover on those elements. */
@media print {
  body:is(.hero-tree-capabilities, .hero-tree-resources, .hero-tree-industries) {
    --compact-hero-min: 0px;
  }
}