/* ═══════════════════════════════════════════════════════
   PORTFOLIO PAGE — complete rewrite
   ═══════════════════════════════════════════════════════ */

/* ─── PAGE BACKGROUND ──────────────────────────────────── */
body {
  background: #181818;
}

.port-grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .4;
  pointer-events: none;
  z-index: 0;
}

.page-content {
  position: relative;
  z-index: 1;
}

/* ─── HERO ─────────────────────────────────────────────── */
.port-hero {
  padding: 10rem 3rem 2rem;
}

.port-eyebrow {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1.25rem;
}

.port-title {
  font-family: var(--font-display);
  font-size: clamp(4rem, 13vw, 11rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.85;
  margin: 0;
  color: var(--white);
}

/* ─── FILTER ────────────────────────────────────────────── */
.port-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 2rem 3rem 2.5rem;
}

.port-filter-btn {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.port-filter-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
}
.port-filter-btn.is-active {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.5);
  color: var(--white);
}

/* ─── GRID ──────────────────────────────────────────────── */
/*
  6-column base. Repeating pattern per 7 cards:
  [half][half] → [full] → [third][third][third] → [full]
*/
.port-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 0 3rem 3rem;
}

/* Card size variants */
.port-card--half  { grid-column: span 3; aspect-ratio: 4 / 3;  }
.port-card--full  { grid-column: span 6; aspect-ratio: 16 / 5; }
.port-card--third { grid-column: span 2; aspect-ratio: 1 / 1;  }

/* ─── CARD BASE ─────────────────────────────────────────── */
.port-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: #111;
  text-decoration: none;
  color: inherit;
  /* reveal initial state */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.port-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.port-card.is-hidden {
  display: none;
}

/* ─── CARD MEDIA ────────────────────────────────────────── */
.port-card video,
.port-card img,
.port-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.43, 0.2, 0.02, 1);
}
.port-card:hover video,
.port-card:hover img,
.port-card:hover .port-card-bg {
  transform: scale(1.05);
}

/* Placeholder gradient for cards without media */
.port-card-bg {
  background: radial-gradient(ellipse at 30% 50%, #1c1c2a 0%, #080808 70%);
}

/* Bottom gradient veil — always on */
.port-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.2)  40%,
    transparent      65%
  );
  pointer-events: none;
}

/* Hover darken */
.port-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.port-card:hover::after { opacity: 1; }

/* ─── CARD INFO ─────────────────────────────────────────── */
.port-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 1.5rem 1.75rem;
  pointer-events: none;
}

/* Title first (large), then tag below */
.port-card-title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0 0 0.6rem;
  color: #fff;
}

/* Full-width card gets a bigger title */
.port-card--full .port-card-title {
  font-size: clamp(1.3rem, 2.8vw, 2.4rem);
}

/* Category pill tag */
.port-card-cat {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.75);
}

/* ─── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .port-hero   { padding: 8rem 2rem 1.75rem; }
  .port-filter { padding: 1.5rem 2rem 2rem; }

  .port-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 0 2rem 2rem;
  }
  .port-card--full .port-card-title { font-size: clamp(1.1rem, 2.5vw, 1.8rem); }
}

@media (max-width: 768px) {
  .port-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .port-card--half  { grid-column: span 1; aspect-ratio: 4/3; }
  .port-card--full  { grid-column: span 2; aspect-ratio: 16/6; }
  .port-card--third { grid-column: span 1; aspect-ratio: 4/3; }
}

@media (max-width: 600px) {
  .port-hero   { padding: 7rem 1.5rem 1.5rem; }
  .port-filter { padding: 1.25rem 1.5rem 1.75rem; gap: 0.35rem; }

  .port-grid {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 0 1.5rem 1.5rem;
  }
  .port-card--half,
  .port-card--full,
  .port-card--third {
    grid-column: span 1;
    aspect-ratio: 4/3;
  }
  .port-card-title,
  .port-card--full .port-card-title {
    font-size: clamp(1rem, 5vw, 1.4rem);
  }
}