/* ==========================================================================
   MAKAW — Portfolio Page Styles
   ========================================================================== */

/* ---- Filter Bar ---- */
.filter-bar {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-10);
}

.filter-btn {
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-600);
  background: transparent;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out-expo);
}

.filter-btn:hover {
  border-color: var(--makaw-scarlet);
  color: var(--makaw-scarlet);
}

.filter-btn.active {
  background: var(--gradient-cta);
  color: var(--makaw-white);
  border-color: transparent;
}

/* ---- Portfolio Grid ---- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.portfolio-grid .portfolio-item {
  aspect-ratio: 4 / 3;
}

.portfolio-item.hidden {
  display: none;
}

/* ---- Case Study ---- */
.case-study {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-2xl);
  padding: var(--space-12);
}

.case-study__content h2 {
  color: var(--makaw-white);
  margin-bottom: var(--space-4);
}

.case-study__content p {
  color: var(--neutral-300);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-8);
  max-width: 700px;
}

.case-study__metrics {
  display: flex;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.case-study__metric .stat__number::after {
  content: '%';
}

.case-study__metric:last-child .stat__number::after {
  content: 'x';
}

/* ---- Marquee (Client logos) ---- */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.marquee__track {
  display: flex;
  gap: var(--space-10);
  animation: marqueeScroll 30s linear infinite;
  width: max-content;
}

.marquee__item {
  flex-shrink: 0;
}

.client-logo-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--neutral-300);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  opacity: 0.5;
  transition: opacity var(--duration-normal);
}

.client-logo-text:hover {
  opacity: 1;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}