/* ===== Challenges slider — refined ===== */
.challenges-slider-widget{
  --open:60%;
  --closed:20%;
  --gap:20px;
  --media-h:166px;
  --widget-h:600px;
  font-family:'Inter',sans-serif;
  position:relative;
  padding:0;
}

/* Head */
.csl-head{
  position:relative; z-index:3;
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  margin-bottom:43px;
}
.csl-head__left{min-width:0}
.project-slider-dots{margin-bottom:6px}
.csl-title{margin:0 0 24px; color:#22282B; font-size:30px; font-weight:500; max-width:45%}
.csl-desc{color:#474747; font-size:14px; line-height:140%; max-width:60%}

/* Arrows (залишаємо SVG як є), але прив’язуємо до НИЖНЬОГО краю шапки */
.slider-nav{
  position:absolute; right:0; bottom:0;
  display:flex; gap:20px; z-index:1000; pointer-events:auto;
}
.prev-btn,.next-btn{background:none; border:0; padding:0; margin:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.slider-nav img{display:block}

/* Slider */
.csl-body{position:relative; z-index:1}
.csl-swiper{width:100%; overflow:hidden; padding-bottom:30px} /* запас під радіо */
.csl-swiper .swiper-wrapper{display:flex; padding-right:var(--gap)}
.csl-swiper .swiper-slide{
  position:relative;
  width:var(--closed); flex-shrink:0;
  padding-right:var(--gap);
  transition:width .28s ease;
  height: initial;
}
.csl-swiper .swiper-slide.is-open{width:var(--open)}

/* Вертикальна паличка праворуч, з відступом 20px, остання — невидима */
.csl-swiper .swiper-slide::after{
  content:""; position:absolute; right:20px; top:0; bottom:0; width:1px; background:#E6E6E6; pointer-events:none;
}
.csl-swiper .swiper-slide:last-child::after{display:none}

/* Щоб у НЕактивних контент не торкався палички */
.csl-swiper .swiper-slide:not(.is-open) .csl-card{padding-right:20px}

/* Радио */
.csl-pagination{
  position:relative; z-index:2;
  display:flex; justify-content:center; gap:16px; margin-top:44px;
}
.csl-pagination .swiper-pagination-bullet{
  width:8px; height:8px; border-radius:50%;
  background:#D9D9D9; opacity:1; transition:background-color .3s;
}
.csl-pagination .swiper-pagination-bullet-active{background:#BF3131}

/* Card */
.csl-card{
  position:relative; background:#fff; border-radius:16px; overflow:hidden;
  /* більше НЕ фіксуємо загальну висоту — щоб не було зайвого білого поля.
     Верхній ліміт контролює JS через body.maxHeight */
}
.csl-card__media{
  height:var(--media-h);
  display:flex; align-items:center; justify-content:flex-start;
  background:transparent;            /* прибрали сірий фон по всій ширині */
  border-radius:16px 16px 0 0; overflow:hidden;
}
/* Розміри зображення */
.csl-card__media img{
  width:196px; height:166px; object-fit:cover; display:block; border-radius:8px;
}
.csl-swiper .swiper-slide.is-open .csl-card__media img{
  width:278px; height:166px; border-radius:8px;
}

/* Заголовок + плюс */
.csl-card__head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0;
}
.csl-card__title{color:#000; font-size:14px; font-weight:600; line-height:130%}

/* Плюс: БЕЗ обводки, 42×42, у правому нижньому куті картки */
.csl-card__toggle{
/*   position:absolute; right:12px; bottom:12px; */
  width:42px; height:42px; border:0; border-radius:0; background:transparent
    url('https://new.winncom.ua/wp-content/uploads/2025/08/button-cta-5.svg') no-repeat center/42px 42px;
  cursor:pointer; transition:opacity .2s, visibility .2s;
	  position: fixed;
    left: 0;
    bottom: 0;
}
.csl-card.open .csl-card__toggle{opacity:0; visibility:hidden; pointer-events:none}

/* Текст */
.csl-card__body{display:none; max-height:0; overflow:hidden; padding:0 12px 0; transition:max-height .25s ease}
.csl-card.open .csl-card__body{display:block; padding: 0px 0px 12px 0px}
.csl-card__text{color:#474747; font-size:14px; line-height:140%; max-width:560px} /* компактніше в відкритій */

/* Responsive */
@media (max-width:1023px){
  .csl-head{flex-direction:column; gap:10px}
  .csl-title{font-size:24px; max-width:100%}
  .slider-nav{display:none}
  .csl-swiper .swiper-slide{width:60%}
  .csl-swiper .swiper-slide.is-open{width:100%}
}
@media (max-width:767px){
  .csl-swiper .swiper-slide{width:100%}
  .csl-pagination{margin-top:18px}
}