/* ===== PORTFOLIO LAYOUT ===== */
.portfolio {
  column-count: 4;
  column-gap: 5px; /* FIX: actual horizontal spacing */
  padding: 15px;
}

/* ===== ITEM ===== */
.art-item {
  display: inline-block; /* FIX: prevents column collapse */
  width: 100%;
  margin-bottom: 5px; /* FIX: vertical spacing */
  text-decoration: none;
}

/* ===== INNER WRAPPER ===== */
.art-inner {
  position: relative;
  overflow: hidden; /* FIX: contains zoom so no overlap */
}

/* ===== IMAGE ===== */
.art-inner img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ===== HOVER ===== */
.art-inner:hover img {
  transform: scale(1.05); /* FIX: small enough to stay inside gap */
  opacity: 0.75;
}

/* ===== OVERLAY ===== */
.art-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px;

  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white;

  font-family: "Proxima Nova", Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;

  opacity: 0;
  transform: translateY(15px);
  transition: all 0.3s ease;
}

/* FIX: overlay now follows same hover trigger as image */
.art-inner:hover .art-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .portfolio {
    column-count: 2;
    column-gap: 16px;
  }

  .art-item {
    margin-bottom: 16px;
  }
}