/* ==========================================================================
   RESPONSIVE DESIGN (Media Queries)
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(40px); transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Zorgt ervoor dat de overlap-container perfect naast de laatste kaart valt op grote schermen, en full-width pakt op tablet */
@media (min-width: 769px) {
    .overlap-container { grid-column: span 2; }
}

@media (max-width: 1024px) {
    .hero { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .hero-visual { order: -1; }
    .type-container { text-align: center; }
    .hero-text p { margin: 0 auto 30px auto; text-align: center; }
    .dash-content { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    /* Verberg enkel de normale tekst-links in het menu, maar behoud de CV knop */
    .menu-items a:not(.btn-solid) { display: none; }
    
    /* Maak de CV knop iets compacter op mobiel zodat hij mooi naast het logo past */
    .btn-solid { padding: 10px 20px; font-size: 0.9rem; }

    .mouse-dot, .mouse-ring { display: none; } 
    * { cursor: auto; }
    .t-source { padding: 25px; font-size: 0.85rem; }
    .grid-exp { grid-template-columns: 1fr; padding: 0 10px; }
    .card-exp { width: 100%; }
    
    .modal-wrap { padding: 15px; }
    .modal-box { padding: 30px 20px; border-radius: var(--radius-box); max-height: 85vh; }
    .btn-close { top: 15px; right: 15px; width: 35px; height: 35px; }

    /* Fix voor de overlappende kaarten (strakke mobiele weergave) */
    .overlap-container { margin-top: 40px; display: flex; flex-direction: column; gap: 15px; min-height: auto; }
    .overlap-card { position: relative; width: 100%; padding: 20px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 0; }
    .overlap-card p { display: none; }
    .overlap-card h4 { margin-bottom: 0; font-size: 1.15rem; text-align: center; }
    
    /* Zorgt ervoor dat de schuine rotaties compleet gereset worden */
    .card-edu { transform: none !important; }
    .card-stage { transform: none !important; }
}

@media (max-width: 400px) {
    .mobile-warning-overlay { display: flex; }
}