/* =====================================================================
   KlinikPlus – STATS CARDS + TEAM SLIDER · MOBILE (generic / reusable)
   ---------------------------------------------------------------------
   The mobile presentation of the stats/counter cards and the team slider
   was originally tuned only for the landing page (scoped under
   `.klinikplus-home-page` in home-mobile.css, loaded only there). These
   are the same shared markup on other pages (About, etc.), so this file
   provides the identical mobile look, unscoped, for any page that
   includes it. Everything is wrapped in `@media (max-width: 991px)` so
   large screens are never affected.
   ===================================================================== */

@media (max-width: 991px) {

    /* -----------------------------------------------------------------
       STATS / COUNTER CARDS
       Each card flips to a short landscape tile: number + label on the
       left, artwork on the right inside a soft colour blob, on a tinted
       background. The dark card keeps its dark fill.
    ----------------------------------------------------------------- */
    .stats-card {
        height: auto !important;
        min-height: 168px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 22px 0 22px 22px !important;
        margin-bottom: 16px !important;
        border-radius: 22px !important;
        box-shadow: none !important;
    }

    /* Dotted texture in the top-left corner */
    .stats-card::before {
        content: '';
        position: absolute;
        top: 16px;
        left: 18px;
        width: 44px;
        height: 32px;
        background-image: radial-gradient(currentColor 1.2px, transparent 1.3px);
        background-size: 8px 8px;
        opacity: 0.55;
        pointer-events: none;
        z-index: 4;
    }

    .stats-card-content {
        flex: 1 1 auto;
        min-width: 0;
    }

    .stats-number {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
        letter-spacing: -0.03em !important;
        margin-bottom: 0.25rem !important;
    }

    .stats-text {
        font-size: 1rem !important;
        line-height: 1.35 !important;
        font-weight: 500 !important;
    }

    /* Short accent rule under the label */
    .stats-text::after {
        content: '';
        display: block;
        width: 46px;
        height: 3px;
        border-radius: 3px;
        margin-top: 14px;
    }

    /* Artwork moves out of the absolute full-bleed slot into a right column */
    .stats-card-image {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        overflow: visible !important;
    }

    /* Soft colour blob sitting behind the artwork */
    .stats-card-image::before {
        content: '';
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 124px;
        height: 124px;
        border-radius: 50%;
        z-index: 0;
    }

    .stats-card-image img {
        position: relative;
        z-index: 1;
        height: 122px !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        object-fit: contain !important;
        object-position: center right !important;
    }

    /* Tinted cards keep the artwork inset; the dark card lets it bleed out */
    .stats-card-orange .stats-card-image,
    .stats-card-yellow .stats-card-image {
        padding-right: 16px;
    }

    /* --- Card 1: clinics served --- */
    .stats-card-orange {
        background: #FDF3EE !important;
        color: #F0BFAA;
    }

    .stats-card-orange .stats-number {
        color: #FF6B47 !important;
    }

    .stats-card-orange .stats-text {
        color: #140F2D !important;
    }

    .stats-card-orange .stats-text::after {
        background: #FF8E6C;
    }

    .stats-card-orange .stats-card-image::before {
        background: #FBE0D5;
    }

    /* --- Card 2: leads generated --- */
    .stats-card-black {
        background: #2E2E2E !important;
        color: #575757;
        min-height: 176px !important;
    }

    .stats-card-black .stats-number,
    .stats-card-black .stats-text {
        color: #FFF !important;
    }

    .stats-card-black .stats-text::after {
        background: #FF8E6C;
    }

    /* This card uses a photo rather than an illustration, so instead of
       sitting on a blob it fills the right half edge-to-edge and fades
       into the dark background so the copy stays readable on top of it. */
    .stats-card-black .stats-card-image {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 26% !important;
        padding: 0 !important;
        z-index: 1;
    }

    .stats-card-black .stats-card-image::before {
        display: none;
    }

    .stats-card-black .stats-card-image::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(90deg, #2E2E2E 0%, rgba(46, 46, 46, 0.7) 26%, rgba(46, 46, 46, 0) 58%);
    }

    .stats-card-black .stats-card-image img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .stats-card-black .stats-card-content {
        position: relative;
        z-index: 3;
    }

    /* --- Card 3: satisfied patients --- */
    .stats-card-yellow {
        background: #FDF8EA !important;
        color: #E7CF91;
    }

    .stats-card-yellow .stats-number {
        color: #EFB528 !important;
    }

    .stats-card-yellow .stats-text {
        color: #140F2D !important;
    }

    .stats-card-yellow .stats-text::after {
        background: #F5C542;
    }

    .stats-card-yellow .stats-card-image::before {
        background: #FBEFC6;
    }

    /* -----------------------------------------------------------------
       TEAM SLIDER
       On phones make one card prominent (full width of the visible
       track), snap it while swiping, and keep the arrows on the edges.
    ----------------------------------------------------------------- */
    .team-section h2,
    .team-section h3 {
        font-size: 1.25rem !important;   /* 20px */
        line-height: 1.3 !important;
    }

    .team-scroll-container {
        scroll-snap-type: x proximity;
        margin: 0 !important;
        padding: 15px 0 !important;
    }

    /* min-width:max-content made the wrapper size to ALL cards, so a
       percentage card width blew up. Reset it so one card = 100% of the
       visible track. */
    .team-scroll-wrapper {
        min-width: 0 !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .team-card-scroll {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        scroll-snap-align: center;
    }

    /* keep the left/right arrows on the card edges */
    .team-nav-btn {
        width: 42px;
        height: 42px;
    }
    .team-nav-left  { left: 6px; }
    .team-nav-right { right: 6px; }

    .team-section {
        padding-bottom: 16px !important;
    }
}