/* ===== Mural de projetos ===== */
.mural{
  padding: 40px 6vw 140px;
  background:#000;
}

/* Filtros de categoria */
.mural-filters{
  display:flex; flex-wrap:wrap;
  gap: 38px;
  margin-bottom: 56px;
}
.filter-btn{
  position:relative;
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--body); font-size:14px;
  letter-spacing: 0.12em; text-transform:lowercase;
  padding: 0 0 14px;
  cursor:pointer;
}
.filter-btn::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background: var(--blue-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.filter-btn:hover{ color: var(--blue-soft); }
.filter-btn:hover::after{ transform: scaleX(1); }

.filter-btn.is-active{ color: var(--blue-soft); }
.filter-btn.is-active::after{ transform: scaleX(1); background: var(--blue); }

/* Grade do mural */
.mural-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
.mural-card{
  display:block;
  position:relative;
  transition: transform .3s ease, opacity .3s ease;
}
.mural-card.is-hidden{
  display:none;
}
.mural-card-image{
  aspect-ratio: 4 / 3;
  overflow:hidden;
  background:#111;
}
.mural-card-image img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .5s ease;
}
.mural-card:hover .mural-card-image img{ transform: scale(1.05); }
.mural-card:hover{ transform: translateY(-4px); }

.mural-card-info{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-top: 18px;
}
.mural-card-category{
  font-family: var(--body); font-size:12px;
  letter-spacing: var(--wide); text-transform:lowercase;
  color: var(--blue-soft);
  white-space:nowrap;
}
.mural-card-title{
  font-family: var(--display); font-weight:400;
  font-size: 20px; letter-spacing:0.02em;
  color: var(--ink);
}

.mural-empty{
  text-align:center;
  color: var(--ink-faint);
  font-family: var(--display); font-size:18px; letter-spacing:0.03em;
  padding: 60px 0;
}

/* ===== Responsive ===== */
@media (max-width: 600px){
  .mural{ padding: 30px 24px 100px; }
  .mural-filters{ gap:10px; margin-bottom:40px; }
  .filter-btn{ padding:10px 18px; font-size:12px; }
  .mural-grid{ grid-template-columns: 1fr; gap:32px; }
  .mural-card-info{ flex-direction:column; align-items:flex-start; gap:6px; }
}