/* v1.1.0 — Carrusel d'imatges amb títol i enllaç */

.cards-carousel { position: relative; width: 100%; overflow: hidden; }
.cards-viewport { width: 100%; overflow: hidden; }

.cards-track {
  display: flex;
  gap: 0; /* Sense espais entre imatges */
  will-change: transform;
  transition: transform .5s ease; /* s'actualitza via JS segons data-speed */
}

.cards-slide { flex: 0 0 auto; position: relative; }

.cards-card { display:block; color:inherit; text-decoration:none; }
.cards-figure { position:relative; width:100%; margin:0; }

/* Ratio variable: --ratio (ex: 3/2) */
.cards-figure::before {
  content:"";
  display:block;
  width:100%;
  padding-top: calc(100% / (var(--ratio, 3/2)));
  aspect-ratio: var(--ratio, 3/2);
}

/* Si s'ha passat height, forcem alçada fixa */
.cards-carousel[style*="--fixed-h"] .cards-figure { height: var(--fixed-h); }
.cards-carousel[style*="--fixed-h"] .cards-figure::before { padding-top: 0; aspect-ratio: auto; }

.cards-figure img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Caption a la part inferior, centrat. Color via --cap-color (white/blau) */
.cards-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 12px;
  text-align:center; font-weight:700; line-height:1.2;
  color: var(--cap-color, #ffffff);
  font-family: "Playfair Display";
    font-size: 20px;   
  background: linear-gradient(to top, rgba(0,0,0,.32), rgba(0,0,0,0));
}

/* Fletxes overlay: fons blanc 0.6 i icona blava */
.cards-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5;
  width:48px; height:48px; border-radius:999px; border:0;
  background: rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.cards-btn svg{ width:26px; height:26px; color:#1e4db7; }
.cards-prev{ left:12px; }
.cards-next{ right:12px; }

/* Evitem saltets per antialiasing */
.cards-track { -webkit-font-smoothing: antialiased; }