/*
  Hero — a default part of pages.
  Symmetric top/bottom padding, a min-height, content aligned to the bottom,
  and inline padding equal to the container width (via .container inside).
*/

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;          /* content aligned to the bottom */
  min-block-size: 45rem;
  padding-block: var(--section-spacing); /* top padding == bottom padding */
  isolation: isolate;
  color: var(--color-white);
  overflow: clip;
}

/* Compact hero (e.g. the 404 page): between the standard 45rem and half-height. */
.hero--compact {
  min-block-size: 34rem;
}

/* Small hero (e.g. the search-results page): a short banner — just tall enough
   to clear the floating header and seat the title. */
.hero--sm {
  min-block-size: 28rem;
}

.hero-media,
.hero-media img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Legibility scrim so white hero text keeps AA contrast over any photo. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / 0.6) 70%);
}

/* No content inside the hero (no chapeau/title/description/button) → the scrim
   isn't needed, so drop it and show the photo unobscured. */
.hero:not(:has(.hero-content > *))::after {
  content: none;
}

.hero-content {
  max-width: 48rem;
}

/* Any paragraph in the hero is capped narrower than the heading above it. */
.hero p {
  max-width: 485px;
}

.hero .chapeau,
.hero :is(h1, h2, h3) {
  color: var(--color-white);
}

.hero-title {
  margin-block: var(--space-2xs) var(--space-s);
}

.hero-description {
  margin-block: 0 var(--space-m);
}

/* The .lead clamp bottoms out at 1.125rem on narrow screens; on mobile bump the
   hero description up to the lead's full size (--text-lead upper bound) so it
   keeps its presence. */
@media (max-width: 40rem) {
  .hero-description {
    font-size: 1.25rem;
  }
}

/*
  The header is FIXED, so it's out of flow and reserves no space — the opening
  hero starts at the very top of the page and the header floats over it (its
  higher z-index keeps it painted on top; over a hero image it reads as a
  transparent floating bar). The hero adds the header's footprint to its top
  padding so its (bottom-aligned) content always clears the header — no negative
  margins needed. The hero is always the page's opening element, so this applies
  to every hero (image or not).
*/
.hero {
  padding-block-start: calc(var(--section-spacing) + var(--header-spacer));
}

/* Builder "Hero" as the first row: cancel the content wrapper's own top padding
   so the hero reaches the very top (WPBakery nests rows in
   .entry-content > .wpb-content-wrapper > .vc_row:first-child). */
.entry-content:has(> .wpb-content-wrapper > .vc_row:first-child .hero) {
  padding-block-start: 0;
}