/* ============ PORTFOLIO GALLERY ============ */

.portfolio-hero {
  padding: 180px 40px 80px;
  border-bottom: 1px solid var(--line);
}
.portfolio-hero h1 {
  font-size: clamp(60px, 12vw, 200px);
  margin-bottom: 32px;
}
.portfolio-hero .lede { max-width: 720px; }

.portfolio-controls {
  padding: 32px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.filter-group { display: flex; gap: 4px; flex-wrap: wrap; }
.filter-btn {
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-dim);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
}
.filter-btn:hover { color: var(--ink); border-color: var(--ink); }
.filter-btn.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.view-toggle { display: flex; gap: 4px; }
.view-toggle button {
  width: 36px; height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  transition: all 0.3s var(--ease-out);
}
.view-toggle button:hover { color: var(--ink); border-color: var(--ink); }
.view-toggle button.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* GRID VIEW */
.gallery-grid {
  padding: 60px 40px 120px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.gallery-card {
  position: relative;
  cursor: pointer;
  transition: transform 0.6s var(--ease-out);
}
.gallery-card:hover { transform: translateY(-8px); }
.gallery-card .card-img {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  transition: filter 0.5s var(--ease-out);
}
.gallery-card:hover .card-img { filter: saturate(1.2) brightness(1.05); }
.gallery-card .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-card .card-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.gallery-card .card-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.02em;
}
.gallery-card .card-arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.gallery-card:hover .card-arrow { transform: translate(4px, -4px); }

/* Asymmetric sizes */
.gallery-card.span-7 { grid-column: span 7; }
.gallery-card.span-5 { grid-column: span 5; }
.gallery-card.span-6 { grid-column: span 6; }
.gallery-card.span-8 { grid-column: span 8; }
.gallery-card.span-4 { grid-column: span 4; }
.gallery-card.span-12 { grid-column: span 12; }

.gallery-card.h-tall .card-img { aspect-ratio: 4 / 5; }
.gallery-card.h-wide .card-img { aspect-ratio: 16 / 9; }
.gallery-card.h-square .card-img { aspect-ratio: 1 / 1; }
.gallery-card.h-cinema .card-img { aspect-ratio: 21 / 9; }

/* INDEX/LIST VIEW */
.gallery-index {
  padding: 0 40px 120px;
}
.gallery-index .row {
  display: grid;
  grid-template-columns: 60px 1.5fr 1fr 1fr 100px 60px;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  cursor: pointer;
  transition: padding 0.4s var(--ease-out);
  position: relative;
}
.gallery-index .row:first-child { border-top: 1px solid var(--line); }
.gallery-index .row:hover { padding-left: 24px; }
.gallery-index .row .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.1em;
}
.gallery-index .row .title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  letter-spacing: -0.02em;
  transition: color 0.3s var(--ease-out);
}
.gallery-index .row:hover .title { color: var(--accent); }
.gallery-index .row .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.gallery-index .row .arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s var(--ease-out);
  margin-left: auto;
}
.gallery-index .row:hover .arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-card.span-7,
  .gallery-card.span-5,
  .gallery-card.span-6,
  .gallery-card.span-8,
  .gallery-card.span-4,
  .gallery-card.span-12 { grid-column: span 1; }
  .gallery-index .row { grid-template-columns: 30px 1fr 30px; gap: 16px; }
  .gallery-index .row .meta { display: none; }
}