/* ============================================================
   Sweet Slide 2026
   Prefijo: ss26-   (no conflicta con sss- del plugin anterior)

   NO hay media queries de show/hide aquí.
   La visibilidad de cada bloque se controla desde Cornerstone.
   ============================================================ */


/* ----------------------------------------------------------
   SLIDER — [ss26_slider]
   El shortcode genera: .ss26-slider-wrap > .ss26-mobile-viewport > .ss26-mobile-track > .ss26-mobile-slide × N
   ---------------------------------------------------------- */

.ss26-slider-wrap {
  width: 100%;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.ss26-mobile-viewport {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
}

.ss26-mobile-track {
  display: flex;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform 0.45s cubic-bezier(0.24, 0.76, 0.25, 1);
  padding-left: 16px;  /* margen izq de la primera foto */
}

.ss26-mobile-track.ss26-dragging {
  transition: none !important;
  cursor: grabbing;
}

/* Cada slide deja asomar 8 px del siguiente:
   ancho = 100% viewport − padding-left (16px) − gap/peek (8px) */
.ss26-mobile-slide {
  flex: 0 0 calc(100% - 16px - 8px);
  box-sizing: border-box;
  margin-right: 8px;
}

.ss26-mobile-slide img {
  display: block;
  width: 100%;
  height: auto;
}


/* ----------------------------------------------------------
   DESKTOP GALLERY — [ss26_gallery_items] dentro de .ss26-gallery
   Layout: columna thumbs izq (ss26-thumbs-col) + featured derecha (ss26-featured)
   Cornerstone se encarga de ensamblar el layout flex con el gap de 32px.
   ---------------------------------------------------------- */

/* Cada thumb generado por el shortcode */
.ss26-item {
  display: block;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.ss26-item.is-active {
  border-color: currentColor;
}

.ss26-item img {
  display: block;
  width: 100%;
  height: auto;
}

.ss26-featured img {
  display: block;
  width: 100%;
  height: auto;
}


/* ----------------------------------------------------------
   SLIDER DESKTOP COMENTADO
   Si el cliente quiere slider también en desktop:
   1. Descomentar este bloque
   2. Usar [ss26_slider] en desktop también (o el mismo elemento con ambos breakpoints)

  .ss26-slider-wrap .ss26-mobile-track {
    padding-left: 0;
  }
  .ss26-mobile-slide {
    flex: 0 0 100%;
    margin-right: 0;
  }

   ---------------------------------------------------------- */