/* ==========================================================================
   "Our Signature Services" — shared mobile carousel.

   The section lives in Elementor template 2885 and is embedded on more than
   one page, so this cannot live in a page-specific stylesheet. Keyed to the
   .signature-services class on the grid container; .elementor-element-a0ea2f6
   is the home page's generated id, kept as a fallback until that container
   gets the class too. Drop the id selectors once it does.
   ========================================================================== */

@media (max-width: 767px) {

    /* Grid becomes a horizontal scroll-snap carousel, one 305px card per view */
    .signature-services,
    .elementor-element-a0ea2f6 {
        display: flex !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        /* Side padding centres the fixed-width card */
        padding: 0 max(0px, calc((100% - 305px) / 2)) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        /* eases the arrow-driven jumps; swipe is unaffected */
        scroll-behavior: smooth;
        scroll-padding-left: max(0px, calc((100% - 305px) / 2));
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .signature-services::-webkit-scrollbar,
    .elementor-element-a0ea2f6::-webkit-scrollbar {
        display: none;
    }

    .signature-services > .e-con,
    .elementor-element-a0ea2f6 > .e-con {
        flex: 0 0 305px !important;
        width: 305px !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        scroll-snap-align: start;
    }

    .signature-services > .e-con > .e-con,
    .elementor-element-a0ea2f6 > .e-con > .e-con {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    .signature-services .elementor-widget-image,
    .signature-services .elementor-widget-image > .elementor-widget-container,
    .elementor-element-a0ea2f6 .elementor-widget-image,
    .elementor-element-a0ea2f6 .elementor-widget-image > .elementor-widget-container {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Matches the Life Stages cards, which cap image height at 407px */
    .signature-services .elementor-widget-image img,
    .elementor-element-a0ea2f6 .elementor-widget-image img {
        width: 100% !important;
        height: auto !important;
        max-height: 407px !important;
        object-fit: cover;
        display: block;
    }

    .signature-services .elementor-widget-heading,
    .elementor-element-a0ea2f6 .elementor-widget-heading {
        width: 100% !important;
        margin: 0 !important;
    }

    .signature-services .elementor-widget-heading > .elementor-widget-container,
    .elementor-element-a0ea2f6 .elementor-widget-heading > .elementor-widget-container {
        margin-top: 12px !important;
    }

    .signature-services .elementor-heading-title,
    .elementor-element-a0ea2f6 .elementor-heading-title {
        text-align: left !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }
}