/*	–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	CORE/HERO-SLIDER/CLASSES.CSS
	––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

/**
 * VISIOFRAMEWORK
 * This file is part of VISIOFRAMEWORK.
 * @package		visioframework
 * @author		Agência Visio <contato@agenciavisio.com.br>
 * @copyright	Copyright (c) 2023-present. M. Souza & Souza LTDA. (CNPJ: 21.284.748/0001-33). All rights reserved.
 * @license		Proprietary
 * @link		https://www.agenciavisio.com.br
 */

.hero-slider--outer>.swiper-pagination {
	position: absolute !important;
}

/* CLS-baseline #1 — overlay margin: render the negative top margin from first paint
   so the slider doesn't jump 100-150px when setSliderPosition() (in classes.php draw())
   applies the exact runtime-measured value. JS overrides this via inline `style`. */
.hero-slider--outer.platform-mobile {
	margin-top: var(--hero-overlay-offset-mobile);
}

.hero-slider--outer.platform-desktop {
	margin-top: var(--hero-overlay-offset-desktop);
}

/* CLS-baseline #2 — Swiper-mimicking dimensions: swiper-bundle.min.css is loaded
   deferred (preload + activation), so before it applies, the slider has no flex/
   overflow rules. With multiple slides each at vh-100 (from hero-image config), they
   stack vertically -> slider becomes N*100vh tall. Once swiper-bundle.min.css applies
   `display: flex` + `overflow: hidden`, slider collapses to 100vh -> huge layout shift
   for everything below it. These rules give the slider Swiper's basic layout from
   first paint; the actual swiper-bundle.min.css later adds transitions/transforms on
   top without conflicting (matching specificity, same property values). */
.hero-slider--outer {
	position: relative;
	overflow: hidden;
}

.hero-slider--inner {
	display: flex;
}

.hero-slider--slide {
	flex: 0 0 100%;
	min-width: 0;
}