/* ==========================================================================
   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;
  /* Copy anchors to the BOTTOM of the band site-wide (Dave 2026-07-06:
     extend the homepage/FL treatment to the practice areas, blog, and
     contact). Keeps titles out of photo subjects' upper zones and gives
     every banner the same composition; Our Team is the one exception
     (short title centered over the skyline, per its Figma frame) via
     the override below. */
  align-items: flex-end;
  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, values taken from the Figma hero overlay (7115:292:
     pure black, transparent near the top ramping to 40% by ~2/3 down,
     held to the bottom -- mapped from photo-space to the visible band).
     Noticeably lighter than the interim 15/35/62 teal scrim while still
     guaranteeing a dark floor under the H1/intro/CTA zone regardless of
     the photo underneath (build spec 7.2 a11y rule -- verify large-text
     contrast if these stops change). */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 6%,
    rgba(0, 0, 0, 0.4) 64%,
    rgba(0, 0, 0, 0.4) 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;
}

/* Companion to X6(a) for the full-bleed TopLevelPages (Family Law LP,
   Real Estate, Wills & Estates): they share TopLevelPage.ss with the
   practice-area DETAIL pages, so their #main carries .detail-main and
   its intentional var(--space-section-y) padding -- but on these
   block-driven pages #main's .detail-container is EMPTY, making #main a
   ~204px invisible spacer between the hero and the first block (the
   "far too much padding under the banner" report, 2026-07-06; design
   gap is 80px, supplied by the first block's own padding). Keyed off
   the FULL-BLEED hero variant + emptiness so the contained-hero detail
   pages (which use that padding around real rail-nav/content) and any
   future TopLevelPage that grows real #main content keep their spacing. */
.hero--full ~ #main.detail-main:not(:has(.detail-container > *)) {
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 992px) {
  .hero--full {
    /* Design-proportional band height: 660/1900 = 34.74vw, capped at the
       design's own 660px (every Figma LP hero frame is 660 tall at the
       1900 reference). Replaces the min(530px, 46vh) interim cap --
       X6(b)'s "Dave to confirm" call, resolved 2026-07-06 when the
       content-driven height variance (one-row vs two-row H1s) made the
       practice-area banners visibly unequal. With height set by width
       alone, copy length no longer changes banner height, and photo
       bands render at the design's own proportions site-wide. */
    min-height: min(660px, 34.74vw);
  }

  .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; }

/* ------------------------------------------------------------------ *
 * Team LP hero -- Figma 7138:256 band
 * ------------------------------------------------------------------ */

/* The design frames the UPPER band of the 4:3 Edmonton-skyline stock:
   magenta twilight sky through the downtown skyline, with the bridge
   just entering at the bottom (stock band ~17-59% vertically, measured
   off the Figma layer transform). The old server-side center Fill baked
   the bridge-deck middle band (~27-73%) into the JPEG -- sky and
   skyline were unreachable. With the whole photo now served (Hero.ss
   ScaleWidth), 28% reproduces the design band at the 1900x660 reference
   and still keeps sky + skyline through the squat min(530px, 46vh)
   shared cap. Outranks .hero__img--focus-* (0-2-0 vs 0-1-0). */
.hero--page-our-team .hero__bg-image {
  object-position: center 23%;
}

/* Our Team keeps CENTERED copy -- the one exception to the site-wide
   bottom anchor (short title over the open mid-skyline, per its Figma
   frame 7138:256; Dave's 2026-07-06 extend-the-anchor list named the
   practice areas, blog, and contact, not Team). */
.hero--full.hero--page-our-team {
  align-items: center;
}

/* Family Law LP face-clearance note (Figma 7138:604): the mock runs its
   lorem title across the father's mouth and no crop can dodge it (faces
   near center; card-bg.jpg is a 512px thumb, no full-res original) --
   the bottom anchor, now the site-wide default above, is what keeps the
   title on the jacket/trail zone. Interim: Dave is sourcing alternate
   imagery; revisit if Team-style centering is ever wanted here. */

/* ------------------------------------------------------------------ *
 * Homepage hero -- Figma 7115:291 composition
 * ------------------------------------------------------------------ */

