/* UNIFIED IMAGE STYLES */
/* Complements the unified-image-manager.js script */

/* Token image standardization */
.token-selector img,
img[data-token],
img[alt*="Token"] {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

/* Project image standardization */
.project-card img,
.project-image,
.project-image-container img,
img[alt*="Project"]:not(.admin-thumbnail) {
  width: 100% !important;
  height: 192px !important; /* Reduced height by 25% to match container */
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* Admin thumbnail specific styling */
.admin-thumbnail {
  width: 112px !important; /* 28 * 4px */
  height: 112px !important;
  object-fit: cover !important;
  border-radius: 0.5rem !important;
}

@media (min-width: 640px) {
  .admin-thumbnail {
    width: 128px !important; /* 32 * 4px */
    height: 128px !important;
  }
}

/* Prevent token images from appearing in project contexts */
.project-card img[src*="cryptologos.cc"],
.project-card img[src*="cdn.shopify.com"][src*="optimism-ethereum-op-logo.png"],
.project-image-container img[src*="cryptologos.cc"],
.project-image-container img[src*="cdn.shopify.com"][src*="optimism-ethereum-op-logo.png"] {
  display: none !important;
}

/* Ensure proper aspect ratios */
.project-image-container {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background-color: transparent;
}

/* Loading states */
img[data-unified-processed] {
  transition: opacity 0.3s ease-in-out;
}

/* Error handling */
img[src="data:image/png;base64"] {
  filter: grayscale(0.3);
  opacity: 0.8;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .token-selector img,
  img[data-token],
  img[alt*="Token"] {
    width: 18px !important;
    height: 18px !important;
  }
  
  .project-image-container {
    aspect-ratio: 4/3;
  }
}