/********** Channel Slider (Special Section) **********/
.channelSlider {
    --cs-accent: #E03322;
    --cs-bg: #1d1d1d;
    --cs-card-bg: #333;
    --cs-text: #fff;
    --cs-muted: #b8b8b8;
    --cs-arrow-bg: #fff;
    --cs-arrow-fg: #1d1d1d;
    display: inline-block;
    width: calc(100% + 32px);
    background: var(--cs-bg);
    padding: 40px 16px;
    margin: 0 -16px 20px 0;
    box-sizing: border-box;

}

/* Channel theme presets — override via className or --cs-accent (Path / inline) */
.channelSlider.news { --cs-accent: #E03322; }
.channelSlider.sports { --cs-accent: #43a047; }
.channelSlider.arts { --cs-accent: #A8006B; }
.channelSlider.howa_w_hya { --cs-accent: #7b1fa2; }
.channelSlider.autos { --cs-accent: #1a237e; }
.channelSlider.islameyat { --cs-accent: #1c87c9; }
.channelSlider.ecommerce { --cs-accent: #febd69; }
.channelSlider.ramadan { --cs-accent: #da8f2d; }
.channelSlider.media { --cs-accent: #E03322; }
.channelSlider.cop { --cs-accent: #006eb7; }

.channelSlider__inner {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.channelSlider__inner .ttl {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
    border-bottom:0
}
.channelSlider__inner  .ttl:before{display:none}
.channelSlider__inner .ttl h3 {
    display: inline-block;
    margin: 0;
    padding: 0;
    background: none !important;
    color: var(--cs-text);
    font-family: AvenirMeduim, Arial;
    font-size: 26px;
    line-height: 50px;
        float: none;
}

.channelSlider__viewport-wrap {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 52px;
    box-sizing: border-box;
}

.channelSlider__viewport {
    overflow: hidden;
    width: 100%;
}

.channelSlider__container {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.channelSlider__slide {
    flex: 0 0 260px;
    min-width: 0;
}

.channelSlider__card {
    display: block;
    width: 100%;
    background: var(--cs-card-bg);
    border-radius: 8px;
    overflow: hidden;
    color: var(--cs-text);
    text-decoration: none;
}

.channelSlider__media {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: #000;
}

.channelSlider__media img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.2s ease-in-out;
}

.channelSlider__card:hover .channelSlider__media img {
    filter: brightness(108%) contrast(108%);
}

.channelSlider__play {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cs-accent);
    pointer-events: none;
    z-index: 1;
}

.channelSlider__play:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6.5px 0 6.5px 11px;
    border-color: transparent transparent transparent #fff;
}

.channelSlider__body {
    display: block;
    padding: 10px;
    box-sizing: border-box;
    min-height: 130px;
}

.channelSlider__headline {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 10px;
    padding: 0;
    background: none !important;
    color: var(--cs-text);
    font-family: AvenirLight, Arial;
    font-size: 16px;
    line-height: 26px;
    height: 78px;
    text-align: right;
}

.channelSlider__date {
    display: block;
    float: right;
    color: var(--cs-muted);
    font-family: AvenirMeduim, Arial;
    font-size: 12px;
    line-height: 20px;
}

.channelSlider__date:before {
    content: "c";
    float: right;
    margin-left: 4px;
    font-size: 12px;
    line-height: 20px;
    color: var(--cs-muted);
}

.channelSlider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--cs-arrow-bg);
    cursor: pointer;
    padding: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.channelSlider__arrow:disabled {
    opacity: 0.4;
    cursor: default;
}

.channelSlider__arrow--prev {
    right: 0;
}

.channelSlider__arrow--next {
    left: 0;
}

.channelSlider__arrow--prev:before {
    content: "r";
}

.channelSlider__arrow--next:before {
     content: "q";
}

.channelSlider__arrow:before {
 font-size:14px
}


.channelSlider__cta-wrap {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 40px;
}

.channelSlider__cta {
    display: inline-block;
    background: var(--cs-accent);
    color: #fff;
    font-family: AvenirMeduim, Arial;
    font-size: 16px;
    line-height: 25px;
    padding: 10px 30px;
    border-radius: 8px;
    text-decoration: none;
}

.channelSlider__cta:hover {
    color: #fff;
    opacity: 0.92;
}

@media only screen and (max-width: 1023px) {
    .channelSlider {
        padding: 32px 10px;
    }

    .channelSlider__viewport-wrap {
        padding: 0 44px;
    }

    .channelSlider__slide {
        flex: 0 0 240px;
    }
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .channelSlider {
        width: 100%;
        padding: 28px 10px;
                margin: 0 0 40px;
    }

    .channelSlider__inner .ttl{
        margin-bottom: 24px;
        padding: 0 16px;
    }

    .channelSlider__inner .ttl h3 {
        font-size: 22px;
        line-height: 40px;
    }

    .channelSlider__viewport-wrap {
        padding:10px 45px;
    }

    .channelSlider__slide {
        flex: 0 0 220px;
    }

    .channelSlider__headline {
        font-size: 14px;
        line-height: 22px;
        height: 66px;
        -webkit-line-clamp: 3;
    }

    .channelSlider__cta-wrap {
        margin-top: 28px;
    }
}