/* NYRELIX homepage media layer.
   Game art stays fit-not-crop; editorial/news thumbnails use a cinematic cover frame. */

#upcoming .release-card .card-image,
#development .dev-card .dev-art,
.hero-side .mini-bg,
#platforms .platform-card .platform-art,
#reviews .review-card .review-art{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

#upcoming .release-card .card-image,
#development .dev-card .dev-art{
  background:#07101b!important;
  background-image:none!important;
  filter:none!important;
}

/* Retire legacy generated art only where full game artwork is available. */
#upcoming .release-card .card-image::before,
#upcoming .release-card .card-image::after,
#development .dev-card .dev-art::before,
#development .dev-card .dev-art::after{
  content:none!important;
  display:none!important;
  background:none!important;
  filter:none!important;
  opacity:0!important;
}

.nyrelix-media-img{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:var(--nyrelix-object-position,center center);
  background:#07101b;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  mix-blend-mode:normal!important;
  image-rendering:auto;
  backface-visibility:hidden;
}

.nyrelix-home-thumb{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
  background:#07101b;
  opacity:0;
  filter:none;
  transform:scale(1.001);
  transition:opacity .18s ease,transform .28s ease,filter .28s ease;
}

[data-media-state="ready"] > .nyrelix-home-thumb{
  opacity:1;
}

.hero-side .mini-bg::after,
#platforms .platform-art::after,
#reviews .review-art::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.hero-side .mini-bg::after{
  background:linear-gradient(90deg,rgba(3,8,15,.18),rgba(4,9,17,.02) 64%,rgba(4,9,17,.12));
}

#platforms .platform-art::after{
  background:
    linear-gradient(180deg,rgba(4,8,15,.04),rgba(4,8,15,.5)),
    linear-gradient(90deg,transparent 55%,rgba(4,8,15,.2));
}

#reviews .review-art::after{
  background:linear-gradient(180deg,transparent 54%,rgba(5,8,15,.48));
}

.hero-side .mini-feature:hover .nyrelix-home-thumb,
#platforms .platform-card:hover .nyrelix-home-thumb,
#reviews .review-card:hover .nyrelix-home-thumb{
  transform:scale(1.035);
  filter:saturate(1.05) contrast(1.025);
}

/* A branded fallback if an upstream media host is unavailable. */
.media-load-failed::before{
  content:"NYRELIX\A MEDIA";
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  white-space:pre;
  color:#7890aa;
  background:
    radial-gradient(circle at 24% 20%,rgba(45,221,255,.12),transparent 31%),
    radial-gradient(circle at 82% 80%,rgba(185,86,255,.12),transparent 34%),
    #07101b;
  font-size:10px;
  font-weight:900;
  line-height:1.65;
  letter-spacing:.15em;
  text-align:center;
}

/* Release Center keeps its established card height but shows the complete artwork. */
#upcoming .release-card .card-image{
  aspect-ratio:16/10;
  min-height:168px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

/* Hero-side stories: editorial copy on the left, unmistakable thumbnail on the right. */
.hero-side .mini-feature{
  min-height:172px;
  padding:12px;
  border-color:rgba(87,137,184,.22);
  background:
    radial-gradient(circle at 18% 0,rgba(49,213,255,.05),transparent 38%),
    linear-gradient(145deg,rgba(10,17,29,.99),rgba(7,11,20,.99));
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.hero-side .mini-feature::after{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:2px;
  border-radius:0 999px 999px 0;
  background:linear-gradient(180deg,rgba(61,222,255,.15),rgba(170,90,255,.62),rgba(61,222,255,.08));
  pointer-events:none;
}

.hero-side .mini-feature:hover,
.hero-side .mini-feature:focus-within{
  transform:translateY(-2px);
  border-color:rgba(92,211,255,.34);
  box-shadow:0 20px 45px rgba(0,0,0,.3),0 0 30px rgba(62,210,255,.04);
}

.hero-side .mini-bg{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  bottom:12px!important;
  left:auto!important;
  width:43%!important;
  height:auto!important;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:#07101b!important;
  background-image:none!important;
  box-shadow:0 12px 28px rgba(0,0,0,.27);
  filter:none!important;
}

.hero-side .mini-bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
  pointer-events:none;
}

.hero-side .mini-copy{
  position:absolute!important;
  z-index:4!important;
  left:18px!important;
  right:calc(43% + 30px)!important;
  top:50%!important;
  bottom:auto!important;
  min-width:0;
  padding:0!important;
  transform:translateY(-50%);
}

.hero-side .mini-copy .label{
  padding:4px 7px;
  font-size:8px;
  letter-spacing:.09em;
}

.hero-side .mini-copy h3{
  display:-webkit-box;
  margin:8px 0 6px!important;
  overflow:hidden;
  font-size:clamp(15px,1.15vw,18px)!important;
  line-height:1.13!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

.hero-side .mini-copy p{
  display:-webkit-box;
  margin:0!important;
  overflow:hidden;
  color:#9fb0c4!important;
  font-size:10px!important;
  line-height:1.42!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.hero-side[data-story-media="visual-v3"] .mini-bg{
  border-color:rgba(93,190,226,.2);
}

/* Platform Agenda now gets actual official-source thumbnails instead of gradient-only art. */
#platforms .platform-art{
  background-color:#07101b!important;
}

#platforms .platform-art .nyrelix-home-thumb{
  z-index:1;
}

