:root {
    /* Achtergrond van de hele pagina (licht turquoise/blauw) */
    --clr-page-background: #e6f9fa; 
    
    /* Kleur van de hoofdtekst (donkergrijs) */
    --clr-main-text: #333333;
    
    /* Kleur van de titel "fotografie" */
    --clr-title: #263238; 
    
    /* Kleur van de linker 'thumbnail' balk (start/end gradient) */
    --clr-sidebar-start: #008080; /* Donkerder Teal */
    --clr-sidebar-end: #00b3b3; /* Lichter Teal */
    
    /* Kleur van de onderkant van de middenkaart (score/metadata - gradient) */
    --clr-card-bottom-start: #005f7c; /* Diepblauw-groen */
    --clr-card-bottom-end: #0085a2; /* Middenblauw-groen */
    
    /* Randkleur van de thumbnail balk en sluitknop */
    --clr-border-accent: #008080; 
    
    /* Kleur van de knoppen "tekeningen", "talenten" */
    --clr-button-bg: #263238; /* Zeer donkergrijs */
    --clr-button-text: #ffffff;
    
    /* Standaard lettertype */
    --font-primary: 'Arial', sans-serif;
}

body {
    background-image: url('../img/drawing.png'); 
    font-family: var(--font-primary);
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 0;
    padding: 20px;
}

/* =======================================================
   Modal Container (Hoofd Grid Layout)
   ======================================================= */

.modal-container {
    width: 900px;
    max-width: 95%; 
    height: 600px;
    background-color: #ffffff;
    border-radius: 15px; 
    /* De rand om de linkerkolom volgt de vorm van de sidebar */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden; 
    
    display: grid;
    /* 3 Kolommen: Thumbnails (smal), Content (medium), Tekst/Knoppen (breed) */
    grid-template-columns: 80px 1.5fr 2.5fr; 
    grid-template-rows: 1fr; 
    position: relative; 
}

.close-button-wrap {
    position: absolute;
    top: 15px;
    right: 15px;
}

