/* WayCare AutoCare Who It Is For Widget */

.wcwho-section,
.wcwho-section *{
    box-sizing:border-box;
    text-shadow:none !important;
}

.wcwho-section{
    width:100%;
    padding:36px 40px 42px;
    background:#F8FAFC;
    font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    overflow:hidden;
}

.wcwho-shell{
    width:100%;
    max-width:1500px;
    margin:0 auto;
}

.wcwho-label{
    margin:0 0 26px;
    text-align:center;
    color:#122C4A;
    font-family:"Geist Mono",monospace;
    font-size:13px;
    line-height:1;
    font-weight:900;
    letter-spacing:.24em;
    text-transform:uppercase;
}

.wcwho-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:18px;
}

.wcwho-section.layout-grid .wcwho-grid{
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}

.wcwho-card{
    min-width:0;
    display:block;
    background:#fff;
    border:1px solid #E2E8F0;
    border-radius:14px;
    overflow:hidden;
    text-align:center;
    color:inherit;
    text-decoration:none !important;
    box-shadow:0 12px 30px rgba(15,23,42,.045);
    position:relative;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.wcwho-card::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:0;
    height:3px;
    background:#0E9F97;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .22s ease;
}

.wcwho-card:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 54px rgba(15,23,42,.10);
    border-color:rgba(14,159,151,.35);
}

.wcwho-card:hover::after{
    transform:scaleX(1);
}

.wcwho-image-wrap{
    width:100%;
    height:145px;
    overflow:hidden;
    border-radius:12px 12px 0 0;
    background:
        linear-gradient(135deg,rgba(91,227,184,.28),rgba(42,191,183,.16)),
        #E9FFFA;
    position:relative;
}

.wcwho-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform:scale(1.01);
    transition:transform .35s ease, filter .35s ease;
}

.wcwho-card:hover .wcwho-image{
    transform:scale(1.06);
    filter:saturate(1.05) contrast(1.03);
}

.wcwho-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.wcwho-placeholder span{
    width:54px;
    height:54px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:#0E9F97;
    font-size:24px;
    font-weight:900;
    box-shadow:0 12px 30px rgba(14,124,134,.12);
}

.wcwho-content{
    padding:18px 18px 22px;
}

.wcwho-title{
    margin:0 0 10px;
    color:#122C4A;
    font-size:19px;
    line-height:1.18;
    font-weight:760;
    letter-spacing:-.025em;
}

.wcwho-text{
    margin:0;
    color:#334155;
    font-size:14px;
    line-height:1.45;
    font-weight:520;
}

/* Tablet */
@media (max-width:1100px){
    .wcwho-section{
        padding:32px 22px 38px;
    }

    .wcwho-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .wcwho-image-wrap{
        height:140px;
    }
}

/* Mobile */
@media (max-width:767px){
    .wcwho-section{
        padding:30px 12px 34px;
    }

    .wcwho-label{
        font-size:11px;
        margin-bottom:18px;
        letter-spacing:.20em;
    }

    .wcwho-section.mobile-carousel .wcwho-grid{
        display:flex;
        gap:12px;
        overflow-x:auto;
        padding:4px 2px 16px;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .wcwho-section.mobile-carousel .wcwho-grid::-webkit-scrollbar{
        display:none;
    }

    .wcwho-section.mobile-carousel .wcwho-card{
        flex:0 0 72%;
        scroll-snap-align:center;
    }

    .wcwho-section.mobile-grid2 .wcwho-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .wcwho-section.mobile-stacked .wcwho-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }

    .wcwho-image-wrap{
        height:120px;
    }

    .wcwho-content{
        padding:14px 12px 16px;
    }

    .wcwho-title{
        font-size:16px;
        margin-bottom:7px;
    }

    .wcwho-text{
        font-size:12.5px;
        line-height:1.38;
    }
}

@media (max-width:390px){
    .wcwho-section.mobile-carousel .wcwho-card{
        flex-basis:78%;
    }

    .wcwho-section.mobile-grid2 .wcwho-grid{
        gap:10px;
    }

    .wcwho-image-wrap{
        height:105px;
    }

    .wcwho-title{
        font-size:14.5px;
    }

    .wcwho-text{
        font-size:11.8px;
    }
}


/* v1.1 mobile carousel dots + premium mobile polish */

