/* ===============================
   NYB Portfolio Grid – Year Separator + Flip
   =============================== */

/* Filter */
.nybpg-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.nybpg-filter-btn{
  border:1px solid rgba(0,0,0,.15);background:#fff;padding:8px 14px;border-radius:999px;
  cursor:pointer;font-weight:600;transition:all .2s ease
}
.nybpg-filter-btn.is-active{border-color:currentColor;box-shadow:0 6px 18px rgba(0,0,0,.08)}

/* Grid */
.nybpg-grid{display:grid;gap:28px}
.nybpg-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.nybpg-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nybpg-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){
  .nybpg-grid.cols-3,.nybpg-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){.nybpg-grid{grid-template-columns:1fr}}

/* Wrap color vars (JS setzt Salient Accents, Fallback hier) */
.nybpg-wrap{
  --nybpg-accent-a:#c7ff00;
  --nybpg-accent-b:#111111;
  --nybpg-back:#0b1220;
}
/* YEAR SEPARATOR as GRID TILE (box) */
.nybpg-year-sep{
  /* IMPORTANT: kein full width! */
  grid-column: auto;

  height: 360px;            /* gleiche Höhe wie deine Cards */
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;
  font-weight: 900;
  font-size: 64px;
  letter-spacing: .8px;
}

.nybpg-year-sep.sep-a{ background: var(--nybpg-accent-a); }
.nybpg-year-sep.sep-b{ background: var(--nybpg-accent-b); }

@media (max-width: 900px){
  .nybpg-year-sep{ height: 260px; font-size: 52px; }
}


/* Card / Item */
.nybpg-item{display:block;text-decoration:none;color:inherit;perspective:1400px}
.nybpg-card{border-radius:18px;overflow:hidden;background:#fff}

/* Flip core */
.nybpg-flip{
  position:relative;
  height:360px;
  transform-style:preserve-3d !important;
  transition:transform .65s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.nybpg-item:hover .nybpg-flip{transform:rotateY(180deg)}

/* Faces */
.nybpg-face{
  position:absolute;inset:0;width:100%;height:100%;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  transform:translateZ(0);
}
.nybpg-front{background-size:cover;background-position:center;transform:rotateY(0deg)}
.nybpg-back{background:var(--nybpg-back);transform:rotateY(180deg)}

/* Front overlay */
.nybpg-front-overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:20px;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
}
.nybpg-title{
  margin:0;
  font-size:20px;
  line-height:1.25;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

/* Back content */
.nybpg-back-inner{
  height:100%;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:12px;
}
.nybpg-keyfacts{
  color: rgba(255,255,255,.85);
  font-size:15px;
  line-height:1.45;
}
.nybpg-keyfacts p{margin:0 0 10px}
.nybpg-keyfacts p:last-child{margin-bottom:0}
.nybpg-keyfacts ul{margin:0;padding-left:18px}
.nybpg-keyfacts li{margin:6px 0}

.nybpg-cta{margin-top:6px;font-weight:800;color:#fff}

/* Load more */
.nybpg-loadmore-wrap{margin-top:28px;display:flex;justify-content:center}
.nybpg-loadmore{
  border:1px solid rgba(0,0,0,.15);background:#fff;padding:12px 20px;border-radius:999px;
  font-weight:800;cursor:pointer
}

/* Mobile: no flip */
@media (max-width:900px){
  .nybpg-item:hover .nybpg-flip{transform:none}
  .nybpg-back{display:none}
}