/**
 * Modulo Spaziatore
 * Stili per gestione spazi tra moduli
 */

/* ========================================
   BASE
   ======================================== */

.spaziatore {
    width: 100%;
    position: relative;
    display: block;
}

.spaziatore__content {
    width: 100%;
    height: 100%;
}

/* ========================================
   ALTEZZE (da CSS Variables)
   ======================================== */

.spaziatore--height-xs {
    height: var(--space-xs, 0.5rem);
}

.spaziatore--height-sm {
    height: var(--space-sm, 1rem);
}

.spaziatore--height-md {
    height: var(--space-md, 1.5rem);
}

.spaziatore--height-lg {
    height: var(--space-lg, 2rem);
}

.spaziatore--height-xl {
    height: var(--space-xl, 3rem);
}

.spaziatore--height-2xl {
    height: var(--space-2xl, 4rem);
}

.spaziatore--height-3xl {
    height: var(--space-3xl, 6rem);
}

.spaziatore--height-4xl {
    height: var(--space-4xl, 8rem);
}

.spaziatore--height-5xl {
    height: var(--space-5xl, 19rem);
}

/* ========================================
   BACKGROUND TYPES
   ======================================== */

/* Trasparente (default) */
.spaziatore--bg-transparent {
    background: transparent;
}

/* Colori Solidi */
.spaziatore--bg-color.spaziatore--color-primary {
    background-color: var(--bg-primary, #0b0b15);
}

.spaziatore--bg-color.spaziatore--color-glass {
    background-color: var(--bg-glass, rgba(255, 255, 255, 0.05));
}

.spaziatore--bg-color.spaziatore--color-glass-hover {
    background-color: var(--bg-glass-hover, rgba(255, 255, 255, 0.08));
}

/* Gradienti */
.spaziatore--bg-gradient.spaziatore--gradient-dark {
    background: var(--gradient-dark, linear-gradient(135deg, #0c0c19 0%, #1a1a2e 100%));
}

.spaziatore--bg-gradient.spaziatore--gradient-hero {
    background: var(--gradient-hero, linear-gradient(135deg, rgb(8 8 15 / 80%) 0%, rgb(64 64 79 / 80%) 100%));
}

/* Background Image */
.spaziatore--bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

@media (max-width: 768px) {
    /* Riduci altezze su mobile */
    .spaziatore--height-3xl {
        height: var(--space-2xl, 4rem);
    }

    .spaziatore--height-4xl {
        height: var(--space-3xl, 6rem);
    }

    .spaziatore--height-5xl {
        height: var(--space-4xl, 8rem);
    }
}

@media (max-width: 480px) {
    /* Riduci ulteriormente su mobile piccolo */
    .spaziatore--height-xl {
        height: var(--space-lg, 2rem);
    }

    .spaziatore--height-2xl {
        height: var(--space-xl, 3rem);
    }

    .spaziatore--height-3xl {
        height: var(--space-xl, 3rem);
    }

    .spaziatore--height-4xl {
        height: var(--space-2xl, 4rem);
    }

    .spaziatore--height-5xl {
        height: var(--space-3xl, 6rem);
    }
}

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

/* Screen reader only */
.spaziatore[aria-hidden="true"] {
    pointer-events: none;
}