/* ==========================================

   MOSTPLAY PARTNERS - TESTIMONIALS

========================================== */



.mp-testimonials {

    --mp-testimonials-bg: #ffffff;

    --mp-testimonials-green: #0e2749;

    --mp-testimonials-text: #111e1b;

    --mp-testimonials-muted: #65716d;



    position: relative;

    isolation: isolate;

    width: 100%;

    padding: 105px 0 115px;

    margin: 0;

    background: var(--mp-testimonials-bg);

    color: var(--mp-testimonials-text);

    overflow: hidden;

}



.mp-testimonials *,

.mp-testimonials *::before,

.mp-testimonials *::after {

    box-sizing: border-box;

}



/* ==========================================

   WORLD MAP BACKGROUND

========================================== */



.mp-testimonials__background {

    position: absolute;

    inset: 0;

    z-index: -1;



    background-size: min(100%, 1450px) auto;

    background-position: center center;

    background-repeat: no-repeat;



    opacity: 0.65;

    pointer-events: none;

}



/* ==========================================

   MAIN LAYOUT

========================================== */



.mp-testimonials__container {

    position: relative;

    z-index: 1;



    display: grid;

    grid-template-columns:

        minmax(0, 1.12fr)

        minmax(0, 0.88fr);



    align-items: center;

    gap: clamp(55px, 7vw, 120px);



    width: min(calc(100% - 80px), 1380px);

    margin: 0 auto;

}



/* ==========================================

   LEFT - TESTIMONIAL CARDS

========================================== */



.mp-testimonials__cards {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 22px;



    width: 100%;

    min-width: 0;

    padding: 16px 40px 16px 0;

}



.mp-testimonials__card {

    position: relative;



    width: min(100%, 490px);

    padding: 22px 25px 23px;



    background: #ffffff;

    border: 1px solid rgba(17, 40, 31, 0.055);

    border-radius: 17px;



    box-shadow:

        0 15px 45px rgba(30, 42, 39, 0.08),

        0 3px 12px rgba(30, 42, 39, 0.045);



    text-align: left;

}



/* Staggered card arrangement */



.mp-testimonials__card:nth-child(3n + 1) {

    margin-left: 0;

}



.mp-testimonials__card:nth-child(3n + 2) {

    margin-left: 66px;

}



.mp-testimonials__card:nth-child(3n) {

    margin-left: 20px;

}



/* Card header */



.mp-testimonials__card-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;



    margin-bottom: 16px;

}



.mp-testimonials__person {

    display: flex;

    align-items: center;

    gap: 13px;



    min-width: 0;

}



.mp-testimonials__avatar,

.mp-testimonials__avatar-placeholder {

    display: flex;

    align-items: center;

    justify-content: center;



    width: 51px;

    height: 51px;

    flex: 0 0 51px;



    border-radius: 50%;

    overflow: hidden;

}



.mp-testimonials__avatar {

    display: block;

    object-fit: cover;

    object-position: center;

}



.mp-testimonials__avatar-placeholder {

    background: #e4eee7;

    color: var(--mp-testimonials-green);

    font-size: 22px;

    font-weight: 800;

}



.mp-testimonials__person-info {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;

}



.mp-testimonials__name {

    margin: 0;

    color: #15201b;



    font-size: 16px;

    font-weight: 800;

    line-height: 1.35;

}



.mp-testimonials__country {

    color: #7a8882;

    font-size: 12px;

    font-weight: 500;

    line-height: 1.4;

}



/* Social icon - decorative only */



.mp-testimonials__social-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;



    width: 25px;

    height: 25px;

    flex: 0 0 25px;



    margin-top: 2px;

}



.mp-testimonials__social-icon img {

    display: block;

    width: 20px;

    height: 20px;

    object-fit: contain;

}



/* Review */



.mp-testimonials__review {

    color: #4f5d57;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.75;

}



.mp-testimonials__review p {

    margin: 0 0 10px;

}



.mp-testimonials__review p:last-child {

    margin-bottom: 0;

}



/* ==========================================

   RIGHT - INTRODUCTION

========================================== */



.mp-testimonials__content {

    min-width: 0;

    padding: 10px 0 15px;

}



.mp-testimonials__emoji {

    margin-bottom: 18px;

    font-size: 45px;

    line-height: 1.15;

}



.mp-testimonials__eyebrow {

    margin: 0 0 17px;



    color: var(--mp-testimonials-green);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.8px;

    line-height: 1.5;

    text-transform: uppercase;

}



.mp-testimonials__heading {

    max-width: 530px;

    margin: 0 0 25px;



    color: #14251c;

    font-size: clamp(39px, 4vw, 62px);

    font-weight: 800;

    line-height: 1.09;

    letter-spacing: -2px;

    text-wrap: balance;

}



