/* ==========================================================================
   CFX NETWORK — PORTFOLIO, FILTERING & CASE STUDIES (portfolio.css)
   ========================================================================== */

/* ── 1. Filter Bar (PR Work Filters & Film Category Filters) ────────────── */
.cfx-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.cfx-filter-btn {
  padding: 12px 22px;
  font-family: var(--cfx-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background-color: var(--cfx-surface);
  color: var(--cfx-ink-secondary);
  border: 1px solid var(--cfx-rule-strong);
  cursor: pointer;
  transition: all var(--cfx-transition-fast);
}

.cfx-filter-btn:hover {
  border-color: var(--cfx-ink);
  color: var(--cfx-ink);
}

.cfx-filter-btn.is-active,
.cfx-filter-btn[aria-pressed="true"] {
  background-color: var(--cfx-ink);
  border-color: var(--cfx-ink);
  color: var(--cfx-paper);
}

/* ── 2. Portfolio Card (PR Campaign Card & Film Card) ───────────────────── */
.cfx-portfolio-card {
  background-color: var(--cfx-surface);
  border: 1px solid var(--cfx-rule-strong);
  display: flex;
  flex-direction: column;
  transition: transform var(--cfx-transition-fast), border-color var(--cfx-transition-fast), opacity var(--cfx-transition-fast);
}

.cfx-portfolio-card:hover {
  border-color: var(--cfx-ink);
  transform: translateY(-3px);
}

.cfx-portfolio-card.is-filtered-out {
  display: none !important;
}

.cfx-portfolio-card.is-hidden-loadmore {
  display: none !important;
}

.cfx-portfolio-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.cfx-portfolio-card-cat {
  font-family: var(--cfx-font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cfx-accent);
  margin-bottom: 10px;
}

.cfx-portfolio-card-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.25;
}

.cfx-portfolio-card-desc {
  font-size: 0.9375rem;
  color: var(--cfx-ink-secondary);
  margin-bottom: 20px;
  flex-grow: 1;
}

/* ── 3. Load More Pagination ────────────────────────────────────────────── */
.cfx-portfolio-pagination {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cfx-load-more-btn {
  padding: 14px 28px;
  font-size: 0.875rem;
  font-weight: 600;
  background-color: var(--cfx-surface);
  border: 1px solid var(--cfx-rule-strong);
  color: var(--cfx-ink);
  cursor: pointer;
  transition: all var(--cfx-transition-fast);
}

.cfx-load-more-btn:hover {
  background-color: var(--cfx-ink);
  border-color: var(--cfx-ink);
  color: var(--cfx-paper);
}

.cfx-load-more-btn[hidden] {
  display: none;
}