/* ============================================================
   SEKCJA: PORTFOLIO (+ Strefa Pary)
   ============================================================ */
.portfolio{background:var(--ink);color:var(--cream)}
.portfolio .sec-head h2{color:var(--cream)}
.portfolio .sec-head p{color:rgba(247,243,236,.7)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:240px;gap:14px}
.gtile{position:relative;border-radius:3px;overflow:hidden;background:linear-gradient(135deg,#2a231b,#4a3c2a);display:flex;align-items:flex-end;cursor:pointer;border:1px solid rgba(176,141,87,.2)}
.gtile.tall{grid-row:span 2}
.gtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .5s ease}
.gtile:hover img{transform:scale(1.05)}
.video-tile{cursor:pointer}
.video-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#1a1714}
.video-tile.playing video{z-index:3}
.video-tile.playing .play,.video-tile.playing .label{display:none}
.gtile .label{position:relative;z-index:2;padding:20px;width:100%;background:linear-gradient(transparent,rgba(26,23,20,.85));font-family:var(--serif);font-size:1.2rem}
.portfolio-empty{text-align:center;color:rgba(247,243,236,.7);font-size:1rem;padding:20px 0 10px}
.gtile .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2;transition:.3s}
.gtile:hover .play{background:var(--gold);border-color:var(--gold)}
.gtile .play::after{content:"";border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}

.portfolio-gated{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;
  margin-top:40px;padding:22px 28px;border:1px solid rgba(176,141,87,.3);border-radius:4px;
  background:rgba(176,141,87,.06);text-align:center}
.portfolio-gated span{color:rgba(247,243,236,.85);font-size:.95rem}
.portfolio-gated .btn-ghost{color:var(--cream);border-color:var(--gold)}
.portfolio-gated .btn-ghost:hover{background:var(--gold);border-color:var(--gold)}
.portfolio-note{text-align:center;margin-top:28px;color:rgba(247,243,236,.6);font-size:.9rem}

@media(max-width:880px){
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .gtile.tall{grid-row:span 1}
}
@media(max-width:520px){
  .gallery{grid-template-columns:1fr}
}