/* Reusable Front Website page-header banner (title + breadcrumb over a
   photo/gradient strip). Sits directly below the site header on every
   page except Home (which keeps its own large .hero-v2) and Jobs listing
   uses it in place of its old .jl-hero.

   Tokens are re-declared locally (same hex values as header.css's
   --green-* scale) rather than inherited, matching this codebase's own
   established convention -- header.css's tokens are scoped to
   .dj-header-root, a DOM sibling of <main>, so they don't inherit into
   page content (see jobs.html's --jl-green, index.html's --h-green for
   the same pattern already in use). */
.pgb-banner{
  position:relative;
  min-height:220px;
  display:flex;
  align-items:flex-end;
  background-image:linear-gradient(120deg, rgba(7,61,44,.90) 0%, rgba(20,98,63,.75) 55%, rgba(26,155,87,.55) 100%), url(/images/banner-page-header.avif);
  background-size:cover;
  background-position:center;
}
.pgb-container{
  width:min(1220px,calc(100% - 40px));
  margin:auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding:32px 0 26px;
}
.pgb-title{
  margin:0;
  color:#fff;
  font-size:clamp(28px,4vw,42px);
  font-weight:800;
  letter-spacing:-.5px;
}
.pgb-crumb{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  color:#fff;
  font-size:13px;
  white-space:nowrap;
}
.pgb-crumb i{font-size:10px;opacity:.7}
.pgb-crumb b{font-weight:700}

@media(max-width:700px){
  .pgb-banner{min-height:160px}
  .pgb-container{flex-direction:column;align-items:flex-start;gap:10px;padding:22px 0 18px}
  .pgb-title{font-size:clamp(22px,7vw,30px)}
  .pgb-crumb{font-size:11.5px;padding:7px 13px}
}