/* Responsive design for mobile */
@media (max-width: 700px) {
    .hoogheden {
        flex-direction: column;
        gap: 1rem;
        padding: 0.5rem;
        max-width: 100%;
    }
    .Prinsepaar {
        width: 100%;
        min-width: 0;
        padding: 0.5rem;
    }
    .Prinsepaar img {
        height: 180px;
        width: 100%;
        max-width: 100%;
    }
    .HooghedenInfo {
        padding: 0.5rem;
        font-size: 1rem;
    }
}
@import url('Home.css');

/* Layout voor de hoogheden sectie */
.hoogheden {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
    justify-content: center;
    max-width: 1800px; /* Maximum breedte voor de hele sectie */
    margin: 0 auto; /* Centreer de sectie */
}

/* Stijl voor elk prinsenpaar kaartje */
.Prinsepaar {
    background-color: #DFA811;
    border-radius: 8px;
    padding: 1rem;
    width: calc(20% - 1.6rem); /* 20% voor 5 items per rij, minus wat ruimte voor de gap */
    min-width: 250px; /* Voorkom dat kaartjes te smal worden */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.Prinsepaar img {
    width: 100%;
    height: 400px; /* Hogere container voor betere verhoudingen */
    object-fit: contain; /* Zorgt dat de hele foto zichtbaar blijft */
    border-radius: 4px;
    display: block;
}

/* Stijl voor de informatie onder de foto */
.HooghedenInfo {
    padding: 1rem;
    text-align: center;
}

.Naam {
    margin: 0.5rem 0;
    color: #34449f;  /* Matched met je bestaande kleurenschema */
}

.jaartal {
    color: #666;
    margin: 0.25rem 0;
}

 .modal[hidden] { display: none !important; }
        #addPrinsForm { 
            background: #fff; 
            padding: 1.5rem; 
            max-width: 520px; 
            width: 95%; 
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        #addPrinsForm label { display: block; margin-bottom: 1rem; }
        #addPrinsForm input, #addPrinsForm textarea { 
            width: 100%; 
            padding: .5rem;
            margin-top: .25rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        #addPrinsForm .buttons {
            margin-top: 1rem;
            text-align: right;
            gap: .5rem;
            display: flex;
            justify-content: flex-end;
        }
        #addPrinsForm button {
            padding: .5rem 1rem;
            border-radius: 4px;
            border: 1px solid #ddd;
            background: #fff;
            cursor: pointer;
        }
        #addPrinsForm button[type="submit"] {
            background: #4CAF50;
            color: white;
            border-color: #45a049;
        }

        /* Floating add button positioning so it appears above the fixed footer */
        .floating-add {
            position: fixed;
            right: 20px;
            bottom: 100px; /* above footer (footer uses bottom:0) */
            z-index: 1200;
        }
        .floating-add .primary {
            padding: 0.6rem 1rem;
            background: #DFA811;
            color: #010e58;
            border: none;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
        }

        /* Admin action buttons (edit / delete) - shared styling for VV and JCV */
        .deleteHoogheid, .editHoogheid {
            position: absolute;
            top: 10px;
            background: rgba(255,68,68,0.9);
            color: white;
            border: none;
            border-radius: 4px;
            width: 32px;
            height: 32px;
            cursor: pointer;
            display: none; /* shown on hover by JS */
            padding: 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            z-index: 10;
        }
        .editHoogheid {
            right: 50px;
            background: rgba(68,136,255,0.95);
            font-size: 18px;
            z-index: 11;
        }
        .deleteHoogheid {
            right: 10px;
            font-size: 20px;
        }