/**
 * ESS Utilities — Essential utility classes
 *
 * Display, Spacing, Text, Flex, Responsive Helpers, Accessibility
 *
 * @version 1.0.0
 */

/* ==========================================================================
   DISPLAY
   ========================================================================== */

.ess-hidden { display: none; }
.ess-block { display: block; }
.ess-inline-block { display: inline-block; }
.ess-inline { display: inline; }

.ess-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;
}

/* ==========================================================================
   SPACING
   ========================================================================== */

.ess-m-0 { margin: 0; }
.ess-m-2 { margin: var(--ess-space-2); }
.ess-m-4 { margin: var(--ess-space-4); }
.ess-m-6 { margin: var(--ess-space-6); }
.ess-m-8 { margin: var(--ess-space-8); }

.ess-p-0 { padding: 0; }
.ess-p-2 { padding: var(--ess-space-2); }
.ess-p-4 { padding: var(--ess-space-4); }
.ess-p-6 { padding: var(--ess-space-6); }
.ess-p-8 { padding: var(--ess-space-8); }

.ess-mt-2 { margin-top: var(--ess-space-2); }
.ess-mt-4 { margin-top: var(--ess-space-4); }
.ess-mt-6 { margin-top: var(--ess-space-6); }
.ess-mt-8 { margin-top: var(--ess-space-8); }
.ess-mt-12 { margin-top: var(--ess-space-12); }

.ess-mb-2 { margin-bottom: var(--ess-space-2); }
.ess-mb-4 { margin-bottom: var(--ess-space-4); }
.ess-mb-6 { margin-bottom: var(--ess-space-6); }
.ess-mb-8 { margin-bottom: var(--ess-space-8); }
.ess-mb-12 { margin-bottom: var(--ess-space-12); }

.ess-pt-4 { padding-top: var(--ess-space-4); }
.ess-pt-8 { padding-top: var(--ess-space-8); }
.ess-pb-4 { padding-bottom: var(--ess-space-4); }
.ess-pb-8 { padding-bottom: var(--ess-space-8); }

.ess-mx-auto { margin-inline: auto; }
.ess-my-4 { margin-block: var(--ess-space-4); }
.ess-my-8 { margin-block: var(--ess-space-8); }

/* ==========================================================================
   TEXT
   ========================================================================== */

.ess-text-center { text-align: center; }
.ess-text-left { text-align: left; }
.ess-text-right { text-align: right; }

.ess-text-xs { font-size: var(--ess-text-xs); }
.ess-text-sm { font-size: var(--ess-text-sm); }
.ess-text-lg { font-size: var(--ess-text-lg); }
.ess-text-xl { font-size: var(--ess-text-xl); }
.ess-text-2xl { font-size: var(--ess-text-2xl); }
.ess-text-3xl { font-size: var(--ess-text-3xl); }

.ess-font-medium { font-weight: var(--ess-weight-medium); }
.ess-font-semibold { font-weight: var(--ess-weight-semibold); }
.ess-font-bold { font-weight: var(--ess-weight-bold); }

.ess-text-muted { color: var(--ess-color-neutral-500); }
.ess-text-primary { color: var(--ess-color-primary); }
.ess-text-accent { color: var(--ess-color-accent); }
.ess-text-success { color: var(--ess-color-success); }
.ess-text-error { color: var(--ess-color-error); }
.ess-text-white { color: var(--ess-color-white); }

.ess-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

/* ==========================================================================
   RESPONSIVE HELPERS
   ========================================================================== */

/* Mobile-first: hide-mobile hides by default, shows at 768px+ */
.ess-hide-mobile { display: none !important; }

@media (min-width: 768px) {
	.ess-hide-mobile { display: revert !important; }
	.ess-hide-desktop { display: none !important; }
}

@media (min-width: 768px) {
	.ess-md-flex { display: flex; }
	.ess-md-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
	.ess-md-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.ess-lg-flex { display: flex; }
	.ess-lg-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.ess-lg-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

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

:focus-visible {
	outline: 3px solid var(--ess-color-orange);
	outline-offset: 2px;
	box-shadow: var(--ess-shadow-focus);
}

.ess-skip-link {
	position: absolute;
	top: -100%;
	left: var(--ess-space-4);
	padding: var(--ess-space-3) var(--ess-space-6);
	background: var(--ess-color-primary);
	color: var(--ess-color-white);
	border-radius: var(--ess-radius-md);
	font-weight: var(--ess-weight-semibold);
	z-index: var(--ess-z-skip);
	text-decoration: none;
}

.ess-skip-link:focus {
	top: var(--ess-space-4);
	color: var(--ess-color-white);
}

/* ==========================================================================
   MISC
   ========================================================================== */

.ess-divider {
	border: none;
	border-top: 1px solid var(--ess-color-border);
	margin-block: var(--ess-space-6);
}

.ess-relative { position: relative; }
.ess-overflow-hidden { overflow: hidden; }
.ess-w-full { width: 100%; }

/* ==========================================================================
   SCROLL-REVEAL ANIMATIONS (Progressive enhancement — respects reduced motion)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.ess-reveal {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}

	.ess-reveal--visible {
		opacity: 1;
		transform: translateY(0);
	}

	/* Staggered children animation */
	.ess-reveal-children > * {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.4s ease, transform 0.4s ease;
	}

	.ess-reveal-children--visible > * {
		opacity: 1;
		transform: translateY(0);
	}

	.ess-reveal-children--visible > *:nth-child(1) { transition-delay: 0ms; }
	.ess-reveal-children--visible > *:nth-child(2) { transition-delay: 100ms; }
	.ess-reveal-children--visible > *:nth-child(3) { transition-delay: 200ms; }
	.ess-reveal-children--visible > *:nth-child(4) { transition-delay: 300ms; }
	.ess-reveal-children--visible > *:nth-child(5) { transition-delay: 400ms; }
}

/* ==========================================================================
   CONTENT VISIBILITY — Skip rendering for off-screen sections.
   Improves initial paint on long pages (homepage, catalogo, store).
   ========================================================================== */

.ess-cv-auto {
	content-visibility: auto;
	contain-intrinsic-size: auto 500px;
}