/* ============================================================
   HealthCompass - shared guide hero composition.
   v2.32.0

   THE PROBLEM
   v2.28.0 broke the homepage out of its centred corporate hero. The
   sixteen guide heroes were left exactly as they were: every one of
   them `max-width:760px; margin:0 auto; text-align:center`. So the
   front door is editorial and asymmetric, and every room behind it is
   still centred - the inconsistency just moved one level down.

   THE DESIGN CALL, AND WHY IT IS NOT A 2-COLUMN SPLIT
   The homepage hero can be a 1.15fr/.85fr split because it HAS a
   right-hand element: the animated compass, which is the brand mark.
   Guide heroes have nothing to put in a second column. Manufacturing
   one - a big icon, a stock graphic, a decorative blob - would be
   exactly the "AI slop" the standing directive forbids, and it would
   be inventing content to satisfy a layout.

   So asymmetry here means what it means in print: type anchored to a
   left axis, a measure held deliberately short, and the resulting
   negative space on the right left EMPTY on purpose. The container
   widens 760px -> 1240px to match the homepage, but the reading
   measure stays ~46ch. The empty right third is the composition, not
   a gap waiting to be filled.

   Every hero keeps its own gradient, accent, eyebrow pill and canvas.
   This file changes alignment and measure only - no colour, no type
   family, no per-guide identity.

   LOAD ORDER: same trap as css/type.css. On guide pages the inline
   <style> closes AFTER the first stylesheet links, so this must be
   linked after the final </style> or it silently loses. See the
   comment in css/type.css.
   ============================================================ */

/* ---- 1. Hero inner: left-anchored, widened ---------------------- */
.bl-hero-in,
.br-hero-in,
.dt-hero-in,
.fh-inner,
.fg-hero-in,
.gt-hero-in,
.ht-hero-in,
.lg-hero-in,
.pf-hero-in,
.sl-hero-in,
.st-hero-in,
.wt-hero-in,
.th-hero-in,
.ji-hero-in,
.mt-hero-in,
.ff-hero-inner {
  max-width: 1240px;
  /* The wrapper still centres inside the viewport at large widths; it is
     the CONTENT that left-aligns against the wrapper's left edge.
     (An earlier `margin-inline:0` here was dead - these two lines
     overrode it on the very next declaration. Removed v2.35.0.) */
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* ---- 2. Reading measure: short on purpose ----------------------- */
/* These carried `margin:0 auto` which would fight the left axis. */
.bl-hero-sub,
.br-hero-sub,
.dt-hero-sub,
.fh-sub,
.fg-hero-sub,
.gt-hero-sub,
.ht-sub,
.lg-hero-sub,
.pf-hero-sub,
.sl-hero-sub,
.st-hero-sub,
.wt-hero-sub,
.th-hero-sub,
.ji-hero-sub,
.mt-sub,
.ff-hero-sub {
  max-width: 46ch;
  margin-left: 0;
  margin-right: 0;
}

/* ---- 3. Child rows that were centred --------------------------- */
/* Stat rows, meta rows and CTA rows all carried
   `justify-content:center`. Left the type but centred the row beneath
   it and the hero reads broken, so they move to the same axis. */
.bl-hero-stats,
.br-hero-stats,
.fg-hero-stats,
.gt-hero-stats,
.wt-hero-stats,
.ji-hero-meta,
.th-hero-meta,
.mt-cta-links,
/* Jump-link rows, caught by a residual-centring sweep after the first
   pass - a centred row of anchors under left-aligned type is exactly
   the broken-looking half-migration this file exists to prevent. */
.dt-hero-jump,
.pf-hero-jump,
.sl-hero-jump {
  justify-content: flex-start;
}

/* ---- 4. Eyebrow: hairline lead-in ------------------------------ */
/* The homepage eyebrow gains a hairline rule that anchors the left
   axis. The guide eyebrows are PILLS with their own background and
   border, so a rule inside the pill would read as a mistake. Instead
   the rule sits OUTSIDE, before the pill, in the guide's own accent.
   Purely decorative, so it is hidden from assistive tech by virtue of
   being a pseudo-element with no content text. */
.bl-hero-eye,
.br-hero-eye,
.dt-hero-eye,
.fg-hero-eye,
.gt-hero-eye,
.lg-hero-eye,
.pf-hero-eye,
.sl-hero-eye,
.st-hero-eye,
.wt-hero-eye,
.th-hero-eye,
.ji-hero-eye,
.ff-hero-eye,
.ht-eyebrow {
  position: relative;
  /* Room for the rule, without moving the pill off the left axis on
     narrow screens where the rule is suppressed. */
  margin-left: 0;
}

@media (min-width: 901px) {
  .bl-hero-eye::after,
  .br-hero-eye::after,
  .fg-hero-eye::after,
  .gt-hero-eye::after,
  .lg-hero-eye::after,
  .st-hero-eye::after,
  .wt-hero-eye::after,
  .th-hero-eye::after,
  .ji-hero-eye::after {
    content: "";
    position: absolute;
    left: calc(100% + .85rem);
    top: 50%;
    width: clamp(28px, 6vw, 74px);
    height: 1px;
    background: currentColor;
    opacity: .38;
    pointer-events: none;
  }
}

/* ---- 5. Mobile ------------------------------------------------- */
/* Stays left-aligned - a centred block under a left-aligned masthead
   is the exact inconsistency this file removes. Only the measure
   relaxes, because 46ch is wider than a 375px viewport anyway. */
@media (max-width: 700px) {
  .bl-hero-sub,
  .br-hero-sub,
  .dt-hero-sub,
  .fh-sub,
  .fg-hero-sub,
  .gt-hero-sub,
  .ht-sub,
  .lg-hero-sub,
  .pf-hero-sub,
  .sl-hero-sub,
  .st-hero-sub,
  .wt-hero-sub,
  .th-hero-sub,
  .ji-hero-sub,
  .mt-sub,
  .ff-hero-sub {
    max-width: 100%;
  }
}