/* ============================================================
   IPS26 Insights hub hero band: Variant 1B, approved 2026-09-02.
   CLONED VERBATIM from design/hero-cinematic-v2-2026-09-02.html
   (tokens, shared hero ingredients, countdown semantics, the 1B block and
   its 720/520 breakpoints). Class names are the design file's own; the only
   change is that every selector is scoped under .ins-hero so nothing leaks
   into insights.css, and the plate is set from the markup (hero-kit asset).
   Do not re-derive spacing, sizes, colours or fonts here: change the design
   file first, then re-clone. Markup: build.py ips_tribute_band().
   JS: js/hero-countdown.js (numerals), js/hero-video.js (background video).
   ============================================================ */
.ins-hero{
  --rt-red:#e31b23; --rt-gold:#c5a55a; --rt-gold-bright:#e2c77a; --bg:#0f0f0f; --charcoal:#1a1a1a;
  --line:rgba(255,255,255,.12); --ink:#111;
  --scrim:rgba(6,12,18,.74); --scrim-soft:rgba(6,12,18,.62);
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --mono:"Geist Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
  /* the design file's body has no line-height (normal); insights.css sets one
     on body, so pin it here or every 10px mono label grows by 3px */
  line-height:normal;
}
/* the design file's page resets, scoped to the band */
.ins-hero *{box-sizing:border-box}
.ins-hero img{max-width:100%;display:block}
.ins-hero ul{margin:0;padding:0;list-style:none}
.ins-hero p,.ins-hero h2{margin:0}

