/* ==========================================================================
   Devgun Family Law -- Chrome: Hero
   Two variants (see templates/App/Includes/Hero.ss): full-bleed
   (Homepage/Team LP/Family Law LP + top-level TopLevelPages) and contained
   rounded (practice-area detail pages). Fixed dark scrim on the full-bleed
   variant is a REQUIRED a11y guarantee (build spec 7.2) -- white H1 stays
   readable regardless of the uploaded photo's own tonal range.
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * Full-bleed hero
 * ------------------------------------------------------------------ */

.hero--full {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  overflow: hidden;
  background-color: var(--color-bg-section-green);
}

/* X6(c): imageless variant (e.g. the Blog hero, which has no HeroImage
   set) -- design does not carry the full photo height when there is no
   photo. Collapses to a compact band instead of the full min-height.
   Mobile rule only here; the >=992px override lives AFTER the regular
   `.hero--full` desktop min-height rule further down this file so it
   wins on source order (equal 0-1-0 specificity either way -- moving it
   below is what makes it win, not reordering alone). */
.hero--full-noimage {
  min-height: 320px;
}

.hero__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  /* Fixed gradient: lighter at top, comfortably dark at the bottom third
     where the H1/intro/CTA sit, regardless of the photo underneath. */
  background: linear-gradient(
    to bottom,
    rgba(32, 49, 52, 0.15) 0%,
    rgba(32, 49, 52, 0.35) 45%,
    rgba(32, 49, 52, 0.62) 100%
  );
}

.hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 4rem var(--space-page-gutter);
}

.hero__content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  color: var(--color-white);
}

.hero__content h1 {
  color: var(--color-white);
}

.hero__content .intro,
.hero__content p {
  color: rgba(255, 255, 255, 0.92);
}

.hero__cta {
  margin: var(--space-gap) 0 0;
}

/* X6(a): white gap after the hero. Root cause verified (not hero margin --
   .hero--full computes margin-top/bottom: 0): site.css has a legacy bare
   `#main { padding-top:6rem }` rule. page/detail.css already neutralizes
   this correctly for detail pages (`#main.detail-main` sets its own
   intentional padding-top, var(--space-section-y)) -- excluded here via
   :not(.detail-main) so this rule cannot outrank that one (an ID+class
   selector like `.hero ~ #main` is MORE specific than detail.css's
   `#main.detail-main`, and detail.css's own require loads last on detail
   pages, so without the exclusion this block would win and zero out the
   deliberate detail-page spacing). Plain `<main id="main">` layouts with
   no page-specific override (e.g. HomePage.ss) have nothing else to
   override the legacy 6rem, so the gap leaks through there (confirmed:
   homepage #main computed padding-top: 96px). MobileCta.ss renders
   between Hero and #main as a `position: fixed` div -- a DOM sibling but
   not a layout obstacle -- so the general sibling combinator (~) is used
   rather than adjacent (+). */
.hero ~ #main:not(.detail-main) {
  padding-top: 0;
}

@media (min-width: 992px) {
  .hero--full {
    /* X6(b): design proportional ratio is 660/1900 (~34.7vh at the 1900px
       reference width); capping at min(530px, 46vh) keeps that
       proportion on tall/narrow viewports instead of the old fixed 660px
       (open item per the edit plan Section 5.5 -- Dave to confirm final
       call; this interim ships the design-proportional cap). */
    min-height: min(530px, 46vh);
  }

  .hero__container {
    padding: 6rem var(--space-page-gutter);
  }

  /* Must come after .hero--full's own desktop min-height (above) to win
     on source order -- both are single-class selectors (0-1-0), and the
     blog hero carries both classes at once (`hero--full hero--full-
     noimage`), so without this ordering the regular rule would clobber
     the imageless collapse at >=992px (verified: measured 414px instead
     of 320px before this block was moved here). */
  .hero--full-noimage {
    min-height: 320px;
  }
}

/* ------------------------------------------------------------------ *
 * Contained rounded hero -- practice-area detail pages
 * ------------------------------------------------------------------ */

.hero--contained {
  padding-top: var(--space-section-y);
}

.hero--contained .hero__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--space-page-gutter);
}

.hero__frame {
  position: relative;
  border-radius: var(--radius-image);
  overflow: hidden;
  min-height: 320px;
  aspect-ratio: 1408 / 660;
  background-color: var(--color-bg-section-green);
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.hero__scrim--contained {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(32, 49, 52, 0.6) 0%,
    rgba(32, 49, 52, 0.15) 40%,
    rgba(32, 49, 52, 0) 65%
  );
}

.hero__contained-content {
  position: absolute;
  left: var(--space-card);
  right: var(--space-card);
  bottom: var(--space-card);
  max-width: 620px;
  color: var(--color-white);
}

.hero__contained-content h1 {
  color: var(--color-white);
  margin: 0;
}

@media (max-width: 767.98px) {
  .hero__frame {
    aspect-ratio: 4 / 5;
  }

  .hero__contained-content {
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    max-width: none;
  }
}

/* ICONA standing rule: text never overlaps a person's face. HeroFocusX
   (CMS, per page) pins which horizontal band of the photo survives as
   narrower viewports crop the cover-fit image - subjects composed at a
   photo's edge stay at that edge instead of drifting under the centered
   text. Left = pin left band, Right = pin right band. */
.hero__img--focus-left { object-position: 0% center; }
.hero__img--focus-center { object-position: 50% center; }
.hero__img--focus-right { object-position: 100% center; }