/* =========================================================
   GLOBAL CARD / IMAGE STYLES
   ========================================================= */

/* DLE [xfvalue_poster] may return an image inside a link/wrapper. */

.feature,
.poster,
.game,
.template {
    position: relative;
    overflow: hidden;
}

.feature img,
.poster img,
.game img,
.template img {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;

    z-index: 0 !important;
}

.feature a:not(.button),
.poster a:not(.button),
.game a:not(.button),
.template a:not(.button) {
    position: relative;
    z-index: 1;
}

.feature:after,
.poster:after,
.game:after,
.template:after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            0deg,
            #05090e 0%,
            transparent 72%
        );

    z-index: 0;
}

.feature-copy,
.poster span,
.game span,
.template span {
    position: relative;
    z-index: 2;
}

.poster span small {
    display: block;

    color: #ffc928;

    margin-top: 4px;
}


/* =========================================================
   GENERAL THUMBNAILS
   ========================================================= */

.thumb,
.product-icon,
.news-img {
    overflow: hidden;
}

.thumb img,
.product-icon img,
.news-img img {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;

    display: block !important;
}

.product-icon {
    width: 38px;
    height: 38px;

    overflow: hidden;

    border-radius: 5px;

    flex: 0 0 38px;
}

.news-img {
    overflow: hidden;
}


/* =========================================================
   DLE XFIELD GALLERY
   GAME / POSTER / TEMPLATE CARDS
   ========================================================= */

.gm-feature .xfieldimagegallery,
.gm-card-poster .xfieldimagegallery,
.gm-card-game .xfieldimagegallery,
.gm-card-template .xfieldimagegallery {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    list-style: none !important;

    background: transparent !important;
}


.gm-feature .xfieldimagegallery li,
.gm-card-poster .xfieldimagegallery li,
.gm-card-game .xfieldimagegallery li,
.gm-card-template .xfieldimagegallery li,

.gm-feature .xfieldimagegallery a,
.gm-card-poster .xfieldimagegallery a,
.gm-card-game .xfieldimagegallery a,
.gm-card-template .xfieldimagegallery a {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.gm-feature .xfieldimagegallery img,
.gm-card-poster .xfieldimagegallery img,
.gm-card-game .xfieldimagegallery img,
.gm-card-template .xfieldimagegallery img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;
}


.gm-card-poster span,
.gm-card-game span,
.gm-card-template span {
    position: relative;
    z-index: 1;
}


/* =========================================================
   SMALL THUMB / PRODUCT / NEWS XFIELD GALLERY
   ========================================================= */

.thumb,
.product-icon,
.news-img {
    overflow: hidden;
}

.thumb .xfieldimagegallery,
.product-icon .xfieldimagegallery,
.news-img .xfieldimagegallery {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


.thumb .xfieldimagegallery li,
.product-icon .xfieldimagegallery li,
.news-img .xfieldimagegallery li,

.thumb .xfieldimagegallery a,
.product-icon .xfieldimagegallery a,
.news-img .xfieldimagegallery a,

.thumb .xfieldimagegallery img,
.product-icon .xfieldimagegallery img,
.news-img .xfieldimagegallery img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;
}


/* =========================================================
   NEWS FULL STORY — ISOLATION
   =========================================================
   
   IMPORTANT:
   [xfvalue_poster] inside .nf-hero can generate:

       <ul class="xfieldimagegallery poster">

   The global .poster img rule above would normally make
   the image absolute and force it to 100% height.

   These rules affect ONLY .nf-hero.
   They do NOT change .poster / .game / .template
   anywhere else on the website.
   ========================================================= */


/* HERO CONTAINER */

html body .nf-hero {
    position: relative !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    overflow: hidden !important;

    margin: 0 0 22px 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    line-height: 0 !important;
}


/* =========================================================
   XFIELD GALLERY CONTAINER
   ========================================================= */

html body .nf-hero .xfieldimagegallery,
html body .nf-hero .xfieldimagegallery.poster {
    position: static !important;

    inset: auto !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    list-style: none !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    transform: none !important;
}


/* =========================================================
   GALLERY LI
   ========================================================= */

html body .nf-hero .xfieldimagegallery li,
html body .nf-hero .xfieldimagegallery.poster li {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    list-style: none !important;

    background: transparent !important;

    border: 0 !important;

    transform: none !important;
}


/* =========================================================
   GALLERY LINK
   ========================================================= */

html body .nf-hero .xfieldimagegallery a,
html body .nf-hero .xfieldimagegallery.poster a {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    text-decoration: none !important;

    background: transparent !important;

    border: 0 !important;

    transform: none !important;
}


/* =========================================================
   ACTUAL NEWS POSTER IMAGE
   ========================================================= */

html body .nf-hero .xfieldimagegallery img,
html body .nf-hero .xfieldimagegallery.poster img {
    position: static !important;

    inset: auto !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 100% !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center !important;

    transform: none !important;

    opacity: 1 !important;

    visibility: visible !important;

    z-index: auto !important;
}


/* =========================================================
   REMOVE GLOBAL POSTER OVERLAY ONLY INSIDE NEWS
   ========================================================= */

html body .nf-hero .poster::before,
html body .nf-hero .poster::after,
html body .nf-hero .xfieldimagegallery.poster::before,
html body .nf-hero .xfieldimagegallery.poster::after {
    content: none !important;

    display: none !important;
}


/* =========================================================
   PREVENT POSTER TEXT RULES FROM AFFECTING NEWS
   ========================================================= */

html body .nf-hero .poster span,
html body .nf-hero .poster span small {
    position: static !important;

    display: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   DIRECT IMAGE FALLBACK
   ========================================================= */

html body .nf-hero > img {
    position: static !important;

    inset: auto !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 100% !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;

    transform: none !important;
}


/* =========================================================
   DIRECT LINK + IMAGE FALLBACK
   ========================================================= */

html body .nf-hero > a {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


html body .nf-hero > a img {
    position: static !important;

    inset: auto !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 100% !important;
    max-height: none !important;

    margin: 0 !important;

    object-fit: contain !important;

    transform: none !important;
}