@charset "UTF-8";

/* Grid Layout
   ========================================================================== */
.mdr-testimony-slider {
    
    display: grid;
    grid-template-areas: "title-1"
                         "swiper"
                         "title-2"
                         "nav"
                         "text";
    
    grid-template-rows: auto 300px auto auto auto;
    grid-row-gap: 26px;
    
    padding: var(--mdr--padding-vertical) var(--mdr--padding-horizontal);
    
    
    overflow: hidden; /* very long title word (e.g. "Témoignages") might overflow on some resolutions and trigger an horizontal scrollbar */
}

.mdr-testimony-slider__title {
    display: grid;
    grid-column: title-1;
    grid-row: title-1 / title-2;
    
    grid-template-areas: "title-a" 
                         ".      "
                         "title-b"; 
    grid-template-columns: 1fr; /* poor subgrid support on MacOS/Chrome (halas...) */
    grid-template-rows: auto 1fr auto; /* poor subgrid support on MacOS/Chrome (halas...) */
}
.mdr-testimony-slider__title__part-1 {
    grid-area: title-a;
}
.mdr-testimony-slider__title__part-2 {
    grid-area: title-b;
    text-align: end;
}
.mdr-testimony-slider::before,
.mdr-testimony-slider::after {
    font-family: "Black Mango";
    font-size: 38px;
    line-height: 1.1em;    
    font-weight: 400;
    
    opacity: 0;
    speak: none;
    pointer-events: none;
}
.mdr-testimony-slider::before {
    content: attr(data-title-start);
    grid-area: title-1;
}
.mdr-testimony-slider::after {
    content: attr(data-title-end);
    grid-area: title-2;
    text-align: end;
}

.mdr-testimony-slider__swiper {
    grid-area: swiper;
    width: 100%;
    
    
    width: calc(100% + 2 * var(--mdr--padding-horizontal));
    margin-left: calc(-1 * var(--mdr--padding-horizontal));
}
.mdr-testimony-slider__swiper-nav {
    grid-area: nav;
}
.mdr-testimony-slider__text {
    grid-area: text;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: 20px;
}



@media screen and (min-width: 768px) {
    .mdr-testimony-slider {
        display: grid;
        grid-template-areas: "title-1 title-1"
                             "swiper  swiper"
                             "text    title-2"
                             "nav     nav";
        grid-template-columns: minmax(auto, 40ch) 1fr;
        grid-template-rows: max-content 450px max-content auto auto;
        grid-row-gap: 0px;
    }
    .mdr-testimony-slider__title {
        grid-template-columns: minmax(auto, 40ch) 1fr;
        grid-template-rows: max-content 450px max-content;
        grid-template-areas: "title-a title-a"
                             ".       .      "
                             ".       title-b";
    }
    .mdr-testimony-slider::before,
    .mdr-testimony-slider::after {
        font-size: 102px;
        line-height: 1em;   
    }
}

@media screen and (min-width: 1680px) {
    .mdr-testimony-slider {
        grid-template-areas:
            ".      title-1 title-1 ."
            "swiper swiper  swiper  swiper"
            ".      text    title-2 ."
            ".      nav     nav     .";
        grid-template-columns: 1fr 40ch 843px 1fr;
        grid-column-gap: 0px;
    }
}

/* Other
   ========================================================================== */
.mdr-testimony-slider__title {
    font-size: inherit;
    line-height: inherit;
}
.mdr-testimony-slider__title__part-1,
.mdr-testimony-slider__title__part-2 {
    font-family: "Black Mango";
    font-size: 38px;
    line-height: 1.1em;    
    font-weight: 400;
}
.mdr-testimony-slider__swiper-nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}
.mdr-testimony-slider__pagination {
    display: flex;
    width: 50px;
    flex-flow: row nowrap;
    justify-content: center;
}



.mdr-testimony-slider__swiper .swiper-wrapper.locked {
    margin-left: var(--mdr--padding-horizontal);
    width: calc(100% - 2 * var(--mdr--padding-horizontal));
    justify-content: space-evenly;
}
.mdr-testimony-slider__swiper-nav.locked {
    display: none;
}
.swiper-wrapper.locked .mdr-testimony-slider__swiper-slide {
    max-width: 327px;
}


@media screen and (min-width: 768px) {   
    .mdr-testimony-slider__swiper .testimony-card {
        height: 375px;
        max-width: 327px;
    }
    .swiper-wrapper > .mdr-testimony-slider__swiper-slide {
        transition: translate 600ms ease 0s;
    }
/*    .swiper-wrapper[data-active-index="odd"] > .mdr-testimony-slider__swiper-slide:nth-child(2n+2),
    .swiper-wrapper[data-active-index="even"] > .mdr-testimony-slider__swiper-slide:nth-child(2n+1) {
        translate: 0px 75px;
    }*/
    
    .mdr-testimony-slider__swiper-slide:nth-child(even) {
        padding-top:60px;
    }
    
    .mdr-testimony-slider__title__part-1,
    .mdr-testimony-slider__title__part-2 {
        font-size: 102px;
        line-height: 1em;   
    }
    .mdr-testimony-slider__text {
        margin-top: 26px;
    }
    .mdr-testimony-slider__swiper-nav {
        justify-content: flex-end;
        margin-top: 40px;
    }
}