/* =========================================================
   Testimonial slider — Swiper (self-hosted, v11) carousel,
   styled to match the biotechgate.com "clients-testimonials"
   cards, but with OUR brand blue (not biotechgate green): card, logo top-left, scrollable quote,
   bold name + role, big circular arrows at the bottom.
   Requires assets/swiper/swiper-bundle.min.css loaded
   BEFORE this file. Scoped to .testimonials-section / .testimonial-swiper
   so it can be reused on welcome_prejpm_view.php + welcome_btg_view.php.
   ========================================================= */

.testimonials-section {
    padding: 20px 0 40px;
}

.testimonials-section .slider {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    color: #333;
}

.testimonials-section .slider-title {
    text-align: left;
    font-size: 34px;
    font-weight: 700;
    color: #1b2b3a;
    margin: 0 0 34px 4px;
}
.testimonials-section .slider-title .accent { color: #337ab7; }   /* our brand blue (partnering) */

/* ---- Swiper shell: bottom room for the arrows ---- */
.testimonial-swiper {
    position: relative;
    padding: 4px 4px 96px;
}

/* equal-height cards regardless of quote length */
.testimonial-swiper .swiper-slide {
    height: auto;
    display: flex;
}

/* ---- one testimonial card (pale blue, left aligned) ---- */
.testimonial-swiper .slider-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    width: 100%;
    min-height: 360px;
    background: #fff;                                   /* white card pops on the gray section bg */
    border: 1px solid #e6e8ec;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(20, 40, 70, .08);
    padding: 38px 40px 34px;
}

/* logo (top-left, muted / grayscale). Holds either an <img> or a text wordmark. */
.testimonial-swiper .testi-logo {
    height: 52px;
    margin-bottom: 26px;
    display: flex;
    align-items: center;
}
.testimonial-swiper .testi-logo img {
    max-height: 52px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
}
.testimonial-swiper .testi-wordmark {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9aa3ad;
}

/* quote: fills the middle, scrolls internally when long (cards stay equal height) */
.testimonial-swiper .testi-quote {
    flex: 1 1 auto;
    overflow-y: auto;
    margin-bottom: 22px;
    padding-right: 6px;
}
.testimonial-swiper .testi-quote p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #3a4149;
}
/* thin scrollbar inside the quote */
.testimonial-swiper .testi-quote::-webkit-scrollbar { width: 6px; }
.testimonial-swiper .testi-quote::-webkit-scrollbar-thumb { background: rgba(20,40,70,.18); border-radius: 4px; }

/* name / role */
.testimonial-swiper .testi-author { margin-top: auto; }
.testimonial-swiper .testi-name {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #1b2b3a;
    line-height: 1.25;
}
.testimonial-swiper .testi-sub {
    margin: 6px 0 0;
    font-size: 15px;
    color: #5b6470;
    line-height: 1.4;
}

/* ---- navigation arrows: big circular, pale blue, at the bottom ---- */
.testimonial-swiper .swiper-button-prev,
.testimonial-swiper .swiper-button-next {
    top: auto;
    bottom: 0;
    transform: none;
    width: 62px;
    height: 62px;
    margin: 0;
    border-radius: 50%;
    background: #fff;                                   /* white on the gray section, like the cards */
    color: #1b2b3a;
    border: 1px solid #e2e6ea;
    box-shadow: 0 2px 8px rgba(20, 40, 70, .10);
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.testimonial-swiper .swiper-button-prev { left: 8px; }
.testimonial-swiper .swiper-button-next { right: 8px; }
.testimonial-swiper .swiper-button-prev:hover,
.testimonial-swiper .swiper-button-next:hover {
    background: #337ab7;
    color: #fff;
    border-color: #337ab7;
    box-shadow: 0 6px 16px rgba(51, 122, 183, .35);
}
/* long thin arrows like the reference */
.testimonial-swiper .swiper-button-prev::after { content: "\2190"; }  /* ← */
.testimonial-swiper .swiper-button-next::after { content: "\2192"; }  /* → */
.testimonial-swiper .swiper-button-prev::after,
.testimonial-swiper .swiper-button-next::after {
    font-size: 26px;
    font-weight: 400;
}
.testimonial-swiper .swiper-button-disabled { opacity: .4; }

/* pagination dots not used in this design */
.testimonial-swiper .swiper-pagination { display: none; }

/* ---- mobile ---- */
@media (max-width: 767px) {
    .testimonials-section .slider-title { font-size: 26px; margin-bottom: 24px; }
    .testimonial-swiper { padding: 4px 4px 88px; }
    .testimonial-swiper .slider-row { min-height: 320px; padding: 30px 26px 28px; }
    .testimonial-swiper .swiper-button-prev,
    .testimonial-swiper .swiper-button-next { width: 52px; height: 52px; }
    .testimonial-swiper .swiper-button-prev::after,
    .testimonial-swiper .swiper-button-next::after { font-size: 22px; }
}