/* ============================================================
   PORTFOLIO.CSS — Hub + Category pages
   ============================================================ */

/* ===== HUB GRID ===== */
.portfolio-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .portfolio-hub-grid { grid-template-columns: repeat(4, 1fr); }
}

.portfolio-hub-card {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 2px;
  text-decoration: none;
}

.portfolio-hub-card:nth-child(1) { background: #4a1a2a; }
.portfolio-hub-card:nth-child(2) { background: #7a3d5e; }
.portfolio-hub-card:nth-child(3) { background: #7a6230; }
.portfolio-hub-card:nth-child(4) { background: #3a1020; }
.portfolio-hub-card:nth-child(5) { background: #3d4a38; }
.portfolio-hub-card:nth-child(6) { background: #1a1818; }
.portfolio-hub-card:nth-child(7) { background: #5e2a48; }
.portfolio-hub-card:nth-child(8) { background: #30201a; }
.portfolio-hub-card:nth-child(9) { background: #2a3a4a; }
.portfolio-hub-card:nth-child(10) { background: #3a2a1a; }

.portfolio-hub-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.25,0.1,0.25,1);
}

.portfolio-hub-card:hover img { transform: scale(1.06); }

.portfolio-hub-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,8,14,0.75) 0%, transparent 55%);
  transition: background 0.5s;
}

.portfolio-hub-card:hover .portfolio-hub-card__overlay {
  background: linear-gradient(to top, rgba(20,8,14,0.85) 0%, rgba(20,8,14,0.15) 55%);
}

.portfolio-hub-card__label {
  position: absolute;
  bottom: 1rem; left: 1rem;
  z-index: 1;
}

.portfolio-hub-card__label h3 {
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-style: italic;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

.portfolio-hub-card__label span {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transform: translateY(5px);
  display: block;
  transition: opacity 0.4s, transform 0.4s;
}

.portfolio-hub-card:hover .portfolio-hub-card__label span { opacity: 1; transform: none; }

/* ===== CATEGORY GALLERY ===== */
.portfolio-gallery-section {
  background: var(--bg);
}

.portfolio-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .portfolio-gallery { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
}

.portfolio-photo {
  aspect-ratio: 1;
  background: var(--surface);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

/* Slightly vary some items for visual rhythm */
.portfolio-photo:nth-child(3n+1) { aspect-ratio: 3 / 4; }
.portfolio-photo:nth-child(5n+2) { aspect-ratio: 4 / 3; }

/* Placeholder tones */
.portfolio-photo:nth-child(odd)  { background: #4a2535; }
.portfolio-photo:nth-child(even) { background: #3a1f2a; }
.portfolio-photo:nth-child(3n)   { background: #5a3040; }

.portfolio-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25,0.1,0.25,1);
}

.portfolio-photo:hover img { transform: scale(1.04); }

/* ===== PORTFOLIO CTA ===== */
.portfolio-cta {
  background: #9B5570;
  text-align: center;
}

.portfolio-cta .section-tag { color: var(--gold); }
.portfolio-cta h2 { font-style: italic; color: var(--bg); }
.portfolio-cta p  { color: rgba(248,243,238,0.65); margin-inline: auto; margin-bottom: 2rem; }
.portfolio-cta .divider { background: rgba(201,165,109,0.4); margin-inline: auto; }
.portfolio-cta .divider.animate { background: var(--gold); }

.portfolio-cta__actions {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
}