/* --- General Gallery Styles --- */
.spg-gallery ul {
    list-style: none;
    padding: 0;
    margin: 1em 0;
    display: grid; /* Use grid for layout */
    gap: 10px; /* Space between items */
}

/* Responsive Columns */
.spg-gallery.spg-columns-1 ul { grid-template-columns: 1fr; }
.spg-gallery.spg-columns-2 ul { grid-template-columns: repeat(2, 1fr); }
.spg-gallery.spg-columns-3 ul { grid-template-columns: repeat(3, 1fr); }
.spg-gallery.spg-columns-4 ul { grid-template-columns: repeat(4, 1fr); }
/* Add more as needed, or use auto-fit */
 /* Example using auto-fit for better responsiveness */
.spg-gallery.spg-columns-auto ul {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjust minmax as needed */
}


.spg-gallery li {
    margin: 0;
    padding: 0;
    position: relative; /* Needed for absolute positioning of remove button */
    overflow: hidden; /* Contain image */
}

.spg-gallery img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 4px;
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

 /* Style for links wrapping images (e.g., lightbox) */
.spg-gallery li a {
    display: block;
    line-height: 0; /* Prevent extra space below linked image */
}


/* --- Management Area Specific Styles --- */
.spg-management-area {
    border: 1px solid #e0e0e0;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

.spg-management-area h2,
.spg-management-area h3 {
    margin-top: 0;
}

.spg-management-list li {
    text-align: center; /* Center remove button below thumb */
}

.spg-management-list img {
    margin-bottom: 5px; /* Space between image and remove button */
}

.spg-remove-link {
    display: inline-block; /* Or block if you want it full width */
    margin-top: 5px;
    padding: 3px 8px;
    background-color: #dc3232;
    color: #fff;
    text-decoration: none;
    font-size: 0.9em;
    border-radius: 3px;
    transition: background-color 0.2s ease-in-out;
}

.spg-remove-link:hover,
.spg-remove-link:focus {
    background-color: #a02424;
    color: #fff;
}

/* Add button styling */
#spg-add-button,
#spg-submit-button {
    margin-right: 10px;
}

/* --- Notices and Errors --- */
.spg-notice {
    background-color: #e7f7df;
    border-left: 4px solid #8ecf49;
    padding: 10px 15px;
    margin: 15px 0;
}

.spg-error {
    background-color: #fdecea;
    border-left: 4px solid #dc3232;
    padding: 10px 15px;
    margin: 15px 0;
}

/* Simple Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    /* Example: Switch to 2 columns on smaller screens if using fixed columns */
    .spg-gallery.spg-columns-3 ul,
    .spg-gallery.spg-columns-4 ul {
         /*grid-template-columns: repeat(2, 1fr);*/ /* Override fixed columns */
    }
     /* If using auto-fit, it should adjust automatically */
}