/* banner.css - inner page banner and breadcrumbs */

.banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(320px, 42vh, 440px);
  min-height: clamp(320px, 42svh, 440px);
  background: var(--blue-dark);
  overflow: hidden;
}

.banner__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 30, 56, .34) 0%, rgba(11, 30, 56, .82) 100%);
}

.banner__copy {
  position: relative;
  z-index: 2;
  padding-top: 92px;
  padding-bottom: 52px;
  color: var(--white);
}

.banner__title {
  color: var(--white);
  max-width: 19em;
  margin: 6px 0 12px;
}

.banner__sub {
  color: #dfe9f5;
  max-width: 56ch;
  font-size: var(--fs-body);
  margin: 0;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  font-size: var(--fs-small);
}

.crumbs li { color: #c6d6e9; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #7d97b6; }
.crumbs a { color: var(--white); }
.crumbs a:hover { color: var(--green); }