/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

#cpt-gallery-preview {
  margin-top: 10px;
  padding: 0;
  list-style: none;
  display: flex; /* ← Flexbox statt inline-block */
  flex-wrap: wrap; /* ← Zeilenumbruch erlauben */
  gap: 12px; /* ← gleichmäßiger Abstand */
  min-height: 100px; /* verhindert komisches Springen bei leerer Galerie */
}

#cpt-gallery-preview li {
  position: relative;
  width: 80px;
  height: 80px; /* feste Höhe → kein Springen mehr! */
  flex: 0 0 80px; /* verhindert Größenänderung */
  cursor: move;
}

#cpt-gallery-preview li img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* füllt das 80×80-Quadrat schön aus */
  border-radius: 4px;
}

#cpt-gallery-preview li .cpt-remove-image {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

#cpt-gallery-preview li:hover .cpt-remove-image {
  opacity: 1;
}

/* Während des Drag-Vorgangs (Sortable-Hilfsklasse) */
#cpt-gallery-preview.ui-sortable-helper {
  opacity: 0.8;
  transform: rotate(5deg) scale(1.05);
}