/* BODY DARK THEME */
body {
    background-color: var(--dark);
}

/* CONTAINER PAGE ARTICOLO */
.wrap-2col-asimmetric {
    min-height: 100dvh;
    padding: 0 0 0 14rem;
    place-items: center;
    display: flex;
    flex-direction: column-reverse;
    background-color: var(--dark);
}

/* SEZIONE CORRELATI */
.side-pagina-static {
    min-height: auto;
    box-shadow: none;
    border-top: 1px solid var(--primarioChiaro) ;
    border-bottom: 1px solid var(--primarioChiaro) ;

    .header-side {
        box-shadow: none;
        border-top: 1px solid var(--primarioChiaro);
    }
    .header-side .accordion-button {
        padding: 2rem 2rem 3rem 2rem;
        background-color: var(--dark);
    }
    .header-side .accordion-button .dark {
        color: var(--primarioChiaro);
        text-transform: uppercase;
    }
    .accordion-item {
        background-color: var(--dark);
    }
    .banner-contenuti-container {
        padding: 2rem 2% 2rem 2%;
        height: auto;
        max-height: 100% ;
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
    .link-lista-contenuti {
        position: absolute ;
        top: 4rem ;
        z-index: 1 ;
        width: fit-content ;
        padding: 0 ;
        left: 2rem;
    }
    .banner-contenuti {
        margin: 0;
        width: 100%;
        height: 18rem;
        border: none;
        box-shadow: 0 0 6px 1px var(--grigio_light-opacity);
        border-radius: 8px 8px 8px 24px;
    }
    .banner-contenuti:hover {
        scale: 1;
        background-color: var(--white);
        border: 1px solid var(--primarioChiaro);
        box-shadow: 0 0 8px 1px var(--primarioChiaro);
    }
    .img-copertina-container-inpage {
        width: 100%;
        height: 100%;
    }
    .video {
        object-fit: cover;
    }
    .overlay-banner-contenuti {
        background: linear-gradient(to bottom, 
                                    rgba(255, 255, 255, 0) 0%, 
                                    rgba(0, 0, 0, 0.3) 50%, 
                                    rgba(0, 0, 0, 0.9) 90%, 
                                    rgba(0, 0, 0, 1) 100%);
    }
    .banner-contenuti:hover .overlay-banner-contenuti {
        background: linear-gradient(to bottom, 
                                    rgba(255, 255, 255, 0) 0%, 
                                    rgba(0, 0, 0, 0.5) 60%, 
                                    rgba(0, 0, 0, 0.9) 90%, 
                                    rgba(0, 0, 0, 1) 100%);
    }
    .banner-contenuti:hover .absolute-text-right {
        font-size: 20px;
        color: var(--primarioChiaro);
    }
    .active-link {
        display: none;
        scale: 1.025;
        box-shadow: 0 0 12px 1px var(--primarioChiaro-opacity);
    }
    .absolute-text-right {
        bottom: 5%;
        top: auto;
        transform: none;
        right: 0.75rem;
        width: 90%;
        text-align: end;
        transition: all 0.2s ease-in-out;
    }
    .active-link .absolute-text-right {
        color: var(--primarioChiaro);
    }
    .accordion-button::after {
        flex-shrink: 0;
        width: 1.25rem;
        height: 1.25rem;
        margin-left: auto;
        content: "";
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f5f5f5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-size: 1.25rem;
        transition: transform .2s ease-in-out;
    }
}

/* SEZIONE ARTICOLO */
.page-contenuti-container {
    min-height: 90dvh;
    align-items: center;

    .article-container {
        width: 100%;
        max-width: 100%;
        padding: 0;
        background: transparent;
        box-shadow: none;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
    }
    .in-line_container-copertina {
        width: 100%;
        position: relative;
        display: block;
        height: 45rem;
        max-height: 70dvh;
        overflow: hidden;
        border-radius: 0 0 0 64px;
    }
    .video {
        object-fit: cover;
    }
    .img-copertina {
        width: 100%;
        max-width: 100%;
        height: 800px;
        max-height: 100%;
        object-fit: cover;
    }
    .info-article-container {
        position: absolute;
        top: 0;
        right: auto;
        width: 100%;
        max-width: 100%;
        padding: 2rem 3%;
        height: 100%;
        background: linear-gradient(to right, var(--black-opacity-medium), transparent);
        justify-content: center;
    }
    .date-article-container {
        margin: 0 0 auto 0;
        width: 280px;
        max-width: 80%;
    }
    .key-words {
        display: none;
    }
    .btn-fit {
        width: 380px;
        min-width: fit-content;
        max-width: 100%;
        border: 2px solid var(--white);
        padding: 1rem 2rem;
        box-shadow: 0 0 6px var(--light-medium), inset 0 0 12px var(--light);
        background-color: transparent;
        color: var(--white);
        font-size: clamp(14px, 4vw, 16px);
        font-weight: 700;
        margin: 8% 0 0 0;
        text-transform: uppercase;
        border-radius: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto 0 0 auto;
        transition: all 0.2s ease-in-out;
    }
    .btn-fit:hover {
        box-shadow: 0 0 12px 1px var(--black-opacity-medium);
        background-color: var(--primarioChiaro);
        color: var(--dark);
        font-weight: 700;
        border: 2px solid transparent;
    }
    .btn-fit:active {
        scale: 0.9;
    }
    .text-inbox {
        font-size: clamp(12px, 4vw, 14px);
        border-radius: 50%;
        height: 4rem;
        width: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 8px var(--light);
        margin: auto 0 0 0 !important;
    }
    .info-article-container h6 {
        color: var(--grigio_light);
        width: 640px;
        max-width: 90%;
    }
    .info-article-container .light {
        color: var(--dark);
    }
    .info-article-container .dark {
        color: var(--light);
    }
    .corpo-article-container {
        margin: 0 auto;
        color: var(--light);
        padding: 2rem 1rem 4rem 1rem;
        width: 580px;
        max-width: 100%;
    }
    /* Call to action */
    .grid-container-corpo {
        position: relative;
        width: 100%;
        height: 13rem;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 0 6px 1px var(--light-medium);
    }
    .img-gallery-corpo {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .text-gallery-container {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background: linear-gradient(to right, var(--black-opacity), var(--black-opacity-medium));
    }
    .text-gallery-container .title {
        width: 320px;
        max-width: 80%;
    }
    /* Gallery */
    .grid-gallery { 
        display: grid;
        grid-template-columns:repeat(3, 1fr);
        grid-template-rows: auto;
        gap: 1rem;
        padding: 2%;
        width: 800px;
        max-width: 100%;
        margin: 0 auto;
    }
    .grid-gallery img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-color: var(--white);
        box-shadow: 0 0 4px var(--grigio_light-opacity);
    }
    .grid-gallery .img-2-2 {
        grid-column: span 2;
    }
}

/**** TAXONOMY ****/
    /** Cover Taxonomy **/
    .cover-list-content {
        position: relative;
        width: auto;
        height: 480px;
        margin: 0 0 0 14rem;
        border-radius: 0 0 0 64px;
        overflow: hidden;

        .text-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            max-width: 100%;
            padding: 2% 10%;
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: center;
            gap: 1rem;
            background: linear-gradient(to right, var(--black-opacity-medium), transparent);
        }
        .title-big {
            color: var(--white);
        }
        .text-big-bold {
            color: var(--light);
            width: 480px;
            max-width: 90%;
        }
        .img-cover {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    /** Body Taxonomy **/
    .listaContenuti-container {
        width: auto;
        position: relative;
        height: 100%;
        min-height: calc(100dvh - 13rem);
        background: transparent;
        display: grid;
        gap: 2rem 1.5rem;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        margin: 4rem 0 4rem 14rem;
        place-items: flex-start;

        .card-ListaContenuto {
            position: relative;
            width: 360px;
            min-width: auto;
            max-height: fit-content;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            box-shadow: 0 0 6px 1px var(--grigio_light-opacity);
            border: 1px solid transparent;
            transition: all 0.25s ease-in-out;
            max-width: 94%;
            margin: 0 auto;
            border-radius: 8px 8px 8px 32px;
            min-height: 24.5rem;
            overflow: hidden;
        }
        .card-ListaContenuto:hover {
            scale: 1;
            box-shadow: 0 0 12px 2px var(--grigio_light);
            transform: translateY(-16px);
            border: 1px solid var(--grigio_light-opacity);
        }
        .card-ListaContenuto:hover .img-card {
            scale: 1;
            filter: saturate(1.8);
        }
        .img-card-container {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 12rem;
            max-height: 12rem;
            box-shadow: 0 0 6px var(--grigio_base-opacity);
            overflow: hidden;
        }
        .img-card {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .img-card:hover {
            scale: 1;
        }
        .text-inbox-absolute {
            position: absolute;
            top: 0;
            left: auto;
            right: 0;
            width: fit-content;
            padding: 0.25rem 0.5rem;
            background-color: var(--primarioChiaro);
            box-shadow: 0 0 4px var(--grigio_base-opacity);
            z-index: 1;
            border-radius: 0 0 0 8px;
        }
        .subtitle-big {
            color: var(--primarioChiaro);
            height: 4rem;
            width: 96%;
            margin: 0 auto !important;
        }
        .text {
            color: var(--light);
            height: 4rem;
            width: 96%;
            margin: 0 auto !important;
        }
        .text-small-bold {
            padding: 0.25rem;
            width: fit-content;
            color: var(--white);
            background-color: var(--primarioChiaro);
            text-align: right;
            margin: 0 0.25rem 0.25rem auto !important;
            border-radius: 4px;
        }
    }

@media screen and (min-width: 1080px) and (max-width: 1279px) {
    .nav-fixed {
        height: 10rem;
        max-height: 10rem;
    }
    .wrap-2col-asimmetric {
        padding: 0 0 0 12rem!important;
    }
    /* ARTICOLI */
    .page-contenuti-container .grid-gallery {
        width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px) {
    .nav-fixed {
        height: 10rem;
        max-height: 10rem;
    }
    .wrap-2col-asimmetric {
        padding: 0 0 0 12rem!important;
    }
    /* ARTICOLI */
    .page-contenuti-container .grid-gallery {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {  
    .wrap-2col-asimmetric {
        padding: 0;
    }
    .page-contenuti-container .article-container {
        padding: 0!important;
    }
    /* Articolo */
    .page-contenuti-container .in-line_container-copertina {
        height: fit-content;
        max-height: fit-content;
        display: flex;
        flex-direction: column !important;
        gap: 0;
        margin: 5rem 0 0 0;
    }
    .page-contenuti-container .img-copertina {
        height: 400px;
    }
    .page-contenuti-container .info-article-container {
        height: 100%;
        width: 100%;
        right: 0;
        background: linear-gradient(to right, var(--black-opacity-medium), transparent);
        padding: 2rem 1rem 2rem 2rem;
        position: relative;
    }
    .page-contenuti-container .corpo-article-container {
        width: 780px;
    }
    .page-contenuti-container .grid-gallery {
        padding: 1%;
    }
}