/* responsive.css */

/* Large TV / 4K */
@media (min-width:1921px){
  body{font-size:20px;}
  .nav,.container,.hero-content{max-width:1600px;}
  .hero-content img{max-width:700px;}
  .gallery{grid-template-columns:repeat(4,1fr);max-width:1800px;}
}

/* Desktop */
@media (max-width:1440px){
  .nav,.container{max-width:1200px;}
}

/* Laptop */
@media (max-width:1200px){
  .hero-content{padding:60px 32px;}
  .gallery{grid-template-columns:repeat(2,minmax(300px,1fr));}
}

/* Tablet */
@media (max-width:992px){
  .nav{
    flex-direction:column;
    gap:18px;
    text-align:center;
  }
  .hero{
    min-height:90vh;
  }
  h1{line-height:1.1;}
  .gallery{
    grid-template-columns:1fr;
  }
  .video-card{
    max-width:760px;
    margin:auto;
  }
}

/* Large phones */
@media (max-width:768px){
  .hero-content{
    padding:40px 22px;
  }
  .hero-content img{
    width:100%;
    max-width:380px;
  }
  h1{
    font-size:3rem;
  }
  h2{
    font-size:2rem;
  }
  p{
    font-size:1.8rem;
  }
  .btn{
    width:100%;
    max-width:320px;
    text-align:center;
  }
  .section{
    padding:70px 18px;
  }
}

/* Small phones */
@media (max-width:480px){
  .nav{
    padding:18px 16px;
  }
  .nav ul{
    flex-direction:column;
    gap:.8rem;
  }
  .logo{
    font-size:1.6rem;
  }
  .hero-content img{
    max-width:300px;
  }
  h1{
    font-size:2.4rem;
  }
  h2{
    font-size:1.8rem;
  }
  .container p{
    text-align:left;
  }
  footer{
    font-size:.9rem;
  }
}

/* Ultra small */
@media (max-width:360px){
  h1{font-size:2rem;}
  .btn{
    padding:12px 20px;
    font-size:.95rem;
  }
}