.page{
}

html, body{
  overflow-x: hidden;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/*FILTER BAR*/

.filter-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:15px;
  position:sticky;
  top:80px;
  z-index:10;
  padding:20px clamp(16px, 4vw, 20px);
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:16px;
}

/*LEFT*/

.filter-left{
  flex:1;
  display:flex;
}

/*RIGHT*/

.filter-right{
  /*flex:1;*/
  display:flex;
  justify-content:flex-end;
  gap:12px;
}

/*INPUT*/

.filter-bar input,
.filter-bar select{
  width:100%;
  padding:12px 12px;
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
  font-size:15px;
  outline:none;
}

/* only select needs this */
.filter-bar select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}

/*GRID*/

.grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:22px;
  margin-top:20px;
}

/*CARD*/

.card{
  overflow:hidden;
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,0.06);
  text-decoration:none;
  color:#000;
  transition:0.25s ease;
}

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

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

.card-content{
  padding:14px;
}

.category{
  font-size:12px;
  color:#666;
}

.title{
  margin:6px 0;
  font-size:14px;
  font-weight:500;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.date{
  font-size:12px;
  color:#999;
}

/*EMPTY*/

#empty{
  display:none;
  margin-top:40px;
  text-align:center;
  color:#888;
}

/*RESPONSIVE*/
@media (max-width:1200px){
  .grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
  }
}

@media (max-width:900px){
  .grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
  }
}

@media (max-width:600px){
  .grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .filter-bar{
    flex-direction:column;
    align-items:stretch;
    padding:12px 16px;
  }

  .filter-left{
    width:100%;
    order:1;
  }

  .filter-right{
    width:100%;
    order:2;
    gap:10px;
  }

  .filter-right select{
    flex:1;
  }
}




/* =========================
   CUSTOM DROPDOWN
========================= */

.custom-dropdown{
  position:relative;
  width:220px;
}

/* BUTTON */

.dropdown-btn{
  width:100%;
  min-height:44px;

  padding:10px 12px;

  border:1px solid #ddd;
  border-radius:12px;

  background:#fff;

  font-size:14px;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:space-between;

  transition:0.2s ease;

  -webkit-tap-highlight-color:transparent;
}

.dropdown-btn:hover{
  border-color:#bbb;
}

.dropdown-btn:focus{
  outline:none;
  border-color:#111;
}

/* ARROW */

.dropdown-arrow{
  font-size:12px;
  color:#666;
  transition:0.2s ease;
}

.custom-dropdown.open .dropdown-arrow{
  transform:rotate(180deg);
}

/* MENU */

.dropdown-menu{
  position:absolute;
  left:0;
  top:calc(100% + 8px);

  width:100%;

  background:#fff;

  border:1px solid #eee;
  border-radius:14px;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.08);

  list-style:none;

  padding:6px;

  margin:0;

  max-height:240px;
  overflow-y:auto;

  z-index:999;

  opacity:0;
  visibility:hidden;

  transform:translateY(-6px);

  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
}

.custom-dropdown.open .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* OPEN UPWARD */

.custom-dropdown.upward .dropdown-menu{
  top:auto;
  bottom:calc(100% + 8px);
}

/* ITEMS */

.dropdown-item{
  min-height:42px;

  padding:10px 12px;

  border-radius:10px;

  display:flex;
  align-items:center;

  cursor:pointer;

  font-size:14px;

  transition:0.15s ease;
}

.dropdown-item:hover{
  background:#f3f4f6;
}

.dropdown-item.selected{
  background:#111;
  color:#fff;
  font-weight:500;
}

/* SCROLLBAR */

.dropdown-menu::-webkit-scrollbar{
  width:8px;
}

.dropdown-menu::-webkit-scrollbar-thumb{
  background:#ddd;
  border-radius:20px;
}

/* MOBILE */

@media (max-width:600px){

  .custom-dropdown{
    width:100%;
  }
  
  #empty{
    display:none;
    margin-top:100px;
    padding-left: 20px;
    padding-right: 20px;
    text-align:center;
    color:#888;
  }
}