/* =========================================================
   NYB Portfolio Grid – Salient 18.x / Nectar Flipbox
   - Year separator tile
   - Category-colored filter + backside
   - Front gradient overlay for readability
   - Backside solid color (no image) for performance
   ========================================================= */

/* Vars (fallbacks; accent colors set by JS) */
.nybpg-wrap{
  --nybpg-accent-a:#c7ff00;
  --nybpg-accent-b:#111111;

  --nybpg-tile-h: 360px;
  --nybpg-tile-h-m: 300px;
}

/* Filter */
.nybpg-filter{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 18px;
}

.nybpg-filter-btn{
  border: 1px solid rgba(0,0,0,.20);
  background: transparent;
  padding: 8px 14px;
  border-radius: 0; /* CI */
  cursor: pointer;
  font-weight: 700;
  transition: all .18s ease;
  color: rgba(0,0,0,.80);
}

.nybpg-filter-btn.is-active{
  background: var(--nybpg-filter-color, rgba(239,239,239,1));
  color: rgba(0,0,0,.88);
  border-color: rgba(0,0,0,.35);
}

.nybpg-filter-btn:hover{
  border-color: rgba(0,0,0,.35);
}

/* 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(1, minmax(0,1fr));
  }
}

@media (max-width:768px){
  .nybpg-grid{ grid-template-columns:1fr; }
  .nybpg-grid{ gap:18px; }
}

@media (max-width:600px){
  .nybpg-card--nectar .nectar-flip-box .inner{
    padding:12px;
  }
}

/* Year separator tile */
.nybpg-year-sep{
  height: var(--nybpg-tile-h);
  display:flex;
  align-items:center;
  justify-content:center;

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

  /* CI: keine Rundung, kein Shadow */
  border-radius:0;
}

.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: var(--nybpg-tile-h-m);
    font-size:52px;
  }
}

/* Item/Card wrapper */
.nybpg-item{
  display:block;
  text-decoration:none;
  color:inherit;
}

.nybpg-card{
  border-radius:0;
  overflow:hidden;
  background:#fff;
}

/* ---- Nectar Flipbox normalization ---- */

/* enforce tile height */
.nybpg-card--nectar,
.nybpg-card--nectar .nectar-flip-box{
  height: var(--nybpg-tile-h);
}

@media (max-width:900px){
  .nybpg-card--nectar,
  .nybpg-card--nectar .nectar-flip-box{
    height: var(--nybpg-tile-h-m);
  }
}

/* faces fill height (override inline height:auto) */
.nybpg-card--nectar .nectar-flip-box > .flip-box-front,
.nybpg-card--nectar .nectar-flip-box > .flip-box-back{
  height: 100% !important;
  min-height: 100% !important;
}

/* inner bottom aligned */
.nybpg-card--nectar .nectar-flip-box .inner{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:22px;
}

/* FRONT: gradient overlay for readability */
.nybpg-card--nectar .flip-box-front{
  position:relative;
  background-size:cover;
  background-position:center;
}

.nybpg-card--nectar .flip-box-front:before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.35) 45%,
    rgba(0,0,0,.12) 100%
  );
  z-index:1;
}

.nybpg-card--nectar .flip-box-front .inner{
  position:relative;
  z-index:2;
}

/* Backside: SOLID COLOR by category + NO IMAGE */
.nybpg-card--nectar .flip-box-back{
  position:relative;
  background-image: none !important; /* performance */
  background-color: var(--nybpg-back-solid, rgb(239,239,239)) !important;
}

/* Back: no overlay */
.nybpg-card--nectar .flip-box-back:before{
  display:none !important;
}

/* Make back inner above any theme layers */
.nybpg-card--nectar .flip-box-back .inner{
  position:relative;
  z-index:2;
}

/* Title typography */
.nybpg-card--nectar .flip-box-front h3{
  margin:0;
  color:#fff;
  font-weight:900;
  font-size:24px;
  line-height:1.15;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
  letter-spacing:.1px;
  hyphens:auto;
  overflow-wrap:break-word;
  word-break:break-word;
}

