/* Секция с фон */
.car-review{
  padding: 60px 0px 0px 0px;
  color:#050505;
}

.car-review .section-header{
    /*padding-bottom: 100px;*/
    margin-bottom:0px;
}

.car-review .car-review-logo{
    position:relative;
}

.car-review .red-columns{
    position:absolute;
    left:-200px;
    top:40px;
}

.car-review .red-columns img{
    max-width: 60% !important;
}

/* Заглавна част */
.section-extra{ width:auto; height:136px; max-width:720px; margin-top:6px; }

/* Слайдър */
.review-carousel.swiper{ padding: 0px 0px 20px 0; }
.review-carousel .swiper-wrapper{ align-items:center; position: relative; overflow: visible; }

.review-carousel,
.review-carousel .swiper-wrapper { overflow: visible; }

/* колко да се застъпват (регулирай) */
.review-carousel { --overlap: 420px; }

/* направи активния малко по-голям; останалите по-малки */
.review-carousel .swiper-slide{
  width: min(700px, 75vw);            /* по-малък от активната зона, за да се виждат съседите */
  transition: transform .35s ease, z-index .35s ease;
  will-change: transform;
  transform: scale(.85);
  z-index: 1;
}

/* активният е отпред и 100% размер */
.review-carousel .swiper-slide.swiper-slide-active{
  transform: scale(1);
  z-index: 3;
}

/* съседите ги „вкарваме под“ активния */
.review-carousel .swiper-slide.swiper-slide-prev{
  transform: translateX(var(--overlap)) scale(.7);
  z-index: 2;
}
.review-carousel .swiper-slide.swiper-slide-next{
  transform: translateX(calc(var(--overlap) * -1)) scale(.7);
  z-index: 2;
}

/* по-далечните може още да се смалят (по избор) */
.review-carousel .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next){
  transform: scale(.8);
  z-index: 0;
}

.review-carousel .swiper-button-prev,
.review-carousel .swiper-button-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  z-index: 50;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: left .35s ease;     /* плавно преместване */
  /* ако ползваш right за next, сложи transition и на right */
}

.review-carousel .swiper-button-prev,
.review-carousel .swiper-button-next {
  width: 30px;
  height: 30px;
}
.review-carousel .swiper-button-prev img,
.review-carousel .swiper-button-next img {
  width: 100%;
  height: 100%;
}
.review-carousel .swiper-button-prev::after,
.review-carousel .swiper-button-next::after {
  display: none; /* махаме иконките на Swiper */
}



/* Карта на ревю: заглавие (не е skew-нато) + миниатюра (skew) */
.rev-card{ display:block; text-decoration:none; color:inherit;padding: 20px; }
.car-review .rev-title{
  margin: 0 0 10px -30px;
  font: 700 20px/1.25 Involve-Bold;
  text-align: left;
}

