/* ============================================================
   HERO SYSTEM — fills the empty right half of .page-hero
   Tier A  .page-hero.hero-shot   full-bleed banner image
   Tier B  .page-hero.hero-facts  text left + Quick Facts table right
   NOTE: most pages redeclare .page-hero in an inline <style> that
   loads after this file, so both tiers are written as .page-hero.X
   (specificity 0,2,0) to win regardless of source order.
   ============================================================ */

/* --- Tier A: banner hero. Real <img>, so it is indexable and LCP-friendly. --- */
/* Pages declare their hero under different names (.page-hero, .ind-hero, ...) in an
   inline <style>; pair each with .hero-shot so specificity beats the inline rule. */
.page-hero.hero-shot,.ind-hero.hero-shot{padding-top:9rem;padding-bottom:4.5rem;min-height:clamp(380px,34vw,500px);display:flex;align-items:center;position:relative;overflow:hidden}
.page-hero.hero-shot>.container,.ind-hero.hero-shot>.container{position:relative;z-index:2;width:100%}
.page-hero.hero-shot::before,.ind-hero.hero-shot::before{z-index:1}
/* .ind-hero paints its own gradient background — let the photo through. */
.ind-hero.hero-shot{background:var(--bg)}
.hero-shot-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-shot-media img{width:100%;height:100%;object-fit:cover;object-position:78% 62%;display:block;filter:grayscale(.18) contrast(1.06) brightness(.72)}
.hero-shot-media::after{content:'';position:absolute;inset:0;background:
  linear-gradient(90deg,var(--bg) 0%,rgba(7,9,13,.96) 30%,rgba(7,9,13,.80) 55%,rgba(7,9,13,.42) 80%,rgba(7,9,13,.30) 100%),
  linear-gradient(180deg,rgba(7,9,13,.55) 0%,rgba(7,9,13,0) 28%,rgba(7,9,13,0) 62%,rgba(7,9,13,.72) 100%)}
/* Below ~1024px the parts sit behind the copy — flatten to a vertical scrim. */
@media(max-width:1024px){
  .hero-shot-media img{object-position:center 58%;filter:grayscale(.2) contrast(1.05) brightness(.55)}
  .hero-shot-media::after{background:linear-gradient(180deg,rgba(7,9,13,.86) 0%,rgba(7,9,13,.80) 45%,rgba(7,9,13,.93) 100%)}
}
@media(max-width:768px){.page-hero.hero-shot,.ind-hero.hero-shot{padding-top:7rem;padding-bottom:3rem;min-height:0}}

/* --- Tier B: Quick Facts card. Real <table> so crawlers and LLMs can read it. --- */
.page-hero.hero-facts{padding-bottom:3rem}
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,384px);gap:clamp(2rem,4vw,4rem);align-items:start;position:relative;z-index:1}
.facts-card{background:var(--bg2);border:1px solid var(--border-o);border-top:3px solid var(--orange);padding:1.5rem 1.6rem 1.6rem}
.facts-card .facts-hd{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;color:var(--orange);text-transform:uppercase;margin:0 0 1.1rem;font-weight:400}
.facts-table{width:100%;border-collapse:collapse;font-size:.84rem}
.facts-table th,.facts-table td{text-align:left;vertical-align:top;padding:.62rem 0;border-bottom:1px solid var(--border);line-height:1.55}
.facts-table tr:last-child th,.facts-table tr:last-child td{border-bottom:0}
.facts-table th{font-family:var(--ff-mono);font-size:.63rem;letter-spacing:.07em;text-transform:uppercase;color:var(--steel);font-weight:400;width:32%;padding-right:.9rem;white-space:nowrap}
.facts-table td{color:var(--steel2)}
.facts-table td strong{color:var(--white);font-weight:600}
.facts-card .facts-cta{display:block;margin-top:1.25rem;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.06em;color:var(--orange);text-decoration:none}
.facts-card .facts-cta:hover{text-decoration:underline}
@media(max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:2rem}
  .facts-card{max-width:520px}
  /* .facts-table th is nowrap on desktop; let it breathe once stacked */
  .facts-table th{width:34%;white-space:normal}
}