/* ============================================================
   JPXGLOBAL PAGE HERO SYSTEM — v3.1.0
   ONE consolidated, reusable hero component. This file is the
   single canonical source for hero/banner styling — the legacy
   .hero / .hero--photo / .page-hero rules previously duplicated
   across main.css and premium.css have been removed (see those
   files' "MOVED TO hero.css" markers). Loaded last so nothing
   downstream can silently re-introduce a conflicting override.

   ROOT CAUSE this file fixes (see completion report for detail):
   main.css previously set `opacity: 0.9` on a hero ::before whose
   FIRST background-image layer was an unmodulated SVG feTurbulence
   noise texture — the opacity was meant for two much fainter glow
   layers stacked after it, but `opacity` applies to the whole
   element, so the noise itself rendered at ~90% strength. This
   file does not use that pattern: texture is opt-in, hard-capped
   at 0.03, and never the default.
   ============================================================ */

:root {
  /* Hero tokens — every text/background pairing below is verified
     ≥4.5:1 (WCAG AA, normal text) by explicit contrast calculation,
     not eyeballed. See completion report for the numbers. */
  --hero-dark-bg-a:      #0E1E30;
  --hero-dark-bg-b:      #16283A;
  --hero-dark-heading:   #FFFFFF;      /* ~17.9:1 on hero-dark-bg-a */
  --hero-dark-body:      #E4E1DA;      /* ~12.9:1 */
  --hero-dark-micro:     #B7BEC7;      /* ~7.1:1 — replaces the old #7A7570 (3.8:1, failed AA) */
  --hero-dark-border:    rgba(255,255,255,0.28);

  --hero-light-bg-a:     #FBF8F2;
  --hero-light-bg-b:     #F3EEE3;
  --hero-light-heading:  #0D1B2A;      /* ~17.5:1 on hero-light-bg-a */
  --hero-light-body:     #3C3530;      /* ~9.7:1 */
  --hero-light-border:   rgba(13,27,42,0.14);

  --hero-accent:         #C9A84C;      /* used only as a small mark/rule, never as body text on light bg */
}

/* ── LAYOUT SHELL ─────────────────────────────────────────── */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding: 3.5rem 0 3rem;
}
@media (min-width: 768px)  { .page-hero { padding: 4.5rem 0; min-height: 600px; } }
@media (min-width: 1024px) { .page-hero { min-height: 660px; padding: 5rem 0; } }

.page-hero--dark {
  background: linear-gradient(165deg, var(--hero-dark-bg-a) 0%, var(--hero-dark-bg-b) 100%);
}
.page-hero--light {
  background: linear-gradient(165deg, var(--hero-light-bg-a) 0%, var(--hero-light-bg-b) 100%);
}

/* Optional, opt-in premium texture. NOT applied unless .page-hero--texture
   is explicitly added. Hard-capped inside the 0.02–0.035 range requested —
   there is no other place in this file that touches this opacity value. */
.page-hero--texture::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--texture-grain);
  background-size: 240px 240px;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767px) {
  .page-hero--texture::before { display: none; } /* fully disabled on mobile, not just faded */
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .page-hero__inner--split { grid-template-columns: 55% 1fr; gap: 3rem; }
}
@media (min-width: 1200px) {
  .page-hero__inner--split { grid-template-columns: 52% 1fr; gap: 3.5rem; }
}

/* ── CONTENT ──────────────────────────────────────────────── */
.page-hero__content { max-width: 620px; }

/* .eyebrow is included here too: several templates call the existing
   jpx_eyebrow() helper (inc/helpers.php) rather than hand-rolling the
   markup, and that helper's output must not be modified — this makes its
   plain `.eyebrow` span pick up the same contrast-safe hero colour and
   accent mark whenever it appears inside .page-hero, no call-site changes
   needed. */
.page-hero__eyebrow,
.page-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.page-hero__eyebrow::before,
.page-hero .eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--hero-accent);
  flex-shrink: 0;
}
/* When an icon is used as the accent, skip the rule mark — one accent, not two */
.page-hero__eyebrow--icon::before { content: none; }
.page-hero--dark  .page-hero__eyebrow,
.page-hero--dark  .eyebrow  { color: var(--hero-dark-body); }
.page-hero--light .page-hero__eyebrow,
.page-hero--light .eyebrow { color: var(--hero-light-heading); }
/* Icon accent colour is context-aware, not hardcoded gold: gold reads fine
   on the dark hero (~7.6:1) but washes out badly on the light hero
   (~2.1:1) — same reason gold is never used for light-hero body text. */
.page-hero--dark  .page-hero__eyebrow-icon { color: var(--hero-accent); flex-shrink: 0; }
.page-hero--light .page-hero__eyebrow-icon { color: var(--hero-light-heading); flex-shrink: 0; }

