.category-buttons {display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 22px}
.filter-btn {border:1px solid var(--border);border-radius:999px;padding:8px 14px;background:#fff;color:#111}
.filter-btn:hover {border-color:var(--primary);color:var(--primary)}
.filter-btn.active {background:var(--primary);color:#fff;border-color:var(--primary)}

.gallery-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.gallery-item {background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:0 4px 10px rgba(0, 0, 0, 0.3); }
.gallery-item img {border-radius:10px;aspect-ratio:4/3;object-fit:cover;transition:transform 0.8s ease}
.gallery-item img:hover {transform:scale(1.10)}
.gallery-grid :hover {transition:transform 0.8s ease;box-shadow: 0 10px 25px rgba(0, 180, 216, 0.3)}
.gallery-label {font-size:.95rem;color:var(--muted);margin-top:8px;text-align:center}

/* Ефект для картинок hero + карток */
.card-media img,.hero-image {transition:transform 0.8s ease, box-shadow 0.4s ease;will-change:transform}
.card-media img:hover,.hero-image:hover {transform:scale(1.15);box-shadow: 0 10px 25px rgba(0, 180, 216, 0.3)}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  justify-content: center;
  align-items: center;
  padding: 20px;
  z-index: 1200;
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  object-fit: contain;
  display: block;
  position: relative;
}

/* Кнопка закриття прив’язана до картинки */
.modal-close {
  position: absolute;
  top: 40px;      /* піднімаємо над верхнім краєм картинки */
  right: 8px;    /* трохи праворуч від картинки */
  background: rgba(0,0,0,.6);
  color: #fff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer; 
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1300;
}
.modal-close:hover {
  background: rgba(0,0,0,.8);
}