.mp-testimonials__description {

    max-width: 500px;

    margin-bottom: 31px;



    color: var(--mp-testimonials-muted);

    font-size: 16px;

    font-weight: 400;

    line-height: 1.8;

}



.mp-testimonials__description p {

    margin: 0 0 14px;

}



.mp-testimonials__description p:last-child {

    margin-bottom: 0;

}



/* CTA button */



.mp-testimonials__cta {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;



    min-height: 54px;

    max-width: 100%;

    padding: 14px 25px;



    border: 1px solid var(--mp-testimonials-green);

    border-radius: 100px;



    background: var(--mp-testimonials-green);

    color: #ffffff;



    font-size: 15px;

    font-weight: 700;

    line-height: 1.4;

    text-decoration: none;



    transition:

        transform 0.25s ease,

        background-color 0.25s ease,

        box-shadow 0.25s ease;

}



.mp-testimonials__cta svg {

    width: 20px;

    height: 20px;

    flex-shrink: 0;

}



.mp-testimonials__cta:hover {

    transform: translateY(-3px);

    background: #163e90;

    color: #ffffff;

    box-shadow: 0 8px 22px rgba(34,84,186,0.18);

}



.mp-testimonials__cta:focus-visible {

    outline: 3px solid #163e90;

    outline-offset: 4px;

}



/* ==========================================

   LAPTOP

========================================== */



@media (max-width: 1199px) {



    .mp-testimonials {

        padding: 85px 0 95px;

    }



    .mp-testimonials__container {

        width: min(calc(100% - 60px), 1100px);

        gap: 45px;

    }



    .mp-testimonials__cards {

        padding-right: 25px;

    }



    .mp-testimonials__card:nth-child(3n + 2) {

        margin-left: 30px;

    }



    .mp-testimonials__card:nth-child(3n) {

        margin-left: 10px;

    }



    .mp-testimonials__heading {

        font-size: clamp(36px, 4vw, 50px);

    }

}



/* ==========================================

   TABLET

========================================== */



@media (max-width: 900px) {



    .mp-testimonials {

        padding: 75px 0 85px;

    }



    .mp-testimonials__container {

        grid-template-columns: 1fr;

        gap: 55px;



        width: min(calc(100% - 48px), 700px);

    }



    .mp-testimonials__cards {

        order: 2;

        padding: 0 45px 0 0;

        margin: 0 auto;

    }



    .mp-testimonials__content {

        order: 1;

        max-width: 600px;

        padding: 0;

    }



    .mp-testimonials__card {

        width: min(100%, 520px);

    }



    .mp-testimonials__card:nth-child(3n + 2) {

        margin-left: 45px;

    }



    .mp-testimonials__card:nth-child(3n) {

        margin-left: 15px;

    }



    .mp-testimonials__heading {

        max-width: 550px;

        font-size: clamp(40px, 6vw, 55px);

    }



    .mp-testimonials__background {

        background-size: 115% auto;

        background-position: center;

        opacity: 0.13;

    }

}



/* ==========================================

   MOBILE

========================================== */



@media (max-width: 600px) {



    .mp-testimonials {

        padding: 60px 0 70px;

    }



    .mp-testimonials__container {

        width: calc(100% - 36px);

        gap: 40px;

    }



    .mp-testimonials__emoji {

        font-size: 38px;

        margin-bottom: 14px;

    }



    .mp-testimonials__eyebrow {

        font-size: 11px;

        letter-spacing: 2px;

        margin-bottom: 14px;

    }



    .mp-testimonials__heading {

        font-size: clamp(34px, 8vw, 44px);

        line-height: 1.12;

        letter-spacing: -1.2px;

        margin-bottom: 18px;

    }



    .mp-testimonials__description {

        font-size: 14px;

        line-height: 1.75;

        margin-bottom: 25px;

    }



    .mp-testimonials__cta {

        min-height: 48px;

        font-size: 14px;

        padding: 12px 22px;

    }



    .mp-testimonials__cards {

        width: 100%;

        gap: 17px;

        padding-right: 12px;

    }



    .mp-testimonials__card {

        padding: 18px 18px 19px;

        border-radius: 14px;

    }



    .mp-testimonials__card:nth-child(3n + 1) {

        margin-left: 0;

    }



    .mp-testimonials__card:nth-child(3n + 2) {

        margin-left: 12px;

    }



    .mp-testimonials__card:nth-child(3n) {

        margin-left: 0;

    }



    .mp-testimonials__avatar,

    .mp-testimonials__avatar-placeholder {

        width: 43px;

        height: 43px;

        flex-basis: 43px;

    }



    .mp-testimonials__name {

        font-size: 14px;

    }



    .mp-testimonials__country {

        font-size: 11px;

    }



    .mp-testimonials__review {

        font-size: 13px;

        line-height: 1.65;

    }



    .mp-testimonials__social-icon {

        width: 22px;

        height: 22px;

        flex-basis: 22px;

    }



    .mp-testimonials__social-icon img {

        width: 18px;

        height: 18px;

    }



    .mp-testimonials__background {

        background-size: auto 65%;

        background-position: center;

        opacity: 0.1;

    }

}



