/* ==========================================================================
   Devgun Family Law -- Block: SectionContentBlock "Text over Image"
   Figma: 01-homepage.png "Serving Edmonton and Nearby Communities" band
   (design geometry: full-bleed photo band ~705px tall at the 1900 frame,
   white H2 + white intro copy centered at the TOP of the band, heading
   ~127px below the band top). A fixed dark scrim guarantees contrast for
   the white copy over any uploaded photo -- build spec 7.2 promotes the
   hero-scrim rule to every text-over-photo surface; the gradient mirrors
   chrome/hero.css (same Rich Black rgb 32,49,52 ramp), top-weighted here
   because this band's copy sits at the top, not the bottom.

   Generic block: any page can use it. Overrides the legacy site.css rules
   (.SectionContentBlock_TextImage > .inner cover-photo + the old
   right-aligned col-lg-4/offset-lg-7 column, now gone from the template).
   Consumes tokens from foundation/tokens.css only -- no raw hex (the scrim
   rgba is the Rich Black ramp value, same precedent as chrome/hero.css).
   Loaded by templates/App/Elements/SectionContentBlock_TextImage.ss.
   ========================================================================== */

.SectionContentBlock_TextImage > .inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* copy at the TOP of the band (design) */
  overflow: hidden;
  /* Band keeps the design's proportional height (705/1900 = ~37vw) so the
     photo reads as a full landscape band, capped at the design's 705px. */
  min-height: clamp(320px, 37vw, 705px);
  /* Re-assert the photo treatment locally so the block does not depend on
     the legacy site.css rule surviving future cleanup. Fallback surface
     when no image is set: the green section band (matches the imageless
     hero convention) -- white copy stays AA either way. */
  background-color: var(--color-bg-section-green);
  background-repeat: no-repeat;
  /* Frame the upper part of the photo so the SKYLINE + sky read (design
     7125:1279), not the bridge/river foreground the centered crop showed. */
  background-position: center 8%;
  background-size: cover;
}

/* Fixed scrim: comfortably dark where the copy sits (top), fading out so
   the photo stays visible through the lower two-thirds. */
.text-image__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(32, 49, 52, 0.55) 0%,
    rgba(32, 49, 52, 0.32) 38%,
    rgba(32, 49, 52, 0) 68%
  );
}

.text-image__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 62rem; /* ~992px copy measure read off the band (1900 frame) */
  margin: 0 auto;
  text-align: center;
  color: var(--color-text-on-dark);
}

/* White heading + white body over the scrim (design: both pure white).
   Both selectors out-specify the legacy-overrides .typography h2 rule
   (0-1-1) that was painting the heading Forest Green over the photo. */
.SectionContentBlock_TextImage .text-image__content h2,
.SectionContentBlock_TextImage .text-image__title {
  color: var(--color-text-on-dark);
}

.SectionContentBlock_TextImage .text-image__content p {
  color: var(--color-text-on-dark);
  font-size: var(--fs-intro);
  line-height: var(--lh-intro);
  letter-spacing: 0;
}

/* Old right-column layout is gone; keep the CTA spacing sane if a page
   uses this block with a CtaLink (legacy .SectionContentBlock .cta rule
   already adds margin-top: 2rem -- nothing further needed). */