/* ========================================
   UNIFIED BRAND IMAGE SYSTEM
   ======================================== */

/* Core brand image container */
.brand-image-container {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 228, 181, 0.2);
	border-radius: 8px;
}

/* Size variants */
.brand-image-container.size-xs {
	width: 32px;
	height: 32px;
	padding: 2px;
}

.brand-image-container.size-sm {
	width: 48px;
	height: 48px;
	padding: 4px;
}

.brand-image-container.size-md {
	width: 64px;
	height: 64px;
	padding: 6px;
}

.brand-image-container.size-lg {
	width: 96px;
	height: 96px;
	padding: 8px;
}

.brand-image-container.size-xl {
	width: 128px;
	height: 128px;
	padding: 10px;
}

/* Flexible aspect ratio variants (no cropping) */
.brand-image-container.size-xs.flexible {
	width: 32px;
	height: auto;
}

.brand-image-container.size-sm.flexible {
	width: 48px;
	height: auto;
}

.brand-image-container.size-md.flexible {
	width: 64px;
	height: auto;
}

.brand-image-container.size-lg.flexible {
	width: 96px;
	height: auto;
}

.brand-image-container.size-xl.flexible {
	width: 128px;
	height: auto;
}

/* Flexible container image styling */
.brand-image-container.flexible .brand-image {
	width: 100%;
	height: auto;
	object-fit: none;
	object-position: center;
}

/* Brand image styling */
.brand-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	border-radius: 4px;
}

/* Transitions only for clickable images */
.brand-image-container.brand-image-clickable .brand-image {
	transition: var(--transition);
}

.brand-image-container.brand-image-clickable {
	transition: var(--transition);
}

/* Hover effects (only for clickable elements) */
.brand-image-container.brand-image-clickable:hover {
	border-color: var(--text-accent);
	background: rgba(255, 255, 255, 0.1);
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(252, 191, 73, 0.3);
	cursor: pointer;
}

.brand-image-container.brand-image-clickable:hover .brand-image {
	transform: scale(1.02);
}

/* No hover effects for profile/brand display images */
.brand-image-container:not(.brand-image-clickable) {
	cursor: default;
}

.brand-image-container:not(.brand-image-clickable):hover {
	transform: none;
	border-color: rgba(255, 228, 181, 0.2);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: none;
}

.brand-image-container:not(.brand-image-clickable):hover .brand-image {
	transform: none;
}

/* Shape variants */
.brand-image-container.round {
	border-radius: 50%;
}

.brand-image-container.round .brand-image {
	border-radius: 50%;
}

/* Loading state */
.brand-image-container.loading {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: loading-shimmer 1.5s infinite;
}

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

	100% {
		background-position: -200% 0;
	}
}

/* Error state */
.brand-image-container.error {
	background: rgba(255, 107, 107, 0.1);
	border-color: rgba(255, 107, 107, 0.3);
	color: var(--text-muted);
}

.brand-image-container.error::before {
	content: '🍺';
	font-size: 1.2em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.brand-image-container.error .brand-image {
	display: none;
}

/* Context-specific styling */

/* In lists/cards */
.card-item .brand-image-container {
	flex-shrink: 0;
	margin-right: 1rem;
}

/* In grid layouts */
.grid-list .brand-image-container {
	margin: 0 auto 1rem;
}

/* In profile headers */
.profile-summary .brand-image-container {
	flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.brand-image-container.size-xl {
		width: 96px;
		height: 96px;
		padding: 8px;
	}

	.brand-image-container.size-lg {
		width: 80px;
		height: 80px;
		padding: 6px;
	}
}

@media (max-width: 480px) {
	.brand-image-container.size-lg {
		width: 64px;
		height: 64px;
		padding: 6px;
	}

	.brand-image-container.size-md {
		width: 48px;
		height: 48px;
		padding: 4px;
	}

	.card-item .brand-image-container {
		margin-right: 0.5rem;
	}
}

/* ========================================
   LEGACY CLASS MIGRATIONS
   ======================================== */

/* Gradually replace these with the new system */
.brand-logo {
	/* Keep existing functionality but improve */
	max-width: 64px;
	max-height: 64px;
	min-width: 32px;
	min-height: 32px;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 228, 181, 0.2);
	border-radius: 6px;
	padding: 4px;
	transition: var(--transition);
	display: block;
}

.brand-logo:hover {
	transform: scale(1.05);
	border-color: var(--text-accent);
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 4px 12px rgba(252, 191, 73, 0.3);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.brand-image-clickable {
	cursor: pointer;
}

.brand-image-clickable:hover {
	transform: scale(1.08);
}

.brand-image-inline {
	display: inline-flex;
	vertical-align: middle;
	margin: 0 0.25rem;
}

/* ========================================
   DIRECT IMAGE CLASSES (NO CONTAINER)
   ======================================== */

/* Clean, simple brand image classes without containers */
.brand-image-xs {
	max-width: 32px;
	height: auto;
	object-fit: contain;
	display: block;
}

.brand-image-sm {
	max-width: 48px;
	height: auto;
	object-fit: contain;
	display: block;
}

.brand-image-md {
	max-width: 64px;
	height: auto;
	object-fit: contain;
	display: block;
}

.brand-image-lg {
	max-width: 96px;
	height: auto;
	object-fit: contain;
	display: block;
}

.brand-image-xl {
	max-width: 140px;
	max-height: 140px;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
	display: block;
	border-radius: 6px;
	border: 2px solid var(--text-accent);
	background: rgba(255, 255, 255, 0.1);
	padding: 0;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
	flex-shrink: 0;
}