/* MijnDex v5.5 — the HERO has the same width as the cards below.
   The cover itself spans the entire hero (including behind the info),
   not a separate image to the right. Only applies to Pokemon detail pages.

   The cards area is .cin-pokemon-below: max-width:1392px with 20px padding.
   Its visible inner column therefore maxes out at 1352px. */

.cin-pokemon-hero {
  width:calc(100% - 40px)!important;
  max-width:1352px!important;
  margin:0 auto!important;
  min-height:430px!important;
  border:0!important;
  border-radius:0!important;
  background:#090e12!important;
  overflow:hidden!important;
  isolation:isolate!important;
}

/* Keep the scene connected across the whole hero, even at image edges.
   This fallback is behind the sharp original image, not a separate panel. */
.cin-pokemon-hero::before {
  content:""!important;
  position:absolute!important;
  inset:-20px!important;
  display:block!important;
  z-index:0!important;
  background-image:var(--cin-cover,none)!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:cover!important;
  filter:blur(16px) brightness(.6)!important;
  transform:scale(1.04)!important;
  opacity:1!important;
  pointer-events:none!important;
}

/* Override v5.4's capped, right-aligned, masked illustration. */
.cin-pokemon-hero > img.cin-cover-image {
  display:block!important;
  position:absolute!important;
  inset:0!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:var(--md-cover-focus,75% 50%)!important;
  opacity:1!important;
  z-index:1!important;
  pointer-events:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}

/* Darken only enough to read copy; continue smoothly into the card section. */
.cin-pokemon-hero::after {
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  height:100%!important;
  z-index:2!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(9,14,18,.90) 0%,rgba(9,14,18,.74) 23%,rgba(9,14,18,.36) 49%,rgba(9,14,18,.03) 83%),
    linear-gradient(0deg,#090e12 0%,rgba(9,14,18,.64) 10%,transparent 35%)!important;
}

/* Align the hero copy with the actual first card and active tab. */
.cin-pokemon-hero > .cin-hero-inner {
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  min-height:430px!important;
  padding:81px 0 31px!important;
  position:relative!important;
  z-index:3!important;
}

@media (max-width:760px) {
  /* The same 14px gutters already used by the card section on phones. */
  .cin-pokemon-hero {
    width:calc(100% - 28px)!important;
    max-width:none!important;
    min-height:575px!important;
  }
  .cin-pokemon-hero > img.cin-cover-image {
    inset:55px 0 auto!important;
    width:100%!important;
    height:clamp(235px,82vw,355px)!important;
    object-fit:cover!important;
    object-position:var(--md-cover-focus,75% 50%)!important;
  }
  .cin-pokemon-hero::before {
    background-position: center top!important;
    filter:blur(15px) brightness(.55)!important;
  }
  .cin-pokemon-hero::after {
    background:linear-gradient(180deg,
      rgba(9,14,18,.45) 0%,rgba(9,14,18,.08) 11%,
      rgba(9,14,18,.06) 32%,rgba(9,14,18,.71) 51%,
      #090e12 72%,#090e12 100%)!important;
  }
  .cin-pokemon-hero > .cin-hero-inner {
    min-height:575px!important;
    padding:73px 0 30px!important;
  }
}
@media (max-width:390px) {
  .cin-pokemon-hero {
    width:calc(100% - 24px)!important;
  }
  .cin-pokemon-hero,.cin-pokemon-hero > .cin-hero-inner {
    min-height:590px!important;
  }
}