:root { --portfolio-border: #2d435b; }

/* container wrapper */
.section-portfolio-onepage .container {
  max-width: 1200px;
  margin: 0 auto;
}
.section-portfolio-onepage{
  margin-top: 20px;
}
/* section title */
.portfolio-section-title {
  font-size: 2rem;
  margin: 2rem 0 1rem;
  text-align: center;
  color: var(--portfolio-border);
}

/* grid variables */
.portfolio-block { margin-bottom:2rem; counter-reset:cnt; }
.portfolio-block.motion        { --items:3; --max:6; }
.portfolio-block.branding      { --items:5; --max:10; }
.portfolio-block.illustrations { --items:5; --max:15; }
.portfolio-block.web           { --items:3; --max:6; }

/* grid layout */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(var(--items),1fr);
  gap:1rem;
}

/* common item styles */
.portfolio-item {
  position:relative;
  border:2px solid var(--portfolio-border);
  overflow:hidden;
  counter-increment:cnt;
  transition:transform .3s, box-shadow .3s;
  box-shadow:0 4px 8px rgba(0,0,0,0.2);
}
.portfolio-item:hover {
  transform:translateY(-5px);
  box-shadow:0 8px 16px rgba(0,0,0,0.3);
}
.portfolio-item::before {
  content:counter(cnt);
  position:absolute;
  top:.5rem;
  left:.5rem;
  background:var(--portfolio-border);
  color:#fff;
  padding:.2rem .5rem;
  border-radius:.2rem;
}

/* thumbnail */
.portfolio-thumb {
  overflow:hidden;
}
.portfolio-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
}

/* aspect ratios */
.portfolio-block.motion .portfolio-thumb { aspect-ratio:16/9; }
.portfolio-block.branding .portfolio-thumb,
.portfolio-block.illustrations .portfolio-thumb,
.portfolio-block.web .portfolio-thumb { aspect-ratio:1/1; }

/* overlay */
.portfolio-item .overlay {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.5);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  opacity:0;
  transition:opacity .3s;
  text-align:center;
  padding:1rem;
  pointer-events: none;
}
.portfolio-item:hover .overlay {
  opacity:1;
}

/* hide/show logic per section */
.portfolio-block.motion:not(.expanded) .portfolio-item:nth-child(n+7) { display:none; }
.portfolio-block.branding:not(.expanded) .portfolio-item:nth-child(n+11) { display:none; }
.portfolio-block.illustrations:not(.expanded) .portfolio-item:nth-child(n+16) { display:none; }
.portfolio-block.web:not(.expanded) .portfolio-item:nth-child(n+7) { display:none; }
.portfolio-block.expanded .portfolio-item {
  display:block;
  animation:fadeInUp .6s ease forwards;
}

/* toggle button */
.btn-see-more {
  display:block;
  margin:1rem auto;
  background:none;
  border:none;
  color:var(--portfolio-border);
  text-decoration:underline;
  cursor:pointer;
}
.btn-see-more:hover { font-weight:bold; }

/* animation */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Fancybox */
.fancybox__container { --fancybox-bg:rgba(0,0,0,.85); --fancybox-color:#fff; }
.fancybox__toolbar { background:rgba(0,0,0,.6); }
.fancybox__content { border-radius:8px; overflow:hidden; }
.fancybox__caption { text-align:center; padding:1rem; }
.fancybox__caption h2 { font-size:1.5rem; margin-bottom:.5rem; }
.fancybox__caption p { margin-bottom:.5rem; color:#ddd; }