/* HireBid — a MatStone Production. Same tokens, same system (black ground, Archivo, square corners, hairlines) as matstone.com.au; this file only adds HireBid-specific layout on top of site.css. */

.hb-nav .hb-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.hb-mark .bg{fill:var(--mk-bg)} .hb-mark .fg{fill:var(--mk-fg)}
.hb-wm{font-family:var(--font-display);font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1;font-size:22px}
.hb-nav{justify-content:space-between}
.hb-nav .links{flex:1;justify-content:center}

/* Hero: film-credit style — black ground, centered, "A MatStone Production" as the studio card above the title */
.hb-hero{padding:120px 64px 96px;text-align:center;max-width:900px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:28px}
.hb-credit{font-family:var(--font-display);font-stretch:125%;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--graphite)}
.hb-title{font-family:var(--font-display);font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:0;line-height:.92;font-size:clamp(56px,9vw,128px)}
.hb-tagline{max-width:520px;margin-top:0}
.hb-hero .cta{justify-content:center}

/* Browse / board page */
.hb-board-hero{padding:96px 64px 0;max-width:760px}
.hb-board-lead{max-width:520px;color:var(--graphite);margin-top:24px}
.hb-board-wrap{position:relative;margin:64px 64px 0;height:620px;border:1px solid var(--rule)}
.hb-map{position:absolute;inset:0;width:100%;height:100%;filter:grayscale(1) contrast(1.05) brightness(.95)}
.hb-empty{position:absolute;left:32px;bottom:32px;max-width:400px;background:var(--paper);border:1px solid var(--ink);padding:32px;display:flex;flex-direction:column;align-items:flex-start}

@media (max-width: 960px){
  .hb-hero{padding:72px 24px 56px}
  .hb-board-hero{padding:56px 24px 0}
  .hb-board-wrap{margin:40px 24px 0;height:440px}
  .hb-empty{left:16px;right:16px;bottom:16px;max-width:none;padding:24px}
  .hb-nav .links{display:none}
}

/* Listings panel */
.hb-listings{padding:0 64px 64px}
.hb-list-head{padding:32px 0 16px;border-bottom:1px solid var(--rule);margin-bottom:32px}
.hb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.hb-card{border:1px solid var(--rule);padding:24px;display:flex;flex-direction:column;gap:16px;background:var(--paper)}
.hb-card:hover{border-color:var(--ink)}
.hb-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hb-card-body{display:flex;flex-direction:column;gap:8px}
.hb-meta{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--graphite)}
.hb-meta svg{flex-shrink:0;opacity:.6}
.hb-card-desc{font-size:14px;color:var(--graphite);margin:0;line-height:1.5;padding-top:4px}
.hb-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid var(--rule);flex-wrap:wrap}
@media (max-width:960px){.hb-listings{padding:0 24px 48px}.hb-cards{grid-template-columns:1fr}}

/* ── Hero with background image ── */
.hb-hero-wrap{position:relative;overflow:hidden;background:#0a0a0a;min-height:520px;display:flex;align-items:stretch}
.hb-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.62);z-index:0}
.hb-hero-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.72) 55%,rgba(10,10,10,.88) 100%);z-index:0}
.hb-hero-overlay{position:relative;z-index:1;padding:120px 64px 96px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;width:100%}
.hb-hero-overlay .hb-title{color:#fff}
.hb-hero-overlay .hb-credit{color:rgba(255,255,255,.55)}

/* ── Stats bar ── */
.hb-stats{display:flex;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.hb-stat{flex:1;padding:28px 24px;border-right:1px solid var(--rule);min-width:0}
.hb-stat:last-child{border-right:none}
.hb-stat-n{font-family:var(--font-display);font-weight:900;font-stretch:125%;font-size:clamp(28px,4vw,48px);line-height:1;letter-spacing:-.02em}
.hb-stat-l{font-size:12px;color:var(--graphite);margin-top:6px;line-height:1.3;text-transform:uppercase;letter-spacing:.04em;font-family:var(--font-display);font-weight:700}

/* ── Category showcase grid ── */
.hb-showcase{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--rule)}
.hb-show-tile{background:var(--paper);padding:28px 20px 24px;display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);transition:background .15s}
.hb-show-tile:hover{background:var(--ink);color:var(--paper)}
.hb-show-tile:hover p{color:rgba(255,255,255,.6)}
.hb-show-tile .ms-num{font-size:40px;line-height:1;margin-bottom:0;color:var(--accent)}
.hb-show-tile:hover .ms-num{color:rgba(255,255,255,.5)}
.hb-show-tile h3{font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:12px;text-transform:uppercase;letter-spacing:.07em;margin:0;line-height:1.3}
.hb-show-tile p{font-size:12px;color:var(--graphite);margin:0;line-height:1.45;transition:color .15s}

