/* ═══════════════════════════════════════════════════════════
   PY INTERIORS — Portfolio Stylesheet
═══════════════════════════════════════════════════════════ */

/* Hero particles */
.ph-particle {
  position: absolute; width: 6px; height: 6px;
  border-radius: 50%; background: var(--red); opacity: 0.4;
  animation: float 4s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }

/* Count bar */
.portfolio-count-bar {
  background: rgba(26,18,8,0.97); padding: 14px 0;
  border-bottom: 1px solid rgba(245,237,228,0.06);
}
.portfolio-count-bar .container {
  display: flex; align-items: center; justify-content: space-between;
}
#count-label { font-size: 13px; color: rgba(245,237,228,0.4); letter-spacing: 0.05em; }
#count-label strong { color: var(--red); }
.view-toggle { display: flex; gap: 4px; }
.vt-btn {
  width: 34px; height: 34px; border-radius: 2px;
  border: 1px solid rgba(245,237,228,0.1);
  color: rgba(245,237,228,0.35); font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: none; transition: 0.3s; background: none;
}
.vt-btn.active, .vt-btn:hover { background: var(--red); border-color: var(--red); color: var(--ivory); }

/* Grid modes */
.portfolio-grid {
  column-gap: 16px;
  row-gap: 16px;
}
.portfolio-grid.masonry {
  columns: 3;
  display: block;
}
.portfolio-grid.masonry .portfolio-item {
  break-inside: avoid;
  margin-bottom: 16px;
  display: inline-block;
  width: 100%;
}
.portfolio-grid.masonry .pi-img { height: auto; }
.portfolio-grid.masonry .pi-img img { height: auto; max-height: none; object-fit: cover; }
.portfolio-grid.masonry .portfolio-item:nth-child(odd) .pi-img { min-height: 320px; }
.portfolio-grid.masonry .portfolio-item:nth-child(3n) .pi-img { min-height: 440px; }

.portfolio-grid.grid-view {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.portfolio-grid.grid-view .pi-img { height: 260px; }
.portfolio-grid.grid-view .portfolio-item:nth-child(4n+1) { grid-column: auto; }
.portfolio-grid.grid-view .portfolio-item:nth-child(4n+1) .pi-img { height: 260px; }

.portfolio-grid.list-view {
  display: flex; flex-direction: column; gap: 12px;
}
.portfolio-grid.list-view .portfolio-item {
  display: grid; grid-template-columns: 280px 1fr;
}
.portfolio-grid.list-view .pi-img { height: 200px; }
.portfolio-grid.list-view .pi-overlay {
  position: relative; opacity: 1;
  background: var(--dark2);
  padding: 32px 40px;
  display: flex; flex-direction: column; justify-content: center;
}
.portfolio-grid.list-view .pi-zoom-btn { align-self: flex-start; margin-top: 16px; }

/* Item animation on filter */
.portfolio-item {
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.portfolio-item.filtering-out {
  opacity: 0; transform: scale(0.92);
  pointer-events: none;
}
.portfolio-item.filtering-in {
  animation: filterIn 0.5s var(--ease) both;
}
@keyframes filterIn {
  from { opacity:0; transform: translateY(20px) scale(0.96); }
  to { opacity:1; transform: translateY(0) scale(1); }
}

/* Load more */
.btn-load-more {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 48px; border: 1.5px solid rgba(245,237,228,0.15);
  color: rgba(245,237,228,0.6); font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600;
  background: none; border-radius: 2px; cursor: none;
  transition: 0.3s; font-family: var(--font-ui);
}
.btn-load-more:hover {
  background: var(--red); border-color: var(--red); color: var(--ivory);
  transform: translateY(-2px);
}
.btn-load-more i { transition: transform 0.3s; }
.btn-load-more:hover i { transform: translateY(4px); }
.btn-load-more.loading { pointer-events: none; opacity: 0.6; }

/* Video Reel Section */
.portfolio-reel {
  height: 500px; position: relative; overflow: hidden;
}
.reel-inner { position: relative; height: 100%; }
.reel-bg {
  position: absolute; inset: 0;
}
.reel-bg video { width: 100%; height: 100%; object-fit: cover; }
.reel-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(26,18,8,0.85), rgba(67,89,100,0.75));
}
.reel-content {
  position: relative; z-index: 1;
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 40px;
}
.reel-content .section-eyebrow { color: var(--gold); }
.reel-content h2 {
  font-family: var(--font-display); font-size: clamp(36px, 4.5vw, 60px);
  color: var(--ivory); font-weight: 300; margin-bottom: 12px;
}
.reel-content h2 em { font-style: italic; color: var(--gold); }
.reel-content p { font-size: 15px; color: rgba(245,237,228,0.55); margin-bottom: 36px; }
.reel-play-btn {
  width: 80px; height: 80px; border-radius: 50%;
  border: 2px solid rgba(245,237,228,0.4);
  color: var(--ivory); font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: none; transition: 0.3s; background: rgba(235,84,63,0.3);
  backdrop-filter: blur(10px);
  animation: playPulse 2s infinite;
}
.reel-play-btn:hover { background: var(--red); border-color: var(--red); transform: scale(1.15); }
.reel-play-btn.is-playing { background: var(--red); border-color: var(--red); animation: none; }
@keyframes playPulse {
  0%,100%{ box-shadow: 0 0 0 0 rgba(235,84,63,0.4); }
  50%{ box-shadow: 0 0 0 20px rgba(235,84,63,0); }
}

