/* ══════════════════════════════════════════════
   PORTFOLIO SECTION
══════════════════════════════════════════════ */
.portfolio {
  background: var(--color-black);
}

.portfolio__header {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-pad-y) var(--section-pad-x) 0;
}

/* ── Grid ────────────────────────────────────── */
.portfolio__grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--section-pad-x);
  display: grid;
  gap: var(--grid-gap);
  /* Mobile: 2 equal columns, natural row heights */
  grid-template-columns: repeat(2, 1fr);
}

/* ── Grid item base ──────────────────────────── */
.portfolio__item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-black-soft);
  display: block;
}

.portfolio__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-luxury);
}

.portfolio__item:hover img {
  transform: scale(1.06);
}

/* ── Caption ─────────────────────────────────── */
.portfolio__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(transparent, rgba(10,10,10,0.88));
  color: var(--color-beige-dim);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-luxury);
}

.portfolio__item:hover .portfolio__caption {
  transform: translateY(0);
}

/* ── Item type modifiers ─────────────────────── */

/* Portrait: tall 2:3 */
.portfolio__item--portrait {
  aspect-ratio: 2 / 3;
}

/* Wide: landscape 3:2, spans 2 cols on mobile */
.portfolio__item--wide {
  grid-column: span 2;
  aspect-ratio: 3 / 2;
}

/* Featured: 1:1 on mobile (spans both cols) */
.portfolio__item--featured {
  grid-column: span 2;
  aspect-ratio: 1 / 1;
}

/* ── Tablet: 3 columns ───────────────────────── */
@media (min-width: 640px) {
  .portfolio__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;
  }

  .portfolio__item--portrait {
    grid-row: span 2;
    aspect-ratio: unset;
  }

  .portfolio__item--wide {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: unset;
  }

  .portfolio__item--featured {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: unset;
  }
}

/* ── Desktop: 4 columns ──────────────────────── */
@media (min-width: 1024px) {
  .portfolio__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 300px;
  }
}


/* ── Video items ─────────────────────────────── */
.portfolio__item--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* YouTube / Vimeo embed wrapper — 16:9 inside the grid cell */
.portfolio__video-embed {
  position: absolute;
  inset: 0;
}

.portfolio__video-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}