/* Рамка на изображението със skew наляво */
.thumb-skew{
  transform: skewX(10deg);
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
:root{ --bleed: 14%; }
/* Вътрешен контейнер „връща“ пропорциите и държи съдържанието */
.thumb-skew__inner{ transform: skewX(-10deg); position:relative; width:100%; height:min(460px,52vw);aspect-ratio: 16 / 9;  }
.thumb-skew__inner.is-bg{
  background-image: var(--img);
  background-size: cover;   /* cover = запълва; можеш да смениш на contain */
  background-position: left;
  background-repeat: no-repeat;
}

.thumb-skew__inner::before{
  content:"";
  position:absolute;
  /* inset отрицателен = bleed навън, за да покрие празните ъгли */
  inset: calc(-1 * var(--bleed));
  background: var(--img) center/cover no-repeat;
  /* без други трансформации тук */
  z-index: 0;
}
/* Play бейдж (не е skew-нат) */
.play-badge{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  display:grid; place-items:center;
  width:64px; height:64px; border-radius:999px;
  background: rgba(0,0,0,.55);
  color:#fff; font-size:28px; line-height:1;
  border:2px solid rgba(255,255,255,.6);
}

/* Контроли на Swiper – по желание пипни цветовете */
.review-carousel .swiper-button-prev,
.review-carousel .swiper-button-next{
  color:#fff; text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

.review-carousel .swiper-button-lock {
    display: flex !important;
}

.review-carousel .swiper-pagination-bullet{
  background:#fff; opacity:.6;
}
.review-carousel .swiper-pagination-bullet-active{
  background:#E3141A; opacity:1;
}

/* Бутон под слайдера (ползваш вече .pill от проекта) */
.review-actions{
    display:grid;
    place-items:center;
    margin-top:18px;
    margin-bottom: 80px;
}

.review-actions .pill{
    margin-top: 20px;
    color:#000;
    border-radius: 10px;
    border: 1px solid #000;
    text-transform: uppercase;
    padding: 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-family: Involve;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    background:none;
}

.review-actions a:hover{
    color:#fff;
    background:var(--brand-red);
    border: none;
}

/* Responsive дреболии */
@media (max-width: 640px){
  .thumb-skew__inner{ height: 56vw; } /* по-ниска миниатюра на малки екрани */
  .play-badge{ width:54px; height:54px; font-size:24px; }
}

@media (max-width: 600px){
  /* 1) няма skew */
  .thumb-skew{ transform:none; }
  .thumb-skew__inner{ transform:none; }

  /* 2) активният заема целия екран; няма „половинки“ */
  .review-carousel .swiper-slide{
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    transform: none !important;        /* 🔑 маха всякакви overlap/scale ефекти */
    z-index: 0 !important;
  }
  .review-carousel .swiper-slide-prev,
  .review-carousel .swiper-slide-next{
    transform: none !important;        /* 🔑 да не се бутат към активния */
  }

/*   3) режем всичко извън видимото поле
  .review-carousel { overflow: hidden; }          🔑
  .review-carousel .swiper-wrapper { overflow: hidden; }*/

  /* (по желание) малко разстояние между съдържанието и ръбовете */
  .review-carousel .swiper-slide .rev-card{
    margin: 0; /* да не „наднича“ заради външни марджини */
  }

    .car-review .rev-title {
        margin: 0 0 10px 10px;
        font-size: 18px;
        text-align: left;
    }

    .rev-card {
        padding: 0px;
    }
}

@media (min-width: 1200px) {
    .review-carousel .swiper-slide.swiper-slide-active{
        transform: scale(1);
    }

    .review-carousel .swiper-slide.swiper-slide-active .rev-card{
        margin-left: -100px;     /* тук нагласяш колко: -80/-100/-120px */
    }
}

.review-carousel { position: relative; overflow: visible; }
.review-carousel .swiper-wrapper { overflow: visible; }

/* стрелките най-отгоре и кликаеми */
.review-carousel .swiper-button-prev,
.review-carousel .swiper-button-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px; height: 35px;
    z-index: 999;            /* над всеки слайд */
    pointer-events: auto;
}

/* активният слайд да не „покрива“ стрелките със слоеве */
.review-carousel .swiper-slide { isolation: isolate; }

/* декоративни слоеве да не крадат клика */
.thumb-skew,
.thumb-skew__inner::before,
.play-badge { pointer-events: none; }

/* картата/линкът остава кликаем, но не над стрелките */
.rev-card { pointer-events: auto; position: relative; z-index: 5; }

/* махни това, ако го имаш – може да държи стрелките „заключени“ визуално */
.review-carousel .swiper-button-lock { /* display: flex !important;  ← премахни това правило ако го имаш */ }

/* за всеки случай – курсорче */
.review-carousel .swiper-button-prev,
.review-carousel .swiper-button-next { cursor: pointer; }

@media (min-width:1200px){
    .review-carousel { --track: 50vw;     width: 80%;}
}
@media (min-width:1200px){
    /*.review-carousel { --track: 50vw;     width: 100%;}*/
    .review-carousel{ overflow: visible; }
    .review-carousel .swiper{
        width: var(--track);
        margin: 0 auto;
        overflow: visible;
    }
}