/**
 * Unified Image Management System
 * 
 * Handles different image types with specific rules:
 * - Player photos: Focus on head/upper body
 * - Team logos: Contain within boundaries
 * - Site logos: Preserve original display
 * - Default/fallback images: Special handling
 */

/* ========================================
   1. PLAYER IMAGES
   ======================================== */

/* Base player image styles */
.player-image,
.player-photo,
img.player-avatar,
.player-card img[src*="/uploads/players/"],
.match-card img[src*="/uploads/players/"] {
    object-fit: cover;
    object-position: center top; /* Focus on head for consistent visibility */
}

/* Circular player images (avatars) */
.rounded-full img[src*="/uploads/players/"],
.player-photo-container img,
.player-avatar-circle {
    object-position: center top; /* Head focus for circular frames */
}

/* Small player thumbnails */
.w-16.h-16 img[src*="/uploads/players/"],
.w-20.h-20 img[src*="/uploads/players/"],
.player-thumb {
    object-position: center top; /* Head focus for small images */
}

/* Large hero player images */
.hero-player-image,
.w-40.h-40 img[src*="/uploads/players/"],
.w-48.h-48 img[src*="/uploads/players/"] {
    object-position: center top; /* Head focus for large images */
}

/* ========================================
   2. TEAM LOGOS
   ======================================== */

/* Team logo specific handling */
.team-logo,
.team-logo-image,
img[src*="/logos/team_"],
.match-team-logo img,
.standings-team-logo img {
    object-fit: contain !important;
    object-position: center center !important;
    padding: 5%;
}

/* ========================================
   3. SITE LOGOS (Header/Hero)
   ======================================== */

/* Site logo preservation - DO NOT affect these */
.hero-logo-image,
.logo-image,
.header-logo img,
.footer-logo-image {
    /* These should NOT be affected by player image styles */
    object-fit: unset !important;
    object-position: unset !important;
    padding: 0 !important;
    opacity: 1 !important;
    width: auto !important;
    max-width: none !important;
}

/* ========================================
   4. FALLBACK/DEFAULT IMAGES
   ======================================== */

/* Player photo fallbacks (when using logo as placeholder) */
.player-image[src*="logo2.png"],
.player-photo[src*="logo2.png"],
.player-avatar[src*="logo2.png"] {
    object-fit: contain !important;
    padding: 15%;
    object-position: center center !important;
    opacity: 0.7;
}

/* ========================================
   5. CHAMPION IMAGES
   ======================================== */

/* Champion images should be contained */
img[src*="/images/champions/"],
.champion-image,
.champion-icon {
    object-fit: contain !important;
    object-position: center center !important;
}

/* ========================================
   6. LOADING STATES
   ======================================== */

/* Loading state for images */
.player-image-loading,
img.loading {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: imageLoading 1.5s infinite;
}

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

/* ========================================
   7. HOVER EFFECTS
   ======================================== */

/* Hover effects preservation */
.group:hover .player-photo,
.player-card:hover .player-image {
    transform: scale(1.1);
}

/* Ensure transitions work with object-position */
.player-photo,
.player-image {
    transition: transform 0.3s ease, object-position 0.3s ease;
}

/* ========================================
   8. SPECIFIC COMPONENT STYLES
   ======================================== */

/* Match card specific styling */
.match-player-avatar {
    width: 32px;
    height: 32px;
    object-position: center top;
}

/* ========================================
   9. RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    /* Player images on mobile */
    .player-photo,
    .player-image {
        object-position: center top; /* Head focus on mobile */
    }
    
    /* Team logos on mobile */
    .team-logo,
    .team-logo-image {
        padding: 10%; /* More padding on mobile for smaller screens */
    }
}

/* ========================================
   10. DEBUG HELPERS
   ======================================== */

/* Debug helper - add class to see image boundaries */
.debug-player-image {
    border: 2px solid red;
    opacity: 0.8;
}

.debug-team-logo {
    border: 2px solid blue;
    opacity: 0.8;
}

.debug-site-logo {
    border: 2px solid green;
    opacity: 0.8;
}