/* =====================================================
   DGF TRIVELMORRA — progetti.css
   Filter Tabs · Project Grid · Cards · Images
   ===================================================== */

.filter-tabs-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; margin-bottom: 48px;
}
.filter-tabs-wrap::-webkit-scrollbar { display: none; }
.filter-tabs { display: flex; gap: 10px; flex-wrap: nowrap; min-width: max-content; }
.filter-tab {
  padding: 8px 20px; font-size: 11px; font-weight: 700; letter-spacing: 2px;
  border: 1px solid var(--border); background: transparent;
  color: rgba(240,237,232,.5); cursor: pointer; border-radius: 3px; transition: all .2s;
  white-space: nowrap;
}
.filter-tab.active { background: var(--orange); border-color: var(--orange); color: #0A0A0A; }
.filter-tab:not(.active):hover { border-color: var(--orange); color: var(--orange); }

/* Projects grid */
.projects-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.project-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.project-card:hover {
  border-color: var(--orange); box-shadow: 0 20px 60px rgba(0,0,0,.5); transform: translateY(-4px);
}
.card-front { display: flex; flex-direction: column; height: 100%; }

/* Photo */
.project-img { height: 200px; overflow: hidden; position: relative; background: var(--surface); }
.project-card-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.project-card:hover .project-card-img { transform: scale(1.06); }
.project-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(10,10,10,.7) 100%);
  pointer-events: none;
}

/* Info */
.project-info { padding: 20px 24px 24px; }
.project-tag {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 2px;
  color: var(--orange); background: rgba(232,119,34,.12); border: 1px solid rgba(232,119,34,.25);
  padding: 3px 10px; border-radius: 2px; margin-bottom: 10px; text-transform: uppercase;
}
.project-info h4 { font-size: 16px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 8px; line-height: 1.3; }
.project-info p { font-size: 12px; line-height: 1.65; color: var(--text-dim); }