/* ═══════════════════════════════════════════════════════════════════════
 * bildfie · shared page hero — grey, editorial, informative.
 * Used by Jobs, Digitals, Properties and any other browse page that needs
 * a heading + stats strip + search bar + trending pills.
 * ═══════════════════════════════════════════════════════════════════════ */

.bf-page-hero {
  background: #f7f7f5;
  border-bottom: 1px solid #eaeaea;
  padding: 36px 0 30px;
}
.bf-page-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.bf-page-hero-eye {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1e3a5f;
  margin-bottom: 8px;
}
.bf-page-hero-eye span { opacity: .4; margin-right: 4px; }
.bf-page-hero h1 {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 8px;
  color: #0d0d0d;
}
.bf-page-hero-sub {
  font-size: 13.5px;
  color: #6b6b6b;
  max-width: 620px;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* Stats strip — same feel as project cards' meta row */
.bf-page-hero-strip {
  display: flex; gap: 22px; flex-wrap: wrap;
  font-size: 12.5px; color: #6b6b6b;
  margin-bottom: 20px;
}
.bf-page-hero-strip span { display: inline-flex; align-items: center; gap: 6px; }
.bf-page-hero-strip b { color: #0d0d0d; font-weight: 700; font-size: 13px; }
.bf-page-hero-strip .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.25);
  animation: bfPageHeroPulse 1.8s ease-in-out infinite;
}
@keyframes bfPageHeroPulse { 0%,100% {opacity:1} 50% {opacity:.45} }

/* Search bar — same widget shape across every hero */
.bf-page-hero-search {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 6px;
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 6px;
  box-shadow: 0 4px 16px -8px rgba(0,0,0,.08);
}
.bf-page-hero-search input {
  border: none;
  padding: 12px 14px 12px 40px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  border-radius: 8px;
  background: #f7f7f5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%239a9a9a' d='M11.7 10.3a5.5 5.5 0 1 0-1.4 1.4L14.4 16 16 14.4 11.7 10.3zM6.5 11a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/></svg>");
  background-repeat: no-repeat;
  background-position: 14px center;
  background-size: 14px;
  color: #0d0d0d;
}
.bf-page-hero-search input.loc {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%239a9a9a' d='M8 0a5.5 5.5 0 0 0-5.5 5.5c0 3.5 5.5 10.5 5.5 10.5S13.5 9 13.5 5.5A5.5 5.5 0 0 0 8 0zm0 8a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}
.bf-page-hero-search input:focus {
  background-color: #fff;
  box-shadow: inset 0 0 0 2px #0d1f36;
}
.bf-page-hero-search button {
  background: #c0392b;
  color: #fff;
  border: none;
  font-weight: 700;
  padding: 0 24px;
  border-radius: 8px;
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s;
}
.bf-page-hero-search button:hover { background: #a02e22; }
@media (max-width: 720px) {
  .bf-page-hero-search { grid-template-columns: 1fr; }
  .bf-page-hero-search button { padding: 12px; }
}

/* Trending row (below the hero, on a lighter grey band) */
.bf-page-hero-trending {
  padding: 14px 0 12px;
  background: #f2f2f0;
  border-bottom: 1px solid #eaeaea;
}
.bf-page-hero-trending-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bf-page-hero-trending-lbl {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #6b6b6b;
  margin-right: 6px;
  display: inline-flex; align-items: center; gap: 5px;
}
.bf-page-hero-trending-lbl i { color: #c0392b; font-size: 11px; }
.bf-page-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 99px;
  background: #fff;
  color: #3a3a3a;
  border: 1px solid #eaeaea;
  text-decoration: none;
  transition: border-color .12s, color .12s;
}
.bf-page-hero-chip:hover { border-color: #c0392b; color: #c0392b; }
.bf-page-hero-chip i { color: #9a9a9a; font-size: 11px; }