/* ============================================================
   Hayabusa skin for matmade.com — co-branding layer ONLY.
   Reuses MatMade's own design tokens (--red, --navy, --surface,
   --border, --font-display, Knockout) so inserts look native.
   The real site CSS is untouched; this only adds Hayabusa bits.
   ============================================================ */

/* Hayabusa's actual brand font — used ONLY for the Hayabusa wordmark */
@font-face{font-family:'HBCnd';src:url('/assets/fonts/HayabusaCndBlack.woff2') format('woff2');font-weight:900;font-display:swap}

/* ---- honesty ribbon ---- */
#hb-ribbon{
  background:#081120;color:#aeb8c4;border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--font-body,'DM Sans',sans-serif);font-size:12px;letter-spacing:.04em;
  text-align:center;padding:7px 14px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
}
#hb-ribbon b{color:#ffe144;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
#hb-ribbon .hb-demo-nav a{color:#dfe6ee;text-decoration:none;margin:0 8px;font-weight:600;opacity:.85}
#hb-ribbon .hb-demo-nav a:hover{opacity:1;color:#fff}

/* ---- header partner pill ---- */
.hb-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px 6px 11px;border-radius:999px;border:1px solid var(--border-mid,#cdd3da);
  font-family:var(--font-display,sans-serif);font-weight:700;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-mid,#3a4654);white-space:nowrap;margin-right:4px;
}
.hb-pill svg{height:17px;width:auto;color:#cc0000}
.hb-pill b{color:var(--text,#16202b)}
@media(max-width:900px){.hb-pill{display:none}}

/* ---- falcon helpers ---- */
.hb-falcon{display:inline-block;vertical-align:middle}

/* ---- hero co-brand panel (home) ---- */
.hb-hero-panel{
  flex:1 1 0;min-width:0;align-self:stretch;position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;
  padding:clamp(20px,3vw,40px);
}
.hb-hero-panel .hb-eyebrow{font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:#ff5252}
.hb-hero-panel .hb-falcon{color:#fff;filter:drop-shadow(0 8px 30px rgba(0,0,0,.5))}
.hb-hero-panel .hb-word{font-family:'HBCnd','Knockout',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(40px,5vw,76px);line-height:.9;color:#fff;letter-spacing:.02em}
.hb-hero-panel .hb-tag{color:#aeb8c4;font-family:var(--font-body);font-size:.95rem;max-width:34ch}
.hb-hero-panel .hb-rule{width:54px;height:4px;background:#cc0000}
@media(max-width:760px){.hb-hero-panel{display:none}}

/* ---- partner band ---- */
.hb-band{background:var(--navy,#0d1b2e);position:relative;overflow:hidden;border-top:3px solid #cc0000}
.hb-band .hb-band-in{
  max-width:1200px;margin:0 auto;padding:clamp(26px,3.5vw,40px) clamp(20px,4vw,48px);
  display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap;position:relative;z-index:1;
}
.hb-band .hb-mark{display:flex;align-items:center;gap:14px;color:#fff}
.hb-band .hb-mark .hb-word{font-family:'HBCnd','Knockout',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(26px,3vw,40px);letter-spacing:.03em}
.hb-band .hb-falcon{color:#fff}
.hb-band .hb-copy{flex:1;min-width:260px}
.hb-band .hb-copy .e{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:#ff5252}
.hb-band .hb-copy p{color:#dfe6ee;font-family:var(--font-body);font-size:1.02rem;margin-top:6px;line-height:1.5;max-width:64ch}
.hb-band .hb-copy p b{color:#fff}
.hb-band .hb-watermark{position:absolute;right:-30px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.04);z-index:0}
.hb-band .btn{flex-shrink:0}

/* ---- gear section (reuses .section / .section-header from site) ---- */
.hb-gear-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.hb-gear-card{background:var(--surface,#fff);border:1px solid var(--border,#e3e6ea);border-radius:var(--r-md,14px);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease}
.hb-gear-card:hover{transform:translateY(-3px)}
.hb-gear-card .gimg{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#081120;position:relative}
.hb-gear-card .gimg .hb-falcon{color:rgba(255,255,255,.92)}
.hb-gear-card .gimg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 42%,rgba(204,0,0,.22),transparent 70%)}
.hb-gear-card .ginfo{padding:14px 16px 16px}
.hb-gear-card .gcat{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:#cc0000}
.hb-gear-card .gname{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--text,#16202b);margin-top:3px;line-height:1.15}
.hb-gear-card .gprice{font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--text-mid,#3a4654);margin-top:8px}
.hb-gear-card .gprice s{color:var(--text-dim,#7a8694);font-weight:400;margin-left:6px}
@media(max-width:900px){.hb-gear-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.hb-gear-grid{grid-template-columns:1fr}}

/* ---- "Outfitted by Hayabusa" badge on gym cards ---- */
.hb-badge{
  position:absolute;top:9px;left:9px;z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  background:#cc0000;color:#fff;border-radius:999px;
  padding:4px 9px;font-family:var(--font-display,sans-serif);font-weight:700;font-size:.66rem;letter-spacing:.03em;text-transform:uppercase;
  box-shadow:0 4px 14px rgba(0,0,0,.3);white-space:nowrap;
}
.hb-badge svg{height:11px;width:auto;color:#fff}
.hb-badge--sm{padding:3px 7px;font-size:.6rem;top:6px;left:6px}
/* make the photo containers position-anchored for the badge */
.gym-list-photo,.home-ep-thumb-wrap{position:relative}

/* inline Hayabusa chip for city cards (sits in the card body, not the tiny thumb) */
.hb-chip{
  display:inline-flex;align-items:center;gap:4px;margin-top:5px;vertical-align:middle;
  background:#cc0000;color:#fff;border-radius:999px;padding:2px 8px;
  font-family:var(--font-display,sans-serif);font-weight:700;font-size:.6rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;
}
.hb-chip svg{height:10px;width:auto;color:#fff}

/* city page: map needs JS we removed for the static snapshot — drop the map column,
   let the directory list run full width so nothing reads as "loading forever". */
.city-body{grid-template-columns:1fr !important;height:auto !important;overflow:visible !important}
.city-list-panel{border-right:none !important;overflow:visible !important}
.city-list-scroll{overflow:visible !important;height:auto !important}
.city-map-panel,.map-toggle{display:none !important}

/* ---- footer note ---- */
#hb-footnote{
  background:#081120;color:#8d99a6;border-top:1px solid rgba(255,255,255,.07);
  font-family:var(--font-body,'DM Sans',sans-serif);font-size:12.5px;text-align:center;padding:14px;
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;letter-spacing:.03em;
}
#hb-footnote b{color:#e6ebf1}
#hb-footnote svg{height:15px;color:#cc0000}