/* ==========================================================================
   sliders/slider-projects.css — Slider de proyectos con scrub interno
   --------------------------------------------------------------------------
   Sumario:
   - Slide editorial (foto/vídeo + caption inferior con tag/título/cliente).
   - Stack de frames apilados: el activo con opacity 1, los demás con
     opacity 0 + transition. El JS alterna `.is-active` según la posición
     del cursor (scrub interno).
   - Cada frame puede ser <img class="mut-slide-img"> o
     <video class="mut-slide-vid"> — ambos comparten `data-offset` y
     `.is-active`. Hasta 5 frames (2 izq + base + 2 dcha).
   - Vídeo opcional: el JS gestiona play/pause según slide activo del
     Swiper + viewport + visibilidad de pestaña.
   - Logo opcional dentro del caption: <img class="mut-slide-logo">
     posicionado absoluto en la esquina inferior derecha. No requiere
     wrapper extra; si no hay logo, el caption queda intacto.
   - Móvil (pointer: coarse): scrub desactivado, se muestra la base.
     Si el slide tiene vídeo, el JS lo promueve a base.
   - Todos los selectores van con scope `[data-slider="projects"]` para no
     colisionar con el bs-carousel viejo, que también usa .bs-slide.
   ========================================================================== */


/* ---------- Sección contenedora (fondo oscuro editorial) ---------- */
[data-slider="projects"].mut-slider{
  background: var(--ink);
  padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 48px);
  overflow-x: hidden;        /* recorta los slides que peekean por los bordes */
}


/* ---------- Swiper container del slider ---------- */
[data-slider="projects"] .swiper{
  overflow: visible;          /* slides peekean, sección los recorta */
  padding: 0 var(--gutter);
  user-select: none;
}
[data-slider="projects"] .swiper-wrapper{
  align-items: stretch;
}

/* --------------------------------------------------------------------------
   2. VÍA 2: Flexbox Estructurado (Estabilidad Basada en Contenedor)
   -------------------------------------------------------------------------- */
/*
 * Usamos calc() para definir un 25% exacto menos el 'gap' del padre.
 * Asumiendo un gap de 20px en el contenedor padre.
 * Esta vía es mucho más robusta para diseños orquestados.
 */

/* ---------- Slide ---------- */
[data-slider="projects"] .mut-slide{
  /* ---------- width: clamp(420px, 42vw, 580px);---------- */
  width: calc(25% - 15px); /* 15px es el cálculo de (20px * 3 huecos) / 4 tarjetas */
  min-width: 280px;
  flex-shrink: 0;
}
[data-slider="projects"] .mut-slide-inner{
  position: relative;
  aspect-ratio: 6 / 9;
  
  overflow: hidden;
  background: #1e1c18;
  cursor: grab;
}
[data-slider="projects"] .mut-slide-inner:active{ cursor: grabbing; }


/* ---------- Stack de imágenes apiladas ---------- */
[data-slider="projects"] .mut-slide-stack{
  position: absolute;
  inset: 0;
  z-index: 1;
}
[data-slider="projects"] .mut-slide-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;        /* las imágenes nunca capturan el mousemove,
                                  lo hace el .mut-slide-inner */
}
[data-slider="projects"] .mut-slide-img.is-active{
  opacity: 1;
}


/* ---------- Vídeo en el stack (opcional, mismo comportamiento que img) ---------- */
/* Hereda el mismo posicionamiento absoluto que .mut-slide-img.
   El JS controla play/pause (no autoplay HTML) y, en móvil, lo promueve
   a base del slide. */
[data-slider="projects"] .mut-slide-vid{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  background: #1e1c18;          /* mismo fondo que .mut-slide-inner para evitar flash */
}
[data-slider="projects"] .mut-slide-vid.is-active{
  opacity: 1;
}


/* ---------- Caption (siempre por encima del stack) ---------- */
[data-slider="projects"] .mut-slide-caption{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: clamp(18px, 3vw, 32px);
  background: linear-gradient(
    to top,
    rgba(26,24,20,.92) 0%,
    rgba(26,24,20,.4) 55%,
    transparent 100%
  );
  pointer-events: none;        /* no roba el mousemove al stack */
}
[data-slider="projects"] .mut-slide-tag{
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(239,236,228,.5);
  margin-bottom: 8px;
}
[data-slider="projects"] .mut-slide-title{
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -.01em;
  color: var(--paper);
  margin: 0 0 6px;
  font-weight: 400;
  line-height: 1.1;
}
[data-slider="projects"] .mut-slide-title em{
  font-family: var(--body);
  font-style: italic;
  color: rgba(239,236,228,.55);
  font-size: .8em;
}
[data-slider="projects"] .mut-slide-client{
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.4;
  color: rgba(239,236,228,.62);
  margin: 0;
}


/* ---------- Logo opcional en el caption ---------- */
/* Posicionado absolute respecto al .mut-slide-caption (que ya es positioned).
   No requiere wrapper extra: si no existe el <img>, el caption no cambia.
   Asume logo en blanco/claro: el caption tiene gradient oscuro debajo.
   Si Manu necesita variantes mono, usar .mut-slide-logo--mono después. */
[data-slider="projects"] .mut-slide-logo{
  position: absolute;
  bottom: clamp(18px, 3vw, 32px);
  right:  clamp(18px, 3vw, 32px);
  transform: translate(10px, 10px);
  max-height: 48px;
  width: auto;
  max-width: 38%;
  /* Recorta 0px arriba/abajo, 20% a los lados   clip-path: inset(0 10% 0 10%); */
 
  object-fit: contain;
  object-position: right bottom;
  opacity: .9;
  z-index: 1;
}
@media (max-width: 768px){
  [data-slider="projects"] .mut-slide-logo{
    max-height: 32px;
    max-width: 25%;
  }
}


/* ---------- Móvil: scrub desactivado, sólo se ve la base ---------- */
@media (pointer: coarse){
  [data-slider="projects"] .mut-slide-img,
  [data-slider="projects"] .mut-slide-vid{
    transition: none;
  }
  /* el JS detecta pointer:coarse y no añade listeners de scrub.
     Si el slide tiene vídeo, el JS promueve <video> a .is-active
     en lugar de la imagen base. Si no hay vídeo, .is-active del
     HTML manda (imagen base). */
}