/*
 * Aurum Institute — Site-wide Hero Integrity + Typography Pass
 * 2026-09-02
 * Scope: hero rendering, hero typography, responsive hero composition only.
 * Deliberately does NOT alter page content, navigation, project cards, footer,
 * leadership profiles, history timeline, or below-hero sections.
 */

/* ---------- Shared hero text hierarchy ---------- */
.page-hero .eyebrow,
.area-hero .eyebrow,
.tb-isolated-hero__eyebrow,
.hiv-photo-hero__eyebrow,
.implementation-feature-hero__eyebrow {
  font-size: clamp(.76rem, .72vw, .9rem) !important;
  line-height: 1.2 !important;
  letter-spacing: .16em !important;
  font-weight: 800 !important;
}

/* The image-backed hero titles were reading too much like section headings.
   Increase presence without allowing them to take over the photograph. */
.area-hero--image-ready .area-hero-copy h1,
.tb-isolated-hero__content h1,
.hiv-photo-hero__content h1,
.clinical-research-hero__content h1,
.implementation-feature-hero__content h1 {
  font-size: clamp(3.2rem, 5.2vw, 4.8rem) !important;
  line-height: .94 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}

.area-hero--image-ready .area-hero-copy .lead,
.tb-isolated-hero__content > p:last-child,
.hiv-photo-hero__content > p:last-child,
.clinical-research-hero__content p,
.implementation-feature-hero__lead {
  font-size: clamp(1.04rem, 1.28vw, 1.22rem) !important;
  line-height: 1.52 !important;
}

/* About / History / Leadership are editorial heroes. They are already larger;
   only strengthen them slightly and preserve the existing gold emphasis. */
.page-hero.about-hero > h1 {
  font-size: clamp(4rem, 5.4vw, 5.45rem) !important;
  line-height: .9 !important;
  max-width: 10.5ch !important;
  letter-spacing: -.055em !important;
  text-wrap: balance;
}
.page-hero.about-hero > .lead {
  font-size: clamp(1.06rem, 1.28vw, 1.22rem) !important;
  line-height: 1.55 !important;
  max-width: 44rem !important;
}

/* Work overview split hero: stronger copy while keeping image dominant. */
.page-hero.work-hero.has-work-media .work-hero-copy h1 {
  font-size: clamp(4rem, 5.8vw, 5.8rem) !important;
  line-height: .9 !important;
}
.page-hero.work-hero.has-work-media .work-hero-copy .lead {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem) !important;
  line-height: 1.55 !important;
}

/* ---------- Asset rendering guards ---------- */
.about-hero-image,
.area-hero-media--photo img,
.tb-isolated-hero__image,
.hiv-photo-hero__image,
.clinical-research-hero__media img,
.implementation-feature-hero__image,
.work-hero-media img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* The About-family source photographs are absolute layers. Keep a real
   stacking context so text/overlay cannot accidentally paint underneath. */
.page-hero.about-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #191613 !important;
}
.page-hero.about-hero .about-hero-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}
.page-hero.about-hero::before {
  z-index: 1 !important;
}
.page-hero.about-hero > .eyebrow,
.page-hero.about-hero > h1,
.page-hero.about-hero > .lead {
  position: relative !important;
  z-index: 2 !important;
}

/* Page-specific focal points. These are deliberately separate instead of
   forcing one crop across three unrelated photographs. */
body.page-template-page-about .about-hero-image,
body.about-us .about-hero-image {
  object-position: 61% 46% !important;
}
body.page-template-page-history .about-hero-image,
body.about-detail-history .about-hero-image {
  object-position: 58% 43% !important;
}
body.page-template-page-leadership .about-hero-image,
body.about-detail-leadership .about-hero-image {
  object-position: 62% 28% !important;
}

/* Health-area photo heroes retain the source-specific focal vars already
   defined in single-health_area.php. This layer only guarantees the media
   fills the composition and the copy stays readable. */
.area-hero--image-ready .area-hero-media--photo {
  background: #191613 !important;
}
.area-hero--image-ready .area-hero-media--photo img {
  object-fit: cover !important;
  min-width: 100% !important;
}

