/*
Theme Name: Portfolio Custom
Description: Tema custom per portfolio con GSAP
Version: 1.0
*/

*{
    font-family: 'Poppins', sans-serif;;

}

p, h1, h2, h3, h4, h5, body, html{
    margin: 0px;
    padding: 0px;
}


body{
    overflow-x: hidden;
    overflow-y: scroll;
}
.loadWebsite{
    position: absolute;
    height: 100vh;
    width: 100vw;
    display: flex;
    z-index: 100;
}
.loadCol{
    height: 100vh;
    width: 10vw;
    background-color: #28A745;
}
.loadColore1{
    background-color: hwb(134 16% 32%);
}
.loadColore2{
    background-color: hwb(134 16% 29%);
}
.loadColore3{
    background-color: hwb(134 16% 26%);
}
.loadColore4{
    background-color: hwb(134 16% 23%);
}
.loadColore5{
    background-color: hwb(134 16% 20%);
}
.loadColore6{
    background-color: hwb(134 16% 17%);
}
.loadColore7{
    background-color: hwb(134 16% 14%);
}
.loadColore8{
    background-color: hwb(134 16% 11%);
}
.loadColore9{
    background-color: hwb(134 16% 8%);
}
.headerContainer{
    margin-top: 24px;
    margin-right: 64px;
    margin-left: 64px;
    margin-bottom: 24px;
    padding: 16px 64px 16px 64px;
    border-radius: 8px;
    background-color: #2A4230;
    position: fixed;
    width: calc(100% - 256px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 100;
    box-shadow: 0 8px 25px rgba(42, 66, 48, 0.15);
    align-items: center;
}

.logoHeader{
    width:  32px;
    aspect-ratio: 16/9;
    height: auto;
    background-color: white;
}
.headerNav{
    display: flex;
    flex-direction: row;
    gap: 32px;
    font-size: 1rem;
}
.headerNav a{
    color: white;
    text-decoration: none;
    font-weight: 400;
    font-size: 1rem;
}
.heroHome{
    display: grid;
    grid-template-columns: repeat(5, 1fr) 1fr repeat(6, 1fr);
    gap: 16px;
    padding-top: 128px;
    padding-bottom: 128px;
    padding-right: 64px;
    padding-left: 64px;
    align-items: center;
    overflow: hidden;
    background-color: #F9FFF6;
}
.colHeroHome{
    grid-column: span 6;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.headingHeroHome{
    font-size: 4rem;
    font-weight: 400;
}
.highlight{
    font-weight: 600;
    color: #28A745;
}
.highlight2, .highlight3{
    font-weight: 600;
    color: #28A745;
    text-decoration: underline;
    position: relative;
    z-index: 2;
}
.hoverHighlight, .hoverHighlight2{
    position: absolute;
    width: 300px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border-radius: 8px;
}

.highlight2:hover .hoverHighlight{
    display: block;
    position: absolute;
    z-index: 1;
}
.highlight3:hover .hoverHighlight2{
    display: block;
    position: absolute;
    z-index: 1;
}
div.rowIndent{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    gap: 16px;
}
.squareIndent{
    margin-top: 6px;
    width: 24px;
    height: auto;
    flex-shrink: 0;
}
.squareIndent2{
    width: 100%;
    height: 24px;
    flex-shrink: 0;
    background-color: #28A745;
    cursor: pointer;
}
.descriptionHeroHome{
    font-size: 1.5rem;
    width: auto;
    z-index: 0;
}

.emptyCol{
    grid-column: span 2;
}
.motionHero{
    grid-column: span 4;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.circle{
    width: 50%;
    height: auto;
    aspect-ratio: 1/1;
    background-color:#28A745;
    border-radius: 10000px;
}
.circle-1, .circle-4{
    background-color:#2A4230;
}
.hero-animation{
    position: absolute;
    width: 100vw;
    height: 100vh;
}
.dottieAnim{
    width:  32px;
    height: auto;
    position: absolute;
    bottom: 64px;
left: 0;
    right: 0;
    margin: 0 auto;
}
.chiSono{
    display: flex;
    flex-direction: column;
    gap: 48px;
    justify-content: center;
    align-items: center;
    padding: 64px;
}
.chiSonoCol{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    justify-content: center;
    align-items: center;
}
.headingSection{
    font-size: 2.5rem;
    text-align: left;
    grid-row: 1; /* Inizia dalla linea di riga 1 e occupa 1 riga */
    justify-content: center;
    align-items: center;
    grid-column: span  12;
    font-weight: 400;
    color: #28A745;

}
.marginSide{
    margin: 0px 64px 0px 64px;
}
.descSection{
    font-size: 1rem;
    text-align: left;
    grid-row: 2; /* Inizia dalla linea di riga 1 e occupa 1 riga */
    justify-content: center;
    align-items: start;
    justify-self: start; 
    grid-column: 3 / span 8; /* INIZIA DALLA COLONNA 3 E OCCUPA 8 COLONNE */
}
.cards{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    justify-content: center;
    align-items: center;
}
.card{
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: auto;
    gap: 24px;
    padding: 24px;
    text-align: center;
    background-color: #F9FFF6;
    border-radius: 12px;
}
.icon{
    display: flex;
    justify-content: center;
    font-size: 4rem;
    width: 32px;
    height: auto;
}
.cardTitle, .cardDesc{
    font-size: 1rem;
}
/* I tuoi stili esistenti */
.progetti {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 64px 0px 64px 0px;
}

/* Selettori aggiornati */
.selectorRow {
    padding: 16px 64px 16px 64px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 8px;
}

.selector {
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.selector.active {
    background: #2A4230;
    color: white;
    cursor: default; /* Cambia il cursore */
    pointer-events: none; /* Disabilita tutti gli eventi del mouse */
}

.selector:hover:not(.active) {
    background: #f0f0f0;
}

/* Wrapper progetti con toggle */
.wrapProgetti {
    display: none !important; /* Nascosto di default */
    flex-direction: column;
    gap: -1px;
    overflow: hidden;
}

.wrapProgetti.active {
    display: flex !important; /* Mostra solo quello attivo */
}

/* Vista LIST (i tuoi stili esistenti) */
.list-view .legendaRow, 
.list-view .rowProgetto {
    display: grid;
    padding: 16px 64px 16px 64px;
    grid-template-columns: repeat(12, 1fr);
    border-bottom: solid grey 1px;
}

.list-view .legenda, 
.list-view .acfProgetto {
    grid-column: span 3;
}

.list-view .anno {
    grid-column: 12 / span 1;
}

.list-view .rowProgetto {
    transition: all ease 1s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.list-view .linkProgetto {
    text-decoration: none;
    color: black;
}

.list-view .acfProgetto {
    font-size: 1rem;
    font-weight: 400;
}

.list-view .hoverAnim {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #2A4230;
    z-index: -1;
}

.rowProgetto:hover .acfProgetto{
    transition: all ease .3s;
    color: #F9FFF6;
}

/* Vista GALLERY (nuovi stili) */
.gallery-view.active {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr);
    gap: 30px;
    padding: 20px 64px; /* Mantiene il padding laterale come gli altri */
}

.gallery-item {
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
    grid-column: span 4;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

.gallery-card {
    overflow: hidden;
}
.gallery-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.gallery-image img, .gallery-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-image.placeholder {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 500;
}
.gallery-title {
    font-size: 1.2em;
    font-weight: 600;

    color: #000000;
}
.gallery-content{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0px 0px 0px;
}
.gallery-category {
    color: #f8f9fa;
    font-size: 1rem;
    font-weight: 400;

    border-radius: 4px;
    background-color: #2A4230;
    box-sizing: border-box;
    padding: 8px 16px 8px 16px;
    width: fit-content;
}

.gallery-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    color: #666;
}

/* Responsive */
@media (max-width: 768px) {
    .selectorRow {
        padding: 16px 32px;
    }
    
    .list-view .legendaRow, 
    .list-view .rowProgetto {
        padding: 16px 32px;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .list-view .legenda, 
    .list-view .acfProgetto,
    .list-view .anno {
        grid-column: 1;
    }
    
    .gallery-view {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 32px;
    }
}

@media (max-width: 480px) {
    .selectorRow {
        padding: 16px 16px;
    }
    
    .list-view .legendaRow, 
    .list-view .rowProgetto {
        padding: 16px 16px;
    }
    
    .gallery-view {
        padding: 20px 16px;
    }
}
.formSection{
    padding: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 64px;
}
.formRow{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
.formCol{
    grid-column: 7 / span 3;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.formWrap{
    grid-column: span 5;
}
.form-label{
    display: block;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #F9FFF6;
}
.form-label span{
    display: block;
    width: 100%;

}
.form-label input,
.form-label textarea {
    padding: 12px 16px;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box; /* Include padding e border nella larghezza */
    border: 1px solid #ddd; /* Aggiungi border se non c'è */
}
.wpcf7-response-output{
    margin: 0px;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-radius: 12px;
    border: none;
    margin: 0px;
}
.wpcf7-submit{
    padding: 12px 16px;
    width: 100%;
    border-radius: 12px;
    font-size:1rem;
    color: #28A745;
    font-weight: 600;
    cursor: pointer;
}
.wpcf7-form{
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #2A4230;
    padding: 24px 32px 24px 32px;
    border-radius: 12px;
}
/*
.wpcf7-form p:last-of-type{
    height:min-content;
}
.wpcf7-spinner {
    display: none !important;
}
form.submitting .wpcf7-spinner {
    display: inline-block !important;
}
    */
.wpcf7-response-output{
    color: #F9FFF6;
    text-align: center;
}
.heroLavoro{
    display: grid;
    grid-template-columns: repeat(5, 1fr) 1fr repeat(6, 1fr);
    gap: 16px;
    padding-top: 128px;
    padding-bottom: 128px;
    padding-right: 64px;
    padding-left: 64px;
    align-items: center;
    overflow: hidden;
    background-color: #F9FFF6;

}
.colInfoLavoro{
    grid-column: span 5;
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: start;
    align-items: start;
}
.headingInfoLavoro{
    font-size: 2.5rem;
    font-weight: 300;
}
.noMargin{
    margin: 0px;
}
.rowInfoLavoro{
    display: flex;
    flex-direction: row;
    gap: 32px;
}
.colInfoCliente h1, .colInfoAnno h1{
    font-size: 1rem;
}
.infoCliente, .infoAnno{
    font-weight: 500;
}
.infoAcfAnno, .infoAcfCliente{
    font-weight: 300;
}
.descrizioneProgetto{
    font-size: 1rem;
    font-weight: 400;
}
.colImgLavoro{
    grid-column: 7 / span 6;
}
.imgLavoroSingolo{
    width: 100%;
    aspect-ratio: 16/12;
    object-fit: cover;
    border-radius: 16px;
}
.wrapLavoro{
    padding: 64px;
    display: flex;
    flex-direction: column;
    gap: 96px;
}
.sezioneLavoro1{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 32px;
}
.imgLavoro1{
    grid-column: span 12;
    width: 100%;
    border-radius: 16px;
    aspect-ratio: 16/9;
}
.descLavoro1{
    grid-column: span 6;
}
.sezioneLavoro2{
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.wrapImgSezione2{
    grid-template-columns: repeat(12, 1fr);
    display: grid;
    gap: 16px;
    align-items: stretch;
}
.wrapColSezione2{
    display: flex;
    flex-direction: column;
    grid-column: span 5;
    gap: 16px;
}
.wrapRowSezione2{
    grid-column: span 7;
    display: flex;
    flex-direction: row;
    gap: 16px;

}
.imgLavoro2, .imgLavoro3{
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 16px;
    object-fit: cover;
}
.imgLavoro4, .imgLavoro5{
    width: calc(50% - 8px);
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.wrapDesc2{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}
.descLavoro2{
    grid-column: span 5;
}
.sezioneLavoro3{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}
.imgLavoro6{
    aspect-ratio: 13/11;
    grid-column: span 6;
    width: 100%;
    border-radius: 16px;
    object-fit: cover;

}
.descLavoro3{
    grid-column: span 6;
}
.sezioneLavoro4{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.imgLavoro7, .imgLavoro8{
    border-radius: 16px;
    object-fit: cover;
}
.imgLavoro7{
    grid-column: span 3;
    width: 100%;
    height: 100%;
}
.imgLavoro8{
    grid-column: 7 / span 6;
        width: 100%;
}
.descLavoro4{
    grid-column: span 2;
}