@charset "utf-8";

@font-face {
    font-family: 'SchedePortfolio'; 
    src: url('/font/LCALLIG.woff2') format('woff2'); 
    font-weight: normal; 
    font-style: normal; 
    font-display: swap;
}

.scelta_cat {
    position: relative; 
    width: 95%; 
    height: auto; 
    text-align: center; 
    margin: .8em auto; 
    border: solid 2px #000; 
    background: #333; 
    padding: 20px 10px;
}	

/* Pulsanti categorie con lo stesso stile del pulsante CERCA */
.cat_portfolio {
    display: inline-block; 
    width: 140px; 
    margin: 8px 5px; 
    padding: 10px 0; 
    background: #222; /* Giallo del tasto cerca */
    color: #fff;         /* Testo nero */
    border-radius: 4px; 
    font-weight: bold; 
    cursor: pointer;
    font-size: 1em;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    vertical-align: middle;
	border:solid 2px #fff;
}

.cat_portfolio:hover { 
    background: #577; 
    color: #000; 
    transform: translateY(-1px);
	border:solid 2px #000;
}

/* Stato attivo per evidenziare la categoria selezionata */
.cat_portfolio.active { 
    background: #fc0 !important; 
    color: #000 !important; 
	border:solid 2px #a00;
}

.search_box_container {
    max-width: 480px; 
    min-width: 250px; 
    margin: 1em auto; 
    padding: 0 15px;
}

.image {
    display: inline-block;
    vertical-align: top;
}

.centra_portfolio { position:relative; width:100%; height:auto; margin:0 auto; text-align: center; }
.holder { position: relative; width: 320px; margin: 10px auto; display: block; text-align: center; }
.front, .back { width: 320px !important; height: 215px !important; position: absolute; top: 0; left: 0; }
.front img { width: 320px; height: 215px; object-fit: cover; display: block; }

/* Stili condivisi globalmente per i testi */
.riga1 { 
    color: #ff4d4d; 
    font-size: 18px; 
    font-weight: bold; 
    font-family: 'SchedePortfolio', serif !important; 
    margin-bottom: 10px; 
}
.riga2 { 
    color: #ffffff; 
    font-size: 13px; 
    line-height: 1.2em; 
    width: 100%; 
}

@media only screen and (max-width: 480px) {
    .cat_portfolio { width: 130px; font-size: 0.9em; }
    
    /* Permette al contenitore principale di allungarsi per ospitare il testo sotto */
    .holder { 
        width: 320px; 
        height: auto; 
        margin: 0 auto 30px auto !important; 
        display: block; 
        position: relative; 
    }
    
    /* Mantiene l'immagine fissa nella sua posizione naturale */
    .front {
        position: relative !important;
    }
    
    /* Testo spostato subito sotto l'immagine, con margini e padding minimizzati */
    .back { 
        position: relative !important; 
        background: none !important; 
        opacity: 1 !important; 
        transform: none !important; 
        margin-top: 0px; 
        height: auto !important;
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center; 
        padding: 0px 15px 5px 15px; 
        box-sizing: border-box;
    }
    
    .riga1 {
        display: block;
        line-height: 1.2em; /* Diminuita l'interlinea per avvicinarlo ulteriormente */
        margin-top: 4px;
        margin-bottom: 5px;  /* Ridotto lo spazio rispetto alla descrizione riga2 */
		font-size: 1.1em;
	}
    
    .riga2 {
        display: block;
		font-family: "Times New Roman";
		font-size: 1.1em;
    }
}

@media only screen and (min-width: 481px) {
    .holder { 
        position:relative; 
        width:320px; 
        height:215px; 
        margin:8px; 
        display:inline-block; 
        perspective: 1000px; 
    }
    .front { z-index:2; backface-visibility: visible !important; transition: all .7s; }
    .back { 
        transform: rotateY(180deg); 
        z-index:1; 
        transition: all .7s; 
        background: rgba(0, 0, 0, 0.75); 
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center; 
        padding: 15px; 
        box-sizing: border-box;
    }
    .holder:hover .front { transform: rotateY(-180deg); }
    .holder:hover .back { transform: rotateY(0deg); z-index: 3; }
}