/* ── RESPONSIVE ── */

/* ≤ 820px: switch to hamburger */
@media (max-width: 820px) {
    .nav-links   { display: none; }
    .hamburger   { display: flex; }
    .mobile-nav  { display: flex; }

    .about-content { grid-template-columns: 1fr; }
    .about-graphic { height: 200px; }
    .contact-content { grid-template-columns: 1fr; }
    .hero-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .hero-photo {
        width: clamp(160px, 50vw, 260px);
    }

    .hero-socials {
        flex-direction: row;
        border-radius: 50px;
        padding: 10px 16px;
    }

    .hero-socials::before,
    .hero-socials::after { display: none; }
}

/* ≤ 600px */
@media (max-width: 600px) {
    .projects-grid { grid-template-columns: 1fr; }
    .skills-grid   { grid-template-columns: 1fr; }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
    .hero-layout {
        grid-template-columns: 1fr;
    }

    .hero-socials {
        flex-direction: row;
        justify-content: center;
    }

    .hero-socials::before,
    .hero-socials::after { display: none; }
}

/* ≤ 500px */
@media (max-width: 500px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}

/* ≤ 400px */
@media (max-width: 400px) {
    .timeline { padding-left: 40px; }
    .timeline::before { left: 16px; }
    .timeline-dot { left: -24px; width: 30px; height: 30px; font-size: 9px; top: 18px; }
    .project-footer { gap: 8px; }
}