/* Grid container */
.wcpg-grid {
  display: grid;
  grid-template-columns: repeat(var(--wcpg-cols, 4), 1fr);
  gap: var(--wcpg-gap, 20px);
}

/* Vars */
.wcpg-grid { --wcpg-cols: 4; --wcpg-gap: 20px; --wcpg-radius: 12px; --wcpg-shadow: 1; }
.wcpg-grid[data-cols]   { --wcpg-cols: attr(data-cols number, 4); }
.wcpg-grid[data-gap]    { --wcpg-gap: calc(attr(data-gap number, 20) * 1px); }
.wcpg-grid[data-radius] { --wcpg-radius: calc(attr(data-radius number, 12) * 1px); }

/* Items: perfect squares */
.wcpg-item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--wcpg-radius);
  background: #e9efe6;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.wcpg-grid[data-shadow="0"] .wcpg-item { box-shadow: none; }

.wcpg-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}
.wcpg-item:hover img { transform: scale(1.03); filter: saturate(1.02) contrast(1.02); }

/* Responsive */
@media (max-width: 1024px) { .wcpg-grid { --wcpg-cols: 3; } }
@media (max-width: 768px)  { .wcpg-grid { --wcpg-cols: 2; } }
@media (max-width: 480px)  { .wcpg-grid { --wcpg-cols: 1; } }

/* Lightbox */
.wcpg-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.85);
  display: none; align-items: center; justify-content: center; padding: 24px; }
.wcpg-lightbox.is-open { display: flex; }
.wcpg-lightbox img { max-width: 100%; max-height: 100%; box-shadow: 0 10px 30px rgba(0,0,0,.4); border-radius: 8px; }
.wcpg-lightbox__close { position: absolute; top: 14px; right: 16px; color: #fff; font-size: 28px; cursor: pointer; opacity: .9; }
.wcpg-lightbox__close:hover { opacity: 1; }