.jarvis-hero {
  /* Fixed min-height, NOT vh: Canvas renders in an auto-height preview iframe
     where viewport units feed back into the iframe height and break scrolling. */
  min-height: 420px;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.jarvis-hero:not([style*="background-image"]) {
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary, #1b2a4a));
}
.jarvis-hero__overlay {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 0;
}
/* Dark text -> white overlay, so raising it lightens the photo instead of
   darkening it. Two classes deep, to beat the #000 rule above. */
.jarvis-hero__overlay.jarvis-bg__overlay--light {
  background: #fff;
}
.jarvis-hero__inner {
  z-index: 1;
}
/* Text column: full width on small screens, 85% from lg up (was Bootstrap
   col-lg-9/col-xl-8 = 75%/66%, too narrow). Plain width, not a col- class,
   because the grid has no 85% step. */
.jarvis-hero__content {
  width: 100%;
}
@media (min-width: 992px) {
  .jarvis-hero__content {
    width: 85%;
  }
}
/* Text color: light (#fff) or dark (#000), from the text_color prop. */
.jarvis-hero--text-light,
.jarvis-hero--text-light .jarvis-hero__heading,
.jarvis-hero--text-light .jarvis-hero__subheading {
  color: #fff;
}
.jarvis-hero--text-dark,
.jarvis-hero--text-dark .jarvis-hero__heading,
.jarvis-hero--text-dark .jarvis-hero__subheading {
  color: #000;
}
/* Light text -> whole region black for guaranteed contrast. Comes after the
   gradient rule above so it wins the specificity tie. This only covers the
   no-image hero: a background image paints straight over it, so with an image
   the ONLY thing protecting contrast is the overlay opacity, which
   jarvis_overlay_alpha computes server-side — for dark text as much as for
   light. */
.jarvis-hero--text-light {
  background-color: #000;
}
.jarvis-hero--text-light:not([style*="background-image"]) {
  background: #000;
}
/* Heading size keyed off the TAG, so the heading_level prop actually resizes.
   Previously .display-3 was hardcoded in the twig: h1/h2/h3 changed the element
   but every level rendered at calc(1.525rem + 3.3vw).

   Sizes derive from the theme's configurable scale (--jarvis-fs-*, set per site
   under theme settings, with separate mobile values) instead of Bootstrap's
   display-* ladder, so hero headings now follow site typography — and drop the
   vw unit, which the Canvas preview iframe handles badly.

   1.12 keeps a hero above body copy while landing 30% under the old ceiling:
   .display-3 capped at 4rem, and 2.5rem x 1.12 = 2.8rem. Defaults render
   h1 2.8rem / h2 2.24rem / h3 1.96rem. */
.jarvis-hero__heading {
  line-height: 1.2;
}
h1.jarvis-hero__heading {
  font-size: calc(var(--jarvis-fs-h1, 2.5rem) * 1.12);
}
h2.jarvis-hero__heading {
  font-size: calc(var(--jarvis-fs-h2, 2rem) * 1.12);
}
h3.jarvis-hero__heading {
  font-size: calc(var(--jarvis-fs-h3, 1.75rem) * 1.12);
}