.svc-wrap { width: 100%; }

.svc-viewport{
  position: relative;
  overflow: hidden;
  height: var(--svc-viewport-h, 520px);
  border-radius: 16px;
}

/* Track base */
.svc-track{
  will-change: transform;
  animation-duration: var(--svc-speed, 28s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Pausa su hover */
.svc-wrap:hover .svc-track{
  animation-play-state: paused;
}

/* -------------------------
   VERTICALE (asse Y)
------------------------- */
.svc-wrap[data-svc-axis="y"] .svc-track{
  display:flex;
  flex-direction:column;
  animation-name: svcScrollY;
}

@keyframes svcScrollY{
  from{ transform: translateY(0); }
  to{ transform: translateY(-50%); }
}

/* Direzione verticale */
.svc-wrap[data-svc-axis="y"][data-svc-direction="down"] .svc-track{
  animation-direction: reverse;
}

/* spacing verticale */
.svc-wrap[data-svc-axis="y"] .svc-item{
  padding: 10px 0;
}

/* card verticale: width 100% */
.svc-wrap[data-svc-axis="y"] .svc-card{
  width: 100%;
  height: auto;
}

/* -------------------------
   ORIZZONTALE (asse X)
------------------------- */
.svc-wrap[data-svc-axis="x"] .svc-track{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  animation-name: svcScrollX;
}

@keyframes svcScrollX{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Direzione orizzontale */
.svc-wrap[data-svc-axis="x"][data-svc-direction="right"] .svc-track{
  animation-direction: reverse;
}

/* spacing orizzontale */
.svc-wrap[data-svc-axis="x"] .svc-item{
  padding: 0 10px;
  flex: 0 0 auto;
  height: 100%;
}

/* card orizzontale: height 100%, width derivata dal ratio */
.svc-wrap[data-svc-axis="x"] .svc-card{
  height: 100%;
  width: auto;
  aspect-ratio: var(--svc-card-ratio, 9 / 16);
  max-width: 100%;
}

/* -------------------------
   CARD comune
------------------------- */
.svc-card{
  position: relative;
  display:block;
  text-decoration:none;
  color: var(--svc-text, #fff);
  border-radius: 16px;
  overflow:hidden;
  aspect-ratio: var(--svc-card-ratio, 9 / 16);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  transform: translateZ(0);
}

/* Mantieni colore testo */
.svc-card:hover,
.svc-card:focus,
.svc-card:active{
  color: var(--svc-text, #fff);
}

.svc-bg{ position:absolute; inset:0; }
.svc-video{ width:100%; height:100%; object-fit:cover; display:block; }

.svc-image{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.svc-image.svc-fallback{
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
}

.svc-overlay{
  position:absolute; inset:0;
  background: var(--svc-overlay, rgba(0,0,0,0.55));
}

/* Contenuto in basso */
.svc-content{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  padding: 18px 18px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
}

.svc-title{
  margin: 0 0 6px !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  color: var(--svc-text, #fff) !important;
  font-weight: 700 !important;
}

.svc-desc p{
  margin:0;
  opacity:.92;
  font-size:14px;
  line-height:1.45;
  color: var(--svc-text, #fff);
}

.svc-empty{ padding:12px 0; opacity:.8; }