/* Struttura principale dell'opera */
main[role="main"] {
    max-width: 700px; /* Leggermente più stretto per migliorare la lettura */
    margin: 40px auto;
    padding: 0 20px;
    font-family: Georgia, serif;
    line-height: 1.8; /* Interlinea ampia per non affaticare l'occhio */
    color: #1a1a1a;
}
.thera-gallery { font-family: 'Segoe UI', Arial, sans-serif; max-width: 1200px; margin: 0 auto; padding: 10px; }
    .galleria-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
    .opera-card { border: 1px solid #ddd; border-radius: 8px; padding: 15px; width: calc(48% - 10px); box-sizing: border-box; display: flex; flex-direction: column; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    .img-main { text-align: center; margin-bottom: 10px; }
    .img-main img { max-width: 100%; height: auto; border-radius: 4px; border: 1px solid #eee; }
    .alt-photos { text-align: center; margin-bottom: 10px; font-size: 0.85em; background: #f9f9f9; padding: 5px; border-radius: 4px; border: 1px solid #eee; }
    .alt-photos a { color: #0066cc; text-decoration: none; margin: 0 5px; font-weight: bold; }
    .info-box { font-size: 0.9em; line-height: 1.4; border-top: 2px solid #eee; padding-top: 10px; }
    .gr { color: #2c3e50; display: block; margin-bottom: 4px; }
    .en { color: #666; display: block; margin-bottom: 4px; font-style: italic; }
    .it { color: #c0392b; display: block; font-weight: bold; border-top: 1px dotted #ccc; padding-top: 4px; }
    @media (max-width: 800px) { .opera-card { width: 100%; } }
    
    /* Responsive per cellulari: le colonne diventano una sopra l'altra */
    @media (max-width: 600px) {
        .thera-row { flex-direction: column; }
        .thera-cell { width: 100%; margin-bottom: 20px; }
    }
    
.thera-nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 25px;
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .thera-nav a {
        text-decoration: none;
        color: #2c3e50;
        background: #fff;
        padding: 8px 15px;
        border-radius: 20px;
        font-size: 0.85em;
        font-weight: bold;
        border: 1px solid #ddd;
        transition: all 0.3s ease;
    }
    .thera-nav a:hover {
        background: #c0392b;
        color: #fff;
        border-color: #c0392b;
    }
    .lang-label {
        display: block;
        font-weight: bold;
        color: #c0392b;
        text-transform: uppercase;
        font-size: 0.8em;
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
    }
    .eng-text {
        color: #666;
        font-size: 0.95em;
        margin-top: 30px;
        border-top: 2px dashed #eee;
        padding-top: 20px;
    }
	.gr-text {
        color: #004080;
        font-size: 0.95em;
        margin-top: 30px;
        border-top: 2px dashed #eee;
        padding-top: 20px;
    }
	
	
	
	.thera-container { font-family: 'Segoe UI', Arial, sans-serif; max-width: 1000px; margin: 0 auto; }
    .thera-row { display: flex; border-bottom: 1px solid #eee; padding: 20px 0; align-items: center; }
    .thera-cell { width: 50%; padding: 0 15px; text-align: center; box-sizing: border-box; }
    .thera-cell img { border: 0; max-width: 100%; height: auto; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .info-text { margin-top: 10px; font-size: 0.9em; line-height: 1.4; text-align: center; }
    .info-text b { display: block; color: #2c3e50; margin-bottom: 3px; }
    .it-desc { color: #c0392b; font-weight: bold; display: block; margin-top: 5px; border-top: 1px dotted #ccc; padding-top: 5px; }
    .alt-links { margin-top: 8px; font-size: 0.85em; color: #0066cc; }
    .alt-links a { text-decoration: none; font-weight: bold; }
    
    /* Responsive per cellulari: le colonne diventano una sopra l'altra */
    @media (max-width: 600px) {
        .thera-row { flex-direction: column; }
        .thera-cell { width: 100%; margin-bottom: 20px; }
    }