/* =============================================================
   IDATA Elementor Widgets – PORTFOLIO
   Phụ thuộc: idata-core
============================================================= */

/* =========================================================
   4. PORTFOLIO
========================================================= */
.idata-portfolio__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--idata-space-2);
  margin-bottom: var(--idata-space-6);
}
.idata-portfolio__filter {
  padding: 9px 18px;
  border: 1px solid var(--idata-border);
  border-radius: var(--idata-radius-pill);
  background: var(--idata-surface);
  font-size: var(--idata-fs-sm);
  font-weight: var(--idata-font-weight-semibold);
  color: var(--idata-muted);
  transition: color var(--idata-transition-fast), border-color var(--idata-transition-fast),
              background-color var(--idata-transition-fast);
}
.idata-portfolio__filter:hover { color: var(--idata-primary); border-color: var(--idata-primary); }
.idata-portfolio__filter.is-active {
  background: var(--idata-heading);
  border-color: var(--idata-heading);
  color: #fff;
}

.idata-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--idata-space-5);
}

.idata-project {
  display: flex;
  flex-direction: column;
  background: var(--idata-surface);
  border: 1px solid var(--idata-border);
  border-radius: var(--idata-radius-lg);
  overflow: hidden;
  transition: transform var(--idata-transition), box-shadow var(--idata-transition);
}
.idata-project:hover { transform: translateY(-5px); box-shadow: var(--idata-shadow-lg); }
.idata-project.is-hidden { display: none; }
.idata-project .idata-media img { transition: transform var(--idata-transition-slow); }
.idata-project:hover .idata-media img { transform: scale(1.04); }

.idata-project__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--idata-space-5);
}
.idata-project__field {
  font-size: var(--idata-fs-xs);
  font-weight: var(--idata-font-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--idata-accent-dark);
  margin-bottom: 8px;
}
.idata-project__title {
  font-size: var(--idata-fs-h4);
  font-weight: var(--idata-font-weight-bold);
  color: var(--idata-heading);
  margin-bottom: 8px;
}
.idata-project__desc {
  flex-grow: 1;
  font-size: var(--idata-fs-sm);
  color: var(--idata-muted);
  margin-bottom: var(--idata-space-4);
}
.idata-project__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--idata-space-4); }
.idata-project__tags li {
  padding: 5px 11px;
  background: var(--idata-primary-light);
  color: var(--idata-primary-dark);
  border-radius: var(--idata-radius-xs);
  font-size: 0.74rem;
  font-weight: var(--idata-font-weight-semibold);
}
.idata-project__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--idata-fs-sm);
  font-weight: var(--idata-font-weight-semibold);
  color: var(--idata-primary);
}
.idata-project__link svg { transition: transform var(--idata-transition-fast); }
.idata-project__link:hover svg { transform: translateX(4px); }

.idata-portfolio__empty {
  text-align: center;
  padding: var(--idata-space-7);
  color: var(--idata-muted);
  font-size: var(--idata-fs-sm);
}
.idata-portfolio__more { text-align: center; margin-top: var(--idata-space-7); }


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

@media (max-width: 1024px) {
  .idata-portfolio__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .idata-portfolio__grid { grid-template-columns: 1fr; }
}

/* ============ MODIFIER ============ */
.idata-portfolio-zoom-yes .idata-project .idata-media img { transition: transform var(--idata-transition-slow); }
.idata-portfolio-zoom-yes .idata-project:hover .idata-media img { transform: scale(1.04); }