/* ── Autocomplete ── */
.hb-ac-wrap{position:relative}
.hb-ac-drop{position:absolute;top:100%;left:0;right:0;background:var(--paper);border:1px solid var(--ink);border-top:none;max-height:340px;overflow-y:auto;z-index:300;display:none;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.hb-ac-drop.open{display:block}
.hb-ac-group{padding:7px 0 4px 14px;font-size:11px;font-family:var(--font-display);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--graphite);background:var(--stone);position:sticky;top:0;z-index:1}
.hb-ac-opt{padding:9px 16px;cursor:pointer;font-size:14px;line-height:1.35;border-top:1px solid var(--rule);transition:background .1s}
.hb-ac-opt:hover,.hb-ac-opt.active{background:var(--ink);color:var(--paper)}

/* ── Quick-pick category tiles ── */
.hb-quickpick{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 28px}
.hb-cat-tile{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--rule);cursor:pointer;font-size:12px;font-family:inherit;background:transparent;color:var(--ink);transition:border-color .15s,background .15s;white-space:nowrap}
.hb-cat-tile:hover,.hb-cat-tile:focus{border-color:var(--ink);background:var(--ink);color:var(--paper);outline:none}
.hb-cat-tile .ico{font-size:15px;line-height:1}

/* ── Browse page: map bar + full map ── */
.hb-board-wrap{margin:40px 64px 0;border:1px solid var(--rule)}
.hb-map-bar{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--rule);background:var(--paper);flex-wrap:wrap;min-height:48px}
.hb-map-legend{display:flex;gap:16px;align-items:center}
.hb-legend-item{display:flex;align-items:center;gap:5px;font-size:12px;font-family:var(--font-display);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--graphite)}
.hb-map-full{height:580px;width:100%;display:block}

/* ── Browse page: empty state below map ── */
.hb-empty-below{margin:48px 64px 64px}
.hb-empty-inner{padding:40px;border:1px solid var(--rule);display:inline-flex;flex-direction:column;align-items:flex-start;max-width:480px}

/* ── Leaflet popup styles ── */
.leaflet-popup-content .hb-popup{font-size:13px;line-height:1.6;min-width:170px;display:flex;flex-direction:column;gap:3px}
.leaflet-popup-content .hb-popup b{font-size:14px;font-family:var(--font-display,'Arial'),sans-serif;font-weight:800;margin-bottom:4px;display:block}
.leaflet-popup-content .hb-popup-cat{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#888;margin-bottom:4px}
.leaflet-popup-content .hb-popup a{color:#0a0a0a;text-decoration:underline;display:block;margin-top:6px}

/* ── Responsive ── */
@media(max-width:1100px){.hb-showcase{grid-template-columns:repeat(4,1fr)}}
@media(max-width:820px){
  .hb-hero-overlay{padding:80px 24px 64px}
  .hb-stats{flex-direction:column}
  .hb-stat{border-right:none;border-bottom:1px solid var(--rule)}
  .hb-showcase{grid-template-columns:repeat(2,1fr)}
  .hb-board-wrap,.hb-empty-below{margin-left:24px;margin-right:24px}
  .hb-map-full{height:420px}
  .hb-quickpick{gap:5px}
  .hb-cat-tile{font-size:11px;padding:6px 10px}
}