/* Responsive Image Optimization */

.responsive-image-container,
.responsive-banner-container {
    display: block;
    width: 100%;
}

.responsive-image-container img,
.responsive-banner-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Server Icons */
.server-icon {
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.server-icon:hover {
    transform: scale(1.05);
}

/* Default icons for servers without images */
.default-icon {
    background: linear-gradient(135deg, #5865f2, #7289da);
    color: white;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Server Banners */
.card-banner-img,
.server-banner {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.card-banner {
    position: relative;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    height: 160px;
}

.card-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

/* Sidebar images */
.sidebar-server-image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Loading states */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lazy-load.loaded {
    opacity: 1;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
    .server-icon {
        width: 40px;
        height: 40px;
    }
    
    .sidebar-server-image {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .server-icon {
        width: 36px;
        height: 36px;
    }
    
    .card-banner {
        height: 120px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    /* Ensure crisp images on retina displays */
    .server-icon,
    .sidebar-server-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Performance optimizations */
.responsive-image-container picture,
.responsive-banner-container picture {
    display: block;
}

/* Aspect ratio preservation */
.aspect-ratio-1-1 {
    aspect-ratio: 1 / 1;
}

.aspect-ratio-3-1 {
    aspect-ratio: 3 / 1;
}

/* WebP support detection fallback */
.no-webp .responsive-image-container source[type="image/webp"],
.no-webp .responsive-banner-container source[type="image/webp"] {
    display: none;
}

/* Modern image formats optimization */
@supports (aspect-ratio: 1 / 1) {
    .modern-format-support {
        /* Additional optimizations for browsers supporting modern CSS features */
    }
}