:root {
  --bg-color: #ccc;
  --bg-color-pers-cont: #fff;
  --bg-color-pers-card: #F2F2F2;
  --font-color: #333;
  --font-color-details: #333;
  --border-radius: 10px;
}

html, body {
    height: 100vh;
    width: 100vw;
    margin: 0; padding: 0; 
    overflow: hidden; 
    font-family: Roboto;
    color: var(--font-color);
    background-color: var(--bg-color);
}
        
.personen-container {
    position: absolute; 
    top: 50px;    
    width: 96vw; 
    max-width: 1400px;    
    left: 50%; 
    transform: translate3d(-50%, 0, 0);

    /* FIX 1: Grid-rows aangepast naar 4 rijen (Titel + 3 kaartenrijen) */
    display: grid; 
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr 1fr 1fr; 
    gap: 3vh; 
    padding: 5vh; 
    background-color: var(--bg-color-pers-cont);
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.15); */
    border-radius: var(--border-radius);
    box-shadow: rgba(50, 50, 93, 0.45) 0px 50px 100px -20px, rgba(0, 0, 0, 0.5) 0px 30px 60px -30px, rgba(10, 37, 64, 0.65) 0px -2px 20px 0px inset;
}
        
.container-title {
    grid-column: 1 / span 2;
    text-align: center;
    margin-bottom: -10px; 
    margin-top: -20px;
    color: var(--font-color); 
    font-size: 3vh; 
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

/* DYNAMISCHE GROOTTES (gebruik van vh) */
.persoon-kaart {
    border: none;
    padding: 2vh;
    text-align: center;
    background-color: var(--bg-color-pers-card);
    border-radius: var(--border-radius);
    display: flex;
    /* -webkit-box-shadow: 0px 22px 24px -5px rgba(0,0,0,0.99); 
    box-shadow: 0px 22px 24px -5px rgba(0,0,0,0.99); */
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

/* FIX 2: Expliciete positie voor alle 6 kaarten (2 kolommen x 3 rijen) */

.personen-container .persoon-kaart:nth-child(2) { /* Kaart 1 (Rij 2, Kolom 1) */
    grid-row: 2;
    grid-column: 1;
}
.personen-container .persoon-kaart:nth-child(3) { /* Kaart 2 (Rij 2, Kolom 2) */
    grid-row: 2;
    grid-column: 2;
}
.personen-container .persoon-kaart:nth-child(4) { /* Kaart 3 (Rij 3, Kolom 1) */
    grid-row: 3;
    grid-column: 1;
}
.personen-container .persoon-kaart:nth-child(5) { /* Kaart 4 (Rij 3, Kolom 2) */
    grid-row: 3;
    grid-column: 2;
}
.personen-container .persoon-kaart:nth-child(6) { /* Kaart 5 (Rij 4, Kolom 1) */
    grid-row: 4;
    grid-column: 1;
}
.personen-container .persoon-kaart:nth-child(7) { /* Kaart 6 (Rij 4, Kolom 2) */
    grid-row: 4;
    grid-column: 2;
}

.persoon-kaart img {
    width: 15vh; 
    height: 15vh; 
    min-width: 15vh; 
    min-height: 15vh; 
    max-width: 15vh; 
    max-height: 15vh; 
    object-fit: cover; 
    border-radius: 50%;
    border: 2px black solid;
    box-shadow: 0px 22px 24px -5px rgba(0,0,0,0.99);
}

.persoon-naam {
	font-weight: bold; 
	font-size: 3.5vh; 
	margin-bottom: 1vh; 
	color: var(--font-color-details);
}
.persoon-details {
	font-size: 2.2vh; 
	color: var(--font-color-details); 
	line-height: 1.5;
}
.date-detail {
	margin-top: 0.5vh; 
	display: block;
}
        
/* MEDIA QUERY: Val terug naar 1 kolom op smalle schermen */
@media (max-width: 768px) {
    .personen-container {
        grid-template-columns: 1fr; 
        grid-template-rows: auto;
        gap: 20px;
        width: 95vw;
        padding: 3vw;
        position: static;
        top: auto;
        left: auto; 
        transform: none;
        margin: 10px auto;
    }
    
    body {
    	overflow-y: auto;
    }
    .container-title { 
    	margin-bottom: 10px; 
    }
    .persoon-kaart { 
        grid-row: auto; 
        grid-column: auto; 
    }
    /* Reset specifieke posities op mobiel */
    .personen-container .persoon-kaart:nth-child(2),
    .personen-container .persoon-kaart:nth-child(3),
    .personen-container .persoon-kaart:nth-child(4),
    .personen-container .persoon-kaart:nth-child(5),
    .personen-container .persoon-kaart:nth-child(6),
    .personen-container .persoon-kaart:nth-child(7) {
        grid-row: auto;
        grid-column: auto;
    }
	.persoon-naam {font-size: 3vh;}
	.persoon-details {font-size: 2vh;}
}