/**
 * Responsive Image Loading & Optimization
 * Mobile-first image strategy for bandwidth efficiency
 */

/* ============================================================================
   IMAGE CONTAINERS — Mobile-First
   ============================================================================ */

.image-container {
    position: relative;
    background-color: var(--light);
    overflow: hidden;
}

/* Lazy loaded images with fade-in */
.image-lazy {
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.image-placeholder {
    background: linear-gradient(90deg, var(--light) 25%, #e0e0e0 50%, var(--light) 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ============================================================================
   ALBUM ARTWORK — Mobile-First
   ============================================================================ */

.album-art {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: var(--light);
    display: block;
}

.album-art-small {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-md);
    background-color: var(--light);
}

.album-art-medium {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: var(--radius-md);
    background-color: var(--light);
}

.album-art-large {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background-color: var(--light);
}

.album-art.unowned {
    opacity: 0.6;
    filter: grayscale(50%);
}

/* ============================================================================
   ARTIST IMAGES — Mobile-First
   ============================================================================ */

.artist-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.artist-header-image {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    background-color: var(--light);
}

.artist-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--light);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   PICTURE ELEMENTS — Responsive Srcset
   ============================================================================ */

picture {
    display: contents;
}

/* Support multiple image resolutions */
img[srcset] {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================================
   IMAGE FIGURES & CAPTIONS
   ============================================================================ */

figure {
    margin: var(--spacing-lg) 0;
}

figcaption {
    font-size: var(--font-size-sm);
    color: var(--gray);
    margin-top: var(--spacing-md);
    text-align: center;
}

/* ============================================================================
   RESPONSIVE IMAGE RATIOS
   ============================================================================ */

/* 1:1 Square images (album art) */
.image-1-1 {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--light);
}

.image-1-1 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 16:9 Widescreen (hero images) */
.image-16-9 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--light);
}

.image-16-9 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3:4 Portrait (artist photos) */
.image-3-4 {
    position: relative;
    width: 100%;
    padding-bottom: 133.33%;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--light);
}

.image-3-4 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================================
   IMAGE OPTIMIZATIONS FOR MOBILE
   ============================================================================ */

/* Lower quality on slow networks */
@media (max-width: 640px) {
    img {
        /* Browsers will load smaller images on mobile */
        max-width: 100%;
    }
    
    /* Reduce image quality on very small screens */
    @supports (image-rendering: pixelated) {
        .album-art-small {
            image-rendering: crisp-edges;
        }
    }
}

/* ============================================================================
   BACKDROP IMAGES
   ============================================================================ */

.image-backdrop {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* Fixed on desktop only */
}

.image-backdrop::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* ============================================================================
   ICONS AS IMAGES
   ============================================================================ */

.icon-image {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 var(--spacing-sm);
    vertical-align: middle;
}

/* ============================================================================
   NO-IMAGE PLACEHOLDERS
   ============================================================================ */

.no-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
    color: var(--gray);
    font-size: var(--font-size-lg);
    text-align: center;
    padding: var(--spacing-xl);
}

.no-image-placeholder-small {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    font-size: 2rem;
}

.no-image-placeholder-medium {
    width: 150px;
    height: 150px;
    border-radius: var(--radius-md);
    font-size: 3rem;
}

/* ============================================================================
   TABLET & UP (768px+)
   ============================================================================ */

@media (min-width: 768px) {
    .album-art-large {
        width: 400px;
        height: 400px;
    }

    .artist-header-image {
        max-height: 400px;
    }

    .image-backdrop {
        background-attachment: fixed; /* Parallax effect on desktop */
    }
}

/* ============================================================================
   DARK MODE SUPPORT
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    .image-placeholder {
        background: linear-gradient(90deg, #2d2d2d 25%, #404040 50%, #2d2d2d 75%);
    }

    .no-image-placeholder {
        background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
        color: #666;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .image-lazy {
        opacity: 1;
    }

    .image-backdrop::before {
        background: rgba(0, 0, 0, 0);
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .image-lazy,
    .image-placeholder {
        transition: none;
        animation: none;
    }
}