/* ---------- PROJECT INTRO ------------ */

.project-intro {
    background-color: var(--grigio-5);
    width: 100%;
}

.project-intro__description {
    padding: var(--spacing-xl) var(--padding-laterale);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.project-intro__info-items {
    width: 100%;
    padding: 0 var(--padding-laterale) var(--spacing-l) var(--padding-laterale);
    display: flex;
    column-gap: 40px;
    row-gap: 16px;
    flex-wrap: wrap;
}

.project-intro__info-item {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: nowrap;
}

.project-intro__info-item>.label-media {
    color: var(--grigio-1);
}

.project-intro__info-item>.label-grande {
    white-space: nowrap;
}





/* ---------- PRODUCT PILLS ------------ */

.product-pills {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 16px;
    z-index: 99;
}

.product-pill {
    background-color: var(--bianco);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 40px;
}

.product-pill__title {
    height: 40px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

.product-pill__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
}

.product-pill__content>.label-piccola {
    color: var(--grigio-1);
    width: 100%;
}

.product-pill__content>.label-piccola::after {
    content: '';
    width: 12px;
    height: 12px;
    display: block;
    background-image: url("../img/system/Arrow-small-black.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    float: right;
}

.product-pill__image {
    width: 100%;
    height: 160px;
    object-fit: contain;
}




/* ---------- RELATED PRODUCTS ------------ */

.related-products {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--grigio-5);
    padding: var(--spacing-l) var(--padding-laterale);
    gap: 40px;
}

.related-products>.label-grande {
    color: var(--grigio-1);
}

.related-products__cards {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.related-products__cards .product-card {
    width: 300px;
}

.related-products__wrapper {
    scrollbar-width: 0px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.related-products__wrapper::-webkit-scrollbar {
    display: none;
}








/* ------------------------------------ */
/* ---------- PROJECT BLOCKS ---------- */
/* ------------------------------------ */


.project-blocks {
    padding-top: var(--spacing-l);
}


/* -- SINGLE IMAGE -- */

.project-singleimage {
    width: 100%;
    padding: 0 var(--padding-laterale) var(--spacing-xl) var(--padding-laterale);
}

.project-singleimage__image-wrapper {
    width: 100%;
    position: relative;
}

.project-singleimage__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}


/* -- LONG TEXT -- */

.project-longtext {
    padding: 0 var(--padding-laterale) var(--spacing-xl) var(--padding-laterale);
}

.project-longtext__inner {
    max-width: 80%;
}

span.photo-credits {font-size: 1rem;}

/* -- IMAGE AND TEXT -- */

.project-imagetext {
    padding: 0 var(--padding-laterale) var(--spacing-xl) var(--padding-laterale);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

.project-imagetext.left > .project-imagetext__wrapper {
    grid-column-start: 1;
    grid-column-end: span 8;
    position: relative;
}

.project-imagetext.left > .project-imagetext__text {
    grid-column-start: 9;
    grid-column-end: span 3;
    color: var(--grigio-1);
}

.project-imagetext.right > .project-imagetext__wrapper {
    grid-column-start: 5;
    grid-column-end: span 8;
    position: relative;
}

.project-imagetext.right > .project-imagetext__text {
    grid-column-start: 1;
    grid-column-end: span 3;
    color: var(--grigio-1);
}

.project-imagetext__image {
    object-fit: cover;
    width: 100%;
    max-height: 750px;
}


/* -- DOUBLE IMAGE -- */

.project-doubleimage {
    padding: 0 var(--padding-laterale) var(--spacing-xl) var(--padding-laterale);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;

}

.project-doubleimage img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.project-doubleimage__wrapper-first {
    grid-column-start: 1;
    grid-column-end: span 7;
    position: relative;
    height: 800px;
}

.project-doubleimage__wrapper-second {
    grid-column-start: 8;
    grid-column-end: span 5;
    position: relative;
    height: 800px;
}


/* -- IMAGE GALLERY -- */

.project-blocks>.image-gallery {
    margin: 0 0 var(--spacing-xl) 0;
}




/* ----------------------------------- */
/* ------------ PORTFOLIO ------------ */
/* ----------------------------------- */




/* -- HIGHLIGHTED PROJECT -- */

.highlighted-project {
    padding: var(--spacing-l) var(--padding-laterale);
    background-color: var(--grigio-5);
    display: flex;
    flex-direction: column;
    gap: 40px;
    color: var(--grigio-1);
}

.highlighted-project__card {
    width: 100%;
    background-color: var(--bianco);
    cursor: pointer;
    color: var(--nero);
}

.highlighted-project__image {
    width: 100%;
    aspect-ratio: 20 / 9;
    object-fit: cover;
    transition: opacity 0.3s;
}

.highlighted-project__info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px;
}

.highlighted-project__header {
    display: flex;
    justify-content: space-between;
}

.highlighted-project__header>.label-grande {
    color: var(--grigio-2);
}

.highlighted-project__card:hover .titolo-piccolo {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.highlighted-project__card:hover>.highlighted-project__image {
    opacity: 0.95;
}


.highlighted-project__description {
    max-width: 60%;
}

.highlighted-project__footer {
    display: flex;
    justify-content: space-between;
}

.highlighted-project__year {
    color: var(--grigio-2);
}

.highlighted-project__icon {
    width: 16px;
    height: fit-content;
}



/* -- ALL PROJECTS -- */


.projects-list {
    background-color: var(--grigio-5);
    display: flex;
    flex-direction: column;
    gap: 40px;
    color: var(--grigio-1);
    padding: var(--spacing-s) var(--padding-laterale) var(--spacing-l) var(--padding-laterale);
}

.project-card {
    background-color: var(--bianco);
    color: var(--nero);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.project-card__image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    transition: opacity 0.3s;
    flex-grow: 2;
}

.project-card:hover .titolo-piccolo {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.project-card:hover>.project-card__image {
    opacity: 0.9;
}

.project-card__info {
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.project-card__footer {
    display: flex;
    justify-content: space-between;
}

.project-card__footer>.label-media {
    color: var(--grigio-2);
}

.project-card__year {
    color: var(--grigio-2);
}



/* ---------- SCHERMI PICCOLI ---------- */

@media screen and (max-width: 1024px) {

    .project-singleimage {
        padding: 0 var(--padding-laterale) var(--spacing-m) var(--padding-laterale);
    }

    .project-longtext {
        padding: var(--spacing-m) var(--padding-laterale);
    }

    .project-imagetext {
        padding: 0 var(--padding-laterale) var(--spacing-m) var(--padding-laterale);
    }

    .project-imagetext__wrapper {
        grid-column-start: 1;
        grid-column-end: span 6;
    }

    .project-imagetext__text {
        grid-column-start: 7;
        grid-column-end: span 6;
    }

    .project-doubleimage {
        padding: 0 var(--padding-laterale) var(--spacing-m) var(--padding-laterale);
    }


    .project-doubleimage__wrapper-first {
        grid-column-start: 1;
        grid-column-end: span 6;
        height: 500px;
    }

    .project-doubleimage__wrapper-second {
        grid-column-start: 7;
        grid-column-end: span 6;
        height: 500px;
    }


    .project-imagetext__image {
        max-height: 500px;
    }


}



@media screen and (max-width: 700px) {

    .project-intro__description {
        padding: var(--spacing-l) var(--padding-laterale);
    }

    .project-intro__info-items {
        flex-direction: column;
        gap: 8px;
    }

    .project-blocks {
        padding-top: 0;
    }

    .project-singleimage {
        padding: 0 0 var(--spacing-s) 0;
    }

    .project-singleimage__image {
        aspect-ratio: 1;
    }

    .project-singleimage:first-child {
        padding-top: 0;
    }

    .project-longtext {
        padding: var(--spacing-l) var(--padding-laterale);
    }

    .project-longtext__inner {
        max-width: 100%;
    }

    .project-imagetext {
        display: flex;
        flex-direction: column;
        padding: 0 0 var(--spacing-s) 0;
    }

    .project-imagetext.right {
        flex-direction: column-reverse;
    }

    .project-imagetext__text {
        padding: var(--spacing-m) var(--padding-laterale);
    }

    .project-doubleimage {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 0 0 var(--spacing-s) 0;
    }

    .project-doubleimage__wrapper-first {
        height: 400px;
    }

    .project-doubleimage__wrapper-second {
        grid-column-start: 7;
        grid-column-end: span 6;
        height: 400px;
    }

    .project-imagetext__image {
        max-height: 400px;
    }

    .project-blocks>.image-gallery {
        margin: 0 0 var(--spacing-s) 0;
    }

    .related-products {
        padding: var(--spacing-l) 0;
    }

    .related-products__wrapper {
        width: 100%;
        overflow-x: scroll;
    }

    .related-products__cards {
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-right: var(--padding-laterale);
        width: fit-content;
    }

    .related-products__cards .product-card {
        width: 80vw;
    }

    .related-products__cards a:first-child {
        margin-left: var(--padding-laterale);
    }

    .product-pill__title {
        height: 30px;
        padding: 0 8px;
    }

    .product-pills {
        flex-direction: column;
        gap: 8px;
    }

    .product-pill {
        height: 30px;
    }

    .highlighted-project {
        padding: var(--spacing-m) var(--padding-laterale);
    }

    .highlighted-project__image {
        aspect-ratio: 16 / 9;
    }

    .highlighted-project__info {
        padding: 20px;
    }

    .highlighted-project__description {
        max-width: 100%;
    }

}