/****************/
/* FEATURE LIST */
/****************/

.list-feature { 
    display:grid;
    grid-template-columns: repeat(3, minmax(1px, 1fr)); 
    gap:var(--v25);
}
.list-feature .item { 
    display: flex;
    gap:var(--v20);
    flex-direction:column;
}
.list-feature .item .data > p:first-child {
    margin:-.3em 0 .5rem 0;
}
.list-feature .item .data > p.f-btn-small {
    margin:1.2rem 0 0 0;
}
.list-feature .item .thumb {
    aspect-ratio: 16/9;
}


/**************/
/* FIRST POST */
/**************/

.list-feature .item:first-child { 
    grid-column: 1 / 4;
    display: flex;
    gap:var(--v25);
    flex-direction:row;
    flex-wrap:wrap;
}
.list-feature .item:first-child .thumb {
    width:40.5%;
}
.list-feature .item:first-child .data {
    width:calc(59.5% - 35rem);
    display: flex;flex-direction:column;
    justify-content:center;
}
.list-feature .item:first-child .featured {
    position: absolute;
    left:0;
    top:var(--v20);
    z-index:500;
    pointer-events:none;
    min-height:3rem;
    display: flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.65);
    border-radius:0 var(--br) var(--br) 0;
    padding:.1rem .9rem 0 1rem;
    color:#BE6F00;
}

/*************/
/* INTRO BOX */
/*************/

.list-feature .intro-box {
    width:30rem;
    order:3;
}
.list-feature .intro-box > img.img-fill {
    position: absolute;
    pointer-events:none;
    z-index:0;
    left:0;
    top:0;
}
.list-feature .intro-box-data {
    width:100%;
    height:100%;
    position: relative;
    z-index:5;
    padding:2.1rem var(--v20) var(--v15) var(--v20);
    display: flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.list-feature .intro-box-data * {
    text-align:center;
    max-width:24rem;
}
.list-feature .intro-box-data img {
    width:100%;min-height:9.4rem;
}
.intro-box-data h1 span {
    letter-spacing: 0!important;
    text-transform:none!important;
    color:var(--c02)!important;
    display:block;
    padding-top:.7rem;
}
.list-feature .intro-box-data > .f-btn-small {
    margin:.2rem 0 1rem 0;
}



@media screen and (max-width:1099px) {
    .list-feature .intro-box.hide {
        height:1px!important;
        border:none!important;
        border-bottom: 1px solid var(--c07)!important;
        overflow: hidden;
        margin:0!important;
    }
    .list-feature .intro-box { 
        width:100%;
        order:1; 
    }
    .list-feature .item .thumb { 
        order:2;
        width:30rem!important; 
    }
    .list-feature .item .data { 
        order:3;
        width: calc(100% - 30rem - var(--v25))!important; 
        margin-bottom:-.2rem;
    }
    .list-feature .item:first-child .featured { font-size:1.2rem!important; }
    .list-feature .item { 
        grid-column: 1 / 4;
        gap: var(--v25);
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap; 
        padding-bottom:var(--v25);
        border-bottom:1px solid var(--c07);
    }
    .list-feature .item .f-h3 {
        font-size: var(--f-size-h2)!important;
  	    line-height: var(--f-line-height-h2)!important;
    }
    .list-feature .item:first-child, .list-feature .item:last-child { border-bottom:none;padding-bottom:0; }
    .list-feature .item:first-child .intro-box { order:3;margin:var(--v10) 0; }
    .list-feature .item:first-child .thumb { order:1; }
    .list-feature .item:first-child .data { order:2; }
}
@media screen and (max-width:767px) {
    .list-feature .intro-box.hide { margin:var(--v05) 0 0 0!important;}
    .list-feature { gap:var(--v20); }
    .list-feature .item .f-h3 {
        font-size: calc(var(--f-size-h2)*.8)!important; 
    }
    .list-feature .item {
        gap: var(--v15)!important;
        padding-bottom:var(--v20);
    }
    .list-feature .item .thumb { 
        width:35%!important; 
    }
    .list-feature .item .data { 
        width: calc(65% - var(--v15))!important;
    }
    .list-feature .item:first-child .intro-box { margin:var(--v15) 0; }
}
@media screen and (max-width:490px) {
    .list-feature .intro-box.hide { margin:0!important;}
    .list-feature .item { flex-direction:column!important;gap:var(--v20)!important; }
    .list-feature .item .thumb { width:100%!important;height:33vw; }
    .list-feature .item:first-child .featured { top:var(--v10); }
    .list-feature .item .data { width:100%!important; }
}


/**************/
/* GAME MENU  */
/**************/

.games-list > li > a {
    display:block;
    position:relative;
    overflow:hidden;
}
.games-list > li > a img {
    aspect-ratio: 1/1;
    object-fit:cover;
    display:block;
}
.games-list > li > a:before {
    content:'';
    z-index:5;
    position: absolute;
    width:110%;
    height:110%;
    left:-5%;
    top:-5%;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 65%);
}
html.light .games-list > li > a:before {
    background: linear-gradient(0deg, rgba(218,211,200,1) 0%, rgba(218,211,200,0) 80%);
}
.games-list > li > a .post-count {
    position: absolute;
    z-index:50;
    left:0;
    bottom:2.5rem;
    width:100%;
    text-align:center;
}
@media screen and (max-width:1099px) {
    .games-list {grid-template-columns: repeat(4, minmax(1px, 1fr))!important;}}
