/* ==========================================
   MA Card Slider — v1.5 (PEEK = EDGE EXACTO)
   - 2 completas + peek EXACTO (= --cs-edge)
   - gutter izq/der = --cs-edge (alineado al container)
   - sin "doble peek" (no padding-right en el track)
   Requisito: --container definido (p.ej. 1120px o clamp)
   ========================================== */

.ma-cardslider{
  --cs-gap: 14px;
  --cs-visible: 2;

  /* container “seguro” */
  --cs-container: min(var(--container, 1120px), 100vw);

  /* edge = (100vw - container)/2 (mínimo 20px) */
  --cs-edge: max(20px, calc((100vw - var(--cs-container)) / 2));

  /* ✅ peek EXACTO = edge */
  --cs-peek: var(--cs-edge);

  --cs-card-radius: 20px;
  --cs-card-bg: rgba(255,255,255,.06);
  --cs-card-bd: rgba(255,255,255,.12);

  position: relative;
  width: 100%;
}

/* ✅ Si el slider está metido dentro de un contenedor centrado (ej .page),
   lo hacemos full-bleed para que 100vw sea real en ese bloque */
.page > .ma-cardslider{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.ma-cardslider__h{
	font-size: var(--fs-element-title);
	line-height: var(--lg-element-title);
}

/* VIEWPORT: el gutter vive aquí */
.ma-cardslider__viewport{
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  overscroll-behavior-x: contain;
	
  scroll-snap-type: x proximity;

  /* snap respetando el gutter */
  scroll-padding-left: var(--cs-edge);
  scroll-padding-right: var(--cs-edge);

  /* gutter izq/der */
  padding: 18px var(--cs-edge) 12px;

  scrollbar-width: none;
}



.ma-cardslider__viewport::-webkit-scrollbar{ display:none; }

/* TRACK */
.ma-cardslider__track{
  display: grid;
  grid-auto-flow: column;
  gap: var(--cs-gap);
  width: max-content;

  /* ✅ NO padding-right peek -> si lo pones, duplicas peek y rompes el final */
  padding: 0;

  /* ✅ card width: (container - gaps - peek) / visibles  */
  grid-auto-columns: max(240px, calc(
    (var(--cs-container) - ((var(--cs-visible) - 1) * var(--cs-gap)) - var(--cs-peek))
    / var(--cs-visible)
  ));
}

/* ITEM/CARD */
.ma-cardslider__item{
  scroll-snap-align: start;
  min-width: 240px;
}

.ma-cardslider__card{
  height: 100%;
  border: 1px solid var(--cs-card-bd);
  background: var(--cs-card-bg);
  border-radius: var(--cs-card-radius);
  overflow: hidden;
  /*box-shadow: 0 18px 60px rgba(0,0,0,.25);*/
  backdrop-filter: blur(12px) saturate(1.05);
}

.ma-cardslider__media{ aspect-ratio: 16 / 9; background: rgba(0,0,0,.12); }
.ma-cardslider__media img{ width:100%; height:100%; object-fit:cover; display:block; }

.ma-cardslider__body{ padding: 14px 14px 16px; }

.ma-cardslider__controls{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px var(--cs-edge) 22px;
}

/* Evita que el navegador "arrastre" la imagen */
.ma-cardslider__media img{
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none; /* opcional: si NO necesitas click directo en img */
}

/* Mejor comportamiento táctil: permite scroll vertical natural */
.ma-cardslider__viewport{
  touch-action: pan-y;
  cursor: grab;
}
.ma-cardslider__viewport.is-dragging{ cursor: grabbing; }

.ma-cardslider__media img{
  -webkit-user-drag: none;
  user-select: none;
}



@media (prefers-reduced-motion: reduce){
  .ma-cardslider__viewport{ scroll-behavior:auto !important; }
}