/*
 * Velvers Elementor plugin — shared widget styles
 *
 * Defines CSS classes emitted by widget render() that are not present in any
 * per-block compiled SCSS file. Each block's own SCSS handles internal padding;
 * these classes exist at the outer <section> level.
 */

/*
 * In Elementor, all widget sections are rendered server-side. The theme's lazy-loader
 * JS adds .loaded (which triggers fadeIn) when it observes the block entering the viewport.
 * If the JS does not run (wrong context, failed import, etc.), elements stay at opacity:0.
 *
 * Scoped to .elementor-widget-container so Gutenberg-rendered pages are unaffected.
 */
.elementor-widget-container [data-assetkey].lazy-fade,
.elementor [data-assetkey].lazy-fade {
    opacity: 1;
}

/*
 * Applied when a widget uses the site-wide block padding CSS vars.
 * Hero-multi-layout is always edge-to-edge, so no outer padding is added here.
 * Other blocks that need outer padding declare it inside their own SCSS.
 */
.global-block-padding {
    /* intentionally empty — blocks manage their own internal spacing */
}

/*
 * Applied when a widget overrides the global padding with explicit values
 * set via the Elementor panel controls. The custom vars are written as
 * inline style on the same element.
 */
.custom-block-padding {
    padding: var(--mobile-block-padding, 0);
}

@media screen and (min-width: 768px) {
    .custom-block-padding {
        padding: var(--tablet-block-padding, var(--mobile-block-padding, 0));
    }
}

@media screen and (min-width: 1024px) {
    .custom-block-padding {
        padding: var(--desktop-block-padding, var(--tablet-block-padding, var(--mobile-block-padding, 0)));
    }
}