/* ============================================================
   Shared 30vh page banner + breadcrumb.
   Used on about / history / product archive & single templates.
   ============================================================ */

#page-banner {
  position: relative;
  height: 30vh;
  min-height: 220px;
  max-height: 380px;
  overflow: hidden;
}
#page-banner .banner-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  transform: scale(1.04);
  animation: bannerZoom 8s ease-out forwards;
}
@keyframes bannerZoom { to { transform: scale(1); } }
#page-banner .banner-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6,18,9,.78) 0%, rgba(13,33,22,.6) 50%, rgba(26,61,107,.4) 100%);
}
#page-banner .banner-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 15% 60%, rgba(27,82,48,.3) 0%, transparent 60%);
}
#page-banner .banner-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8vw;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: .85rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover,
.breadcrumb a:focus-visible { color: var(--g-400); }
.breadcrumb span { color: var(--g-400); }
.banner-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.banner-title em { font-style: italic; color: var(--g-400); }
.banner-rule {
  width: 3rem;
  height: 2px;
  background: var(--g-500);
  margin-top: 1rem;
}