/*
 * Classi di utilità.
 * Si scrivono nel campo "Classi CSS" di contenitori e widget Elementor.
 * Breakpoint come in Elementor: mobile fino a 767px, tablet fino a 1024px.
 */

/* Spaziature: 1-4 seguono --space-1 … --space-4 ------------------------- */
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }

.my-1 { margin-block: var(--space-1); }
.my-2 { margin-block: var(--space-2); }
.my-3 { margin-block: var(--space-3); }
.my-4 { margin-block: var(--space-4); }

.mx-auto { margin-inline: auto; }

.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }

.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }

.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }

.py-1 { padding-block: var(--space-1); }
.py-2 { padding-block: var(--space-2); }
.py-3 { padding-block: var(--space-3); }
.py-4 { padding-block: var(--space-4); }

.px-1 { padding-inline: var(--space-1); }
.px-2 { padding-inline: var(--space-2); }
.px-3 { padding-inline: var(--space-3); }
.px-4 { padding-inline: var(--space-4); }

/* Colori ----------------------------------------------------------------- */
.bg-primary { background-color: var(--primary); }
.bg-primary-dark { background-color: var(--primary-dark); }
.bg-secondary { background-color: var(--secondary); }
.bg-secondary-dark { background-color: var(--secondary-dark); }
.bg-gray-light { background-color: var(--gray-light); }

.text-primary,
.text-primary * { color: var(--primary); }

.text-secondary,
.text-secondary * { color: var(--secondary); }

.text-white,
.text-white * { color: #fff; }

/* Testo ------------------------------------------------------------------ */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }

.leading-tight { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

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

/* Misure e proporzioni --------------------------------------------------- */
.w-100,
.elementor-element.w-100 > * { width: 100%; }

.ratio-43 { aspect-ratio: 4 / 3; }
.ratio-169 { aspect-ratio: 16 / 9; }
.ratio-11 { aspect-ratio: 1; }

.object-cover img { object-fit: cover; width: 100%; height: 100%; }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-none { border-radius: 0; }

/* Griglia che va a capo da sola: imposta --min-col-size sul contenitore. */
.auto-grid {
	--min-col-size: 320px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--min-col-size), 100%), 1fr));
}

/* Visibilità ------------------------------------------------------------- */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

@media (max-width: 767px) {
	.hidden-mobile { display: none !important; }
}

@media (max-width: 1024px) {
	.hidden-tablet-down { display: none !important; }
}

@media (min-width: 1025px) {
	.hidden-desktop { display: none !important; }
}

/* Movimento -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.rotate { animation: hf-rotate 15s linear infinite; }
}

@keyframes hf-rotate {
	to { transform: rotate(360deg); }
}