/**
 * Spacer Block - Académie des Étoiles
 */

.ade-spacer {
    width: 100%;
    position: relative;
}

/* Height variants */
.ade-spacer--small {
    height: var(--ade-space-xl);
}

.ade-spacer--medium {
    height: var(--ade-space-3xl);
}

.ade-spacer--large {
    height: 80px;
}

.ade-spacer--xlarge {
    height: 120px;
}

/* Optional visual indicator */
.ade-spacer__visual {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 100%;
}

.ade-spacer__dot {
    width: 6px;
    height: 6px;
    background: rgba(155, 81, 224, 0.2);
    border-radius: 50%;
}

/* Responsive - reduce spacing on mobile */
@media screen and (max-width: 768px) {
    .ade-spacer--small {
        height: var(--ade-space-lg);
    }

    .ade-spacer--medium {
        height: var(--ade-space-2xl);
    }

    .ade-spacer--large {
        height: 60px;
    }

    .ade-spacer--xlarge {
        height: 80px;
    }
}