.nybpg-card--nectar .flip-box-back h3{
  margin:0 0 10px;
  color: rgba(0,0,0,.92);
  font-weight:900;
  font-size:22px;
  line-height:1.15;
  hyphens:auto;
  overflow-wrap:break-word;
  word-break:break-word;
}

/* Keyfacts on back */
.nybpg-card--nectar .nybpg-keyfacts{
  margin-top:6px;
  color: rgba(0,0,0,.82);
  font-size:14px;
  line-height:1.45;
  hyphens:auto;
  overflow-wrap:break-word;
  word-break:break-word;
}

.nybpg-card--nectar .nybpg-keyfacts-title{
  color: #000;
}

.nybpg-card--nectar .nybpg-keyfacts h2{
  margin:0 0 10px;
  color: rgba(0,0,0,.92);
  font-weight:900;
  font-size:20px;
  line-height:1.1;
}

.nybpg-card--nectar .nybpg-keyfacts p{
  margin:0;
}

.nybpg-card--nectar .nybpg-keyfacts strong{
  color: rgba(0,0,0,.92);
  font-weight:900;
}

/* CTA */
.nybpg-card--nectar .nybpg-cta{
  margin-top:12px;
  font-weight:900;
  color: rgba(0,0,0,.92);
  letter-spacing:.2px;
}

/* Load more */
.nybpg-loadmore-wrap{
  margin-top:28px;
  display:flex;
  justify-content:center;
}

.nybpg-loadmore{
  border:1px solid rgba(0,0,0,.20);
  background:transparent;
  padding:12px 20px;
  border-radius:0;
  font-weight:900;
  cursor:pointer;
}

/* =========================================================
   Skeleton UI (prevents flipbox FOUC)
   ========================================================= */

.nybpg-wrap .nybpg-grid{
  transition: opacity .18s ease;
}

.nybpg-wrap:not(.nybpg-ready) .nybpg-grid{
  opacity: 0;
  pointer-events: none;
}

.nybpg-wrap.nybpg-ready .nybpg-grid{
  opacity: 1;
  pointer-events: auto;
}

.nybpg-wrap:not(.nybpg-ready) .nybpg-card--nectar .nectar-flip-box{
  visibility: hidden !important;
}

.nybpg-wrap.nybpg-ready .nybpg-card--nectar .nectar-flip-box{
  visibility: visible !important;
}

.nybpg-wrap:not(.nybpg-ready) .nybpg-card--nectar .flip-box-front,
.nybpg-wrap:not(.nybpg-ready) .nybpg-card--nectar .flip-box-back{
  visibility: hidden !important;
}

.nybpg-skeleton{
  display: none;
  gap: 28px;
  margin-top: 0; /* sits exactly where grid sits */
}

.nybpg-wrap:not(.nybpg-ready) .nybpg-skeleton{
  display: grid;
}

.nybpg-skeleton.cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.nybpg-skeleton.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.nybpg-skeleton.cols-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }

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

.nybpg-skel-tile{
  height: var(--nybpg-tile-h, 360px);
  border-radius: 0; /* CI */
  background: #f0f0f0;
  position: relative;
  overflow: hidden;
}

@media (max-width:900px){
  .nybpg-skel-tile{ height: var(--nybpg-tile-h-m, 300px); }
}

.nybpg-skel-tile:before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,0) 90%
  );
  transform: translateX(-60%);
  animation: nybpg-shimmer 1.1s ease-in-out infinite;
  opacity: .8;
}

@keyframes nybpg-shimmer{
  0%   { transform: translateX(-60%); }
  100% { transform: translateX(120%); }
}

.nybpg-skel-tile:after{
  content:"";
  position:absolute;
  left: 18px;
  bottom: 18px;
  width: 70%;
  height: 16px;
  background: rgba(0,0,0,.08);
}