.elv-shc{
  width: 100%;
  height: 360px;
  --elv-gap: 10px;
}

/* Track */
.elv-shc__track{ height: 100%; }

/* Slide */
.elv-shc__slide{ height: 100%; }

/* Card */
.elv-shc__card{
  position: relative;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  cursor: pointer;
}

/* Link covers full card */
.elv-shc__link{
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Background layer */
.elv-shc__media{
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Image always covers */
.elv-shc__bg{
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

/* Video always covers */
.elv-shc__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

/* Overlay */
.elv-shc__overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.76) 100%);
  opacity: .45; /* controlled by Elementor */
}

/* Content */
.elv-shc__content{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  color: #fff;
}

.elv-shc__title{
  display: block;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.elv-shc__desc{
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  opacity: .92;
  max-width: 420px;
}

/* Arrow */
.elv-shc__arrow{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 28px;
  opacity: .92;
  transition: transform .25s ease, opacity .25s ease;
}

.elv-shc__arrow svg{
  width: 100%;
  height: 100%;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.45));
}

/* =========================
   DESKTOP: 5 columns + expand on hover
========================= */
@media (min-width: 768px){

  /* Desktop is NOT swiper (prevents swiper inline width issues) */
  .elv-shc[data-mode="desktop"] .swiper-wrapper{
    display: flex;
    height: 100%;
    gap: var(--elv-gap);
    overflow: hidden;
  }

  /* 5 equal columns */
  .elv-shc[data-mode="desktop"] .swiper-slide{
    height: 100%;
    width: auto !important;
    min-width: 0;
    flex: 1 1 0;
    transition: flex .28s ease;
  }

  /* Active expands */
  .elv-shc[data-mode="desktop"] .swiper-slide.is-active{
    flex: 2.2 1 0; /* increase to expand more */
  }

  /* Only active shows description */
  .elv-shc[data-mode="desktop"] .elv-shc__card:not(.is-active) .elv-shc__desc{
    display: none;
  }

  .elv-shc__card.is-active .elv-shc__arrow,
  .elv-shc__card:hover .elv-shc__arrow{
    transform: translate(4px, -4px);
    opacity: 1;
  }
}

/* =========================
   MOBILE: carousel 1.7 slides
========================= */
@media (max-width: 767px){
  .elv-shc{ height: auto; }
  .elv-shc[data-mode="mobile"] .elv-shc__track{ height: auto; }
  .elv-shc[data-mode="mobile"] .elv-shc__card{ height: 320px; }

  /* Show desc on all cards on mobile */
  .elv-shc[data-mode="mobile"] .elv-shc__desc{
    display: block;
  }
}