/* =====================================================================
   KlinikPlus – Testimonials slider · MOBILE (generic / reusable)
   ---------------------------------------------------------------------
   Extracted from home-mobile.css, where the same rules only ever applied
   under `.klinikplus-home-page`. Every page that renders <x-testimonials />
   needs them, so they live here unscoped and each page loads the file
   through `@section('styles')`.

   Everything is wrapped in `@media (max-width: 991px)` — large screens are
   never affected.
   ===================================================================== */

@media (max-width: 991px) {

    /* The slide keeps its desktop min/max-width of 408px, so on a 375px
       phone the card overflows the slider and the text is clipped on the
       right. Make one slide fill the visible track instead. */
    .testimonials-slider {
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-bottom: 76px !important;
        margin-top: 16px !important;
    }

    .testimonials-track {
        width: 100% !important;
        min-width: 0 !important;
        padding-bottom: 24px !important;
    }

    .testimonial-slide {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* klinikplus.css hides the prev/next arrows (and the dots) below 991px,
       so on a phone only the first card was reachable. Bring the arrows back
       as a centred pair BELOW the card (the JS slider already wires up
       next/prev + disabled states). Overlaying them on the sides would sit
       on top of the text. */
    .testimonials-nav {
        display: flex !important;
        top: auto !important;
        bottom: 16px !important;
        transform: none !important;
        width: 46px !important;
        height: 46px !important;
    }

    .testimonials-nav-prev {
        left: 50% !important;
        right: auto !important;
        margin-left: -54px !important;
    }

    .testimonials-nav-next {
        left: 50% !important;
        right: auto !important;
        margin-left: 8px !important;
    }

    /* The author panel is painted with a 310x127 SVG stretched to the block's
       box. On a phone that box is narrower and much taller, so the small tab
       on its top edge skews into a stray triangle. Use a plain rounded panel
       instead and recolour it for the card's dark state. */
    .testimonial-author-wrapper {
        padding-bottom: 8px !important;
    }

    .testimonial-author-wrapper:before {
        display: none !important;
    }

    .testimonial-author {
        align-items: center !important;
        gap: 12px !important;
        padding: 14px !important;
        border-radius: 16px !important;
        background-color: #F6F2ED;
        transition: background-color 0.25s ease;
    }

    .testimonial-card-new:hover .testimonial-author {
        background-color: #403A5F;
    }

    .author-avatar {
        width: 48px !important;
        height: 48px !important;
        background-color: #E7E0D6;
    }

    .author-info h4 {
        font-size: 0.9375rem !important;
        margin-bottom: 2px !important;
    }

    .author-info p {
        font-size: 0.8125rem !important;
        line-height: 1.35 !important;
    }

    /* Section rhythm — the desktop padding leaves a big empty band on phones. */
    .testimonials-section {
        padding-bottom: 12px !important;
    }

    /* The heading is `What People Say About Our <br> Business Services`, so it
       is meant to read on two lines. At 25.6px the first line needs 322px but
       only 319px was free (the wrapper adds 20px of side padding inside an
       already-padded container), so it spilled onto a third line — and pages
       that set `h2 { font-size: 2rem !important }` in their own <style> block
       pushed it out further still.

       Dropping the wrapper's extra padding and pinning the size keeps it to
       two lines at every phone width: the first line needs 277px against 359px
       free at 375px, and 304px free at 320px. The one-class selector also
       out-ranks those bare `h2` overrides. */
    .testimonials-section .klinikplus-container > .text-center {
        margin-bottom: 8px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .testimonials-section h2 {
        font-size: 1.375rem !important;   /* 22px */
        line-height: 1.3 !important;
    }
}