/* =====================
   Very large (≥ 1400px)
   ===================== */
@media screen and (min-width: 1400px) {
    :root { --sidebar-width: 290px; }

    .right-container  { padding: 3.5rem 4rem; }
    .title-row h1     { font-size: 2.4rem; }
    #left-pane-img    { width: 165px; height: 165px; }
}

/* =====================
   Medium desktop (≤ 1200px)
   ===================== */
@media screen and (max-width: 1200px) {
    :root { --sidebar-width: 230px; }

    .right-container   { padding: 2.5rem 2.5rem; }
    .projects-grid     { grid-template-columns: repeat(2, 1fr); }
    #left-pane-img     { width: 120px; height: 120px; }
}

/* =====================
   Tablet landscape (≤ 900px)
   Sidebar becomes top bar
   ===================== */
@media screen and (max-width: 900px) {

    #layout {
        grid-template-columns: 1fr;
    }

    .left-container {
        position: static;
        height: auto;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 1.5rem 2rem;
        gap: 1rem;
    }

    .left-container h4,
    #description {
        width: 100%;
        text-align: center;
    }

    .social-icons { justify-content: center; }

    .details {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
    }

    .resume-link {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        padding-left: 0.85rem;
    }

    .right-container { padding: 2rem 2rem; max-width: 100%; }
}

/* =====================
   Tablet portrait (≤ 700px)
   ===================== */
@media screen and (max-width: 700px) {

    #left-pane-img { width: 90px; height: 90px; }

    .right-container { padding: 1.75rem 1.5rem; gap: 2.5rem; }

    .title-row h1 { font-size: 1.65rem; }

    .projects-grid { grid-template-columns: 1fr; }

    .skills-grid   { grid-template-columns: 1fr; }

    .timeline-header {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* =====================
   Mobile (≤ 480px)
   ===================== */
@media screen and (max-width: 480px) {

    .left-container { padding: 1rem 1rem; gap: 0.75rem; }

    #left-pane-img { width: 78px; height: 78px; }

    #description { font-size: 0.74rem; }

    .right-container { padding: 1.25rem 1rem; gap: 2rem; }

    .title-row h1 { font-size: 1.4rem; }

    .typing-wrapper { font-size: 0.9rem; }

    #about-me { font-size: 0.88rem; }

    .btn { padding: 0.65rem 1.25rem; font-size: 0.84rem; }

    .stat-badges { gap: 0.4rem; }

    .badge { font-size: 0.72rem; padding: 0.25rem 0.6rem; }

    .section-title { font-size: 1.2rem; }

    .what-i-do-container { padding: 1.25rem; }

    .timeline { padding-left: 1.25rem; }

    .timeline-content { padding: 1rem 1.1rem; }

    .timeline-header { flex-direction: column; gap: 0.2rem; }

    .projects-grid { grid-template-columns: 1fr; }

    .project-card { padding: 1.25rem; }

    .skills-grid { grid-template-columns: 1fr; }

    .education-item { padding: 1rem 1.1rem; }

    .contact-container { padding: 1.75rem 1.25rem; }

    .contact-links { flex-direction: column; align-items: center; width: 100%; }

    .contact-links .btn { width: 100%; max-width: 260px; text-align: center; }

    .details { flex-direction: column; width: 100%; }

    .resume-link { border-left: none; padding-left: 0; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 0.5rem; margin-top: 0; }
}