/* Keep the platform monogram legible over photography. */
#platforms .platform-art::before{
  z-index:3!important;
  text-shadow:0 4px 22px rgba(0,0,0,.78)!important;
}

/* Review images retain their own editorial image, with game art or branded fallback on error. */
#reviews .review-art > img.review-editorial-img{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Development Radar: give landscape artwork a landscape window instead of a portrait strip. */
#development .dev-card{
  grid-template-columns:clamp(230px,42%,280px) minmax(0,1fr);
  min-height:210px;
}

#development .dev-card::after{
  left:calc(clamp(230px,42%,280px) + 8px);
}

#development .dev-card .dev-art{
  grid-column:1;
  grid-row:1 / 4;
  align-self:center;
  justify-self:center;
  width:calc(100% - 24px);
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/9;
  margin:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:11px;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
}

#development .dev-card h3,
#development .dev-card .status,
#development .dev-card p{
  margin-left:14px;
}

#development .dev-card h3{
  margin-top:42px;
}

#upcoming .release-card[data-content-id="marvels-wolverine"] .nyrelix-media-img{--nyrelix-object-position:center 35%}
#upcoming .release-card[data-content-id="control-resonant"] .nyrelix-media-img{--nyrelix-object-position:center 43%}
#upcoming .release-card[data-content-id="modern-warfare-4"] .nyrelix-media-img{--nyrelix-object-position:center center}
#upcoming .release-card[data-content-id="phantom-blade-zero"] .nyrelix-media-img{--nyrelix-object-position:center 31%}
#upcoming .release-card[data-content-id="grand-theft-auto-vi"] .nyrelix-media-img{--nyrelix-object-position:center 34%}
#development .dev-card[data-content-id="grand-theft-auto-vi"] .nyrelix-media-img{--nyrelix-object-position:center 35%}
#development .dev-card[data-content-id="marvels-wolverine"] .nyrelix-media-img{--nyrelix-object-position:center 38%}
#development .dev-card[data-content-id="fable"] .nyrelix-media-img{--nyrelix-object-position:center 42%}
#development .dev-card[data-content-id="forza-horizon-6"] .nyrelix-media-img{--nyrelix-object-position:center center}

@media(max-width:980px){
  #development .dev-card{
    grid-template-columns:clamp(250px,34%,300px) minmax(0,1fr);
  }
  #development .dev-card::after{
    left:calc(clamp(250px,34%,300px) + 8px);
  }

  .hero-side .mini-bg{width:40%!important}
  .hero-side .mini-copy{right:calc(40% + 30px)!important}
  .hero-side .mini-copy p{-webkit-line-clamp:2}
}

@media(max-width:760px){
  .hero-side .mini-feature{
    min-height:292px!important;
    padding:0!important;
    overflow:hidden;
  }

  .hero-side .mini-feature::after{
    top:0;
    left:18px;
    right:18px;
    bottom:auto;
    width:auto;
    height:2px;
    border-radius:0 0 999px 999px;
    background:linear-gradient(90deg,rgba(61,222,255,.08),rgba(170,90,255,.62),rgba(61,222,255,.08));
  }

  .hero-side .mini-bg{
    top:0!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    width:100%!important;
    height:56%!important;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.09);
    border-radius:0;
    box-shadow:none;
  }

  .hero-side .mini-bg::after{
    background:linear-gradient(180deg,rgba(3,8,15,.02) 50%,rgba(5,9,16,.7) 100%);
  }

  .hero-side .mini-copy{
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    min-height:46%;
    padding:14px 17px 16px!important;
    transform:none;
    background:linear-gradient(180deg,rgba(8,13,23,.94),rgba(7,11,20,.99));
  }

  .hero-side .mini-copy h3{
    margin:7px 0 5px!important;
    font-size:18px!important;
    -webkit-line-clamp:2;
  }

  .hero-side .mini-copy p{
    font-size:11px!important;
    -webkit-line-clamp:2;
  }
}

@media(max-width:700px){
  #development .dev-card{
    display:block;
    min-height:0;
    padding:0 14px 22px;
  }
  #development .dev-card .dev-art{
    width:calc(100% + 28px);
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/9;
    margin:0 -14px 14px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.08);
    border-radius:0;
    box-shadow:none;
  }
  #development .dev-card h3,
  #development .dev-card .status,
  #development .dev-card p{margin-left:0}
  #development .dev-card h3{margin-top:12px}
  #development .dev-card::after{left:14px;right:14px}
}

@media(max-width:520px){
  #upcoming .release-card .card-image{
    aspect-ratio:16/9;
    min-height:0;
  }

  .hero-side .mini-feature{min-height:278px!important}
  .hero-side .mini-bg{height:54%!important}
  .hero-side .mini-copy{min-height:48%;padding:13px 15px 15px!important}
}

@media(prefers-reduced-motion:reduce){
  .nyrelix-home-thumb{transition:none}
  .hero-side .mini-feature{transition:none}
  .hero-side .mini-feature:hover{transform:none}
  .hero-side .mini-feature:hover .nyrelix-home-thumb,
  #platforms .platform-card:hover .nyrelix-home-thumb,
  #reviews .review-card:hover .nyrelix-home-thumb{transform:none}
}