/* Portfolio page – page-specific styles */

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.10);border-radius:12px;overflow:hidden;margin-bottom:64px;}
.stat-box{background:var(--card-bg);padding:32px 24px;text-align:center;}
.stat-num{font-family:'Bebas Neue',sans-serif;font-size:48px;color:var(--orange);line-height:1;margin-bottom:8px;}
.stat-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--silver);font-weight:600;}

.comp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.comp-card{background:var(--card-bg);border:1px solid rgba(0,0,0,0.10);border-radius:10px;overflow:hidden;transition:all 0.3s;}
.comp-card:hover{border-color:rgba(249,115,22,0.4);transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,0.12);}
.comp-img-wrap{position:relative;aspect-ratio:1;overflow:hidden;background:#f0f0f0;}
.comp-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s;}
.comp-card:hover .comp-img{transform:scale(1.06);}
.comp-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;}

@media(max-width:900px){
  .comp-grid{grid-template-columns:repeat(3,1fr);}
  .stat-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:600px){
  .comp-grid{grid-template-columns:repeat(2,1fr);}
}
<style>

/* GRID */
.grid {
  width:100%;
}

/* ITEMS */
.grid-item {
  width:12.5%;
  padding:5px;
}

@media(max-width:1200px){ .grid-item{width:20%;} }
@media(max-width:800px){ .grid-item{width:33.33%;} }

.grid-item img {
  width:100%;
  height:180px;
  object-fit: contain;   /* 🔥 keeps full image inside */
  display:block;
}
.grid-item:hover img {
  transform:scale(1.05);
}

</style>

<style>

/* LIGHTBOX */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.96);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* IMAGE */
.lightbox img {
  max-width: 92%;
  max-height: 92%;
  border-radius: 10px;
  animation: zoom 0.25s ease;
}

/* NAV */
.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  color: white;
  cursor: pointer;
  padding: 20px;
  user-select: none;
}

.prev { left: 20px; }
.next { right: 20px; }

/* CLOSE */
.close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
}

@keyframes zoom {
  from {transform:scale(0.8); opacity:0;}
  to {transform:scale(1); opacity:1;}
}

</style>