/* vormgeven aan het html-resultaat van [N|D|I|T]{.foto} */

.fotonaam {
    display: block;                 
    opacity: 0;                     
    transition: opacity 0.3s ease;  
    font-family: sans-serif;        
    font-size: 0.7rem !important;   
    font-style: normal !important;  
    text-align: center; /* binnen zijn text box */
    width: 100%; /* 100% van de container, de minipage */
    /* color: red;  */   /* debugging */
}

.beschrijving {
    display: block;
    line-height: 1.0;               
    font-size: 1rem; 
    text-align: center; /* binnen zijn text box */
    width: 100%; /* 100% van de container, de minipage */
    height: 100%; /* 100% van de container, de minipage */
    /* debugging color: red ;  */
}

.breedte-1 { width: 100% !important; } 
.breedte-2 { width: 47% !important; }  
.breedte-3 { width: 30% !important; }  
.breedte-4 { width: 23% !important; }  
.breedte-5 { width: 18% !important; }  
.breedte-9 { width: 63% !important; }  

/* De minipages worden als een <span> worden gegenereerd (<span class="minipage...">) */
/* Als er andere minipages zouden zijn, zeg dan daarvoor .minipage {...}  */
/* Zorg dat de minipage flexibel is en de gekrompen hoogte van de foto volgt */
span.minipage {
    display: inline-block !important;
    align-items: center !important;    /* Centreert de inhoud netjes */
    text-align: center;
    flex-direction: column !important; /* Dwingt beschrijving en fotonaam ONDER de foto te blijven */
    height: auto !important;           /* Zorgt dat de minipage meegroeit als de foto+tekst groeit */
    max-width: 100vw !important;       /* Max breedte (perc. van het venster) */
    max-height: 90vh !important;       /* Max breedte (perc. van het venster) (ruimte voor tekst eronder) */
    margin-bottom: 30px !important;    /* Garandeert dat de tekst eronder nooit overlapt wordt */
    box-sizing: border-box !important;
    overflow: visible !important;      /* Voorkomt vreemde afsnijdingen */
    vertical-align: top !important;    
}

span.minipage a img { cursor: pointer; } /* muis pointer->handje boven foto's */
span.minipage:hover .fotonaam { opacity: 1; }

.minipage img {
    display: block;            
    max-width: 100%;           /* Zorgt dat hij nooit buiten de minipage breekt */
    width: auto !important; /* Overschrijft inline-breedtes zodat de foto zijn ECHTE breedte pakt! */
    height: auto;              
    /* max-height: inherit;       was er wel... */
    margin: 0 auto; /* Centreert de foto netjes in de minipage */
    object-fit: contain;   /* 'contain' zorgt dat de foto inside de box blijft */
    /* object-fit: cover;   foto wordt vergroot zo dat die de hele box vult, een deel valt weg */
}

img.foto-container {
    display: block !important;
    width: fit-content !important; 
    height: auto !important; /* Dwingt de browser de juiste verhoudingen te bewaren */
    max-height: 85vh !important; /* De foto mag NOOIT hoger worden dan 85% van het venster. */
    max-width: 100% !important; /* Breedte krimpt en groeit proportioneel mee, maar max breedte minipage */
    flex-shrink: 1 !important; /* Voorkom dat de foto buiten zijn flex-box container treedt */
    margin: 0 auto 10px auto !important;
    /* Zie ook: .album img.foto-container {...} */
}


.foto-container {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    /* outline: 2px solid blue; debugging:*/
}
.foto-container img {
    display: block;
    max-width: 100%; /* Voorkomt dat de foto groter wordt dan zijn container */
    height: auto;    /* Behoudt de verhoudingen keurig */
}

.float-L {
    display: inline-block;
    float: left;          
    margin-right: 20px;   
    margin-left: 0;       
    margin-bottom: 10px;  
}
.float-R {
    display: inline-block;
    float: right;
    margin-left: 20px;
    margin-right: 0;
    margin-bottom: 10px;
}
.float-C {
    display: flex !important;       
    float: none !important;         
    clear: both;                    
    margin-left: auto !important;   
    margin-right: auto !important;  
}
.float-N {
    display: inline-flex !important; 
    float: none !important;          
    flex-shrink: 0;                  
}
h1, h2, h3, h4, h5, .nieuwe-paragraaf {
    clear: both; /* Om het floaten van text naast een foto te beeindigen bij h1 etc, [[clear]] ---lua---> .nieuwe-paragraaf*/
}