/* Bus Traffic Fever level detail header overrides. */
.btf-level-hero {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-bottom: 5px solid var(--btf-yellow) !important;
  background: var(--btf-navy) !important;
  padding: 0 !important;
  color: #fff;
}

.btf-level-hero::after {
  position: absolute;
  right: max(4vw, 42px);
  bottom: 0;
  width: 112px;
  height: 30px;
  border-top: 2px dashed rgba(255, 255, 255, .32);
  content: "";
  transform: skewX(-28deg);
}

.btf-level-hero-inner {
  position: relative;
  z-index: 1;
  padding: 18px 0 26px;
}

.btf-level-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  color: rgba(255, 255, 255, .68);
  font-size: .81rem;
  font-weight: 750;
}

.btf-level-breadcrumb > i {
  color: rgba(255, 255, 255, .38);
  font-size: .64rem;
}

.btf-level-breadcrumb a {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  color: #fff !important;
  text-decoration: none;
}

.btf-level-breadcrumb a:hover {
  color: var(--btf-yellow) !important;
}

.btf-level-breadcrumb [aria-current="page"] {
  color: #fff;
}

.btf-level-title-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 17px;
}

.btf-level-route-marker {
  display: grid;
  width: 52px;
  min-height: 72px;
  align-content: center;
  justify-items: center;
  gap: 6px;
  border-right: 2px solid var(--btf-yellow);
  color: var(--btf-yellow);
}

.btf-level-route-marker i { font-size: 1.35rem; }
.btf-level-route-marker span { font-size: .59rem; font-weight: 900; letter-spacing: .08em; writing-mode: vertical-rl; }

.btf-level-eyebrow {
  margin: 0 0 4px;
  color: var(--btf-yellow) !important;
  font-size: .73rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.btf-level-hero h1,
.btf-level-hero h1 span {
  margin: 0;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.btf-level-hero h1 span { color: #fff !important; -webkit-text-fill-color: #fff !important; }

.btf-level-hero #level-description {
  max-width: 850px;
  margin: 10px 0 0;
  color: #dce8f6 !important;
  font-size: .94rem;
  line-height: 1.65;
}

@media (max-width: 767px) {
  .btf-level-hero-inner { padding: 15px 0 20px; }
  .btf-level-breadcrumb { gap: 7px; margin-bottom: 17px; font-size: .74rem; }
  .btf-level-breadcrumb a { min-height: 28px; }
  .btf-level-title-row { gap: 13px; }
  .btf-level-route-marker { width: 39px; min-height: 66px; }
  .btf-level-route-marker i { font-size: 1.1rem; }
  .btf-level-route-marker span { font-size: .52rem; }
  .btf-level-hero #level-description { font-size: .84rem; }
}