/* The homepage hero photo (hero-home.jpg) is the design's own 1900x660
   band export: sunburst cut at the top edge, hiker upper-left, rocks at
   the bottom. Three homepage-only rules (body.HomePage scope, PR #20
   precedent -- other full-bleed heroes keep centered copy):
   1. Pin the photo band to its TOP edge: when the viewport is squatter
      than 1900:660, object-fit: cover must trim something -- trimming
      the bottom (rocks) preserves the two things the composition is
      about (sunburst + hiker); the default center trim was shaving the
      top off the sunburst. Outranks the .hero__img--focus-* classes on
      specificity (0-2-0 vs 0-1-0), X stays centered like focus-center.
   2. Design H1 measure: the text block is ~1030px wide, giving the
      3-line break ("... for / ... and / Family Law Solutions"); the
      shared 760px measure re-wraps it to 4 lines.
   (Bottom-anchored copy -- which keeps the hiker above the H1 -- is now
   the site-wide .hero--full default, so the rule that lived here moved
   up; the top pin below is still homepage-specific to this photo.) */
body.HomePage .hero__bg-image {
  object-position: center top;
}

/* Mobile H1 one-line fix (team ask, 2026-08-04): "Edmonton Family
   Lawyers" (the first 3 words of the seeded H1 -- see
   docs/content/source/01-home.md; copy is CMS content, not edited
   here) was wrapping as "Edmonton Family / Lawyers" at 375-390px.
   Cause: no homepage-specific mobile H1 rule existed below 992px, so
   mobile inherited the sitewide --fs-h1 token (tokens.css), whose
   clamp floor of 2.5rem computes to ~36px in this range -- far wider
   than "Edmonton Family Lawyers" (23 chars) fits in the ~324-351px
   hero text-zone at these widths.

   Root font-size gotcha: this is NOT the browser default 16px. site.css
   carries the only `html { font-size }` rule in the theme -- 14px below
   768px, 14.5px 768-991px, 15px 992-1199px, 16px 1200-1649px, 17px
   above -- uncontested by any later-loaded file (repo-wide grep). Every
   rem below is computed against that cascade, not against 16px.

   Fit math (avg ~0.52em/char advance, Red Hat Display Medium -- an
   estimate; not verified in a live browser in this session):
     text-zone(w) = w - 2 * --space-page-gutter(w), at the 14px root:
       360px -> gutter 18.00px -> zone 324.0px
       375px -> gutter 18.75px -> zone 337.5px
       390px -> gutter 19.50px -> zone 351.0px
     "Edmonton Family Lawyers" = 23 chars * 0.52em = 11.96em wide.
     Size that just fits at 360px = 324.0 / 11.96 = 27.1px; ~7% safety
     margin for the estimate -> 25.2px = 1.8rem @ 14px root. That
     becomes the clamp floor below.
   Below 360px the floor stays flat at 25.2px -- slightly too big to
   guarantee one line down to 320px (which would need ~1.70rem, already
   at the "extreme" edge the brief flagged) -- so 320-359px may wrap to
   2 lines. Accepted per spec rather than shrinking the floor further.
   Slope/intercept below are fitted so the fluid term also equals
   1.8rem exactly at 360px (floor engages there, not before) and
   reaches ~33.75px by 992px, matching the existing desktop rule's own
   min bound (2.25rem @ the 15px root at exactly 992px) for a seamless
   handoff into the unmodified @media (min-width: 992px) block below --
   desktop sizes are NOT changed.
   Check: 375px -> 20.3 + 1.353% * 375 = 25.4px; 390px -> 20.3 + 1.353%
   * 390 = 25.6px -- both well under their own "just fits" ceilings of
   28.2px (337.5/11.96) and 29.4px (351/11.96), i.e. even more headroom
   at these two widths than the ~7% built into the 360px floor. */
@media (max-width: 991.98px) {
  body.HomePage .hero__content h1 {
    font-size: clamp(1.8rem, 1.45rem + 1.353vw, 2.45rem);
  }
}

@media (min-width: 992px) {
  /* (Homepage band height now comes from the shared .hero--full
     design-proportional min-height above -- the dedicated override that
     lived here became redundant when X6(b) was resolved site-wide,
     2026-07-06. Zero-trim of the top-pinned band up to 1900px is what
     keeps the hiker clear of the bottom-anchored copy.) */

  /* Type and measure scale to the same 1900px design reference as the
     band (H1 64px/1900 = 3.37vw; measure 1030px/1900 = 54.2vw), so the
     copy block keeps the design's share of the band -- and its exact
     3-line break -- at every desktop width instead of a fixed 64px H1
     outgrowing a shrinking photo and riding up over the hiker. Floor
     2.25rem keeps the H1 readable in the 992-1100px range where the
     proportional size would dip below the site scale. */
  body.HomePage .hero__content {
    max-width: min(1030px, 54.2vw);
  }

  body.HomePage .hero__content h1 {
    font-size: clamp(2.25rem, 3.37vw, var(--fs-h1));
  }
}