/* Homepage portfolio: intentionally spacious, image-first, and editorial. */
.portfolio-intro {
  display: grid;
  gap: 1rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.25rem, 4vw, 4rem) clamp(3rem, 6vw, 5.5rem);
}

.portfolio-eyebrow,
.portfolio-category {
  font-family: var(--font-display), sans-serif;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.2;
  text-transform: uppercase;
}

.portfolio-intro h1 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(3rem, 6.5vw, 6.75rem);
}

.portfolio-description {
  max-width: 38rem;
  margin: .5rem 0 0;
  color: var(--muted, #6e7379);
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.55;
}

.portfolio-sort {
  display: flex;
  gap: .5rem;
  margin-top: 1.25rem;
}

.portfolio-sort-button {
  min-height: 2.5rem;
  padding: 0 .85rem;
  border: 1px solid var(--border-color, rgba(23, 24, 27, .18));
  border-radius: .35rem;
  color: var(--text-base, #292929);
  font-family: var(--font-display), sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}

.portfolio-sort-button:hover,
.portfolio-sort-button:focus-visible,
.portfolio-sort-button.is-active {
  background: var(--text-base, #292929);
  color: #fff;
}

.portfolio-feed { padding: 0 clamp(.75rem, 2vw, 2rem) clamp(4rem, 8vw, 8rem); }

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(.75rem, 1.4vw, 1.5rem);
  max-width: 100rem;
  margin: 0 auto;
}

.portfolio-item {
  position: relative;
  min-height: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #1d1f23;
}

.portfolio-item:nth-child(5n + 1) { aspect-ratio: 3 / 2; }
.portfolio-item:nth-child(5n + 3) { aspect-ratio: 16 / 10; }

.portfolio-figure,
.portfolio-image-link,
.portfolio-image { display: block; width: 100%; height: 100%; }
.portfolio-figure { position: absolute; inset: 0; margin: 0; }

.portfolio-image {
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .4s ease;
}

.portfolio-item:hover .portfolio-image,
.portfolio-item:focus-within .portfolio-image { transform: scale(1.035); }

.portfolio-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: clamp(1rem, 1.8vw, 1.75rem);
  color: #fff;
  background: linear-gradient(transparent 15%, rgba(0, 0, 0, .68));
  transform: translateY(.35rem);
  transition: transform .25s ease;
}

.portfolio-item:hover .portfolio-caption,
.portfolio-item:focus-within .portfolio-caption { transform: translateY(0); }
.portfolio-caption h2 { margin: .35rem 0 0; color: inherit; font-size: clamp(1.25rem, 1.7vw, 1.8rem); }
.portfolio-caption a { color: inherit; }
.portfolio-meta { margin: .5rem 0 0; font-size: .75rem; letter-spacing: .12em; opacity: .78; text-transform: uppercase; }

.portfolio-item--text { background: var(--panel-strong, #e7e0d5); min-height: 18rem; }
.portfolio-item--text .portfolio-caption { top: 0; background: none; color: var(--foreground, #17181b); }

.portfolio-pagination { display: flex; align-items: center; justify-content: center; gap: 1.25rem; padding: 2rem 1rem 5rem; }
.portfolio-pagination[hidden] { display: none; }
.portfolio-pagination a { color: var(--foreground, #17181b); text-decoration: underline; text-underline-offset: .25em; }

@media (min-width: 640px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .portfolio-item:nth-child(5n + 1) { aspect-ratio: 16 / 7; }
  .portfolio-item:nth-child(5n + 2) { aspect-ratio: 3 / 4; }
  .portfolio-item:nth-child(5n + 3) { aspect-ratio: 4 / 3; }
  .portfolio-item:nth-child(5n + 4) { aspect-ratio: 3 / 4; }
  .portfolio-item:nth-child(5n + 5) { aspect-ratio: 5 / 4; }
}

/* Time view trades masonry packing for a stable, left-to-right chronology. */
.portfolio-feed[data-sort="time"] .portfolio-grid {
  display: grid;
  columns: auto;
  grid-template-columns: 1fr;
  column-gap: 0;
}

.portfolio-feed[data-sort="time"] .portfolio-item,
.portfolio-feed[data-sort="time"] .portfolio-item:nth-child(n) {
  display: block;
  width: auto;
  margin: 0;
  aspect-ratio: 4 / 3;
  column-span: none;
}

@media (min-width: 640px) {
  .portfolio-feed[data-sort="time"] .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .portfolio-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .portfolio-feed[data-sort="time"] .portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1500px) {
  .portfolio-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .portfolio-feed[data-sort="time"] .portfolio-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Default view: positioned on a dense 30–48 unit span grid in portfolio.js. */
.portfolio-grid.is-masonry {
  display: block;
  columns: auto;
  position: relative;
}

.portfolio-grid.is-masonry .portfolio-item {
  position: absolute;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-image, .portfolio-caption { transition: none; }
}