/* Pro Effects — Sticky Scroll (scrollytelling: text flow + sticky image column)

   Architecture:
   - Single .pe-ss grid with 2 columns (split configurable via --pe-ss-split).
   - Items live in column 1 in normal flow, min-height driven by --pe-ss-item-height.
   - Images live in column 2, span all rows (grid-row: 1 / -1), position: sticky.
     All images overlap in the same cell and each sticks to top: 0; height: 100vh.
     Reveal state is driven by JS (clip-path/opacity per item scroll position).
   - First/last items get auto margin to center the block vertically against the
     sticky image at any --pe-ss-item-height between 60vh and 100vh.
   - Mobile (<768px): grid collapses to single-column flex. Markup is already
     interleaved (img0, item0, img1, item1, ...) so the stack is natural.
*/

.pe-ss {
  display: grid;
  grid-template-columns: var(--pe-ss-split, 50%) 1fr;
  column-gap: var(--pe-ss-gap, 64px);
  padding: 0 var(--pe-ss-pad-x, 80px);
  min-width: 0;
}

/* ═══ Text items (column 1, normal flow) ═══════════════════════════════ */
.pe-ss__item {
  grid-column: 1;
  min-height: var(--pe-ss-item-height, 80vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: inherit;
  gap: 16px;
  min-width: 0;
  padding: 24px 0;
}

/* Centrado vertical simétrico texto ↔ imagen.
   margin top/bottom = (100vh − item_height) / 2
   El primer y último item quedan centrados a viewport 50vh al entrar y salir
   de la sección (simétrico con la imagen centrada sticky). */
.pe-ss__item:first-of-type {
  margin-top:    max(0px, calc((100vh - var(--pe-ss-item-height, 80vh)) / 2));
}
.pe-ss__item:last-of-type {
  margin-bottom: max(0px, calc((100vh - var(--pe-ss-item-height, 80vh)) / 2));
}

/* ═══ Images (column 2, sticky full-viewport, inner centered) ══════════
   ARQUITECTURA CRÍTICA:
   - `.pe-ss__image` es 100vh sticky top:0 → su release coincide EXACTO con
     grid_bottom - 100vh = max_scroll de la sección. La imagen nunca se
     "despega antes" dejando desfase con el texto.
   - `.pe-ss__image-inner` es el visual real, con la altura que el usuario
     configure (30–100vh). Absolute centrado via calc dentro del 100vh outer.
   - Animación clip-path/opacity se aplica al outer (100vh), que clipea al
     inner. Resultado: imagen visible siempre centrada, release siempre en
     sync con el final del scroll de la sección. */
.pe-ss__image {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  will-change: clip-path, opacity;
}

.pe-ss__image-inner {
  position: absolute;
  top:    calc((100vh - var(--pe-ss-image-height, 84vh)) / 2);
  bottom: calc((100vh - var(--pe-ss-image-height, 84vh)) / 2);
  left: 0;
  right: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  pointer-events: auto;
}
.pe-ss__image--empty .pe-ss__image-inner { background: #1a1a1a; }

/* Mobile card wrapper. En desktop / mobile-static es transparente para el
   layout (display:contents): no genera caja, los hijos participan del grid/flex
   del .pe-ss padre. Solo en mobile-animated se vuelve un bloque sticky con
   posicion absoluta interna para los slots image+text. */
.pe-ss__mobile-card { display: contents; }

/* Pre-JS fallback: hide stacked images (except the first) before JS initializes. */
.pe-ss:not(.pe-ss--ready) .pe-ss__image:not([data-index="0"]) {
  clip-path: inset(100% 0 0 0);
}

/* ═══ Text element styles (tab Style aplica encima) ════════════════════ */
.pe-ss__eyebrow {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.6;
  margin: 0;
}
.pe-ss__title {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.pe-ss__desc {
  margin: 0;
  line-height: 1.6;
  opacity: 0.85;
}
.pe-ss__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  font-size: 0.9rem;
  width: fit-content;
  transition: opacity 0.3s ease;
}
.pe-ss__btn:hover { opacity: 0.7; }
.pe-ss__btn-icon { display: inline-flex; align-items: center; }
.pe-ss__btn-icon svg { width: 1em; height: 1em; fill: currentColor; }
.pe-ss__btn-icon i   { font-size: inherit; }

/* ═══ Mobile — modo static (default, comportamiento existente) ═══ */
@media (max-width: 767px) {
  .pe-ss:not(.pe-ss--mobile-animated) {
    display: flex;
    flex-direction: column;
    gap: 0; /* spacing controlled by margin-top via Mobile gap controls */
    padding: 0 var(--pe-ss-pad-x, 20px);
  }
  .pe-ss:not(.pe-ss--mobile-animated) .pe-ss__item,
  .pe-ss:not(.pe-ss--mobile-animated) .pe-ss__image {
    grid-column: auto;
    grid-row: auto;
  }
  .pe-ss:not(.pe-ss--mobile-animated) .pe-ss__item {
    min-height: auto;
    padding: 0;
    /* margin-top viene del control mobile_static_gap_imgtext */
  }
  /* Mobile static — modelo simple sin variable CSS:
     wrapper toma su altura del var() del control image_height, y si por alguna
     razon la variable no esta inyectada (responsive quirk de Elementor con
     size_units=['vh']) el fallback 84vh aplica.
     Display flex stretch para que el inner herede el size del wrapper sin
     depender del calc((100vh - var)/2) del CSS base que rompe en mobile. */
  .pe-ss:not(.pe-ss--mobile-animated) .pe-ss__image {
    position: relative;
    top: auto;
    height: var(--pe-ss-image-height, 84vh) !important;
    width: 100%;
    z-index: auto !important;
    clip-path: none !important;
    opacity: 1 !important;
    display: flex;
    align-items: stretch;
    justify-content: center;
    /* Critico: el .pe-ss padre es flex-column en mobile-static. Sin esto, el
       wrapper se comprime de 84vh a ~100px porque la suma de heights supera
       el container Elementor (~1130px) y flex-shrink: 1 default colapsa. */
    flex-shrink: 0;
  }
  /* Inner sale de absolute + top/bottom calc; pasa a relative llenando el flex parent.
     Reset de posicionamiento (position/inset/margin) con !important para vencer
     el CSS base (position:absolute con calcs en vh) y el `margin: 0 auto` que
     inyecta el control image_width. width queda libre para que la cascada
     responsive de Elementor (image_width per-device) aplique; centrado horizontal
     lo da el flex parent (justify-content: center). height: 100% deja que el inner
     llene el wrapper, cuya altura viene del control image_height via --pe-ss-image-height. */
  .pe-ss:not(.pe-ss--mobile-animated) .pe-ss__image-inner {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    height: var(--pe-ss-image-height, 84vh) !important;
    margin: 0 !important;
  }
}

/* ═══ Mobile — modo animated (single-slot card con offset) ═══
   Arquitectura:
   - .pe-ss--mobile-animated outer es relative + min-height = N viewports → da
     scroll-room. N viene de --pe-ss-count (inyectado inline por PHP).
   - .pe-ss__mobile-card pasa de display:contents a sticky block. Top offset
     y altura dependen de --pe-ss-mobile-offset-top.
   - Imagen ocupa la zona superior (--pe-ss-mobile-img-h). Todas las imagenes
     se apilan absolutas en ese slot; JS controla opacity/clip-path por la
     transicion configurada (image_transition).
   - Texto ocupa el resto del card. Todos los items se apilan absolutos en
     ese slot; JS aplica opacity (fade entre items). */
@media (max-width: 767px) {
  .pe-ss--mobile-animated {
    --pe-ss-mobile-offset-top: 0px;
    position: relative;
    display: block;
    grid-template-columns: none;
    column-gap: 0;
    padding: 0;
    min-height: calc(var(--pe-ss-count, 4) * (100dvh - var(--pe-ss-mobile-offset-top)));
  }
  .pe-ss--mobile-animated .pe-ss__mobile-card {
    /* Grid de 2 filas: imagen (altura fija del control) + texto (auto, fit-content).
       align-content: center centra todo el par como unidad en el card,
       sin dejar espacio vacio si el contenido es mas corto que 100dvh. */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--pe-ss-image-height, 50vh) auto;
    align-content: center;
    row-gap: 0;
    position: sticky;
    top: var(--pe-ss-mobile-offset-top);
    height: calc(100dvh - var(--pe-ss-mobile-offset-top));
    overflow: hidden;
  }
  /* Imagen: todas en la misma celda (row 1, col 1) → stack via CSS Grid.
     Altura de la fila = --pe-ss-image-height. Inset lateral via margin. */
  .pe-ss--mobile-animated .pe-ss__image {
    grid-column: 1; grid-row: 1;
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;
    width: auto; height: 100%;
    margin: 0 var(--pe-ss-pad-x, 20px);
    will-change: opacity, clip-path;
  }
  /* Toggle "Image full width": elimina inset lateral solo de la imagen. */
  .pe-ss--mobile-img-full .pe-ss__image {
    margin-left: 0;
    margin-right: 0;
  }
  .pe-ss--mobile-animated .pe-ss__image-inner {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
  /* Texto: todos los items en la misma celda (row 2, col 1) → stack via CSS Grid.
     La altura de la fila = max contenido del item activo. Inset lateral via margin. */
  .pe-ss--mobile-animated .pe-ss__item {
    grid-column: 1; grid-row: 2;
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;
    margin: 0 var(--pe-ss-pad-x, 20px);
    padding: 0;
    min-height: 0;
    opacity: 0;
    will-change: opacity;
  }
  /* Pre-JS fallback: el primer item visible. */
  .pe-ss--mobile-animated:not(.pe-ss--ready) .pe-ss__item[data-index="0"] {
    opacity: 1;
  }
}

/* ═══ Reduced motion ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pe-ss__btn { transition: none; }
}