/* =====================================================
   ROOT DESIGN TOKENS
===================================================== */

:root{
  --bs-primary:#1241a1;
  --bs-primary-rgb:18,65,161;
  --bs-link-color:#1241a1;
  --bs-link-hover-color:#0f3488;

  --color-primary:#1241a1;
  --color-accent:#b89764;
  --bg-light:#f6f6f8;
  --bg-dark:#111621;
}


/* =====================================================
   GLOBAL
===================================================== */

body{
  font-family:"Inter",sans-serif;
  background:var(--bg-light);
}


/* =====================================================
   FILTER BAR
===================================================== */

.filter-bar{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  background:white;
  padding:14px;
  border-radius:50px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

.filter-bar .btn{
  border-radius:40px;
  padding:8px 22px;
  font-weight:500;
  transition:.25s;
}

.filter-bar .btn-outline-secondary{
  border:1px solid #ddd;
}

.filter-bar .btn-outline-secondary:hover{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:white;
}

.filter-bar .btn-primary{
  background:var(--color-primary);
  border-color:var(--color-primary);
}

.filter-bar .btn-primary:hover{
  background:#0f3488;
}


/* =====================================================
   MASONRY GRID
===================================================== */

.masonry-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  grid-auto-rows:260px;
  gap:1.5rem;
}

.masonry-item:nth-child(2n){
  grid-row:span 2;
}

.masonry-item{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,0.06);
}

.masonry-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.45s;
}

.masonry-item:hover img{
  transform:scale(1.08);
}


/* =====================================================
   IMAGE OVERLAY
===================================================== */

.overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:20px;
  background:linear-gradient(
    to top,
    rgba(0,0,0,0.75),
    rgba(0,0,0,0.25),
    transparent
  );
  color:white;
  opacity:0;
  transition:.35s;
}

.overlay span{
  color:var(--color-accent);
  letter-spacing:.08em;
}

.overlay h5{
  margin-top:4px;
  font-weight:600;
}

.masonry-item:hover .overlay{
  opacity:1;
}


/* =====================================================
   HIGHLIGHT CARDS
===================================================== */

.highlight-card{
  background:white;
  border-radius:16px;
  padding:35px;
  border:1px solid #eee;
  text-align:center;
  transition:.25s;
}

.highlight-card .material-symbols-outlined{
  font-size:36px;
  color:var(--color-primary);
}

.highlight-card:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 30px rgba(0,0,0,0.08);
}




/* =====================================================
   RESPONSIVE DESIGN
===================================================== */

/* tablets */

@media (max-width:992px){

  .masonry-grid{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:220px;
  }

}


/* mobile */

@media (max-width:768px){

  .masonry-grid{
    grid-template-columns:1fr;
    grid-auto-rows:260px;
  }

  .masonry-item:nth-child(2n){
    grid-row:span 1;
  }

  .overlay{
    opacity:1;
  }

}


/* small phones */

@media (max-width:480px){

  .filter-bar{
    border-radius:20px;
    padding:12px;
  }

  .filter-bar .btn{
    font-size:14px;
    padding:6px 14px;
  }

}