/* ---------- shared hero ingredients (every sub-variant) ---------- */
.ins-hero.hero{position:relative;color:#fff;overflow:hidden;isolation:isolate}
.ins-hero.hero .photo{position:absolute;inset:0;z-index:-1;background:#0b1a22 center 55%/cover no-repeat}
.ins-hero .lockup{display:inline-flex;align-items:center;gap:16px}
.ins-hero .lockup img.rt{height:26px;width:auto}
.ins-hero .lockup img.ips{height:34px;width:auto}
.ins-hero .lockup .role{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#fff;border-left:1px solid rgba(255,255,255,.4);border-right:1px solid rgba(255,255,255,.4);padding:0 14px;white-space:nowrap}
.ins-hero .strat{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.ins-hero .strat b{font-weight:600;color:var(--rt-gold-bright)}
.ins-hero .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--rt-gold-bright)}
.ins-hero .title{font-family:var(--serif);font-weight:600;line-height:1.02;letter-spacing:-.01em;color:#fff}
.ins-hero .title em{font-style:italic;font-weight:400}
.ins-hero .when{font-size:15px;line-height:1.5;color:#fff}
.ins-hero .when b{font-weight:600}

/* countdown semantics (shared engine) */
.ins-hero .cd{display:flex;align-items:stretch}
.ins-hero .cd-unit{display:flex;flex-direction:column;align-items:center;min-width:0}
.ins-hero .cd-num{font-family:var(--serif);font-weight:500;font-variant-numeric:tabular-nums;line-height:1;color:#fff}
.ins-hero .cd-lab{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;font-size:10px;margin-top:8px;color:#fff}
.ins-hero .cd-head{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#fff}
.ins-hero .cd-head span:last-child,.ins-hero .cd-head b{color:var(--rt-gold-bright);font-weight:600}
.ins-hero .cd-state{display:none;font-family:var(--serif);color:#fff;line-height:1.05}
.ins-hero .cd-live .cd{display:none}
.ins-hero .cd-live .cd-state{display:block}

/* =====================================================================
   1B: letterbox bar, ticker of tracks above the bar
   ===================================================================== */
.ins-hero.b{min-height:600px;display:flex;flex-direction:column;justify-content:flex-end}
.ins-hero.b .photo{background-position:center 45%}
.ins-hero .b-top{position:relative;padding:28px 32px 0;max-width:1160px;margin:0 auto;width:100%;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ins-hero .b-top .lockup,.ins-hero .b-top .strat{padding:12px 16px;background:var(--scrim-soft);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ins-hero .b-title-wrap{position:relative;max-width:1160px;margin:auto auto 0;width:100%;padding:60px 32px 26px}
.ins-hero .b-title-wrap .inner{display:inline-block;background:var(--scrim);padding:22px 28px 24px;max-width:640px}
.ins-hero.b .title{font-size:clamp(32px,4vw,56px);margin-top:10px}
.ins-hero.b .when{margin-top:12px}
.ins-hero .b-ticker{position:relative;background:rgba(6,12,18,.55);border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.28);overflow:hidden;white-space:nowrap}
.ins-hero .b-ticker .rail{display:inline-flex;gap:0;animation:b-ticker 34s linear infinite;will-change:transform}
.ins-hero .b-ticker .rail span{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#fff;padding:9px 28px;position:relative}
.ins-hero .b-ticker .rail span::after{content:"";position:absolute;right:0;top:9px;bottom:9px;width:4px;height:4px;margin:auto 0;background:var(--rt-red)}
@keyframes b-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ins-hero .b-ticker .rail{animation:none;white-space:normal;display:flex;flex-wrap:wrap}.ins-hero .b-ticker .rail .dup{display:none}}
.ins-hero .b-bar{position:relative;background:linear-gradient(180deg,rgba(6,12,18,.86),rgba(6,12,18,.94));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:2px solid var(--rt-gold)}
.ins-hero .b-bar-inner{max-width:1160px;margin:0 auto;padding:18px 32px 20px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ins-hero .b-bar .cd-head{display:flex;gap:10px;flex-wrap:wrap}
.ins-hero .b-bar .cd{gap:0;align-items:baseline}
.ins-hero .b-bar .cd-unit{flex-direction:row;align-items:baseline;gap:10px;padding:0 22px;position:relative}
.ins-hero .b-bar .cd-unit:first-child{padding-left:0}
.ins-hero .b-bar .cd-unit + .cd-unit::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.3)}
.ins-hero .b-bar .cd-num{font-size:clamp(32px,3.6vw,52px)}
.ins-hero .b-bar .cd-lab{margin-top:0;font-size:10px;letter-spacing:.22em}
.ins-hero .b-bar .cd-state{font-size:clamp(28px,3.2vw,42px)}
@media (max-width:720px){
  .ins-hero .b-top{padding:18px 16px 0}
  .ins-hero .b-title-wrap{padding:40px 16px 20px}
  .ins-hero .b-title-wrap .inner{padding:16px 18px;display:block}
  .ins-hero .b-bar-inner{padding:14px 16px 16px;flex-direction:column;align-items:flex-start;gap:12px}
  .ins-hero .b-bar .cd{flex-wrap:wrap;gap:8px 0}
  .ins-hero .b-bar .cd-unit{padding:0 12px}
  .ins-hero .b-bar .cd-unit:first-child{padding-left:0}
  .ins-hero .b-bar .cd-num{font-size:30px}
  .ins-hero .b-bar .cd-lab{font-size:9px;letter-spacing:.12em}
}
@media (max-width:520px){
  .ins-hero.b{min-height:0}
  .ins-hero.b .photo{background-position:60% 40%}
  .ins-hero .b-top .lockup,.ins-hero .b-top .strat{padding:10px 12px}
  .ins-hero .b-top .strat{font-size:9px;letter-spacing:.14em}
  /* the design file's 520 mobile lockup sizing (declared in its 1A block, applies page-wide there) */
  .ins-hero .lockup{gap:10px}
  .ins-hero .lockup .role{padding:0 8px;font-size:9px;letter-spacing:.14em}
  .ins-hero .lockup img.rt{height:20px}.ins-hero .lockup img.ips{height:26px}
}

/* ---------- build-only addition: hub background video ----------
   Same box and crop as the plate; it comes after the plate in the DOM so it
   paints over it, and the plate stays underneath as the fallback. It covers
   the photo area ONLY: js/hero-video.js measures .b-bar and sets
   --b-bar-h, so the thin bar keeps the plate behind its tint as in 1B. */
.ins-hero .video{
  position:absolute;left:0;top:0;width:100%;z-index:-1;
  height:calc(100% - var(--b-bar-h,0px));
  display:block;object-fit:cover;object-position:center 45%;
  background:transparent;pointer-events:none;
}
@media (max-width:520px){.ins-hero .video{object-position:60% 40%}}
@media (prefers-reduced-motion:reduce){.ins-hero .video{display:none}}

@media print{
  .ins-hero.b{min-height:0;color:#000}
  .ins-hero *{color:#000 !important}
  .ins-hero .photo,.ins-hero .video,.ins-hero .b-ticker{display:none}
  .ins-hero .b-top .lockup,.ins-hero .b-top .strat,.ins-hero .b-title-wrap .inner,.ins-hero .b-bar{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#999}
}