/* ==========================================

   EXTRA SMALL MOBILE

========================================== */



@media (max-width: 380px) {



    .mp-testimonials__container {

        width: calc(100% - 28px);

    }



    .mp-testimonials__heading {

        font-size: 32px;

    }



    .mp-testimonials__card {

        padding: 16px;

    }



    .mp-testimonials__person {

        gap: 10px;

    }



    .mp-testimonials__review {

        font-size: 12px;

    }

}



/* ==========================================

   REDUCED MOTION

========================================== */



@media (prefers-reduced-motion: reduce) {



    .mp-testimonials__cta {

        transition: none;

    }



    .mp-testimonials__cta:hover {

        transform: none;

    }

}





/* ==========================================

   MOSTPLAY YELLOW - GET STARTED BUTTON

========================================== */



.mp-testimonials__cta {

    background: #f4b600;

    border-color: #FFD600;

    color: #111111;

}



.mp-testimonials__cta:hover {

    background: #F5C400;

    border-color: #F5C400;

    color: #111111;

    box-shadow: 0 8px 22px rgba(255, 214, 0, 0.25);

}



.mp-testimonials__cta:focus-visible {

    outline-color: #FFD600;

}







/* ==========================================

   TESTIMONIAL CARDS - DESKTOP WIDTH ONLY

========================================== */



@media (min-width: 1200px) {



    .mp-testimonials__card {

        width: min(100%, 600px);

        max-width: 600px;

    }



    .mp-testimonials__cards {

        padding-right: 0;

    }



}







/* ==========================================

   MOSTPLAY - SMOOTH VERTICAL TESTIMONIALS

   CLEAN REPLACEMENT

========================================== */



/* One continuous track for all reviews */



.mp-testimonials__track {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 22px;



    width: 100%;

    min-width: 0;

    padding: 20px 0;



    transform: translate3d(0, 0, 0);

    backface-visibility: hidden;

}



/* Carousel viewport */



.mp-testimonials__cards.is-vertical-carousel {

    display: block;

    position: relative;



    width: 100%;

    min-width: 0;

    padding: 0;



    overflow: hidden;



    transition: height 850ms ease;



    /* Soft fade at the top and bottom edges */

    -webkit-mask-image: linear-gradient(

        to bottom,

        transparent 0%,

        black 4%,

        black 96%,

        transparent 100%

    );



    mask-image: linear-gradient(

        to bottom,

        transparent 0%,

        black 4%,

        black 96%,

        transparent 100%

    );

}



/* Desktop cards */



@media (min-width: 901px) {



    .mp-testimonials__track > .mp-testimonials__card {

        flex: 0 0 auto;

        width: min(calc(100% - 68px), 550px);

        max-width: 550px;



        /* Override old nth-child stagger rules */

        margin-left: 0;

    }



    .mp-testimonials__track

    > .mp-testimonials__card.mp-testimonials__stagger-0 {

        margin-left: 0;

    }



    .mp-testimonials__track

    > .mp-testimonials__card.mp-testimonials__stagger-1 {

        margin-left: 55px;

    }



    .mp-testimonials__track

    > .mp-testimonials__card.mp-testimonials__stagger-2 {

        margin-left: 18px;

    }

}



/* ==========================================

   MOBILE - SHOW 2 REVIEWS

========================================== */



@media (max-width: 900px) {



    .mp-testimonials__cards.is-vertical-carousel {

        width: 100%;

        margin: 0;

        padding: 0;

    }



    .mp-testimonials__track {

        gap: 16px;

        padding: 16px 0;

    }



    .mp-testimonials__track > .mp-testimonials__card {

        flex: 0 0 auto;



        width: calc(100% - 14px);

        max-width: none;



        margin-left: 0 !important;

    }



    /* Gentle stagger on the mobile layout */



    .mp-testimonials__track

    > .mp-testimonials__card.mp-testimonials__stagger-1 {

        margin-left: 10px !important;

    }



    .mp-testimonials__track

    > .mp-testimonials__card.mp-testimonials__stagger-2 {

        margin-left: 5px !important;

    }

}



/* ==========================================

   REDUCED MOTION

========================================== */



@media (prefers-reduced-motion: reduce) {



    .mp-testimonials__cards.is-vertical-carousel {

        height: auto !important;

        overflow: visible;

        -webkit-mask-image: none;

        mask-image: none;

        transition: none;

    }



    .mp-testimonials__track {

        transform: none !important;

        transition: none !important;

    }

}


.mp-testimonials__emoji > img.emoji {
    display: block;
    width: 1em;
    height: 1em;
}