/**
 * Voxel Companion — Read More (VC).
 *
 * Two collapse modes, chosen by the "Collapse by" control:
 *
 *   .vc-read-more--lines   clamps the text to N lines via CSS line-clamp
 *                          (best for a single teaser line/block).
 *   .vc-read-more--height  clips the text to a preview height
 *                          (best for long, multi-paragraph rich text).
 *
 * Either way, the `is-expanded` class on the container releases the text and
 * the button toggles it.
 */

.vc-read-more {
	position: relative;
	width: 100%;
}

.vc-read-more__text {
	position: relative;
}

/* --- Lines mode --------------------------------------------------------- */
.vc-read-more--lines .vc-read-more__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Height mode -------------------------------------------------------- */
.vc-read-more--height .vc-read-more__text {
	overflow: hidden;
	max-height: var( --vc-rm-peek, 8em );
	transition: max-height 0.35s ease;
}

/* Optional fade over the clipped preview (height mode only). */
.vc-read-more--fade:not( .is-expanded ) .vc-read-more__text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3em;
	background: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ), var( --vc-rm-fade-color, #fff ) );
	pointer-events: none;
}

/* --- Expanded (both modes) --------------------------------------------- */
.vc-read-more.is-expanded .vc-read-more__text {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	max-height: var( --vc-rm-max, 4000px );
	overflow: visible;
}

/* --- Button ------------------------------------------------------------ */
.vc-read-more__button-wrap {
	display: flex;
	width: 100%;
}

/* Hidden until JS confirms the text actually overflows. */
.vc-read-more:not( .vc-read-more--ready ) .vc-read-more__button-wrap {
	display: none;
}

.vc-read-more__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: none;
	background: none;
	text-decoration: none;
	font: inherit;
	line-height: inherit;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}