@media (max-width:767px){
    .wcwho-section.mobile-carousel{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .wcwho-section.mobile-carousel .wcwho-label{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .wcwho-section.mobile-carousel .wcwho-grid{
        gap:14px !important;
        padding:6px 28px 14px !important;
        scroll-padding-left:28px !important;
    }

    .wcwho-section.mobile-carousel .wcwho-card{
        flex:0 0 74% !important;
        scroll-snap-align:center !important;
        border-radius:18px !important;
        box-shadow:0 16px 38px rgba(15,23,42,.075) !important;
    }

    .wcwho-section.mobile-carousel .wcwho-card:hover{
        transform:none !important;
    }

    .wcwho-section.mobile-carousel .wcwho-image-wrap{
        height:132px !important;
    }

    .wcwho-section.mobile-carousel .wcwho-content{
        padding:16px 15px 18px !important;
    }

    .wcwho-section.mobile-carousel .wcwho-title{
        font-size:17px !important;
        line-height:1.16 !important;
    }

    .wcwho-section.mobile-carousel .wcwho-text{
        font-size:12.8px !important;
        line-height:1.42 !important;
    }

    .wcwho-dots{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;
        margin:2px auto 0;
        padding:0 12px;
    }

    .wcwho-dot{
        width:7px;
        height:7px;
        border:0;
        border-radius:999px;
        padding:0;
        background:#CBD5E1;
        cursor:pointer;
        transition:width .2s ease, background .2s ease, opacity .2s ease;
    }

    .wcwho-dot.active{
        width:22px;
        background:#0E9F97;
    }

    .wcwho-swipe-hint{
        margin:8px auto 0;
        padding:0 12px;
        text-align:center;
        color:#64748B;
        font-size:10.5px;
        line-height:1.2;
        font-weight:800;
        letter-spacing:.04em;
    }
}

@media (max-width:390px){
    .wcwho-section.mobile-carousel .wcwho-grid{
        padding-left:22px !important;
        padding-right:22px !important;
        scroll-padding-left:22px !important;
    }

    .wcwho-section.mobile-carousel .wcwho-card{
        flex-basis:78% !important;
    }

    .wcwho-section.mobile-carousel .wcwho-image-wrap{
        height:118px !important;
    }
}

/* Hide dots/hint for non-carousel mobile modes */
.wcwho-section:not(.mobile-carousel) .wcwho-dots,
.wcwho-section:not(.mobile-carousel) .wcwho-swipe-hint{
    display:none !important;
}


/* v1.2 — mobile-first compact grid + fixed carousel dots */

/* Make mobile 2-column layout the premium default look */
@media (max-width:767px){
    .wcwho-section{
        padding:28px 12px 32px !important;
    }

    .wcwho-label{
        font-size:10.5px !important;
        margin-bottom:18px !important;
        letter-spacing:.20em !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-grid{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:11px !important;
        overflow:visible !important;
        padding:0 !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-card{
        min-width:0 !important;
        border-radius:14px !important;
        box-shadow:0 12px 28px rgba(15,23,42,.055) !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-card:hover{
        transform:none !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-image-wrap{
        height:96px !important;
        border-radius:14px 14px 0 0 !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-content{
        padding:12px 10px 14px !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-title{
        font-size:14px !important;
        line-height:1.14 !important;
        margin-bottom:6px !important;
        letter-spacing:-.025em !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-text{
        font-size:11.3px !important;
        line-height:1.34 !important;
        font-weight:600 !important;
    }

    /* Carousel is still available, but dots are fixed to real dots */
    .wcwho-dots{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
        margin:4px auto 0 !important;
        padding:0 12px !important;
    }

    .wcwho-dot,
    .wcwho-dot.active{
        min-width:0 !important;
        max-width:none !important;
        flex:0 0 auto !important;
        width:7px !important;
        height:7px !important;
        border:0 !important;
        border-radius:999px !important;
        padding:0 !important;
        background:#CBD5E1 !important;
        cursor:pointer !important;
        box-shadow:none !important;
        transition:background .2s ease, transform .2s ease !important;
    }

    .wcwho-dot.active{
        background:#0E9F97 !important;
        transform:scale(1.25) !important;
    }

    .wcwho-swipe-hint{
        margin:8px auto 0 !important;
        padding:0 12px !important;
        text-align:center !important;
        color:#64748B !important;
        font-size:10px !important;
        line-height:1.2 !important;
        font-weight:800 !important;
        letter-spacing:.04em !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-dots,
    .wcwho-section.mobile-grid2 .wcwho-swipe-hint,
    .wcwho-section.mobile-stacked .wcwho-dots,
    .wcwho-section.mobile-stacked .wcwho-swipe-hint{
        display:none !important;
    }
}

@media (max-width:390px){
    .wcwho-section{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-grid{
        gap:10px !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-image-wrap{
        height:86px !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-title{
        font-size:13px !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-text{
        font-size:10.6px !important;
    }
}

/* Desktop stays screenshot-style single row */
@media (min-width:768px){
    .wcwho-section.layout-row .wcwho-grid{
        grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    }
}


/* v1.3 — best mobile 2-column visual version */

/* Keep desktop polished and close to reference */
@media (min-width:768px){
    .wcwho-section{
        padding-top:34px !important;
        padding-bottom:40px !important;
    }

    .wcwho-section.layout-row .wcwho-grid{
        grid-template-columns:repeat(6,minmax(0,1fr)) !important;
        align-items:stretch !important;
    }

    .wcwho-card{
        border-radius:14px !important;
        box-shadow:0 12px 30px rgba(15,23,42,.05) !important;
    }

    .wcwho-card:hover{
        transform:translateY(-5px) !important;
        box-shadow:0 22px 54px rgba(15,23,42,.10) !important;
    }
}

/* Premium mobile grid: more cards visible, less scrolling */
@media (max-width:767px){
    .wcwho-section{
        padding:28px 10px 32px !important;
        background:
            radial-gradient(circle at 50% 0%, rgba(31,199,182,.07), transparent 32%),
            #F8FAFC !important;
    }

    .wcwho-shell{
        max-width:100% !important;
    }

    .wcwho-label{
        font-size:10.5px !important;
        margin-bottom:18px !important;
        letter-spacing:.22em !important;
        color:#122C4A !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-grid{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
        overflow:visible !important;
        padding:0 !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-card{
        min-width:0 !important;
        border-radius:16px !important;
        border:1px solid rgba(226,232,240,.95) !important;
        background:#fff !important;
        box-shadow:0 12px 28px rgba(15,23,42,.055) !important;
        overflow:hidden !important;
        transform:none !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-card::after{
        left:14px !important;
        right:14px !important;
        height:2px !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-card:hover{
        transform:none !important;
        box-shadow:0 12px 28px rgba(15,23,42,.055) !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-image-wrap{
        height:92px !important;
        border-radius:16px 16px 0 0 !important;
        background:#E9FFFA !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-image{
        transform:scale(1.01) !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-content{
        padding:12px 10px 14px !important;
        min-height:88px !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-title{
        font-family:Fraunces,Georgia,serif !important;
        font-size:14.5px !important;
        line-height:1.12 !important;
        margin:0 0 6px !important;
        letter-spacing:-.025em !important;
        color:#122C4A !important;
        text-align:center !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-text{
        font-size:11.1px !important;
        line-height:1.34 !important;
        font-weight:650 !important;
        color:#334155 !important;
        text-align:center !important;
        display:-webkit-box !important;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical !important;
        overflow:hidden !important;
        margin:0 !important;
    }

    /* Hide carousel UI in the recommended mobile grid */
    .wcwho-section.mobile-grid2 .wcwho-dots,
    .wcwho-section.mobile-grid2 .wcwho-swipe-hint{
        display:none !important;
    }

    /* Carousel remains available if selected */
    .wcwho-section.mobile-carousel .wcwho-grid{
        padding-left:24px !important;
        padding-right:24px !important;
        scroll-padding-left:24px !important;
    }

    .wcwho-section.mobile-carousel .wcwho-card{
        flex-basis:76% !important;
    }

    .wcwho-dot,
    .wcwho-dot.active{
        width:7px !important;
        height:7px !important;
        border-radius:999px !important;
        flex:0 0 auto !important;
        padding:0 !important;
        min-width:0 !important;
        background:#CBD5E1 !important;
    }

    .wcwho-dot.active{
        background:#0E9F97 !important;
        transform:scale(1.25) !important;
    }
}

@media (max-width:390px){
    .wcwho-section{
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-grid{
        gap:9px !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-image-wrap{
        height:84px !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-content{
        padding:10px 8px 12px !important;
        min-height:82px !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-title{
        font-size:13.2px !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-text{
        font-size:10.4px !important;
        line-height:1.3 !important;
    }
}


/* v1.4 — fix mobile image cropping */
@media (max-width:767px){
    .wcwho-section.mobile-grid2 .wcwho-image-wrap{
        height:112px !important;
        background:
            linear-gradient(135deg, rgba(91,227,184,.18), rgba(42,191,183,.10)),
            #F8FAFC !important;
    }

    .wcwho-section.mobile-grid2 .wcwho-image{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center center !important;
        transform:none !important;
    }

    /* For people/face-heavy cards, this reduces ugly cropping compared to the old short image box */
    .wcwho-section.mobile-grid2 .wcwho-card:hover .wcwho-image{
        transform:none !important;
    }
}

@media (max-width:390px){
    .wcwho-section.mobile-grid2 .wcwho-image-wrap{
        height:104px !important;
    }
}

/* If user chooses Image Fit = contain in Elementor, this keeps it looking clean */
.wcwho-image[style*="contain"],
.elementor-element .wcwho-image{
    background:#F8FAFC;
}