/**
 * Оформление слайдеров плагина «Слайдеры и баннеры».
 *
 * Свёрстано от телефона: на узком экране баннер занимает всю ширину, а лента
 * карточек намеренно выглядывает за правый край — так сразу видно, что её можно
 * листать. Копия файла лежит в теме и правится в редакторе оформления.
 */

.cx-slider {
    position: relative;
    width: 100%;
    margin: 0 0 1.5rem;
}

.cx-slider__swiper {
    overflow: hidden;
    border-radius: 12px;
}

.cx-slider--logos .cx-slider__swiper {
    border-radius: 0;
}

/* ── Слайд ─────────────────────────────────────────────────────────────── */

.cx-slide {
    position: relative;
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    background: rgba(127, 127, 127, 0.08);
}

.cx-slide__img {
    display: block;
    width: 100%;
    height: var(--cx-slider-height, auto);
    object-fit: cover;
}

.cx-slider--logos .cx-slide__img {
    height: var(--cx-slider-height, 64px);
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.2s, opacity 0.2s;
}

.cx-slider--logos .cx-slide:hover .cx-slide__img {
    filter: none;
    opacity: 1;
}

/* ── Текст поверх картинки ─────────────────────────────────────────────── */

.cx-slide__body {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem;
    color: #fff;
    /* Читаемость не должна зависеть от того, что владелец загрузил:
       на светлой картинке белый текст без подложки пропадает */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}

.cx-slider--cards .cx-slide__body,
.cx-slider--logos .cx-slide__body {
    position: static;
    color: inherit;
    background: none;
    padding: 0.75rem 0.25rem;
}

.cx-slide__title {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.25;
    font-weight: 700;
}

.cx-slide__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    opacity: 0.9;
}

.cx-slide__btn {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    background: #fff;
    color: #111;
}

.cx-slider--cards .cx-slide__btn,
.cx-slider--logos .cx-slide__btn {
    background: rgba(127, 127, 127, 0.15);
    color: inherit;
}

/* ── Листалка и точки ──────────────────────────────────────────────────── */

.cx-slider__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: none;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #111;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.cx-slider__nav--prev { left: 12px; }
.cx-slider__nav--next { right: 12px; }

.cx-slider__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Стрелки — со стола: на телефоне листают пальцем, а кнопки только
   закрывают картинку */
@media (min-width: 768px) {
    .cx-slider__nav { display: flex; }
}

.cx-slider--single .cx-slider__nav {
    display: none;
}

.cx-slider__dots {
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.5;
}

.cx-slider--cards .cx-slider__dots,
.cx-slider--logos .cx-slider__dots {
    --swiper-pagination-color: currentColor;
    --swiper-pagination-bullet-inactive-color: currentColor;
}

@media (min-width: 768px) {
    .cx-slide__body { padding: 1.5rem 2rem; gap: 0.65rem; }
    .cx-slide__title { font-size: 1.75rem; }
    .cx-slide__text { font-size: 1rem; }
}