/*
 * LT Sticky Image Change on Scroll — v2
 */

/* 1. VARIABLES */
.lt-sticky-scroll-widget {
    --lt-media-col: 45%;
    --lt-col-gap: 40px;
    --lt-transition: 500ms;
}

/* 2. LAYOUT FLEX (por defecto) */
.lt-sticky-scroll-widget.lt-layout-flex {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--lt-col-gap);
    width: 100%;
    position: relative;
}

.lt-sticky-scroll-widget.lt-layout-flex.lt-media-right {
    flex-direction: row-reverse;
}

.lt-sticky-scroll-widget.lt-layout-flex .sticky-image-container {
    flex: 0 0 var(--lt-media-col);
    max-width: var(--lt-media-col);
    position: sticky;
    top: 80px;
    align-self: flex-start;
    overflow: hidden;
}

.lt-sticky-scroll-widget.lt-layout-flex .scrolling-text-container {
    flex: 1 1 0%;
    min-width: 0;
}

/* 3. LAYOUT GRID */
.lt-sticky-scroll-widget.lt-layout-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* sobreescrito por Elementor via selector */
    gap: 4rem;
    align-items: start;
    width: 100%;
    position: relative;
}

/* Con media a la derecha en grid: invertir orden visual */
.lt-sticky-scroll-widget.lt-layout-grid.lt-media-right .sticky-image-container {
    order: 2;
}
.lt-sticky-scroll-widget.lt-layout-grid.lt-media-right .scrolling-text-container {
    order: 1;
}

.lt-sticky-scroll-widget.lt-layout-grid .sticky-image-container {
    position: sticky;
    top: 80px;
    align-self: start;
    overflow: hidden;
}

.lt-sticky-scroll-widget.lt-layout-grid .scrolling-text-container {
    min-width: 0;
}

/* 4. ASPECT RATIOS */
.lt-sticky-media-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.lt-sticky-media-wrapper.lt-ratio-16-9 { padding-top: 56.25%; }
.lt-sticky-media-wrapper.lt-ratio-4-3  { padding-top: 75%; }
.lt-sticky-media-wrapper.lt-ratio-1-1  { padding-top: 100%; }
.lt-sticky-media-wrapper.lt-ratio-3-4  { padding-top: 133.33%; }
.lt-sticky-media-wrapper.lt-ratio-auto { padding-top: 0; min-height: 200px; }

/* 5. MEDIOS APILADOS — crossfade usa --lt-transition */
.lt-sticky-media-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--lt-transition, 500ms) ease;
    pointer-events: none;
}

.lt-sticky-media-item.is-active {
    opacity: 1;
    pointer-events: auto;
}

.lt-ratio-auto .lt-sticky-media-item {
    position: relative;
    inset: auto;
    display: none;
}

.lt-ratio-auto .lt-sticky-media-item.is-active {
    display: block;
}

.lt-sticky-media-item .lt-sticky-img,
.lt-sticky-media-item .lt-sticky-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 6. COLUMNA DE TEXTO */
.lt-scrolling-text-container,
.scrolling-text-container {
    display: flex;
    flex-direction: column;
}

/* 7. BLOQUES DE TEXTO */
.lt-scroll-item {
    padding: 40px 0;
    box-sizing: border-box;
}

.lt-scroll-item-title {
    margin-bottom: 12px;
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.3;
}

.lt-scroll-item-content {
    line-height: 1.7;
}

.lt-scroll-item-content > *:last-child {
    margin-bottom: 0;
}

/* 8. INLINE MEDIA — ocultos en desktop */
.lt-scroll-item .lt-inline-media {
    display: none;
    width: 100%;
    overflow: hidden;
}

.lt-scroll-item .lt-inline-media img,
.lt-scroll-item .lt-inline-media video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 9. MODOS BREAKPOINT */
/* Estado base al activarse: layout columna única */
.lt-sticky-scroll-widget.lt-bp-active {
    display: flex !important;
    flex-direction: column !important;
    gap: 0;
}

.lt-sticky-scroll-widget.lt-bp-active .sticky-image-container {
    position: relative !important;
    top: auto !important;
    flex: none;
    max-width: 100%;
    width: 100%;
    order: unset;
}

.lt-sticky-scroll-widget.lt-bp-active .scrolling-text-container {
    width: 100%;
    order: unset;
}

/* Inline: medio se muestra encima de su texto */
.lt-sticky-scroll-widget.lt-bp-inline .sticky-image-container {
    display: none;
}
.lt-sticky-scroll-widget.lt-bp-inline .lt-scroll-item .lt-inline-media {
    display: block;
}

/* Hide media */
.lt-sticky-scroll-widget.lt-bp-hide-media .sticky-image-container { display: none; }
.lt-sticky-scroll-widget.lt-bp-hide-media .lt-scroll-item .lt-inline-media { display: none; }

/* First only */
.lt-sticky-scroll-widget.lt-bp-first-only .sticky-image-container {
    display: block;
    margin-bottom: 24px;
}
.lt-sticky-scroll-widget.lt-bp-first-only .lt-sticky-media-item { display: none; }
.lt-sticky-scroll-widget.lt-bp-first-only .lt-sticky-media-item:first-child {
    display: block;
    position: absolute;
    inset: 0;
    opacity: 1;
}
.lt-sticky-scroll-widget.lt-bp-first-only .lt-ratio-auto .lt-sticky-media-item:first-child {
    position: relative;
    inset: auto;
}
.lt-sticky-scroll-widget.lt-bp-first-only .lt-scroll-item .lt-inline-media { display: none; }

/* 10. ACCESIBILIDAD */
@media (prefers-reduced-motion: reduce) {
    .lt-sticky-media-item { transition: none; }
}

.lt-sticky-scroll-widget .lt-sticky-spacer {
    display: block;
    width: 100%;
    flex-shrink: 0;
}

.lt-sticky-scroll-widget {
    position: static; /* o simplemente quita el position: relative */
}