.kv-carousel{ --kv-blue:#1f3B4D; --kv-white:#fff; --kv-radius:25px; --kv-gap:1rem; --kvc-per:3; --arrow-offset:-4rem; }
.kv-carousel{ position:relative; max-width:var(--content-width, 1320px); margin-inline:auto; }

/* Spacing and track */
.kv-carousel .kvc-viewport{ overflow:hidden; contain: layout paint; }
.kv-carousel .kvc-list{ display:flex; align-items:stretch; gap:var(--kv-gap); list-style:none; margin:0; padding:0; will-change: transform; }
.kv-carousel .kvc-slide{ transition: transform .55s ease, opacity .55s ease, filter .55s ease; flex: 0 0 calc((100% - (var(--kvc-per) - 1) * var(--kv-gap)) / var(--kvc-per)); }

/* Card */
.kv-card{ background:var(--kv-blue); border-radius:var(--kv-radius); overflow:hidden; display:flex; flex-direction:column; min-height:100%; box-shadow:0 10px 30px rgba(0,0,0,.08); }
.kv-card__media{ position:relative; aspect-ratio:16/9; background:rgba(31,59,77,.08); }
.kv-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.kv-card__body{ padding:1.35rem 1.4rem 1.5rem; }
.kv-card__title{ margin:0 0 .6rem; font-size:clamp(1.2rem, 2.1vw, 1.6rem); color:var(--kv-white); line-height:1.25; position:relative; }
.kv-card__text{ margin:0; color:rgba(255,255,255,.9); line-height:1.5; display:block; overflow:visible; -webkit-line-clamp:unset; -webkit-box-orient:unset; max-height:none; word-break:break-word; hyphens:auto; }

/* Focused center vs sides */
.kv-carousel .kvc-slide.is-active{ opacity:1; transform:perspective(1200px) rotateY(0deg) scale(1); filter:none; }
.kv-carousel .kvc-slide.is-prev{ opacity:.55; transform:perspective(1200px) rotateY(8deg) scale(.94); filter:saturate(.85); }
.kv-carousel .kvc-slide.is-next{ opacity:.55; transform:perspective(1200px) rotateY(-8deg) scale(.94); filter:saturate(.85); }
.kv-carousel .kvc-slide:not(.is-active):not(.is-prev):not(.is-next){ opacity:.35; transform:scale(.9); }

/* Arrows */
.kv-carousel .kvc-arrows{ position:absolute; top:45%; left:var(--arrow-offset,-4rem); right:var(--arrow-offset,-4rem); transform:translateY(-50%); display:flex; justify-content:space-between; align-items:center; pointer-events:none; z-index:3; }
.kv-carousel .kvc-arrow{
  position:relative;
  pointer-events:auto;
  padding:0;
  line-height:0;
  width:56px; height:56px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.12);
  color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
  font-size:0;
} .kv-carousel .kvc-arrow::before{
  content:""; position:absolute; top:50%; left:50%;
  width:14px; height:14px; box-sizing:content-box;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: translate(-50%,-50%);
} .kv-carousel .kvc-arrow:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.6); transform:scale(1.03); } .kv-carousel .kvc-arrow:active{ transform:scale(.98); } .kv-carousel .kvc-arrow:focus-visible{ outline:3px solid rgba(255,255,255,.35); outline-offset:2px; }
.kv-carousel .kvc-arrow--prev::before{ transform: translate(-50%,-50%) rotate(135deg); }
.kv-carousel .kvc-arrow--next::before{ transform: translate(-50%,-50%) rotate(-45deg); }
.kv-carousel .kvc-arrow:focus-visible{ outline:3px solid rgba(31,59,77,.4); outline-offset:2px; }

/* Gutters on small screens */
@media (max-width: 1200px){ .kv-carousel{ --arrow-offset:-2rem; } }
@media (max-width: 1100px){ .kv-carousel{ --arrow-offset:-1rem; } }
@media (max-width: 1024px){
  .kv-carousel{ --kvc-per:1; --arrow-offset:0rem; padding-inline:1rem; }
  .kv-carousel .kvc-arrows{ left:0; right:0; }
  /* Reduce tilt on mobile for clarity */
  .kv-carousel .kvc-slide.is-prev,
  .kv-carousel .kvc-slide.is-next{ opacity:.35; transform:scale(.94); }
}
  .kv-carousel .kvc-arrows{ left:0; right:0; }
  /* Reduce tilt on mobile for clarity */
  .kv-carousel .kvc-slide.is-prev,
  .kv-carousel .kvc-slide.is-next{ opacity:.35; transform:scale(.94); }

  .kv-carousel .kvc-arrow--prev{ left:.25rem; }
  .kv-carousel .kvc-arrow--next{ right:.25rem; }
  /* Reduce tilt on mobile for clarity */
  .kv-carousel .kvc-slide.is-prev,
  .kv-carousel .kvc-slide.is-next{ opacity:.35; transform:scale(.94); }



/* Optional: place carousel on a Cover with a blue overlay at 68–70% */
/* If you need an internal overlay (without using a Cover block), wrap the carousel in .kv-overlay */
.kv-overlay{ position:relative; }
.kv-overlay::before{ content:""; position:absolute; inset:0; background:rgba(31,59,77,.7); pointer-events:none; }

/* Anti-flicker optimizations */
.kvc-list, .kvc-slide, .kv-card{ backface-visibility:hidden; transform: translateZ(0); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .kv-carousel .kvc-slide{ transition:none; }
  .kv-carousel .kvc-list{ transition:none; }
}

/* Rounded corners ensure image and card match */
.kv-card, .kv-card__media img{ border-top-left-radius:var(--kv-radius); border-top-right-radius:var(--kv-radius); }

