/* Handle: mkyi-image-swiper — versione con NAV a riga separata */
.mkyi-image-swiper{
  position: relative;
  width: 100%;
  overflow: hidden; /* evita strabordi orizzontali */
  --ratio-w: 875;
  --ratio-h: 600;

  /* dimensioni frecce */
  --nav-size: 70px;   /* desktop */
  --chev-rotate-prev: 180deg;
  --btn-gap: 12px;
}

/* Swiper */
.mkyi-image-swiper .mkyi-swiper{ overflow: hidden; }

/* Mantieni ratio 875x600 */
.mkyi-slide .mkyi-media{
  width: 100%;
  aspect-ratio: var(--ratio-w) / var(--ratio-h);
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.mkyi-slide .mkyi-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Fallback per browser senza aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .mkyi-slide .mkyi-media::before{ content:""; display:block; padding-top: calc(var(--ratio-h) / var(--ratio-w) * 100%); }
  .mkyi-slide .mkyi-media > img{ position:absolute; inset:0; }
}

/* Caption (card) */
.mkyi-slide .mkyi-caption{
  margin-top: 20px;
  color: #8C8C8C;
  font-family: "Helvetica Now Display", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  max-width: 80%;
}

/* Slide auto-height */
.mkyi-image-swiper .swiper-slide{ height:auto; }

/* -------- NAV ROW (sotto al carosello) -------- */
.mkyi-image-swiper .mkyi-nav-row{
  padding-top: 80px; /* distanza tra carosello e frecce (≈ >80px dalle card nel complesso) */
  padding-bottom: 25px;
  width: 100%;
  display: flex;
  justify-content: flex-end; /* frecce a destra */
  padding-right: 75px;
}
.mkyi-image-swiper .mkyi-nav{
  display:flex;
  align-items:center;
  gap: var(--btn-gap);
}

/* Bottoni con SVG di sfondo */
.mkyi-image-swiper .mkyi-nav .mkyi-button-prev,
.mkyi-image-swiper .mkyi-nav .mkyi-button-next{
  width: var(--nav-size);
  height: var(--nav-size);
  border-radius: 999px;
  background: #E0E0E3;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  overflow: hidden;
}

/* usa la tua icona come background */
.mkyi-image-swiper .mkyi-nav .mkyi-button-prev::after,
.mkyi-image-swiper .mkyi-nav .mkyi-button-next::after{
  content:"";
  width: 40%;              /* scala autom. nella bolla */
  height: 40%;
  background-image: url('/wp-content/uploads/2025/10/carousel-arrow.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
}

/* ruota la PREV */
.mkyi-image-swiper .mkyi-nav .mkyi-button-prev::after{
  transform: rotate(var(--chev-rotate-prev));
}

/* frecce del markup eventualmente presenti (SVG) non servono */
.mkyi-image-swiper .mkyi-nav svg{ display:none !important; }

.mkyi-image-swiper .mkyi-nav .mkyi-button-prev:hover,
.mkyi-image-swiper .mkyi-nav .mkyi-button-next:hover{ transform: scale(1.04); }

.mkyi-image-swiper .mkyi-nav .mkyi-button-prev.swiper-button-disabled,
.mkyi-image-swiper .mkyi-nav .mkyi-button-next.swiper-button-disabled{
  opacity:.45; cursor: default;
}

/* -------- Responsive -------- */
@media (max-width: 1200px){
  .mkyi-image-swiper{ --nav-size: 60px; }
}
@media (max-width: 767px){
	.mkyi-slide .mkyi-caption{font-size:18px}
  .mkyi-image-swiper{ --nav-size: 50px; }
  .mkyi-image-swiper .mkyi-nav-row{padding-top: 15px;padding-bottom: 5px;padding-right: 5px;}
  .mkyi-slide .mkyi-caption{

  max-width: 100%;
}
}