/* ========= Projects Grid (inner zoom, uniform) ========= */

/* Grid container */
.roi-projects-grid{
  --roi-gap:16px;
  --roi-cols:4;            
  --roi-aspect:3 / 2;      
  display:grid;
  gap:var(--roi-gap);
  grid-template-columns:repeat(var(--roi-cols),1fr);
}

/* Respect shortcode column count */
.roi-projects-grid[data-cols="1"]{--roi-cols:1;}
.roi-projects-grid[data-cols="2"]{--roi-cols:2;}
.roi-projects-grid[data-cols="3"]{--roi-cols:3;}
.roi-projects-grid[data-cols="4"]{--roi-cols:4;}

/* Responsive: only scale down (desktop honors shortcode) */
@media (max-width:1200px){.roi-projects-grid{grid-template-columns:repeat(min(var(--roi-cols),3),1fr);}}
@media (max-width:900px){.roi-projects-grid{grid-template-columns:repeat(min(var(--roi-cols),2),1fr);}}
@media (max-width:560px){.roi-projects-grid{grid-template-columns:1fr;}}

/* Card: fixed rectangle + hard clip */
.roi-card{
  position:relative;
  overflow:hidden;
  clip-path:inset(0);
  border-radius:0;
  background:transparent;
  aspect-ratio:var(--roi-aspect);
}

/* Clickable area */
.roi-link{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  text-decoration:none;
  color:inherit;
}

/* Image: fills wrapper, zooms INSIDE the frame */
.roi-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform-origin:center center;
  transition:transform .35s ease;
  will-change:transform;
}

/* Hover: inner zoom effect (no growth of card) */
.roi-card:hover .roi-img{
  transform:scale(1.08);
}

/* Placeholder when no image */
.roi-no-image{
  position:absolute;
  inset:0;
  background:#222;
}

/* Overlay centered text */
.roi-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.60) 100%);
  pointer-events:none;
}

/* Title styling */
.roi-title{
  margin:0;
  font-size:1.4rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.75);
}

/* Pagination */
.roi-projects-pagination{margin-top:24px;text-align:center;}
.roi-projects-pagination ul{
  list-style:none;padding:0;margin:0;
  display:inline-grid;grid-auto-flow:column;gap:8px;
}
.roi-projects-pagination a,
.roi-projects-pagination span{
  display:block;padding:6px 10px;border:1px solid #ddd;
}
.roi-projects-pagination .current{
  background:#111;color:#fff;border-color:#111;
}