/**
 * Widget Tipos de viaje — Buses JPS
 *
 * Tarjetas con foto a sangre y el texto encima, en carrusel Swiper (la librería
 * que ya trae Elementor). Si por cualquier motivo Swiper no está disponible, el
 * carrusel degrada a scroll nativo con scroll-snap: se sigue pudiendo navegar
 * arrastrando o con swipe.
 */

.jps-trips {
  --jps-trips-per: 3;
  --jps-trips-gap: 18px;
  /* Proporción de la tarjeta: vertical por defecto (retrato 3:4). */
  --jps-trips-ratio: 3 / 4;
  --jps-trips-min-h: 300px;
  --jps-trips-radius: 6px;
  --jps-trips-overlay: rgba(22, 36, 43, .55);
  --jps-trips-label: var(--jps-amber, #f2a93b);
  --jps-trips-arrow-bg: var(--jps-white, #fffdf9);
  --jps-trips-arrow-color: var(--jps-ink, #16242b);

  position: relative;
}

/* --- Pista --- */
.jps-trips__track {
  overflow: hidden;
  /* Sin esto, la sombra/escala del hover se recorta contra el borde. */
  padding-bottom: 4px;
}

.jps-trips__wrapper {
  display: flex;
}

/* Respaldo sin Swiper: scroll nativo con snap y anchos por CSS. */
.jps-trips--fallback .jps-trips__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.jps-trips--fallback .jps-trips__track::-webkit-scrollbar {
  display: none;
}

.jps-trips--fallback .jps-trips__wrapper {
  gap: var(--jps-trips-gap);
}

.jps-trips--fallback .jps-trips__card {
  flex: 0 0 calc((100% - (var(--jps-trips-gap) * (var(--jps-trips-per) - 1))) / var(--jps-trips-per));
  scroll-snap-align: start;
}

/* --- Tarjeta --- */
.jps-trips__card {
  position: relative;
  /* La altura sale del ancho de la tarjeta, así la proporción se mantiene en
     cualquier breakpoint. El mínimo evita tarjetas diminutas con 4-5 por vista. */
  aspect-ratio: var(--jps-trips-ratio);
  min-height: var(--jps-trips-min-h);
  height: auto;
  min-width: 0;
  border-radius: var(--jps-trips-radius);
  overflow: hidden;
  background: var(--jps-ink, #16242b);
}

.jps-trips__link {
  display: block;
  height: 100%;
  color: inherit;
}

/* Foto a sangre. */
.jps-trips__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.jps-trips__card:hover .jps-trips__img {
  transform: scale(1.06);
}

/* Velo para que el texto se lea sobre cualquier foto: más denso abajo. */
.jps-trips__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--jps-trips-overlay) 0%, rgba(22, 36, 43, 0) 65%),
    linear-gradient(to top, rgba(22, 36, 43, .25), rgba(22, 36, 43, .25));
  transition: opacity .3s ease;
}

.jps-trips__card:hover .jps-trips__overlay {
  opacity: .85;
}

@media (prefers-reduced-motion: reduce) {

  .jps-trips__img,
  .jps-trips__overlay {
    transition: none;
  }

  .jps-trips__card:hover .jps-trips__img {
    transform: none;
  }
}

/* --- Contenido --- */
.jps-trips__content {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px;
  color: var(--jps-white, #fffdf9);
}

.jps-trips__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--jps-font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--jps-trips-label);
}

.jps-trips__label svg {
  width: 15px;
  height: 15px;
}

.jps-trips__label i {
  font-size: 13px;
}

.jps-trips__title {
  margin: 0;
  font-family: var(--jps-font-body, sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
}

.jps-trips__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 253, 249, .82);
}

.jps-trips__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--jps-font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jps-trips-label);
  transition: gap .2s ease;
}

.jps-trips__card:hover .jps-trips__cta {
  gap: 12px;
}

.jps-trips__cta svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Navegación --- */
.jps-trips__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.jps-trips__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--jps-trips-arrow-bg);
  color: var(--jps-trips-arrow-color);
  border: 1px solid var(--jps-line, rgba(22, 36, 43, .14));
  border-radius: 999px;
  cursor: pointer;
  transition: var(--jps-transition, .2s ease);
}

.jps-trips__arrow:hover:not([disabled]):not(.swiper-button-disabled) {
  background: var(--jps-trips-arrow-color);
  color: var(--jps-trips-arrow-bg);
  border-color: var(--jps-trips-arrow-color);
}

/* Swiper marca los extremos con su propia clase; el fallback usa [disabled]. */
.jps-trips__arrow[disabled],
.jps-trips__arrow.swiper-button-disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

.jps-trips__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Puntos (bullets de Swiper o propios en el fallback) --- */
.jps-trips__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  /* Anula el posicionamiento absoluto de .swiper-pagination. */
  position: static;
  width: auto;
}

.jps-trips__dots .swiper-pagination-bullet,
.jps-trips__dot {
  width: 8px;
  height: 8px;
  margin: 0 !important;
  padding: 0;
  background: rgba(22, 36, 43, .22);
  border: 0;
  border-radius: 999px;
  opacity: 1;
  cursor: pointer;
  transition: var(--jps-transition, .2s ease);
}

.jps-trips__dots .swiper-pagination-bullet:hover,
.jps-trips__dot:hover {
  background: rgba(22, 36, 43, .4);
}

.jps-trips__dots .swiper-pagination-bullet-active,
.jps-trips__dot.is-active {
  width: 22px;
  background: var(--jps-orange, #e4572e);
}

/* =============================================================================
 * ESTILO DE NAVEGACIÓN "TRADICIONAL" (overlay)
 * -----------------------------------------------------------------------------
 * Flechas sobre el carrusel, una a cada lado y centradas verticalmente; puntos
 * centrados debajo. El viewport envuelve al track (sin recortar) y da el
 * contexto de posicionamiento a las flechas.
 * ============================================================================= */
.jps-trips__viewport {
  position: relative;
}

.jps-trips--nav-overlay .jps-trips__arrows {
  /* Contenedor no interactivo: sólo los botones reciben clics. */
  pointer-events: none;
}

.jps-trips--nav-overlay .jps-trips__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: auto;
  /* Fondo semitransparente (respeta el color configurable) + desenfoque, para
     que se integre sobre la foto sin perder legibilidad. */
  background: color-mix(in srgb, var(--jps-trips-arrow-bg) 78%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 16px rgba(22, 36, 43, .25);
}

.jps-trips--nav-overlay .jps-trips__arrow[data-jps-prev] {
  left: 14px;
}

.jps-trips--nav-overlay .jps-trips__arrow[data-jps-next] {
  right: 14px;
}

/* Puntos centrados debajo (anula el reparto izq./der. de la barra). */
.jps-trips--nav-overlay .jps-trips__nav {
  justify-content: center;
  margin-top: 16px;
}

/* El contenedor de puntos ocupa el ancho y centra sus propios bullets: así
   quedan centrados aunque Swiper le fuerce width:100% a la paginación. */
.jps-trips--nav-overlay .jps-trips__dots {
  width: 100%;
  margin: 0;
  justify-content: center;
}

@media (max-width: 900px) {
  .jps-trips__content {
    padding: 20px;
  }

  /* En móvil las flechas se acercan al borde para no tapar el contenido. */
  .jps-trips--nav-overlay .jps-trips__arrow[data-jps-prev] {
    left: 8px;
  }

  .jps-trips--nav-overlay .jps-trips__arrow[data-jps-next] {
    right: 8px;
  }
}