/*
 * ST. MARY'S IOC COVENTRY
 * MOBILE CAROUSEL REBUILD V3
 * Load LAST after every existing CSS block.
 */

@media (max-width: 767px) {

    /* ===================== shared ===================== */

    .sm-mobile-carousel {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .sm-mobile-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translate3d(0,0,0);
        transition: transform .42s ease !important;
        will-change: transform;
    }

    .sm-mobile-track.sm-no-transition {
        transition: none !important;
    }

    .sm-mobile-slide {
        display: block !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .sm-mobile-controls {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        margin-top: 16px !important;
    }

    .sm-mobile-prev,
    .sm-mobile-next {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 7px !important;
        background: #1A2744 !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    .sm-mobile-prev i,
    .sm-mobile-next i {
        color: #fff !important;
        font-size: 19px !important;
    }

    .sm-mobile-count {
        min-width: 46px;
        color: #687386;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
    }


    /* ===================== hero ===================== */

    .main-slider {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        background: #111B33 !important;
    }

    .sm-mobile-hero {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 250px !important;
        overflow: hidden !important;
        background: #111B33 !important;
    }

    .sm-mobile-hero-track {
        list-style: none !important;
    }

    .sm-mobile-hero-track > li {
        position: relative !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        background-color: #111B33 !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .sm-mobile-hero .sm-mobile-controls {
        position: absolute !important;
        z-index: 100 !important;
        top: 12px !important;
        right: 12px !important;
        margin: 0 !important;
        gap: 7px !important;
    }

    .sm-mobile-hero .sm-mobile-count {
        display: none !important;
    }

    .sm-mobile-hero .sm-mobile-prev,
    .sm-mobile-hero .sm-mobile-next {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        background: rgba(17,27,51,.88) !important;
    }

    .sm-mobile-hero-track .overlay {
        pointer-events: none !important;
    }

    .sm-mobile-hero-track .content,
    .sm-mobile-hero-track .content a {
        pointer-events: auto !important;
    }


    /* ===================== latest news ===================== */

    .news-v1 {
        padding-top: 38px !important;
        padding-bottom: 48px !important;
        overflow: hidden !important;
    }

    .news-v1 .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }

    .news-v1 .heading {
        margin-bottom: 26px !important;
        padding: 0 3px !important;
    }

    .news-v1 .heading h2 {
        font-size: 27px !important;
        line-height: 1.2 !important;
    }

    .news-v1 .heading p {
        margin-top: 7px !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    .sm-mobile-news {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .sm-mobile-news-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .sm-mobile-news-track > .item {
        display: block !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .sm-mobile-news .item .thumb,
    .sm-mobile-news .item .text {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .sm-mobile-news .item .thumb .photo {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 10 !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .sm-mobile-news .item .text {
        padding: 20px 18px 22px !important;
    }

    .sm-mobile-news .item .text h3 {
        margin-bottom: 9px !important;
        font-size: 21px !important;
        line-height: 1.3 !important;
    }

    .sm-mobile-news .item .text h4 {
        margin-bottom: 12px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .sm-mobile-news .item .text p {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow: visible !important;

        -webkit-line-clamp: unset !important;
        -webkit-box-orient: initial !important;

        font-size: 15px !important;
        line-height: 1.7 !important;
        color: #5D6878 !important;
    }

    .sm-mobile-news .sm-mobile-controls {
        margin-top: 18px !important;
    }
}