/* responsive.css */

@media (max-width: 1200px){
  .container{width:min(95%,1100px);}
}

@media (max-width: 992px){
  .hero{padding:140px 0 80px;}
  .hero h1{font-size:54px;}
  nav{gap:18px;}

  .portfolio-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

@media (max-width:768px){
  .header .container{
    flex-direction:column;
    padding:15px 0;
    gap:12px;
  }

  .logo{
    font-size:24px;
  }

  nav{
    width:100%;
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:0;
    align-items:center;
  }

  nav a{
    font-size:11px;
    letter-spacing:0;
    line-height:19px;
    text-align:center;
    white-space:nowrap;
  }

  .header .btn{
    width:min(100%, 300px);
    margin:0 auto;
    max-height:55px;
    overflow:hidden;
    opacity:1;
    transition:padding .25s ease, max-height .25s ease, opacity .25s ease;
  }

  .header.is-compact .container{
    padding:4px 0;
    gap:2px;
  }

  .header.is-compact .logo{
    font-size:21px;
  }

  .header.is-compact nav a{
    font-size:10px;
    line-height:16px;
  }

  .header.is-compact .btn{
    min-height:0;
    max-height:0;
    padding:0;
    opacity:0;
    pointer-events:none;
  }

  #about,
  #services,
  #galerie,
  #contact{
    scroll-margin-top:var(--header-height, 180px);
  }

  .about-grid{
    grid-template-columns:1fr;
    gap:30px;
    min-height:0;
    padding:32px 24px;
  }

  .about-image img{
    width:100%;
    height:auto;
    object-fit:contain;
  }

  .services-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .service-card{
    width:100%;
    height:auto;
  }

  .service-card img{
    width:100%;
    height:auto;
    object-fit:contain;
  }

  .service-card h3{
    min-height:0;
  }

  .hero{
    text-align:center;
    min-height:90vh;
  }

  .hero h1{
    font-size:40px;
    line-height:1.15;
  }

  .hero p{
    font-size:18px;
  }

  .gallery-page .works{
    padding:190px 0 70px;
  }

  .gallery-page .works h1,
  .portfolio-heading h2{
    font-size:40px;
  }

  .portfolio{
    padding:80px 0;
  }

  .portfolio-heading{
    margin-bottom:40px;
  }

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

  section{
    padding:70px 0;
  }
}

@media (max-width:480px){
  .hero h1{font-size:32px;}
  .hero p{font-size:16px;}
  .gallery-page .works{padding:180px 0 70px;}
  .portfolio-grid{grid-template-columns:1fr;}
  .portfolio-lightbox{padding:20px;}
  .portfolio-lightbox-close{top:12px;right:12px;}
  .hero-content > div{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
  .hero-content .btn{
    display:flex;
    width:100%;
    min-height:55px;
    text-align:center;
    align-items:center;
    justify-content:center;
    margin:0;
  }
}
/* =========================
   MOBILE WORKS GALLERY
========================= */

@media(max-width:768px){

    .works{
        padding:70px 0;
    }

    .works h2{
        font-size:32px;
        padding:0 20px;
    }


    .works-grid{
        grid-template-columns:1fr;
        gap:35px;
        justify-content:center;
    }


    .work-card{
        width:300px;
        margin:auto;
    }


    .mini-slider{
        width:300px;
        height:200px;
    }


    .mini-slider img,
    .mini-after img{
        width:300px;
        height:200px;
    }


    .mini-button{
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }


    .work-card h3{
        text-align:center;
        font-size:18px;
    }

}