/* MijnDex v5.3: Restore the actual loaded artwork and the edge-to-edge,
   header-overlay Pokédex layout from the supplied Onix reference.
   This stylesheet affects Pokémon detail routes only. */

/* The navbar floats over the same scenery instead of sitting above a card. */
.workarea:has(.cin-pokemon-page) > .cin-navbar {
  position:sticky; top:0; z-index:90;
  margin-bottom:-64px;
  background:linear-gradient(180deg,rgba(7,12,18,.84),rgba(7,12,18,.57));
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid rgba(255,255,255,.07);
}

/* The banner is full viewport width; only text and the cards stay in
   the familiar, centered inner column. No margin or rounded border. */
.page:has(.cin-pokemon-page) {
  max-width:none!important;width:100%!important;
  padding:0!important;margin:0!important;
}
.cin-pokemon-page {width:100%;margin:0;min-width:0;background:#090e12;}
.cin-pokemon-hero {
  position:relative;isolation:isolate;display:block!important;
  width:100%;max-width:none;min-width:0;
  min-height:430px;border:0!important;border-radius:0!important;
  margin:0!important;overflow:hidden;background:#090e12;
  --md-cover-focus:75% 50%;
}

/* Important: use the actual <img> already resolved by the existing API.
   v5.2 hid all images, so the override MUST explicitly show them. */
.cin-pokemon-hero > img.cin-cover-image {
  display:block!important;position:absolute!important;
  inset: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:0!important;pointer-events:none;
}
.cin-pokemon-hero > .md-cover-frame {display:none!important;}

/* Text remains readable, with a gentle, transparent fade into the scene. */
.cin-pokemon-hero::before {
  content:'';display:block!important;position:absolute;inset:0!important;
  z-index:1!important;opacity:1!important;pointer-events:none;
  -webkit-mask-image:none!important;mask-image:none!important;
  background:linear-gradient(90deg,
    #090e12ee 0%,#090e12cb 19%,#090e1294 37%,
    #090e1245 60%,#090e1204 88%)!important;
}
.cin-pokemon-hero::after {
  content:'';display:block!important;position:absolute;inset:0!important;
  height:100%!important;z-index:1!important;pointer-events:none;
  background:linear-gradient(0deg,#090e12 0%,#090e125c 10%,transparent 37%)!important;
}
.cin-hero-inner {
  position:relative;z-index:2;
  max-width:1392px!important;width:100%;min-height:430px;
  margin-inline:auto!important;
  padding:81px 20px 31px!important;
  display:flex;flex-direction:column;justify-content:flex-start;
  pointer-events:none;
}
.cin-hero-inner a,.cin-hero-inner button {pointer-events:auto;}
.cin-breadcrumb {margin:0 0 16px!important;}
.cin-breadcrumb>a:first-child {margin-left:0!important;}
.cin-hero-copy {max-width:470px!important;padding:0!important;transform:none!important;}
.cin-hero-description {max-width:400px;}
.cin-hero-facts {max-width:100%;width:fit-content;}

/* Card navigation starts exactly where it did in the reference. */
.cin-pokemon-below {
  max-width:1392px!important;width:100%;margin-inline:auto!important;
  padding:0 20px 65px!important;
}
.cin-tabs {margin-top:-7px!important;flex-wrap:wrap;}

@media (max-width:1199px) {
  .cin-hero-inner {padding-left:20px!important;padding-right:20px!important;}
}
@media (max-width:760px) {
  .workarea:has(.cin-pokemon-page) > .cin-navbar {margin-bottom:-60px;}
  .cin-pokemon-hero {min-height:575px;}
  .cin-pokemon-hero > img.cin-cover-image {
    inset:0 0 auto 0!important;
    width:100%!important;height:clamp(285px,85vw,365px)!important;
    object-fit:cover!important;object-position:var(--md-cover-focus,75% 50%)!important;
  }
  .cin-pokemon-hero::before {
    background:linear-gradient(180deg,
      #090e1245 0%,#090e1200 13%,#090e1200 33%,
      #090e12a0 51%,#090e12 68%,#090e12 100%)!important;
  }
  .cin-pokemon-hero::after {
    background:linear-gradient(0deg,#090e12 0%,transparent 15%)!important;
  }
  .cin-hero-inner {
    min-height:575px;
    padding:73px 16px 30px!important;
  }
  .cin-breadcrumb {margin-bottom:0!important;}
  .cin-hero-copy {
    max-width:100%!important;margin-top:auto!important;
    padding-top:clamp(95px,31vw,180px)!important;
  }
  .cin-hero-description {max-width:500px;}
  .cin-hero-facts {width:100%;}
  .cin-pokemon-below {padding:0 14px 70px!important;}
  .cin-tabs {margin-top:0!important;}
}
@media (max-width:390px) {
  .cin-pokemon-hero,.cin-hero-inner {min-height:590px;}
  .cin-hero-inner {padding-inline:12px!important;}
  .cin-pokemon-below {padding-inline:12px!important;}
  .cin-hero-copy {padding-top:100px!important;}
}