/* ============================================================
   NEXTMERE PORTFOLIO — RESPONSIVE STYLES
   Breakpoints:  Tablet ≤1024px  ·  Mobile ≤768px  ·  Small ≤480px
   Fluid type is handled by clamp() in styles.css, so this file
   carries layout/structure changes only.
   ============================================================ */

/* ========================================================
   TABLET  (≤1024px)
   ======================================================== */
@media screen and (max-width:1024px){
    .container{padding:0 1rem;}

    /* Platforms: 4 → 2 columns */
    .platforms-grid{
        grid-template-columns:repeat(2,1fr);
        gap:1.5rem;
    }

    /* Portfolio breathing room */
    .portfolio-list{gap:1.75rem;}
    .portfolio-link-item{padding:2.25rem;}

    /* Hero split: tighten the content padding */
    .hero-content{padding:3rem 2.5rem;}
}

/* Shrink nav links (769–1024px) so the full horizontal menu —
   including the longer "Our Education Site" link — stays on one row. */
@media screen and (min-width:769px) and (max-width:1024px){
    .nav-link{font-size:.92rem;}
}

/* ========================================================
   MOBILE  (≤768px)
   ======================================================== */
@media screen and (max-width:768px){
    /* --- Navbar resets to a simple 3-column bar --- */
    .navbar{
        grid-template-columns:auto 1fr auto;
        padding:0 1rem 0 0;
    }
    .logo{grid-column:1;}
    .logo a{padding:.9rem 0 .9rem 1rem;}

    .hamburger{
        display:flex;
        grid-column:3;
        z-index:1001;
    }
    .hamburger.active span:nth-child(1){transform:rotate(45deg) translate(7px,7px);}
    .hamburger.active span:nth-child(2){opacity:0;}
    .hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px);}

    /* Slide-in mobile menu panel */
    .nav-menu{
        grid-column:2;
        position:fixed;
        left:-100%;
        top:0;
        flex-direction:column;
        justify-content:flex-start;
        align-items:flex-start;
        background-color:var(--bg);
        border-right:1px solid var(--line);
        width:80%;
        height:100vh;
        padding:4.5rem 2rem 2rem;
        gap:.25rem;
        transition:left .3s ease;
        box-shadow:var(--shadow-3);
    }
    .nav-menu.active{left:0;}

    .nav-link{
        width:100%;
        text-align:left;
        font-size:1.15rem;
        padding:.85rem 0;
        border-bottom:1px solid var(--line);
    }
    .nav-link::after{display:none;}   /* underline indicator off in the stacked menu */

    .nav-cta{display:none;}           /* CTA hidden on mobile */

    /* --- Hero: stack video over content --- */
    .hero-container{
        grid-template-columns:1fr;
        grid-template-rows:45vh auto;
    }
    .hero-video-wrapper{height:45vh;}
    .hero-content{
        padding:2.5rem 1.5rem 3rem;
        min-height:auto;
    }
    .hero-buttons{
        flex-direction:column;
        gap:1rem;
        width:100%;
        align-items:center;
    }
    .cta-button{
        width:100%;
        max-width:300px;
        justify-content:center;
    }

    /* --- Section padding --- */
    .services,.platforms,.portfolio,.education-callout,.contact{
        padding:4rem 0;
    }

    /* --- Services: single column --- */
    .services-grid{
        grid-template-columns:1fr;
        gap:1.5rem;
    }
    .service-card{min-height:auto;padding:2.25rem 1.75rem;}

    /* --- Platforms: single column, centred --- */
    .platforms-grid{
        grid-template-columns:1fr;
        gap:1.5rem;
        max-width:360px;
        margin:2.5rem auto 0;
    }
    .platform-card h3{font-size:1.1rem;}

    /* --- Portfolio --- */
    .portfolio-link-item{padding:2rem 1.5rem;}
    .portfolio-link-item h3{font-size:1.5rem;}

    /* --- Education --- */
    .education-card{padding:2.5rem 1.4rem;}
    .education-btn{font-size:1rem;padding:.85rem 1.8rem;}

    /* --- Contact form --- */
    .contact-form-wrapper{
        padding:2rem;
        max-width:100%;
        margin:0 .5rem;
    }
    .form-row{grid-template-columns:1fr;gap:1.5rem;}
    .checkbox-group{grid-template-columns:repeat(2,1fr);gap:.75rem;}
    /* 16px input text prevents iOS auto-zoom on focus */
    .form-group input,
    .form-group select,
    .form-group textarea{font-size:16px;}
    .submit-button{width:100%;text-align:center;align-self:stretch;}

    /* --- Back-to-top --- */
    .back-to-top-fixed{
        bottom:20px;right:20px;
        width:44px;height:44px;
    }
    .back-to-top-fixed svg{width:20px;height:20px;}

    /* --- Footer --- */
    .footer{padding:1.5rem 0;}

    /* --- Privacy pages --- */
    .privacy-page{padding:7rem 0 3rem;}
    .privacy-content{padding:2rem 1.5rem;}
}

/* ========================================================
   SMALL PHONES  (≤480px)
   ======================================================== */
@media screen and (max-width:480px){
    .cta-button{padding:.8rem 1.6rem;font-size:1rem;}
    .nav-link{font-size:1.1rem;}
    .service-card{padding:2rem 1.4rem;}
    .portfolio-link-item h3{font-size:1.35rem;}
    .education-card{padding:2.25rem 1.2rem;}
}

/* ========================================================
   LANDSCAPE PHONES (short viewport)
   ======================================================== */
@media screen and (max-height:600px) and (orientation:landscape){
    .hero{min-height:auto;}
    /* Stack in landscape too — this query also matches phones wider than 768px
       (e.g. 844×390), where the desktop 2-col split would clip the hero. */
    .hero-container{
        grid-template-columns:1fr;
        grid-template-rows:50vh auto;
        min-height:auto;
    }
    .hero-video-wrapper{height:50vh;}
    .hero-content{min-height:auto;}
}