/* ════════ hummingbird.css — Hummingbird page (matches Figma Sites mockup /automation) ════════
   Same black & white system as the Experian cases. The only page-level shifts:
   1. Black header (the adaptive nav turns black over it); black mobile menu
   2. The header carries the title, meta AND the context Q&A, then a screen
   3. A full-width screen sits beneath every section (replaces the old "Key screens" gallery)
   Rebuilt Oct 24 as a platform page: each section is a short lead, one callout and a
   screen. Callouts: 01 two cards (.hb-pair), 02 two questions (.hb-qs), 03 three
   points (.v7c-points.is-3), 04 a spec row (.v7c-metrics.hb-spec). */

/* 1. nav — the adaptive nav (base.css + site.js) turns it black over the
   black header and white from "The problem" on. Only the menu overlay stays
   black on this page. */
body.hb-page .v7-menu{background:#000}
body.hb-page .v7-menu a.v7-menu-cta{background:#fff;color:#000}
body.hb-page .v7-menu-links a{color:#fff;border-bottom-color:rgba(255,255,255,.16)}
body.hb-page .v7-menu-email{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
body.hb-page .v7-menu-li{color:rgba(255,255,255,.7)}

/* section rhythm: heading → intro → content → screen */
main.hb .v7c-h2{margin-bottom:28px}
main.hb .hb-gap,main.hb .hb-pair,main.hb .hb-qa{margin-top:56px}

/* 2. black header */
.hb-head{background:#000;color:#fff;padding:168px var(--v-pad) var(--v-gap)}
.hb-head .v7-lbl{color:rgba(255,255,255,.55)}
.hb-head .v7c-title{color:#fff;margin-top:24px}
.hb-head .v7c-intro{color:rgba(255,255,255,.8)}
.hb-head .v7-display{color:#fff}
.hb-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:88px;align-items:start}
.hb-meta{margin-top:40px}
.hb-meta>div{padding:20px 0;border-top:1px solid rgba(255,255,255,.16)}
.hb-meta dt{font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.hb-meta dd{font-size:16px;line-height:1.5;color:rgba(255,255,255,.6);margin-top:8px}
.hb-ctx{margin-top:var(--v-gap);padding-top:56px;border-top:1px solid rgba(255,255,255,.16)}
.hb-qa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none}
.hb-qa .v7-card-t{color:#fff;margin-bottom:12px}
.hb-qa p{font-size:18px;line-height:1.6;color:rgba(255,255,255,.6)}

/* 01: two cards */
.hb-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;list-style:none}
.hb-pair li{background:#fff;border:1px solid var(--v-line);border-radius:16px;padding:32px}
.hb-pair p{font-size:18px;line-height:1.6;color:var(--v-ink2);margin-top:16px}
.hb-carousel{margin-top:40px} /* 01's carousel follows the problem / hard part cards (Oct 26) */
@media(max-width:768px){.hb-carousel{margin-top:32px}}

/* 02: two questions (32px card titles, same as the other callouts) */
.hb-qs{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.hb-qs>div{border-top:1px solid var(--v-line);padding-top:28px}
.hb-qs p{font-size:18px;line-height:1.6;color:var(--v-ink2);margin-top:12px;max-width:440px}

/* 04: spec row (on .v7c-metrics; titles at 32 instead of the metric size) */
.hb-spec dt{font-size:32px;line-height:1.15}
.hb-after{margin-top:24px}

/* 3. a screen beneath every section */
.hb-shot{margin-top:72px}
.hb-shot .v7-img{aspect-ratio:1152/650;min-height:0;border-radius:16px} /* section screens 2304×1300 (Phil's ratio, Oct 26; was 1152/600) */
@media(min-width:769px){.hb-head .hb-shot .v7-img{aspect-ratio:1152/600}} /* the header screen (HB1) keeps 2304×1200 */
.hb-head .hb-shot .v7-img{background:#1a1a1a;border:1px solid rgba(255,255,255,.08)}
.hb-head .hb-shot .v7-img span{color:rgba(255,255,255,.5)}
.v7-band .hb-shot .v7-img{background:#ededed}


@media(max-width:1024px){
  .hb-intro{grid-template-columns:1fr;gap:0}
  .hb-qa{grid-template-columns:1fr;gap:40px}
}
@media(max-width:768px){
  .hb-head{padding-top:112px}
  .hb-pair,.hb-qs{grid-template-columns:1fr}
  .hb-pair li{padding:24px}
  .hb-qs{gap:40px}
  .hb-shot{margin-top:48px}
  .hb-shot .v7-img{aspect-ratio:4/3}
  main.hb .hb-gap,main.hb .hb-pair,main.hb .hb-qa{margin-top:40px}
}


/* smoke band behind the header screen (dark variant of .v7c-smoke, see case-study.css).
   The clouds fill the lower part of the black header and fade in from above,
   so the title, meta and Q&A stay on plain black. The screen sits flush on the
   header's bottom edge, rising out of it like the other cases' heroes. */
.hb-head{position:relative;overflow:hidden;isolation:isolate;padding-bottom:0}
.hb-head>.v7-wrap{position:relative;z-index:1}
.hb-head>.v7c-smoke-fx{top:auto;height:860px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%);mask-image:linear-gradient(to bottom,transparent,#000 40%)}
.hb-head .hb-shot .v7-img{border-radius:16px 16px 0 0;border-bottom:0;box-shadow:0 -24px 64px -28px rgba(0,0,0,.6)}
@media(max-width:768px){.hb-head>.v7c-smoke-fx{height:420px}}
/* HB1 filled (Oct 25, Phil): the exports carry their own rounded top corners, so drop the
   CSS radius at every width (as the other heroes do on phones) and shadow the image's own
   shape instead of the slot's box, like the other filled heroes. */
.hb-head .hb-shot .v7-img:has(>picture){border-radius:0;box-shadow:none;filter:drop-shadow(0 -12px 32px rgba(0,0,0,.5))}

/* real images on phones: section screens show whole (no 4:3 crop) once they hold an
   <img>; the header screen (HB1) stays 4:3 and takes a phone crop via <picture>. */
@media(max-width:768px){
  .hb-shot .v7-img:has(>img){aspect-ratio:auto;padding:0}
  .hb-shot .v7-img>img{position:static;display:block;width:100%;height:auto}
  .hb-head .hb-shot .v7-img:has(>img){aspect-ratio:4/3}
  .hb-head .hb-shot .v7-img>img{position:absolute;height:100%}
}

/* 04 spec row: keep three columns until phones (the metrics default drops to two at
   tablet widths, which would orphan the third item) */
@media(max-width:1024px){.hb-spec{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:768px){.hb-spec{grid-template-columns:1fr}.hb-spec>div{display:block;padding-bottom:28px}}

/* Title wraps in balanced lines beside the meta column (Oct 26: "Tools for fighting financial crime" left "crime" alone at 1440) */
.hb-intro .v7c-title{text-wrap:balance}