/* --- PARTNERS LOGO STYLE --- */

/* 1. The Container for the Logo */
/* This ensures the box holding the logo is a consistent size */
.view-id-partners .views-field-field-image, 
.view-partners .views-field-field-image,
.partner-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* Fixed height for alignment */
    width: 100%;
    padding: 10px;
    background-color: #ffffff; /* Optional: white bg behind logos */
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* 2. The Logo Image Itself */
/* This is the magic part that makes them all fit */
.view-id-partners img,
.view-partners img,
.partner-logo {
    max-width: 100% !important;
    max-height: 80px !important; /* Ensures no logo is taller than this */
    width: auto !important;
    height: auto !important;
    
    /* CRITICAL: Keeps the logo's original shape without stretching */
    object-fit: contain !important; 
    
    /* Optional: Makes them slightly transparent until hovered */
    opacity: 0.8;
    filter: grayscale(0%); /* Optional: B&W look for consistency */
    transition: all 0.3s ease;
    
    /* Removes default margins that mess up centering */
    margin: 0 auto !important;
    display: block !important;
}

/* 3. Hover Effects (Optional but nice) */
/* Makes the logo pop when you mouse over it */
.view-id-partners .views-row:hover img,
.view-partners .views-row:hover img,
.partner-logo-container:hover img {
    opacity: 1;
    filter: grayscale(0%); /* Brings back color */
    transform: scale(1.05); /* Slight zoom */
}

/* Optional: Add a subtle shadow to the container on hover */
.view-id-partners .views-row:hover .views-field-field-image,
.partner-logo-container:hover {
     box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}