.close-button {
    /* Kleur en vorm afgestemd op de afbeelding */
   
    width: 30px;
    height: 30px;
    background-color: var(--clr-border-accent);
    color: var(--clr-button-text);
    border: 2px solid var(--clr-border-accent);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1em;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

/* ----------------- 
   2. Linkerkolom (Thumbnails)
   ----------------- */

.thumbnail-bar {
    grid-column: 1 / 2;
    background: linear-gradient(to bottom, var(--clr-sidebar-start), var(--clr-sidebar-end));
    padding: 10px;
    display: flex;
    flex-direction: column; 
    gap: 10px;
    
    /* Gebogen rand aan de buitenkant, conform de afbeelding */
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-right: 2px solid var(--clr-border-accent); /* Visuele scheiding */
}

.thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1; 
    border-radius: 5px;
    overflow: hidden;
    /* Rand om de actieve thumbnail */
    border: 3px solid transparent; 
    transition: border-color 0.2s;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.thumbnail.active {
    border-color: #ffffff; 
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----------------- 
   3. Middenkolom (Hoofdafbeelding en Metadata)
   ----------------- */

.main-content-card {
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
    padding: 15px 15px 0 15px; /* Geen padding onderaan, de score vult dit op */
    background-color: #ffffff;
    /* De kaart wordt visueel gescheiden door een rand */
    border-right: 1px solid #ddd;
}

.main-image-area {
    flex-grow: 1; 
    height: 65%; /* Grof geschat, de hoogte van de afbeelding t.o.v. de metadata */
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.main-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Metadata Sub-Grid --- */
.metadata-area {
    /* De metadata sectie en score */
    height: 35%; /* Restant van de ruimte */
    display: grid;
    /* De label-kolom (smal) en de value-kolom (breed) */
    grid-template-columns: 1fr 1.5fr; 
    /* 3 rijen voor meta-items, 1 rij voor de score */
    grid-template-rows: repeat(3, 40px) 1fr; 
    background-color: #ffffff; 
}

.meta-item {
    font-size: 0.9em;
    color: var(--clr-main-text);
    /* Gedeelde stijl voor alle metadata rijen */
    border-top: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px;
}

/* Maak de eerste rij van de metadata items zonder top-border */
.metadata-area > .meta-item:nth-child(1),
.metadata-area > .meta-item:nth-child(2) {
    border-top: none;
}

.meta-label {
    font-weight: normal;
    color: #555;
    text-transform: lowercase; /* Alles in lowercase */
}

.meta-value {
    font-weight: bold;
    color: var(--clr-main-text);
    text-align: right;
    padding-right: 5px;
}

/* De derde rij is leeg op de afbeelding, dus we gebruiken de laatste twee rijen voor de score */
/* Eerste rij metadata (plaats) */
.metadata-area > .meta-item:nth-child(1) { grid-row: 1; grid-column: 1; }
.metadata-area > .meta-item:nth-child(2) { grid-row: 1; grid-column: 2; }
/* Tweede rij metadata (datum) */
.metadata-area > .meta-item:nth-child(3) { grid-row: 2; grid-column: 1; }
.metadata-area > .meta-item:nth-child(4) { grid-row: 2; grid-column: 2; }
/* De twee custom rows van de afbeelding */
.metadata-area > .meta-item:nth-child(5) { grid-row: 3; grid-column: 1; }
.metadata-area > .meta-item:nth-child(6) { grid-row: 3; grid-column: 2; }
.metadata-area > .meta-item:nth-child(7) { grid-row: 4; grid-column: 1; }
.metadata-area > .meta-item:nth-child(8) { grid-row: 4; grid-column: 2; }


/* --- Score Vlak --- */
.score-area {
    /* De score neemt de resterende ruimte in */
    grid-column: 1 / 3; 
    grid-row: 5 / 6; /* De laatste rij */
    
    /* Vorm en kleur van de afbeelding */
    background: linear-gradient(to right, var(--clr-card-bottom-start), var(--clr-card-bottom-end));
    border-radius: 0 0 15px 0; /* Alleen rechtsonder (modal-container heeft de rest) */
    
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px; /* Kleine visuele scheiding */
}

.score-value {
    font-size: 3.5em;
    font-weight: bold;
    color: var(--clr-button-text);
}

/* ----------------- 
   4. Rechterkolom (Tekst en Knoppen)
   ----------------- */

.text-info-card {
    grid-column: 3 / 4;
    background-color: var(--clr-page-background); /* Achtergrond van de rechtersectie is lichtblauw */
    padding: 30px 40px 15px 40px;
    
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 2.5em;
    color: var(--clr-title);
    text-transform: lowercase; /* De titel is lowercase */
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: normal;
}

.card-text {
    flex-grow: 1; 
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--clr-main-text);
    margin-bottom: 20px;
}

/* --- Navigatie Knoppen --- */
.button-nav {
    display: flex;
    justify-content: flex-end; 
    gap: 15px;
    padding-top: 20px; 
}

.nav-button {
    text-decoration: none;
    background-color: var(--clr-button-bg);
    color: var(--clr-button-text);
    padding: 10px 20px;
    border-radius: 5px;
    text-transform: lowercase;
    font-weight: bold;
    font-size: 1em;
    transition: background-color 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.nav-button:hover {
    background-color: #3e4b52;
}

body {
    background-color: var(--clr-page-background);
    font-family: var(--font-primary);
    
    /* BELANGRIJK: Gebruik Flexbox om de inhoud te centreren */
    display: flex;
    /* Horizontaal centreren */
    justify-content: center; 
    /* Verticaal centreren */
    align-items: center; 
    
    /* Zorgt ervoor dat de body minimaal de volledige hoogte van het browservenster inneemt */
    min-height: 100vh; 
    
    margin: 0;
    padding: 20px; /* Een kleine padding om de modal niet aan de rand te laten plakken */
}