@charset "UTF-8";
/* CSS Document - Yonah Lightbox 1 (Photogallery) */

.lightbox-css {
    position: fixed;            /* Si ancora saldamente al vetro del browser */
    top: 0;
    left: 0;
    width: 100vw;               /* 100% della larghezza visibile */
    height: 100vh;              /* 100% dell'altezza visibile */
    background: rgba(6, 6, 6, 0.75); /* Fondo nero profondo d'élite */
    z-index: 99999;             /* Passa sopra a qualsiasi elemento */
    
    /* STATO INIZIALE: Totalmente invisibile e incorporeo */
    opacity: 0;
    visibility: hidden;         
    pointer-events: none;       
    
     display: flex;
    flex-direction: column;     /* Imposta gli elementi in colonna (barra sopra, foto sotto) */
    align-items: center;
    justify-content: flex-start;/* 🎯 SPINGE TUTTO SUBITO CONTRO IL MARGINE SUPERIORE */
    padding: 0px;               /* Via qualsiasi padding che crei distanza dal bordo */
    box-sizing: border-box;
    transition: opacity 0.3s ease, visibility 0.3s ease; 
}

/* Quando la foto è zoomata, espandiamo la sua gabbia di altezza e larghezza
.lightbox-css img.zoom-attivo {
    position: absolute !important;
    top: 55px !important;           Appena sotto la tua barra superiore 
    height: calc(100vh - 65px) !important;  Si incolla all'altezza totale dello schermo 
    width: auto !important;         Mantiene la proporzione verticale reale senza schiacciarsi 
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
}

*/



/* ATTIVAZIONE TRAMITE TARGET (O CLASSE) */
.lightbox-css:target,
.lightbox-css.apri-lightbox {
    opacity: 1;
    visibility: visible;        /* Accende la stanza a tutto schermo */
    pointer-events: auto;       /* Sblocca i clic */
}


/* La barra aderisce perfettamente al tetto e si estende al 100% */
.barra-superiore {
    display: flex; 
    width: 100%;                /* Occupa tutta la larghezza in alto */
    justify-content: space-between; 
    align-items: center; 
    padding: 5px 30px;         /* Spazio laterale di cortesia per i testi */
    margin-bottom:5px;
	box-sizing: border-box;
    background: rgba(100, 100, 100, 0.5); /* Leggero fondo per staccare i comandi dal nero della foto */
    
}

.barra-superiore a {
    display: inline-block; 
    color: #fff;
    text-decoration: none;
    font-size: 1.5vw;  
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.barra-superiore a:hover {
    color: #cca43b;            /* Oro Yonah */
}
/* L'immagine espansa dentro il proiettore */
/* 1. VISTA STANDARD (La foto si posiziona intera al centro senza sforare) */
.lightbox-css img {
    width: auto;
    height: auto;
    max-width: 96vw;
    max-height: 96vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
    transform-origin: center center;
    transition: transform 0.2s ease;
}

/* 2. VISTA ZOOMATA (La foto rompe la gabbia e si allarga a tutto schermo) */
.lightbox-css img.zoom-attivo {
    width: 85vw !important;         /* 🎯 Svolta: Forziamo la larghezza ad occupare quasi tutto lo schermo */
    height: auto !important;        /* L'altezza calcola automaticamente i suoi 2323px proporzionali */
    max-width: none !important;     /* Rimuoviamo i vecchi lucchetti */
    max-height: none !important;    /* Rimuoviamo i vecchi lucchetti */
    object-fit: fill !important;
}
}


/* L'elegante pulsante di chiusura (X) in alto a destra */
.lightbox-close {
    position: absolute;
    top: 40px;                  /* Distanza fissa dall'alto dello schermo */
    right: 50px;                /* Distanza fissa dal bordo destro */
    color: #fff;
    font-size: 56px;            /* Dimensione monumentale e leggibile */
    text-decoration: none;
    font-weight: 200;
    line-height: 1;
    transition: color 0.3s ease;
}

.lightbox-close:hover {
    color: #cca43b;             /* Vira all'oro Yonah */
}