/**
 * AL Testimonials - Mobile Solo Mode Override v10 FONT & COLOR MIGRATION
 * Dev: Paul .Y 20260202
 *
 * LOAD AFTER testimonials.css
 * Breakpoint: 1038px
 *
 * v10: Roboto → Afacad Flux, #5A4F42 → #2A2A2A (Dark-Text)
 * v9:  Production fix — high z-index dots, force pointer-events
 */


/* ============================================================
   MOBILE SOLO MODE - 1 CARD ONLY + PAGINATION
   Breakpoint: 1038px and below
   ============================================================ */

@media screen and (max-width: 1038px) {

    /* Force wrapper to column layout */
    .al-testi-wrapper,
    div.al-testi-wrapper,
    [class*="al-testi-wrapper"],
    .al-carousel {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Carousel container */
    .al-testi-carousel,
    div.al-testi-carousel,
    [class*="al-testi-carousel"],
    .al-carousel-viewport {
        width: 100% !important;
        overflow: hidden !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Track — BLOCK not FLEX */
    .al-testi-track,
    div.al-testi-track,
    [class*="al-testi-track"],
    .al-carousel-track {
        display: block !important;
        transform: none !important;
        transition: none !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* ========================================
       HIDE ALL SLIDES
       ======================================== */
    .al-testi-slide,
    div.al-testi-slide,
    [class*="al-testi-slide"],
    .al-carousel-slide {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        top: 0 !important;
        width: 100% !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        transform: none !important;
        flex-shrink: unset !important;
        z-index: 1 !important;
    }

    /* ========================================
       SHOW ONLY ACTIVE SLIDE
       ======================================== */
    .al-testi-slide.active,
    div.al-testi-slide.active,
    [class*="al-testi-slide"].active,
    .al-carousel-slide.active {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        z-index: 2 !important;
    }

    /* Card full width */
    .al-testi-card,
    div.al-testi-card,
    [class*="al-testi-card"],
    .al-carousel-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Image full width */
    .al-testi-img,
    img.al-testi-img,
    [class*="al-testi-img"],
    .al-carousel-img {
        width: 100% !important;
        max-width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
    }

    .al-testi-img-placeholder,
    div.al-testi-img-placeholder,
    [class*="al-testi-img-placeholder"],
    .al-carousel-img-placeholder {
        width: 100% !important;
        max-width: 100% !important;
        height: 220px !important;
    }

    /* Content spacing */
    .al-testi-content,
    div.al-testi-content,
    [class*="al-testi-content"],
    .al-carousel-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    /* Typography — Afacad Flux, Dark-Text */
    .al-testi-card-title,
    h4.al-testi-card-title,
    [class*="al-testi-card-title"],
    .al-carousel-title {
        font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-size: 18px !important;
        font-weight: 400 !important;
        color: #2A2A2A !important;
        line-height: 1.4 !important;
    }

    .al-testi-quote,
    p.al-testi-quote,
    [class*="al-testi-quote"],
    .al-carousel-quote {
        font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-size: 16px !important;
        font-weight: 300 !important;
        color: #2A2A2A !important;
        line-height: 1.6 !important;
    }

    .al-testi-author,
    p.al-testi-author,
    [class*="al-testi-author"],
    .al-carousel-author {
        font-family: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        color: #2A2A2A !important;
        line-height: 1.4 !important;
    }

    /* ========================================
       PAGINATION DOTS — FORCE CLICKABLE
       ======================================== */

    .al-testi-dots,
    div.al-testi-dots,
    [class*="al-testi-dots"],
    .al-carousel-dots,
    div.al-carousel-dots {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        margin-top: 10px !important;
        margin-bottom: 0 !important;
        padding: 10px 0 !important;
        position: relative !important;
        z-index: 1000 !important;
        pointer-events: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .al-testi-dot,
    button.al-testi-dot,
    [class*="al-testi-dot"],
    .al-carousel-dot,
    button.al-carousel-dot {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 10px !important;
        height: 10px !important;
        min-width: 10px !important;
        min-height: 10px !important;
        max-width: 10px !important;
        max-height: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 50% !important;
        background: #E8E5DF !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 1001 !important;
        pointer-events: auto !important;
        transition: background 0.3s ease, transform 0.2s ease !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }

    .al-testi-dot:hover,
    button.al-testi-dot:hover,
    .al-carousel-dot:hover,
    button.al-carousel-dot:hover {
        background: #47614D !important;
        transform: scale(1.2) !important;
        cursor: pointer !important;
    }

    .al-testi-dot.active,
    button.al-testi-dot.active,
    [class*="al-testi-dot"].active,
    .al-carousel-dot.active,
    button.al-carousel-dot.active {
        background: #2A2A2A !important;   /* Dark-Text */
        cursor: pointer !important;
    }

    .al-testi-dot:focus,
    button.al-testi-dot:focus,
    .al-carousel-dot:focus,
    button.al-carousel-dot:focus {
        outline: 2px solid #2A2A2A !important;
        outline-offset: 2px !important;
        cursor: pointer !important;
    }

    /* Remove blocking pseudo-elements */
    .al-testi-dots::before,
    .al-carousel-dots::before,
    .al-testi-dots::after,
    .al-carousel-dots::after {
        display: none !important;
        content: none !important;
    }
}


/* ============================================================
   SMALL MOBILE (<=600px)
   ============================================================ */

@media screen and (max-width: 600px) {

    .al-testi-wrapper,
    div.al-testi-wrapper,
    .al-carousel {
        gap: 25px !important;
    }

    .al-testi-slide.active,
    div.al-testi-slide.active,
    .al-carousel-slide.active {
        padding: 15px !important;
    }

    .al-testi-img,
    img.al-testi-img,
    .al-testi-img-placeholder,
    div.al-testi-img-placeholder,
    .al-carousel-img,
    .al-carousel-img-placeholder {
        height: 180px !important;
    }

    .al-testi-content,
    div.al-testi-content,
    .al-carousel-content {
        gap: 20px !important;
    }

    .al-testi-card,
    div.al-testi-card,
    .al-carousel-card {
        gap: 20px !important;
    }

    .al-testi-dots,
    .al-carousel-dots {
        z-index: 1000 !important;
        pointer-events: auto !important;
    }

    .al-testi-dot,
    .al-carousel-dot {
        z-index: 1001 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}


/* ============================================================
   VERY SMALL MOBILE (<=400px)
   ============================================================ */

@media screen and (max-width: 400px) {

    .al-testi-slide.active,
    div.al-testi-slide.active,
    .al-carousel-slide.active {
        padding: 10px !important;
    }

    .al-testi-img,
    img.al-testi-img,
    .al-testi-img-placeholder,
    div.al-testi-img-placeholder,
    .al-carousel-img,
    .al-carousel-img-placeholder {
        height: 160px !important;
    }

    .al-testi-card-title,
    h4.al-testi-card-title,
    .al-carousel-title {
        font-size: 16px !important;
    }

    .al-testi-quote,
    p.al-testi-quote,
    .al-carousel-quote {
        font-size: 14px !important;
    }

    .al-testi-author,
    p.al-testi-author,
    .al-carousel-author {
        font-size: 14px !important;
    }

    .al-testi-dots,
    div.al-testi-dots,
    .al-carousel-dots {
        gap: 10px !important;
        z-index: 1000 !important;
        pointer-events: auto !important;
    }

    .al-testi-dot,
    button.al-testi-dot,
    .al-carousel-dot,
    button.al-carousel-dot {
        width: 8px !important;
        height: 8px !important;
        min-width: 8px !important;
        min-height: 8px !important;
        max-width: 8px !important;
        max-height: 8px !important;
        z-index: 1001 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}


/* ============================================================
   TABLET LANDSCAPE (768px–1038px)
   ============================================================ */

@media screen and (min-width: 768px) and (max-width: 1038px) {

    .al-testi-dots,
    .al-carousel-dots {
        padding: 15px 0 !important;
        z-index: 1000 !important;
        pointer-events: auto !important;
    }

    .al-testi-dot,
    .al-carousel-dot {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
        max-width: 12px !important;
        max-height: 12px !important;
        z-index: 1001 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}


/* ============================================================
   FORCE CLICKABLE — Nuclear option
   ============================================================ */

@media screen and (max-width: 1038px) {

    body .al-carousel-dots *,
    body .al-testi-dots * {
        pointer-events: auto !important;
    }

    .al-carousel-dots,
    .al-testi-dots {
        isolation: isolate !important;
    }

    .al-carousel-dot,
    .al-testi-dot {
        isolation: isolate !important;
        touch-action: manipulation !important;
    }
}