.page-hero__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.25rem, 1.4rem + 4vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 680px;
  margin: 0 0 1.25rem;
}
@media (max-width: 767px) {
  .page-hero__title { font-size: clamp(2.25rem, 9vw, 3rem); }
}
.page-hero--dark  .page-hero__title { color: var(--hero-dark-heading); }
.page-hero--light .page-hero__title { color: var(--hero-light-heading); }

/* Conditional manual line-break — hidden by default (natural wrap on
   mobile/tablet), forced only once the two-column layout has room. Used
   sparingly (currently only the DPP hero) to control an exact wrap point
   without ever changing the wording itself. */
.page-hero__title-break { display: none; }
@media (min-width: 900px) { .page-hero__title-break { display: block; } }

.page-hero__description {
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 580px;
  margin: 0 0 2rem;
}
@media (min-width: 768px) { .page-hero__description { font-size: 1.125rem; } }
.page-hero--dark  .page-hero__description { color: var(--hero-dark-body); }
.page-hero--light .page-hero__description { color: var(--hero-light-body); }

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 1.25rem;
}
.page-hero__actions .btn { min-height: 48px; }
@media (max-width: 639px) {
  .page-hero__actions { flex-direction: column; gap: 12px; }
  .page-hero__actions .btn { width: 100%; }
}

.page-hero__micro {
  font-size: 0.8125rem;
  line-height: 1.6;
  margin: 0;
}
.page-hero--dark  .page-hero__micro { color: var(--hero-dark-micro); }
.page-hero--light .page-hero__micro { color: var(--hero-light-body); }

/* Secondary "outline" button on the dark hero — verified border/text
   contrast against --hero-dark-bg-a. */
.page-hero--dark .btn--outline-white {
  color: var(--hero-dark-heading);
  border-color: var(--hero-dark-border);
}
.page-hero--dark .btn--outline-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.5);
}

/* ── MEDIA (real photo, real <img>/<picture>, never a faded background) ── */
.page-hero__media { position: relative; }
.page-hero__media .jpx-hero-photo__img,
.page-hero__media .jpx-photo,
.page-hero__media .photo-slot {
  border-radius: 16px;
  box-shadow: 0 24px 56px rgba(13,27,42,0.20), 0 6px 18px rgba(13,27,42,0.10);
}
@media (max-width: 767px) {
  /* Mobile framing per spec: more square than the 3:2 desktop frame */
  .page-hero__media .jpx-hero-photo__img { aspect-ratio: 4 / 3; }
}

/* ── FULL-BLEED VARIANT (homepage) ───────────────────────────
   Desktop/tablet (≥768px): the photo fills the section as a full-bleed
   background; text sits on top of a controlled scrim. No grain anywhere
   in this variant.
   Mobile (<768px): a DIFFERENT, art-directed portrait photo (see the
   `mobile_key` art-direction in jpx_hero_photo_picture()) renders as a
   normal in-flow block BELOW the text/CTAs — not as an overlaid
   background. .page-hero__media is deliberately placed after
   .page-hero__inner in the markup so this is its natural position on
   mobile; on desktop it's pulled out with position:absolute regardless
   of source order. Only one photo is ever fetched (the <picture> element
   is shared, not duplicated) since the browser resolves <source media>
   before downloading anything. */
.page-hero--full-bleed {
  padding: 0;
  display: block;
  min-height: 0;
}
@media (min-width: 768px)  { .page-hero--full-bleed { min-height: 620px; } }
@media (min-width: 1024px) { .page-hero--full-bleed { min-height: 680px; } }

/* Mobile: in-flow portrait image below the content */
.page-hero--full-bleed .page-hero__media { margin: 2rem 0 0; }
.page-hero--full-bleed .page-hero__media .jpx-hero-photo__img {
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(13,27,42,0.18);
  object-fit: cover;
  object-position: center;
}
.page-hero--full-bleed .page-hero__inner { padding: 3.5rem 0 2.5rem; }

/* Desktop/tablet: full-bleed background behind overlaid text */
@media (min-width: 768px) {
  .page-hero--full-bleed .page-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
  }
  .page-hero--full-bleed .page-hero__media .jpx-hero-photo,
  .page-hero--full-bleed .page-hero__media .jpx-hero-photo__img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
    object-position: 30% center;
  }
  .page-hero--full-bleed::before {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg,
      rgba(13,27,42,0.90) 0%, rgba(13,27,42,0.74) 36%,
      rgba(13,27,42,0.26) 62%, rgba(13,27,42,0.04) 78%);
    pointer-events: none;
  }
  .page-hero--full-bleed .page-hero__inner {
    min-height: inherit;
    padding: 5rem 0;
    display: flex;
    align-items: center;
  }
}
@media (min-width: 1024px) { .page-hero--full-bleed .page-hero__inner { padding: 5.5rem 0; } }

/* ── FOCUS / MOTION ───────────────────────────────────────── */
.page-hero__actions .btn:focus-visible { outline: 2px solid var(--hero-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .page-hero, .page-hero * { transition: none !important; animation: none !important; }
}