@media screen and (max-width:767px) {
    .games-list {grid-template-columns: repeat(3, minmax(1px, 1fr))!important;}}
@media screen and (max-width:490px) {
    .games-list {grid-template-columns: repeat(2, minmax(1px, 1fr))!important;}}



/****************/
/* GAME ARCHIVE */
/****************/

.game-archive-sticky {
    position:sticky;
    top: 2.5rem;
    height:100%;
    max-height: min(100vh - 5rem, 1000px);
    overflow:hidden;
}
.game-archive-sticky-banner {
    position: relative;
    height:100%;
}
.game-archive-bg {
    width:100%;
    height:100%;
    position: absolute;
    z-index:1;
    left:0;
    top:0;
    object-fit:cover;
    object-position:center;
    pointer-events:none;
    border-radius:1px;
}
.game-archive-logo {
    position:absolute;
    z-index:10;
    width:calc(100% - 6rem);
    height: auto;
    left:3rem;
    top:calc(45% - 10rem);
}
.game-archive-intro > h2 {
    margin-top:-.5rem;
    padding-bottom:1rem!important;
}
.game-archive-intro > p {
    padding-bottom:1.5rem!important;
}



/* ITEM */

.game-archive-item:not(:last-child), .game-archive-items:not(:last-child) {
    /*margin-bottom:1.5rem;*/
}
.game-archive-item {
    position:relative;
    display:block;
    padding:2.3rem 3rem 2.5rem 3rem;
    overflow:hidden;
    transition:border-color .2s!important;
}
.game-archive-item img {
    position: absolute;
    z-index:1;
    right:0;
    top:0;
    width:50%;
    height:100%;
    object-fit:cover;
    object-position:center right;
}
.game-archive-item p {
    position: relative;
    z-index:10;
    max-width:45rem;
    transition:.2s;
}
.game-archive-item p.f-p-l {
    color:var(--c02)!important;
    margin-top:.6rem;
    margin-bottom:-.2rem;
}
.game-archive-item:hover p.f-h2 {
    color:var(--c03)!important;
}
.game-archive-item:hover {
    border-color:var(--c03);
}
.game-archive-item:after {
    content:'';
    position: absolute;
    z-index:4;
    right:0;
    top:0;
    width:calc(50% + 1px);
    height:100%;
    background: linear-gradient(90deg, rgba(17, 17, 17, 1) 0%, rgba(17, 17, 17, 0) 100%);
    pointer-events:none;
}
html.light .game-archive-item:after {
    background: linear-gradient(90deg, rgba(233,224,212, 1) 0%, rgba(233,224,212, 0) 100%);
}




/* LIST STYLE */

.style-list-small {
    display: grid;
    grid-template-columns: repeat(2, minmax(1px, 1fr));
    gap:1.5rem;
}
.style-list-small p.f-p-l {
    display: none;
}
.style-list-small .game-archive-item {
    margin-bottom:0!important;
    padding:2rem 3rem;
}

/* GRID VIEW */

