/* ========================= */
/* assets/style.css */
/* ========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:Arial, Helvetica, sans-serif;
  background:#fff7f8;
  color:#333;
  overflow-x:hidden;
}

/* HERO */

.hero{
  height:70vh;
  background:url('https://images.unsplash.com/photo-1516627145497-ae6968895b74?q=80&w=1600&auto=format&fit=crop');
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.45);
}

.hero-content{
  position:relative;
  z-index:2;
  color:white;
  padding:20px;
}

.hero-content h1{
  font-size:4rem;
  margin-bottom:15px;
}

.hero-content p{
  font-size:1.2rem;
  max-width:700px;
  line-height:1.7;
}

/* ALBUMS */

.albums-section{
  padding:70px 40px;
}

.section-title{
  text-align:center;
  font-size:2.5rem;
  margin-bottom:50px;
}

.albums-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
}

.album-card{
  background:white;
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  transition:0.4s ease;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.album-card:hover{
  transform:translateY(-10px);
}

.album-card img{
  width:100%;
  height:260px;
  object-fit:cover;
}

.album-content{
  padding:20px;
}

.album-content h3{
  margin-bottom:10px;
  font-size:1.5rem;
}

.album-content p{
  line-height:1.6;
  color:#666;
}

/* MODAL */

.gallery-modal{
  position:fixed;
  inset:0;
  background:black;
  z-index:999;
  display:none;
  justify-content:center;
  align-items:center;
}

.close-btn{
  position:absolute;
  top:20px;
  right:30px;
  color:white;
  font-size:50px;
  cursor:pointer;
  z-index:9999;
}

.swiper{
  width:100%;
  height:100vh;
}

.swiper-slide{
  display:flex;
  justify-content:center;
  align-items:center;
  background:black;
}

.swiper-slide img,
.swiper-slide video{
  max-width:90%;
  max-height:90vh;
  border-radius:12px;
}

.swiper-button-next,
.swiper-button-prev{
  color:white !important;
}

.swiper-pagination-bullet{
  background:white !important;
}

/* MOBILE */

@media(max-width:768px){

  .hero-content h1{
    font-size:2.5rem;
  }

  .hero{
    height:60vh;
  }

  .albums-section{
    padding:50px 20px;
  }

}