/* CCAI — Elementor Product Image Grid (safe layout) */

.ccai-epig {
  display: grid;
  gap: var(--ccai-gap, 2px);
  grid-template-columns: repeat(var(--ccai-cols, 4), minmax(0, 1fr));
}

.ccai-epig__item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}

.ccai-epig__item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.ccai-epig.has-hover .ccai-epig__item {
  transition: transform .3s ease, box-shadow .3s ease;
}

.ccai-epig.has-hover .ccai-epig__item img {
  transition: transform .4s ease;
}

.ccai-epig.has-hover .ccai-epig__item:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.ccai-epig.has-hover .ccai-epig__item:hover img {
  transform: scale(1.04);
}

.ccai-epig__empty {
  font-size: .9rem;
  opacity: .7;
  text-align: center;
  padding: 1rem;
}

.ccai-epig.use-padding {
  gap: 0 !important;
}

.ccai-epig.use-padding .ccai-epig__item {
  padding: var(--ccai-gap, 2px);
  background-clip: content-box;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .ccai-epig {
    gap: var(--ccai-gap-tablet, var(--ccai-gap, 2px));
    grid-template-columns: repeat(var(--ccai-cols-tablet, var(--ccai-cols, 4)), minmax(0, 1fr));
  }

  .ccai-epig.use-padding .ccai-epig__item {
    padding: var(--ccai-gap-tablet, var(--ccai-gap, 2px));
  }
}

@media (max-width: 767px) {
  .ccai-epig {
    gap: var(--ccai-gap-mobile, var(--ccai-gap-tablet, var(--ccai-gap, 2px)));
    grid-template-columns: repeat(var(--ccai-cols-mobile, var(--ccai-cols-tablet, var(--ccai-cols, 4))), minmax(0, 1fr));
  }

  .ccai-epig.use-padding .ccai-epig__item {
    padding: var(--ccai-gap-mobile, var(--ccai-gap-tablet, var(--ccai-gap, 2px)));
  }
}