/* TB/HIV dedicated heroes: protect full-bleed media from legacy rules. */
.tb-isolated-hero,
.hiv-photo-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.tb-isolated-hero__image,
.hiv-photo-hero__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ---------- Mobile: intentionally separate composition ---------- */
@media (max-width: 900px) {
  /* Image-first readability: copy sits in lower third, photograph still has
     breathing room above it. */
  .area-hero--image-ready .area-hero-copy h1,
  .tb-isolated-hero__content h1,
  .hiv-photo-hero__content h1,
  .clinical-research-hero__content h1,
  .implementation-feature-hero__content h1 {
    font-size: clamp(2.55rem, 10.5vw, 3.65rem) !important;
    line-height: .96 !important;
    max-width: 12.5ch !important;
  }

  .area-hero--image-ready .area-hero-copy .lead,
  .tb-isolated-hero__content > p:last-child,
  .hiv-photo-hero__content > p:last-child,
  .clinical-research-hero__content p,
  .implementation-feature-hero__lead {
    font-size: clamp(.98rem, 4vw, 1.08rem) !important;
    line-height: 1.5 !important;
    max-width: 34ch !important;
  }

  .page-hero.about-hero {
    min-height: clamp(520px, 126vw, 650px) !important;
    padding: clamp(72px, 18vw, 104px) 22px clamp(40px, 10vw, 58px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }
  .page-hero.about-hero > h1 {
    font-size: clamp(3rem, 12vw, 4rem) !important;
    line-height: .93 !important;
    max-width: 9.8ch !important;
  }
  .page-hero.about-hero > .lead {
    font-size: clamp(1rem, 4.1vw, 1.1rem) !important;
    line-height: 1.5 !important;
    max-width: 34ch !important;
    margin-top: 22px !important;
  }
  .page-hero.about-hero::before {
    background:
      linear-gradient(180deg, rgba(18,16,14,.08) 0%, rgba(18,16,14,.18) 32%, rgba(18,16,14,.66) 65%, rgba(18,16,14,.92) 100%) !important;
  }

  /* Mobile crops are not inherited blindly from desktop. */
  body.page-template-page-about .about-hero-image,
  body.about-us .about-hero-image {
    object-position: 63% 42% !important;
  }
  body.page-template-page-history .about-hero-image,
  body.about-detail-history .about-hero-image {
    object-position: 56% 42% !important;
  }
  body.page-template-page-leadership .about-hero-image,
  body.about-detail-leadership .about-hero-image {
    object-position: 60% 28% !important;
  }

  .page-hero.work-hero.has-work-media .work-hero-copy h1 {
    font-size: clamp(3rem, 11vw, 4rem) !important;
    line-height: .94 !important;
  }
  .page-hero.work-hero.has-work-media .work-hero-copy .lead {
    font-size: clamp(1rem, 4vw, 1.08rem) !important;
  }
}

@media (max-width: 560px) {
  /* Long health-area names need one smaller ceiling so they never blanket
     the photo on narrow phones. */
  .area-hero--amr .area-hero-copy h1,
  .area-hero--maternal .area-hero-copy h1,
  .area-hero--quality .area-hero-copy h1,
  .area-hero--climate .area-hero-copy h1 {
    font-size: clamp(2.28rem, 10.4vw, 3.05rem) !important;
    max-width: 12.8ch !important;
  }

  .page-hero.about-hero > h1 {
    font-size: clamp(2.85rem, 12vw, 3.55rem) !important;
  }
}

/* ---------- About-page content integrity ---------- */
/* Who We Are is intentionally preserved and kept visible. This is a guard
   against broad hero/layout rules accidentally hiding the section. */
.about-introduction,
.about-introduction-grid,
.about-introduction-copy {
  visibility: visible !important;
  opacity: 1 !important;
}
.about-introduction-copy h2 {
  display: block !important;
}
.about-introduction-copy h2 em {
  color: var(--aurum-gold, #e0ac26) !important;
}

/* ========================================================================
   2026-09-02 — MOBILE HERO COMPOSITION VERIFICATION PASS
   Reference behaviour: TB mobile hero. The image remains full-bleed behind
   the copy; mobile gets its own focal point; no desktop hero geometry moves.
   ======================================================================== */
@media (max-width: 900px) {
  /* About / History / Leadership: keep the photograph visible THROUGH the
     text zone rather than visually turning the lower half into a black panel. */
  .page-hero.about-hero {
    min-height: clamp(610px, 145vw, 760px) !important;
    height: auto !important;
    margin: 0 !important;
    padding: clamp(90px, 20vw, 118px) 22px clamp(38px, 9vw, 54px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    background-color: #191613 !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }
  .page-hero.about-hero .about-hero-image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .page-hero.about-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(180deg,
      rgba(18,16,14,.05) 0%,
      rgba(18,16,14,.08) 31%,
      rgba(18,16,14,.28) 55%,
      rgba(18,16,14,.62) 76%,
      rgba(18,16,14,.78) 100%) !important;
    pointer-events: none !important;
  }
  .page-hero.about-hero > .eyebrow,
  .page-hero.about-hero > h1,
  .page-hero.about-hero > .lead {
    position: relative !important;
    z-index: 2 !important;
    color: #fff !important;
    text-shadow: 0 2px 18px rgba(0,0,0,.34) !important;
  }
  .page-hero.about-hero > .eyebrow { color: #e0ac26 !important; }
  .page-hero.about-hero > h1 {
    font-size: clamp(2.9rem, 11.7vw, 3.8rem) !important;
    line-height: .94 !important;
    max-width: 10.5ch !important;
    margin-bottom: 18px !important;
  }
  .page-hero.about-hero > .lead {
    margin-top: 0 !important;
    max-width: 34ch !important;
    font-size: clamp(.98rem, 4vw, 1.08rem) !important;
    line-height: 1.5 !important;
  }

  /* Real image fallbacks at the same exact approved source paths. These do
     not replace the <img>; they stop a legacy rule from leaving a black hero
     if the image element is temporarily suppressed during responsive layout. */
  body.page-template-page-about .page-hero.about-hero,
  body.about-overview .page-hero.about-hero {
    background-image: url("../photos/client/about/site-visit-laboratory.jpg") !important;
    background-position: 61% 43% !important;
  }
  body.page-template-page-history .page-hero.about-hero,
  body.about-detail-history .page-hero.about-hero {
    background-image: url("../photos/client/optimized/community-group.jpg") !important;
    background-position: 55% 43% !important;
  }
  body.page-template-page-leadership .page-hero.about-hero,
  body.about-detail-leadership .page-hero.about-hero {
    background-image: url("../photos/client/optimized/clinical-discussion.jpg") !important;
    background-position: 58% 25% !important;
  }
  body.page-template-page-about .about-hero-image,
  body.about-overview .about-hero-image { object-position: 61% 43% !important; }
  body.page-template-page-history .about-hero-image,
  body.about-detail-history .about-hero-image { object-position: 55% 43% !important; }
  body.page-template-page-leadership .about-hero-image,
  body.about-detail-leadership .about-hero-image { object-position: 58% 25% !important; }

  /* Implementation Research: same full-bleed mobile behaviour as TB.
     The CSS background is a fallback only; the approved <img> remains first. */
  .implementation-feature-hero {
    position: relative !important;
    isolation: isolate !important;
    min-height: clamp(640px, 150vw, 790px) !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #191613 url("../images/implementation-research-hero.jpg") 59% center / cover no-repeat !important;
  }
  .implementation-feature-hero__image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 59% center !important;
    display: block !important;
  }
  .implementation-feature-hero__overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(180deg,
      rgba(18,16,14,.04) 0%,
      rgba(18,16,14,.12) 36%,
      rgba(18,16,14,.47) 66%,
      rgba(18,16,14,.82) 100%) !important;
  }
  .implementation-feature-hero__content {
    position: absolute !important;
    z-index: 2 !important;
    left: 22px !important;
    right: 22px !important;
    top: auto !important;
    bottom: 36px !important;
    transform: none !important;
    width: auto !important;
    max-width: 620px !important;
    padding: 0 !important;
    color: #fff !important;
  }
  .implementation-feature-hero__content h1 {
    font-size: clamp(2.8rem, 11vw, 3.65rem) !important;
    line-height: .94 !important;
    max-width: 11.5ch !important;
    margin: 0 0 16px !important;
  }
  .implementation-feature-hero__lead {
    max-width: 34ch !important;
    font-size: clamp(.96rem, 3.9vw, 1.06rem) !important;
    line-height: 1.48 !important;
  }

  /* HIV: dedicated picture element gets the same full-bleed contract. The
     mobile-approved source remains in <picture>, with a fallback background. */
  .hiv-photo-hero.hiv-photo-hero--premium {
    position: relative !important;
    isolation: isolate !important;
    min-height: clamp(650px, 150vw, 800px) !important;
    height: auto !important;
    overflow: hidden !important;
    background: #191613 url("../images/hiv/hiv-hero-final-approved-20260831.png") 68% 50% / cover no-repeat !important;
  }
  .hiv-photo-hero--premium .hiv-photo-hero__picture {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  .hiv-photo-hero--premium .hiv-photo-hero__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 68% 50% !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .hiv-photo-hero--premium::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: auto !important;
    height: auto !important;
    background: linear-gradient(180deg,
      rgba(18,16,14,.02) 0%,
      rgba(18,16,14,.07) 34%,
      rgba(18,16,14,.35) 62%,
      rgba(18,16,14,.78) 100%) !important;
    pointer-events: none !important;
  }
  .hiv-photo-hero--premium .hiv-photo-hero__content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 32px 22px 34px !important;
    color: #fff !important;
  }
  .hiv-photo-hero--premium .hiv-photo-hero__content > * {
    width: 100% !important;
    max-width: 34ch !important;
  }
  .hiv-photo-hero--premium h1 {
    font-size: clamp(3rem, 12vw, 3.8rem) !important;
    line-height: .94 !important;
    margin: 0 0 14px !important;
  }
  .hiv-photo-hero--premium .hiv-photo-hero__content > p:last-child {
    font-size: clamp(.96rem, 3.9vw, 1.05rem) !important;
    line-height: 1.48 !important;
  }

  /* Clinical Research uses a separate component; protect it as full-bleed
     on phones rather than allowing a split image/text composition. */
  .clinical-research-hero {
    position: relative !important;
    isolation: isolate !important;
    min-height: clamp(620px, 145vw, 760px) !important;
    height: auto !important;
    overflow: hidden !important;
    background: #191613 !important;
  }
  .clinical-research-hero__media {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
  .clinical-research-hero__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 59% 42% !important;
    display: block !important;
  }
  .clinical-research-hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(180deg,rgba(18,16,14,.03),rgba(18,16,14,.14) 40%,rgba(18,16,14,.78) 100%) !important;
  }
  .clinical-research-hero__content {
    position: absolute !important;
    z-index: 2 !important;
    left: 22px !important;
    right: 22px !important;
    top: auto !important;
    bottom: 36px !important;
    transform: none !important;
    width: auto !important;
    max-width: 620px !important;
    padding: 0 !important;
    color: #fff !important;
  }
  .clinical-research-hero__content h1 {
    font-size: clamp(2.9rem, 11.5vw, 3.75rem) !important;
    line-height: .94 !important;
    margin: 0 0 16px !important;
  }
  .clinical-research-hero__content p {
    max-width: 34ch !important;
    font-size: clamp(.96rem, 3.9vw, 1.05rem) !important;
    line-height: 1.48 !important;
  }

  /* Existing image-backed Health Areas already follow the correct AMR/TB
     model. Tighten the contract so no legacy responsive rule can make their
     media disappear. */
  .area-hero--image-ready {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    min-height: clamp(610px, 145vw, 760px) !important;
  }
  .area-hero--image-ready .area-hero-layout,
  .area-hero--image-ready .area-hero-media--photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .area-hero--image-ready .area-hero-media--photo { z-index: 0 !important; margin: 0 !important; }
  .area-hero--image-ready .area-hero-media--photo img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    object-fit: cover !important;
    object-position: var(--hero-object-position-mobile, center center) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .area-hero--image-ready .area-hero-layout::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(180deg,rgba(18,16,14,.02),rgba(18,16,14,.12) 38%,rgba(18,16,14,.42) 65%,rgba(18,16,14,.80) 100%) !important;
    pointer-events: none !important;
  }
  .area-hero--image-ready .area-hero-copy {
    position: absolute !important;
    z-index: 2 !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 30px 22px 36px !important;
  }
}

@media (max-width: 560px) {
  .implementation-feature-hero,
  .hiv-photo-hero.hiv-photo-hero--premium,
  .clinical-research-hero,
  .area-hero--image-ready,
  .page-hero.about-hero {
    min-height: clamp(620px, 158vw, 760px) !important;
  }
}

/* About section title requested in Aurum gold. This is intentionally scoped
   to the real "Who we are" title only; body copy and other About headings stay. */
.about-introduction .about-introduction-copy h2,
.about-introduction .about-introduction-copy h2 em {
  color: #e0ac26 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.34) !important;
}


/* 2026-09-02 final three mobile hero focal fixes — mobile only. */
@media (max-width: 760px) {
  .area-hero--amr .area-hero-media--photo img { object-position: 27% 50% !important; }
  .area-hero--climate .area-hero-media--photo img { object-position: 31% 62% !important; }
}