.style-list-grid {
    display:grid;
    grid-template-columns: repeat(2, minmax(1px, 1fr));
    gap:2.5rem;
    padding-top:1rem;
}
.style-list-grid .game-archive-item:after {
    display:none;
}
.style-list-grid .game-archive-item {
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
    border-radius:0;
    margin:0;
}
.style-list-grid .game-archive-item:before {
    display: none;
}
.style-list-grid .game-archive-item img {
    position: relative;
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover;
    object-position:center center;
}
.style-list-grid .game-archive-thumb-wrap {
    border: 1px solid var(--c06);
    border-radius: var(--br);
    box-shadow: var(--bx-shadow-big);
    position: relative;
    overflow: hidden;
    transition:.2s;
    margin-bottom:1.3rem;
}
.style-list-grid .game-archive-thumb-wrap:after {
    box-shadow: var(--bx-shadow-small-inset);
    content: "";
    z-index: 50;
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.style-list-grid .game-archive-thumb-wrap:hover {
    border: 1px solid var(--c03);
}
.style-list-grid .game-archive-thumb-wrap img {
    transition: .3s ease-in-out;
}
.style-list-grid .game-archive-thumb-wrap:hover img {
    transform: scale(1.05);
}

/* LIST FILTER */

.game-archive-item.is-hidden {
    display: none !important;
}
.game-archive-post-filter {
    padding-bottom:2.5rem;
}
.game-archive-post-filter .hidden {
    display:none!important;
}
.game-archive-post-filter .active {
    background:var(--c04);
    color:var(--c01)!important;
}


/* GAME HOMEPAGES */

.game-archive-main .main-col-intro > div:first-child {
    border-bottom:1px solid var(--c12);
}

.game-archive-items:empty {display:none!important;}

/* MOBILE FIXES */

@media screen and (max-width:1099px) {
    .game-archive-sticky {display:none;}
    .base-col {gap:0;}
    .game-archive-main .main-col-intro > div:first-child {border-bottom:none;}

    /* list items */
    .game-archive-items:not(.style-list-small) .game-archive-item {
        padding:0 0 2.5rem 0;background:transparent;border:none;border-radius:0;display:flex;gap:2.5rem;
        border-bottom:1px solid var(--c06);margin-bottom:2.5rem!important;align-items:flex-start;}
    .game-archive-items:not(.style-list-small) .game-archive-item img {
        position:relative;width:100%;height:auto;object-fit:cover;object-position:center center;}
    .game-archive-items:not(.style-list-small) .game-archive-item:before,
    .game-archive-items:not(.style-list-small) .game-archive-item:after {
        display:none;}
    .game-archive-items:not(.style-list-small) .game-archive-meta-wrap {
        width: calc(100% - 32.5rem);margin-top:-.5em;}

    /* guide list */
    .game-archive-items:not(.style-list-small) {
        grid-template-columns: repeat(1, minmax(1px, 1fr));gap:0;padding-top:0;}
    .game-archive-items:not(.style-list-small) .game-archive-item {
        border-bottom:1px solid var(--c06);padding-bottom:2.5rem;}
    .game-archive-items:not(.style-list-small) .game-archive-item .f-h2 {
        font-size: calc(var(--f-size-h2) * .9) !important;} 
    .game-archive-items:not(.style-list-small) .game-archive-thumb-wrap {
        margin-bottom:0;}

    .game-archive-items.style-list-small {margin-bottom:2.5rem;}

    /* Thumb shadow */
    .game-archive-items:not(.style-list-small) .game-archive-item .game-archive-thumb-wrap {border:1px solid var(--c06);
        border-radius:var(--br);box-shadow:var(--bx-shadow-big);position:relative;overflow:hidden;
        width:30rem;aspect-ratio:16/9;}
    .game-archive-items:not(.style-list-small) .game-archive-item .game-archive-thumb-wrap img {transition:.2s ease-in-out;}
    .game-archive-items:not(.style-list-small) .game-archive-item:hover .game-archive-thumb-wrap {border:1px solid var(--c03);}
    .game-archive-items:not(.style-list-small) .game-archive-item:hover .game-archive-thumb-wrap img {transform:scale(1.05);}
    .game-archive-items:not(.style-list-small) .game-archive-item .game-archive-thumb-wrap:after {
        content:"";z-index:50;position:absolute;inset:0;pointer-events:none;box-shadow: var(--bx-shadow-small-inset);}
}
@media screen and (max-width:767px) {
    .game-archive-items:not(.style-list-small) .game-archive-item {
        padding:0 0 2rem 0;margin-bottom:2rem!important;gap:1.5rem;}
    .game-archive-items:not(.style-list-small) .game-archive-thumb-wrap {
        border-radius:2px;overflow:hidden;border:1px solid var(--c06);width:35%;aspect-ratio:16/9;}
    .game-archive-items:not(.style-list-small) .game-archive-meta-wrap {
        width: calc(65% - 1.5rem);margin-top:-.5em;}
    .style-list-grid .game-archive-item {
        padding-bottom:2rem;}
    .game-archive-items.style-list-small {
        grid-template-columns: repeat(1, minmax(1px, 1fr));gap:1rem;margin-bottom:2rem;}
}
@media screen and (max-width:490px) {
    .game-archive-items:not(.style-list-small) .game-archive-item {flex-direction:column;}
    .game-archive-items:not(.style-list-small) .game-archive-item .game-archive-thumb-wrap {width:100%;height: 33vw;}
    .game-archive-items:not(.style-list-small) .game-archive-item .game-archive-thumb-wrap img {height:100%;}
    .game-archive-items:not(.style-list-small) .game-archive-meta-wrap {width:100%;}
    .game-archive-items:not(.style-list-small) .game-archive-item p.f-p-l {margin-bottom:-.5em!important;}
}