/* Lightbox improved */
#lightbox {
  background: rgba(8,5,2,0.98);
}
.lb-img-wrap {
  position: relative;
  cursor: grab;
  touch-action: none;
}
.lb-img-wrap.dragging { cursor: grabbing; }

/* Lightbox animation */
#lightbox.open .lb-img-wrap {
  animation: lbIn 0.4s var(--ease) both;
}
@keyframes lbIn {
  from { opacity:0; transform: scale(0.93); }
  to { opacity:1; transform: scale(1); }
}

/* Pinch zoom hint */
.lb-hint {
  position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,237,228,0.25); white-space: nowrap;
  animation: fadeHint 3s 1s forwards;
}
@keyframes fadeHint { 0%{opacity:1} 80%{opacity:0.3} 100%{opacity:0;pointer-events:none} }

@media (max-width: 900px) {
  .portfolio-grid.masonry { columns: 2; }
  .portfolio-grid.grid-view { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid.list-view .portfolio-item { grid-template-columns: 1fr; }
  .portfolio-grid.list-view .pi-img { height: 220px; }
}
@media (max-width: 600px) {
  .portfolio-grid.masonry { columns: 1; padding: 0 20px; }
  .portfolio-grid.grid-view { grid-template-columns: 1fr; padding: 0 20px; }
  .portfolio-grid.list-view { padding: 0 20px; }
  .portfolio-hero-content { padding: 40px 20px; }
  .portfolio-filters { padding: 0 20px; }
}

/* ── v2 additions ────────────────────────────────────────── */
/* Masonry override for .pi-img auto-height */
.portfolio-grid.masonry { columns: 3; display: block; column-gap: 14px; }
.portfolio-grid.masonry .portfolio-item { break-inside: avoid; margin-bottom: 14px; display: inline-block; width: 100%; }
.portfolio-grid.masonry .pi-img { height: auto; min-height: 260px; }
.portfolio-grid.masonry .pi-img img { height: auto; max-height: none; min-height: 260px; }
.portfolio-grid.masonry .portfolio-item:nth-child(4n+1) .pi-img { min-height: 400px; }

.portfolio-grid.grid-view { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.portfolio-grid.grid-view .pi-img { height: 240px; }
.portfolio-grid.grid-view .portfolio-item:nth-child(4n+1) { grid-column: auto; }
.portfolio-grid.grid-view .portfolio-item:nth-child(4n+1) .pi-img { height: 240px; }

.portfolio-grid.list-view { display: flex; flex-direction: column; gap: 10px; }
.portfolio-grid.list-view .portfolio-item { display: grid; grid-template-columns: 260px 1fr; height: 180px; }
.portfolio-grid.list-view .pi-img { height: 180px; }
.portfolio-grid.list-view .pi-overlay { position: relative; opacity: 1; background: var(--dark2); padding: 28px 36px; display: flex; flex-direction: column; justify-content: center; }
.portfolio-grid.list-view .pi-zoom-btn { align-self: flex-start; margin-top: 14px; }
.portfolio-grid.list-view .portfolio-item:nth-child(4n+1) { grid-column: auto; }
.portfolio-grid.list-view .portfolio-item:nth-child(4n+1) .pi-img { height: 180px; }

@media (max-width: 900px) {
  .portfolio-grid.masonry { columns: 2; }
  .portfolio-grid.grid-view { grid-template-columns: repeat(2,1fr); }
  .portfolio-grid.list-view .portfolio-item { grid-template-columns: 1fr; height: auto; }
  .portfolio-grid.list-view .pi-img { height: 200px; }
}
@media (max-width: 600px) {
  .portfolio-grid.masonry { columns: 1; padding: 0 20px; }
  .portfolio-grid.grid-view { grid-template-columns: 1fr; padding: 0 20px; }
  .portfolio-grid.list-view { padding: 0 20px; }
  .portfolio-hero-content { padding: 36px 20px; }
  .portfolio-filters { padding: 0 20px; }
}