/* 9.7.27 — the home emblem, scaled for the inner-page headers. */
#app .view:not(#view-home) > .page-hero {
  position: relative;
}

#app .view:not(#view-home) > .page-hero > .page-hero-mascot {
  position: absolute;
  right: max(26px, calc((100vw - 1200px) / 2 + 10px));
  top: 50%;
  width: 310px;
  height: 133px;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

#app .page-hero-mascot::before {
  content: "";
  position: absolute;
  left: 44%;
  top: 34%;
  width: 72px;
  height: 72px;
  border: 3px solid #d7e2ef;
  border-radius: 50%;
  background: #fc2848 url("/assets/brand/znak-sokol-original.png") center / contain no-repeat;
  box-shadow: 0 3px 0 #465261, 0 8px 16px rgba(0, 0, 0, .5),
              inset 0 1px 2px rgba(255, 255, 255, .85);
  z-index: 1;
}

#app .page-hero-mascot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/brand/sokol-hero-kridlo.png") center / contain no-repeat;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .35));
  z-index: 2;
}

/* Short page bars get a smaller version, entirely inside their bounds. */
#app :is(#view-player, #view-article) > .page-hero > .page-hero-mascot {
  width: 188px;
  height: 81px;
}
#app :is(#view-player, #view-article) .page-hero-mascot::before {
  width: 43px;
  height: 43px;
  border-width: 2px;
}

@media (max-width: 800px) {
  #app .view:not(#view-home) > .page-hero > .page-hero-mascot {
    right: 8px;
    width: 170px;
    height: 73px;
    opacity: .75;
  }
  #app .page-hero-mascot::before {
    width: 38px;
    height: 38px;
    border-width: 2px;
  }
  #app :is(#view-player, #view-article) > .page-hero > .page-hero-mascot {
    width: 140px;
    height: 60px;
  }
  #app :is(#view-player, #view-article) .page-hero-mascot::before {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 540px) {
  #app .view:not(#view-home) > .page-hero > .page-hero-mascot {
    right: -15px;
    width: 126px;
    height: 54px;
    opacity: .42;
  }
  #app .page-hero-mascot::before {
    width: 28px;
    height: 28px;
    border-width: 1px;
  }
}