/**
 * CLM Utility — helper classes, animations, badges.
 * Mobile-first, low-specificity single-purpose utilities.
 */

/* ---------------------------------------------------------------------
   Spacing utilities (margin/padding), abbreviated m/p + t/r/b/l/x/y
--------------------------------------------------------------------- */

.clm-m-0 { margin: 0; }
.clm-mt-1 { margin-top: var(--clm-space-1); }
.clm-mt-2 { margin-top: var(--clm-space-2); }
.clm-mt-3 { margin-top: var(--clm-space-3); }
.clm-mt-4 { margin-top: var(--clm-space-4); }
.clm-mt-5 { margin-top: var(--clm-space-5); }
.clm-mt-6 { margin-top: var(--clm-space-6); }
.clm-mb-1 { margin-bottom: var(--clm-space-1); }
.clm-mb-2 { margin-bottom: var(--clm-space-2); }
.clm-mb-3 { margin-bottom: var(--clm-space-3); }
.clm-mb-4 { margin-bottom: var(--clm-space-4); }
.clm-mb-5 { margin-bottom: var(--clm-space-5); }
.clm-mb-6 { margin-bottom: var(--clm-space-6); }

.clm-p-0 { padding: 0; }
.clm-p-2 { padding: var(--clm-space-2); }
.clm-p-3 { padding: var(--clm-space-3); }
.clm-p-4 { padding: var(--clm-space-4); }
.clm-p-5 { padding: var(--clm-space-5); }
.clm-p-6 { padding: var(--clm-space-6); }

/* ---------------------------------------------------------------------
   Text utilities
--------------------------------------------------------------------- */

.clm-text-center { text-align: center; }
.clm-text-left { text-align: left; }
.clm-text-right { text-align: right; }
.clm-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.clm-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.clm-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------------------------------------------------------------------
   Screen-reader only (accessible hidden text)
--------------------------------------------------------------------- */

.clm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------
   Badges
--------------------------------------------------------------------- */

.clm-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--clm-radius-pill);
	font-size: var(--clm-fs-caption);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.clm-badge--new {
	background: var(--clm-success-bg);
	color: var(--clm-success);
}

.clm-badge--price-drop {
	background: var(--clm-warning-bg);
	color: var(--clm-warning);
}

.clm-badge--sold {
	background: var(--clm-error-bg);
	color: var(--clm-error);
}

.clm-badge--sponsored {
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
}

.clm-badge--featured {
	background: var(--clm-accent);
	color: #fff;
}

/* ---------------------------------------------------------------------
   Dividers
--------------------------------------------------------------------- */

.clm-divider {
	border: none;
	border-top: 1px solid var(--clm-border);
	margin-block: var(--clm-space-5);
}

/* ---------------------------------------------------------------------
   Aspect ratio helpers (fallback for browsers without native support
   is unnecessary at this point given target browser matrix, but kept
   minimal/explicit for clarity)
--------------------------------------------------------------------- */

.clm-aspect-square { aspect-ratio: 1 / 1; }
.clm-aspect-video { aspect-ratio: 16 / 9; }
.clm-aspect-portrait { aspect-ratio: 9 / 16; }
.clm-aspect-4-3 { aspect-ratio: 4 / 3; }

/* ---------------------------------------------------------------------
   Animations
--------------------------------------------------------------------- */

@keyframes clm-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes clm-slide-up {
	from { transform: translateY(16px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

@keyframes clm-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.clm-animate-fade-in {
	animation: clm-fade-in var(--clm-duration-base) var(--clm-ease) both;
}

.clm-animate-slide-up {
	animation: clm-slide-up var(--clm-duration-slow) var(--clm-ease) both;
}

.clm-animate-pulse {
	animation: clm-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.clm-animate-fade-in,
	.clm-animate-slide-up,
	.clm-animate-pulse {
		animation: none;
	}
}

/* ---------------------------------------------------------------------
   Toast / inline alert
--------------------------------------------------------------------- */

.clm-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--clm-space-2);
	padding: var(--clm-space-3) var(--clm-space-4);
	border-radius: var(--clm-radius-sm);
	font-size: var(--clm-fs-body-sm);
}

.clm-alert--success {
	background: var(--clm-success-bg);
	color: var(--clm-success);
}

.clm-alert--error {
	background: var(--clm-error-bg);
	color: var(--clm-error);
}

.clm-alert--warning {
	background: var(--clm-warning-bg);
	color: var(--clm-warning);
}

/* ---------------------------------------------------------------------
   Native lazy-load helper class (pairs with loading="lazy" attribute)
--------------------------------------------------------------------- */

.clm-lazy {
	background: var(--clm-border);
}

.clm-lazy[data-loaded="true"] {
	background: none;
}

/* ---------------------------------------------------------------------
   Mobile share — trigger button + icon-row fallback
   (paired with clm-mobile-share.js)
--------------------------------------------------------------------- */

.clm-mobile-share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--clm-space-2);
	min-height: var(--clm-touch-min);
	padding-inline: var(--clm-space-4);
	border-radius: var(--clm-radius-pill);
	background: var(--clm-surface);
	border: 1px solid var(--clm-border);
	font-weight: 600;
	font-size: var(--clm-fs-body-sm);
	color: var(--clm-text);
}

.clm-mobile-share:hover {
	background: var(--clm-primary-tint-10);
}

.clm-share-fallback {
	display: flex;
	flex-wrap: wrap;
	gap: var(--clm-space-2);
	margin-top: var(--clm-space-2);
	animation: clm-fade-in var(--clm-duration-base) var(--clm-ease) both;
}

.clm-share-fallback__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--clm-touch-min);
	min-height: var(--clm-touch-min);
	padding-inline: var(--clm-space-3);
	border-radius: var(--clm-radius-pill);
	background: var(--clm-surface-raised);
	border: 1px solid var(--clm-border);
	color: var(--clm-text);
	font-weight: 700;
	font-size: var(--clm-fs-body-sm);
	text-decoration: none;
}

.clm-share-fallback__icon:hover {
	background: var(--clm-primary-tint-10);
	color: var(--clm-primary);
}