/*
 * GEXYRAL RESOURCE DETAIL COVER HERO STYLE V4
 * Original development by GEXYRAL / 杰泽尔科技.
 * Scope: visual layout only. Image source remains the article cover already used by /resources.
 */

/*
 * Reference contract:
 * - Follow the /resources hub Hero composition: one full-bleed background image,
 *   one controlled dark overlay, one clean left-side reading zone.
 * - Do not treat the cover as a separate right-side card or masked illustration.
 * - Keep the article cover source / OG / Schema contracts untouched.
 */
body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1{
  min-height:600px;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(150deg,#020713 12%,#061329 64%,#020713);
}

body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-inner-hero-media{
  position:absolute;
  inset:0;
  z-index:-4;
  overflow:hidden;
  background:#020713;
}

body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-inner-hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:center center;
  opacity:.78;
  filter:saturate(.90) contrast(1.04) brightness(.88);
  transform:none;
  -webkit-mask-image:none;
  mask-image:none;
}

/* Hub-style full-surface overlay. The image remains readable as atmosphere,
   while the HTML title keeps clear contrast and stays visually primary. */
body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-inner-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(2,7,19,.96) 0%,
      rgba(2,7,19,.82) 29%,
      rgba(2,7,19,.58) 53%,
      rgba(2,7,19,.68) 73%,
      rgba(2,7,19,.86) 100%),
    linear-gradient(180deg,
      rgba(2,7,19,.38) 0%,
      rgba(2,7,19,.10) 34%,
      rgba(2,7,19,.16) 68%,
      rgba(2,7,19,.56) 100%);
}

body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1::before{
  z-index:-3;
  background:linear-gradient(180deg,rgba(2,7,19,.16) 0%,rgba(2,7,19,.08) 26%,rgba(2,7,19,.13) 58%,rgba(2,7,19,.34) 100%);
}

body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-inner-hero-grid{
  z-index:-2;
  opacity:.22;
  mask-image:none;
}

body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-inner-hero-content{
  position:relative;
  z-index:2;
  width:min(var(--gexyral-inner-max),calc(100% - 72px));
  padding-top:108px;
  padding-bottom:82px;
}

body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-hero-system-stage.is-banner-stage{
  grid-template-columns:minmax(0,1fr);
  gap:0;
}

body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-hero-system-copy{
  width:100%;
  max-width:none;
  padding:4px 0;
}

body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-hero-system-copy h1{
  width:100%;
  max-width:none;
  /* RESOURCE HERO NATURAL TITLE WRAP V2: title width follows the full Hero content axis; no artificial line column. */
  white-space:normal;
  text-wrap:wrap;
  text-wrap-mode:wrap;
  text-wrap-style:auto;
  word-break:normal;
  overflow-wrap:normal;
  line-break:auto;
  text-shadow:0 10px 34px rgba(0,0,0,.42);
}

body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-hero-system-copy>p{
  max-width:none;
  white-space:normal;
  text-wrap:wrap;
  word-break:normal;
  overflow-wrap:normal;
  color:#b8c5d7;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}

body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-hero-capability-rail{
  max-width:820px;
  margin-top:30px;
  border-top-color:rgba(132,181,235,.16);
  background:linear-gradient(90deg,rgba(5,21,46,.20),transparent 88%);
}

@media(max-width:1320px){
  body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-inner-hero-content{
    width:min(var(--gexyral-inner-max),calc(100% - 88px));
  }
}

@media(max-width:980px){
  body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1{
    min-height:570px;
  }
  body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-inner-hero-media img{
    opacity:.64;
    object-position:center center;
  }
  body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-inner-hero-media::after{
    background:
      linear-gradient(90deg,rgba(2,7,19,.96) 0%,rgba(2,7,19,.84) 42%,rgba(2,7,19,.64) 68%,rgba(2,7,19,.78) 100%),
      linear-gradient(180deg,rgba(2,7,19,.40),rgba(2,7,19,.12) 34%,rgba(2,7,19,.20) 70%,rgba(2,7,19,.60));
  }
}

@media(max-width:820px){
  body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1{
    min-height:540px;
  }
  body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-inner-hero-content{
    width:calc(100% - 36px);
    padding-top:112px;
    padding-bottom:70px;
  }
  body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-inner-hero-media img{
    opacity:.46;
    object-position:center center;
  }
  body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-inner-hero-media::after{
    background:
      linear-gradient(90deg,rgba(2,7,19,.93),rgba(2,7,19,.73)),
      linear-gradient(180deg,rgba(2,7,19,.48),rgba(2,7,19,.18) 34%,rgba(2,7,19,.28) 70%,rgba(2,7,19,.68));
  }
}

@media(max-width:600px){
  body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1{
    min-height:0;
  }
  body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-inner-hero-content{
    padding-top:118px;
    padding-bottom:64px;
  }
  body[data-page-type="resource_detail"] .gexyral-inner-hero.has-resource-cover-hero-v1 .gexyral-inner-hero-media img{
    opacity:.38;
  }
}