/* ============================================================
   MT Projectes Slider — slider.css
   Animació: fade (cross-dissolve)
   ============================================================ */

/* ── Contenidor principal ────────────────────────────────── */
.mt-slider {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  user-select: none;
}

/* ── Track: alçades fixes per breakpoint ────────────────── */
.mt-slider__track {
  position: relative;
  width: 100%;
  height: 820px;         /* desktop */
}

@media (max-width: 1024px) {
  .mt-slider__track { height: 580px; }  /* middle */
}

@media (max-width: 767px) {
  .mt-slider__track { height: 420px; }  /* mobile */
  .mt-slider { max-height: 420px; }
}

/* ── Cada slide: tots apilats, invisible per defecte ─────── */
.mt-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Transició llarga i suau per al crossfade */
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

/* Slide entrant: puja a z-index 2, es fa visible */
.mt-slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/*
 * Slide sortint: va a z-index 3 (PER SOBRE del nou) i fa fade-out.
 * Quan el navegador calcula la transició, el punt de partida és
 * opacity: 1 (heredat de .is-active just eliminat), de manera
 * que la transició real és  1 → 0  mentre el nou (z-index 2)
 * transiciona  0 → 1  per sota. Resultat: crossfade real.
 */
.mt-slider__slide.is-leaving {
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}

/* ── Enllaç de tot el slide ──────────────────────────────── */
.mt-slider__link {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* títol a baix */
  align-items: flex-start;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  overflow: hidden;
}

/* ── Vídeo de fons ───────────────────────────────────────── */
.mt-slider__bg--video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ── Imatge de fons ─────────────────────────────────────── */
.mt-slider__bg--picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  margin: 0;
}

.mt-slider__bg--picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Gradient overlay per llegibilitat del títol ─────────── */
.mt-slider__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 0, 0, 0.45) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* ── Títol del projecte ──────────────────────────────────── */
.mt-slider__title {
  position: relative;
  z-index: 2;
  margin: 0;
  margin-left: -5px!important;
  margin-bottom: -10px!important;
  color: #ffffff;
  font-family: var(--e-global-typography-text-font-family, sans-serif);
  font-size: var(--e-global-typography-text-font-size, 1rem);
  font-weight: var(--e-global-typography-text-font-weight, 400);
  line-height: var(--e-global-typography-text-line-height, 1.4);
}

/* ── Paginació per punts ─────────────────────────────────── */
.mt-slider__pagination {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 10;
}

.mt-slider__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}

.mt-slider__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.mt-slider__dot.is-active {
  background: #ffffff;
  transform: scale(1.25);
}

@media (max-width: 767px) {
  .mt-slider__pagination {
    bottom: 16px;
    right: 16px;
  }
}

/* ── Respecta preferència de moviment reduït ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .mt-slider__slide {
    transition: none;
  }
}