/* Read more — i2t3 component styles
 * Collapses rich text to a set height with a fade, expands on click.
 * Height via the --i2t3-readmore-height custom property (set per element).
 * The fade colour follows --i2t3-readmore-fade so it can match a coloured box.
 */

.i2t3-readmore__content {
    position: relative;
    overflow: hidden;
    max-height: var(--i2t3-readmore-height, 8rem);
    transition: max-height .35s ease;
}

.i2t3-readmore__content > :last-child {
    margin-bottom: 0;
}

/* Fade-out overlay while collapsed.
 * Default fades to the page background (white); a boxed variant overrides
 * --i2t3-readmore-fade so the gradient blends into the box colour instead. */
.i2t3-readmore__content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4rem;
    background: linear-gradient(
        rgba(var(--i2t3-readmore-fade-rgb, 255, 255, 255), 0),
        var(--i2t3-readmore-fade, #fff)
    );
    pointer-events: none;
    transition: opacity .2s ease;
}

.i2t3-readmore.is-open .i2t3-readmore__content::after {
    opacity: 0;
}

/* Content shorter than the collapsed height: no fade, no button */
.i2t3-readmore--short .i2t3-readmore__content::after {
    display: none;
}

.i2t3-readmore__toggle {
    padding-left: 0;
    padding-right: 0;
}

.i2t3-readmore__icon {
    margin-left: .35rem;
}

/* Icon-only toggle: square, no horizontal text padding stripped */
.i2t3-readmore__toggle--icon {
    padding-left: .5rem;
    padding-right: .5rem;
}

/* ---- Boxed variant (Karma overlay): coloured box + matching tinted fade ---- */
.i2t3-readmore--boxed {
    padding: 3rem;
    border-radius: var(--bs-border-radius, .375rem);
    color: #fff;
}

.i2t3-readmore--boxed .i2t3-readmore__content {
    color: #fff;
}

/* On a coloured box the link/text button needs to stay readable */
.i2t3-readmore--boxed .i2t3-readmore__toggle {
    color: #fff;
}

.i2t3-readmore--boxed .i2t3-readmore__toggle.btn:not(.btn-link) {
    border-color: transparent;
}

.i2t3-readmore--primary {
    background-color: var(--bs-primary, #0d6efd);
    --i2t3-readmore-fade: var(--bs-primary, #0d6efd);
    --i2t3-readmore-fade-rgb: var(--bs-primary-rgb, 13, 110, 253);
}

.i2t3-readmore--secondary {
    background-color: var(--bs-secondary, #6c757d);
    --i2t3-readmore-fade: var(--bs-secondary, #6c757d);
    --i2t3-readmore-fade-rgb: var(--bs-secondary-rgb, 108, 117, 125);
}

/* Karma "tertiary"/"quaternary" are theme-specific accents; map to the
 * Bootstrap variables if present, fall back to info/dark otherwise. */
.i2t3-readmore--tertiary {
    background-color: var(--bs-tertiary, var(--bs-info, #0dcaf0));
    --i2t3-readmore-fade: var(--bs-tertiary, var(--bs-info, #0dcaf0));
    --i2t3-readmore-fade-rgb: var(--bs-tertiary-rgb, var(--bs-info-rgb, 13, 202, 240));
}

.i2t3-readmore--quaternary {
    background-color: var(--bs-quaternary, var(--bs-dark, #212529));
    --i2t3-readmore-fade: var(--bs-quaternary, var(--bs-dark, #212529));
    --i2t3-readmore-fade-rgb: var(--bs-quaternary-rgb, var(--bs-dark-rgb, 33, 37, 41));
}