/*
 * ST. MARY'S IOC COVENTRY
 * MOBILE SLIDER TEXT + ARROW SPACING FIX V2
 *
 * Load LAST after:
 * - mobile-carousel-rebuild-v3.css
 * - mobile-slider-text-fix-v1.css
 *
 * Frontend only.
 */

@media (max-width: 767px) {

    /* Keep the two navigation arrows in a fixed right-side control zone. */
    .sm-mobile-hero .sm-mobile-controls {
        top: 8px !important;
        right: 8px !important;
        gap: 4px !important;
        width: 78px !important;
        height: 36px !important;
        justify-content: flex-end !important;
    }

    .sm-mobile-hero .sm-mobile-prev,
    .sm-mobile-hero .sm-mobile-next {
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;

        border-radius: 6px !important;
        background: rgba(17,27,51,.92) !important;
    }

    /*
     * Reserve the right-hand side of the title band for the arrows.
     * This is the key fix for "Pray for Us" overlapping the controls.
     */
    .sm-mobile-hero-track .content {
        width: 100% !important;
        box-sizing: border-box !important;
        padding-right: 88px !important;
    }

    .sm-mobile-hero-track .inner {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 9px !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .sm-mobile-hero-track .text {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /*
     * Keep titles left aligned on mobile. Some legacy slide markup can carry
     * desktop/right alignment, which is what made the short "Pray for Us"
     * title drift underneath the arrows.
     */
    .sm-mobile-hero-track h1,
    .sm-mobile-hero-track h2,
    .sm-mobile-hero-track h3,
    .sm-mobile-hero-track h4,
    .sm-mobile-hero-track p {
        text-align: left !important;
    }

    .sm-mobile-hero-track h1,
    .sm-mobile-hero-track h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;

        overflow-wrap: anywhere;
    }

    /*
     * Keep the local contrast panel from extending underneath the arrows.
     */
    .sm-mobile-hero-track .text {
        padding-right: 10px !important;
    }

    /* Keep the Read More button compact and clear of the arrow zone. */
    .sm-mobile-hero-track p.button {
        width: auto !important;
        max-width: max-content !important;
    }
}


/* Extra protection for very narrow phones */
@media (max-width: 380px) {

    .sm-mobile-hero .sm-mobile-controls {
        right: 6px !important;
        width: 72px !important;
    }

    .sm-mobile-hero .sm-mobile-prev,
    .sm-mobile-hero .sm-mobile-next {
        flex-basis: 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    .sm-mobile-hero-track .content {
        padding-right: 82px !important;
    }

    .sm-mobile-hero-track .inner {
        padding-left: 7px !important;
    }
}