/*
 * Carousel Hero — style.css
 *
 * Full-width breakout: el JS inline del bloque calcula document.body.clientWidth
 * y aplica width con !important directo en el elemento (el.style.setProperty),
 * evitando modificar documentElement (lo que disparaba observers del tema).
 * margin-left negativo alinea el borde izquierdo al viewport.
 *
 * FOUC fix: ucb-carousel-wrap--loading oculta slides 2+ hasta que el
 * carousel JS inicialice (MutationObserver o fallback 1.5 s).
 */

/* Full-width breakout base: max-width none, width la pone el JS inline */
.ucb-carousel-breakout {
    max-width: none !important;
    box-sizing: border-box;
}

/* FOUC: mientras carga, solo muestra el primer slide */
.ucb-carousel-wrap--loading .primary-carousel_item ~ .primary-carousel_item {
    display: none;
}

/*
 * Z-index: forzar el contenido de texto encima del ::before de gradiente.
 * IMPORTANTE: NO agregar position aqui — el CDN del tema ya aplica
 * position:absolute con la misma especificidad; si agregáramos position:relative
 * lo sobreescribiría y el texto quedaría en flujo normal bajo la imagen.
 * z-index solo funciona porque la CDN ya da position:absolute al elemento.
 */
.ucb-carousel-breakout .primary-carousel_item-content {
    z-index: 2;
}

/*
 * Tipo "Con Card": .uc-hero tiene height:480px/560px propio del CDN.
 * Dentro de .primary-carousel_item (height:508px) necesita llenar el 100%
 * para que .uc-hero__content y .uc-hero__card-container se posicionen bien.
 */
.ucb-carousel-breakout .primary-carousel_item .uc-hero {
    height: 100%;
}