/* ============================================================
   devnest-medium.css  |  480px & 640px BREAKPOINTS
   Only contains what changes at each step.
   clamp() in the base already handles fluid scaling —
   these blocks handle structural layout shifts.
   ============================================================ */


/* ============================================================
   480px — medium mobile
   Key changes: hamburger position, slightly more room,
   theme-bar offset, bigger popup.
   ============================================================ */

@media (min-width: 480px) {

    /* header {
        padding: 0.7rem 1.25rem;
    } */

    /* Hamburger switches from fixed (smallest mobile) to
       absolute so it stays inside the header flow */
    .hamburger {
        /* position: absolute; */
        right: 1.25rem;
        top: 0.9rem;
    }

    /* Theme bar offset tracks the slightly taller header */
    /* #theme-bar {
        top: 66px;
    } */

    main {
        max-width: 560px;
    }

    .popup-box {
        max-width: 320px;
    }

    #hero {
        min-height: 70vh;
    }

    #hero-bg {
        height: 100%;
        min-height: 320px;
    }
}


/* ============================================================
   640px — tablet
   Key changes: 2-col skill + project grids, larger images,
   slightly wider container, better popup.
   ============================================================ */

@media (min-width: 640px) {

    header {
        /* padding: 0.75rem 1.5rem; */
    }

    /* #theme-bar {
            top: 68px;
            } */

    main {
        max-width: 900px;
    }

    #hero-bg {
        height: 45vh;
        min-height: 380px;
    }

    /* 2-column skill cards */
    .my-skills-wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 2-column project grid */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 300px;
        gap: 1.5rem;
        /* grid-auto-flow: dense; */
    }

    .projects-grid .project-card:nth-child(5n+1){
        grid-column: span 2;
        grid-row: span 2;
        /* height: auto; */
    }

    .projects-grid .project-card:nth-child(5n+1){
        display: grid;
        /* flex-direction: column; */
        grid-template-rows: 1fr auto;
        height: 100%;
    }

    .projects-grid .project-card:nth-child(5n+1) img{
       /* flex: 1; */
       width: 100%;
       height: 100%;
       display: block;
       min-height: 0;
       object-fit: fill;
       /* height: calc(440px + 1rem); */
    }

    /* Hero & about images get a bigger clamp range at tablet
       (base clamp caps at 220px which is too small for 640px+) */
    .hero-img img {
        width: clamp(200px, 32vw, 300px);
        height: clamp(200px, 32vw, 300px);
    }

    .about-img img {
        width: clamp(150px, 28vw, 200px);
        height: clamp(150px, 28vw, 200px);
    }

    .filter-buttons {
        gap: 0.8rem;
        max-width: 700px;
        justify-content: start;
        align-items: stretch;
        margin-left: 0;
    }

    .filter-button:first-child{
        align-self: auto;
        
    }

    .filter-rest .filter-button{
        flex: 1 1 calc(33% - 0.4rem);
    }

    footer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto;
        padding: 2.5rem clamp(2rem, 5vw, 4rem);
        gap: 2rem;
    }

    .footer-title {
        grid-column: 1/-1;
        grid-row: 1;
        text-align: center;
    }

    .footer-left {
        grid-column: 1;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        /* flex-wrap: wrap; */
        align-items: center;
        gap: 0.5rem;
    }

    .footer-left a {
        font-size: 0.85rem;
        transition: color var(--ease);
    }

    .footer-left ul {
        justify-content: flex-start;
    }

    .social-links {
        justify-content: center;
        grid-row: 2;
        grid-column: 2;
    }

    .social-links img {
        width: 36px;
        height: 36px;
    }

    footer::before {
        content: 'CLOPER';
        /* font-size: 200px; */
    }

    .footer-right {
        grid-column: 3;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        text-align: center;
    }


    .popup-box {
        max-width: 380px;
    }

    .projects-grid .project-card.hidden{
        display: none;
    }
}