/* Testimonials + — i2t3 component styles
 * Richer testimonials (vs. the Bootstrap "testimonial"): carousel / grid /
 * cards / full layouts, 7 visual styles (ported 1:1 from Karma's
 * testimonials_style), star rating, decorative quote glyphs, sharp/rounded
 * border toggle, a 4-colour accent and carousel controls/indicators/autoplay
 * (interval configurable). Carousels are driven by the global Bootstrap bundle
 * (no own JS).
 *
 * Accent: section sets --i2t3-testimonial-accent / -accent-rgb from --bs-{color}.
 */

.i2t3-testimonial-plus {
    --i2t3-testimonial-accent: #0d6efd;
    --i2t3-testimonial-accent-rgb: 13, 110, 253;
}

/* --- base card --- */
.i2t3-testimonial-plus__card {
    background: var(--i2t3-surface, #fff);
    border-radius: .75rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08);
    padding: 1.75rem;
    height: 100%;
    margin: 0;
}
.i2t3-testimonial-plus--carousel .i2t3-testimonial-plus__card {
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
}

.i2t3-testimonial-plus__rating { color: #f5a623; margin-bottom: .75rem; }
.i2t3-testimonial-plus__heading { font-size: 1.15rem; font-weight: 600; margin-bottom: .5rem; }
.i2t3-testimonial-plus__quote { font-size: 1.1rem; margin-bottom: 1.25rem; position: relative; }
.i2t3-testimonial-plus__quote > :last-child { margin-bottom: 0; }

.i2t3-testimonial-plus__person {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.i2t3-testimonial-plus--carousel .i2t3-testimonial-plus__person { justify-content: center; }
.i2t3-testimonial-plus__avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
.i2t3-testimonial-plus__meta { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.i2t3-testimonial-plus__name { font-weight: 600; }
.i2t3-testimonial-plus__role { font-size: .875rem; }
.i2t3-testimonial-plus__company { font-size: .8rem; font-weight: 600; }

/* --- decorative quote glyphs (Karma testimonial-with-quotes) --- */
.i2t3-testimonial-plus--quotes .i2t3-testimonial-plus__quote {
    padding: 0 2.5rem;
}
.i2t3-testimonial-plus--quotes .i2t3-testimonial-plus__quote::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: -.35em;
    font-size: 4.5rem;
    line-height: 1;
    color: rgba(var(--i2t3-testimonial-accent-rgb), .55);
    font-family: Georgia, "Playfair Display", serif;
}

/* --- sharp (square) corners: avatar + card --- */
.i2t3-testimonial-plus--sharp .i2t3-testimonial-plus__avatar { border-radius: 0; }
.i2t3-testimonial-plus--sharp .i2t3-testimonial-plus__card { border-radius: 0; }

/* =====================================================================
 * Styles (ported from Karma testimonials_style 1:1 in spirit)
 * ===================================================================== */

/* default: solid accent-coloured blockquote on the card.
 * Only paints the blockquote when a colour was chosen, otherwise the plain
 * white card is kept. */
.i2t3-testimonial-plus--style-default.i2t3-testimonial-plus--colored .i2t3-testimonial-plus__quote {
    background: var(--i2t3-testimonial-accent);
    color: #fff;
    border-radius: .5rem;
    padding: 1.5rem 1.75rem;
}
.i2t3-testimonial-plus--style-default.i2t3-testimonial-plus--colored.i2t3-testimonial-plus--quotes .i2t3-testimonial-plus__quote::before {
    color: rgba(255, 255, 255, .6);
}

/* transparent: no card chrome at all */
.i2t3-testimonial-plus--style-transparent .i2t3-testimonial-plus__card {
    background: transparent;
    box-shadow: none;
    padding: 1rem 0;
}

/* backgroundLight: subtle grey fill, no shadow */
.i2t3-testimonial-plus--style-backgroundLight .i2t3-testimonial-plus__card {
    background: var(--bs-light, #f5f5f5);
    box-shadow: none;
}

/* outline: bordered card, no shadow */
.i2t3-testimonial-plus--style-outline .i2t3-testimonial-plus__card {
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--bs-border-color, #dee2e6);
}

/* bottomBorder: flat card with an accent underline on the quote */
.i2t3-testimonial-plus--style-bottomBorder .i2t3-testimonial-plus__card {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.i2t3-testimonial-plus--style-bottomBorder .i2t3-testimonial-plus__quote {
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--i2t3-testimonial-accent);
}

/* largeFontSize: oversized quote typography */
.i2t3-testimonial-plus--style-largeFontSize .i2t3-testimonial-plus__card {
    box-shadow: none;
}
.i2t3-testimonial-plus--style-largeFontSize .i2t3-testimonial-plus__quote {
    font-size: 1.6rem;
    line-height: 1.35;
}

/* boxshadow: a stronger, lifted shadow */
.i2t3-testimonial-plus--style-boxshadow .i2t3-testimonial-plus__card {
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .14);
    padding: 2rem;
}

/* =====================================================================
 * Cards layout (Karma "cards"): avatar/name on top, h4 heading, quote, stars
 * ===================================================================== */
.i2t3-testimonial-plus__card--cardlayout { text-align: left; }
.i2t3-testimonial-plus__person--top { margin-bottom: 1rem; }
.i2t3-testimonial-plus__card--cardlayout .i2t3-testimonial-plus__avatar { width: 3.5rem; height: 3.5rem; }
.i2t3-testimonial-plus__card--cardlayout .i2t3-testimonial-plus__rating { margin-top: .75rem; margin-bottom: 0; }

/* =====================================================================
 * Full layout (Karma "carousels.full"): name left, stars right, then quote
 * ===================================================================== */
.i2t3-testimonial-plus--full .i2t3-testimonial-plus__card { max-width: 56rem; margin: 0 auto; text-align: left; }
.i2t3-testimonial-plus__fullhead {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .i2t3-testimonial-plus__fullhead {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}
.i2t3-testimonial-plus__card--full .i2t3-testimonial-plus__rating { margin-bottom: 0; }
.i2t3-testimonial-plus__card--full .i2t3-testimonial-plus__quote { font-size: 1.25rem; }

/* Keep the dark carousel controls visible on light cards */
.i2t3-testimonial-plus__carousel .carousel-control-prev,
.i2t3-testimonial-plus__carousel .carousel-control-next { width: 3rem; filter: invert(1) grayscale(1); }
.i2t3-testimonial-plus__carousel .carousel-indicators [data-bs-target] { background-color: var(--i2t3-testimonial-accent); }