/* Public CSS for the RBS Company Logo Gallery plugin */

/* Grid Layout - Simplified approach */
.rclm-logo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default is 3 columns */
    gap: 20px;
    margin: 20px 0;
}

/* Handle column counts with CSS */
.rclm-logo-grid[data-rclm-columns="1"] { grid-template-columns: 1fr; }
.rclm-logo-grid[data-rclm-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.rclm-logo-grid[data-rclm-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.rclm-logo-grid[data-rclm-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.rclm-logo-grid[data-rclm-columns="5"] { grid-template-columns: repeat(5, 1fr); }
.rclm-logo-grid[data-rclm-columns="6"] { grid-template-columns: repeat(6, 1fr); }

.rclm-logo-item {
    text-align: center;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.rclm-logo-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Logo image styling (used in both grid and slider) */
.rclm-logo-image {
    max-width: 100%;
    height: auto;
    max-height: 150px;
    width: auto;
}

/* Slider custom styling */
.rclm-logo-slider {
    margin: 20px 0;
    padding: 0 10px;
}

.rclm-slide {
    text-align: center;
    padding: 15px;
}

/* Custom Slick overrides */
.rclm-logo-slider .slick-prev,
.rclm-logo-slider .slick-next {
    z-index: 10;
}

.rclm-logo-slider .slick-prev {
    left: -10px;
}

.rclm-logo-slider .slick-next {
    right: -10px;
}

/* Dots styling in grey for any background */
.rclm-logo-slider .slick-dots li button:before {
    font-size: 12px;
    color: rgba(128, 128, 128, 0.5);
    opacity: 0.5;
}

.rclm-logo-slider .slick-dots li.slick-active button:before {
    color: rgba(128, 128, 128, 0.8);
    opacity: 0.8;
}

/* Responsive Styles - Simplified */
@media (max-width: 768px) {
    .rclm-logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .rclm-logo-grid[data-rclm-columns="1"] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .rclm-logo-grid {
        grid-template-columns: 1fr;
    }
}