/* ============================================================
   portfolio.css — Portfolio / work grid styles
   ============================================================ */

#portfolio {
  background: var(--ivory);
  padding: 120px var(--gap) 120px;
}

/* Header row above the grid */
.portfolio-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 64px;
  gap: 24px;
  flex-wrap: wrap;
}

.portfolio-desc {
  color: var(--ash);
  font-size: 15px;
  max-width: 280px;
  font-weight: 300;
  line-height: 1.7;
}

/* ── GRID ──────────────────────────────────────────────────
   Default: 3 columns on desktop.
   On mobile this becomes 1 column (see responsive.css).
   Add more cards and they auto-fill the next row.
────────────────────────────────────────────────────────── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

/* ── EACH CARD ─────────────────────────────────────────── */
.portfolio-item {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--graphite);
  cursor: none;
}

/* Thumbnail image — shown when you replace the placeholder */
.portfolio-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, opacity 0.3s ease;
  opacity: 0.7;
}
.portfolio-item:hover .portfolio-thumb {
  transform: scale(1.04);
  opacity: 0.5;
}

/* Placeholder shown before you add a real thumbnail */
.portfolio-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--graphite-mid);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ash);
}

/* Category + title always visible at the bottom */
.portfolio-info-always {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 28px;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.7) 0%, transparent 100%);
}

/* Hover overlay with play button */
.portfolio-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.85) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-cat {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 4px;
}

.portfolio-title {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ivory);
  letter-spacing: -0.3px;
}

/* Play button circle */
.play-btn {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background var(--duration), border-color var(--duration);
}
.portfolio-item:hover .play-btn {
  background: var(--amber);
  border-color: var(--amber);
}