/**
 * Lumo Text Block — expandable truncated rich text.
 *
 * Layout:
 *   .lpt-tb
 *     .lpt-tb__viewport
 *       .lpt-tb__content
 *       .lpt-tb__fade          (optional)
 *     .lpt-tb__toggle-wrap     (optional)
 *       .lpt-tb__toggle
 *
 * Truncation modes:
 *   - lines  → CSS -webkit-line-clamp via --lpt-tb-lines
 *   - chars / words → JS clones text into collapsed/full spans
 *
 * @package LumoProToolkit
 * @since 1.47.0
 */

.elementor-widget-lumo-text-block {
	width: 100%;
	max-width: 100%;
}

.lpt-tb {
	--lpt-tb-duration: 320ms;
	--lpt-tb-fade: #ffffff;
	--lpt-tb-fade-h: 48px;
	--lpt-tb-lines: 4;
	--lpt-tb-easing: cubic-bezier(0.22, 1, 0.36, 1);

	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.lpt-tb *,
.lpt-tb *::before,
.lpt-tb *::after {
	box-sizing: border-box;
}

.lpt-tb__viewport {
	position: relative;
	overflow: hidden;
}

.lpt-tb__content {
	margin: 0;
	color: inherit;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.lpt-tb__content > *:first-child {
	margin-top: 0;
}

.lpt-tb__content > *:last-child {
	margin-bottom: 0;
}

/* ---- Line clamp (CSS) ---- */

.lpt-tb--by-lines.lpt-tb--truncate.is-collapsed .lpt-tb__content {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--lpt-tb-lines);
	line-clamp: var(--lpt-tb-lines);
	overflow: hidden;
}

.lpt-tb--by-lines.is-expanded .lpt-tb__content {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}

/* ---- Char / word: JS injects .lpt-tb__full / .lpt-tb__short ---- */

.lpt-tb.is-collapsed .lpt-tb__full {
	display: none !important;
}

.lpt-tb.is-expanded .lpt-tb__short {
	display: none !important;
}

.lpt-tb.is-collapsed .lpt-tb__short {
	display: block;
}

.lpt-tb.is-expanded .lpt-tb__full {
	display: block;
}

/* ---- Fade overlay ---- */

.lpt-tb__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--lpt-tb-fade-h);
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 0%, var(--lpt-tb-fade) 100%);
	opacity: 0;
	transition: opacity var(--lpt-tb-duration) var(--lpt-tb-easing);
	z-index: 1;
}

.lpt-tb--truncate.is-collapsed.lpt-tb--style-fade .lpt-tb__fade,
.lpt-tb--truncate.is-collapsed.lpt-tb--style-fade-button .lpt-tb__fade,
.lpt-tb--truncate.is-collapsed.lpt-tb--style-fade-link .lpt-tb__fade {
	opacity: 1;
}

.lpt-tb.is-expanded .lpt-tb__fade,
.lpt-tb:not(.lpt-tb--truncate) .lpt-tb__fade,
.lpt-tb.lpt-tb--no-truncate .lpt-tb__fade {
	opacity: 0;
	visibility: hidden;
}

/* Fade-only: whole viewport is clickable when collapsed */
.lpt-tb--style-fade.lpt-tb--truncate.is-collapsed .lpt-tb__viewport {
	cursor: pointer;
}

.lpt-tb--style-fade.lpt-tb--trigger-hover.lpt-tb--truncate.is-collapsed .lpt-tb__viewport {
	cursor: default;
}

/* ---- Toggle ---- */

.lpt-tb__toggle-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: 12px;
}

.lpt-tb__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #9333ea;
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	text-decoration: none;
	appearance: none;
	-webkit-appearance: none;
	transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.lpt-tb__toggle:hover,
.lpt-tb__toggle:focus {
	color: #7e22ce;
}

.lpt-tb__toggle:focus-visible {
	outline: 2px solid #9333ea;
	outline-offset: 3px;
}

.lpt-tb__toggle--link {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lpt-tb__toggle--button {
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: 6px;
	background-color: #9333ea;
	color: #fff;
	text-decoration: none;
}

.lpt-tb__toggle--button:hover,
.lpt-tb__toggle--button:focus {
	background-color: #7e22ce;
	color: #fff;
}

.lpt-tb__toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	flex-shrink: 0;
}

.lpt-tb__toggle-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.lpt-tb.is-collapsed .lpt-tb__toggle-icon--less {
	display: none;
}

.lpt-tb.is-expanded .lpt-tb__toggle-icon--more {
	display: none;
}

.lpt-tb.is-expanded:not(.lpt-tb--collapsible) .lpt-tb__toggle-wrap {
	display: none;
}

/* When content fits without truncate, hide chrome */
.lpt-tb.lpt-tb--no-truncate .lpt-tb__fade,
.lpt-tb.lpt-tb--no-truncate .lpt-tb__toggle-wrap {
	display: none !important;
}

.lpt-tb.lpt-tb--no-truncate {
	cursor: default;
}

.lpt-tb--empty {
	padding: 12px 14px;
	border: 1px dashed #cbd5e1;
	color: #64748b;
	font-size: 13px;
	border-radius: 8px;
}

/* Hover expand (desktop) — CSS assists; JS still syncs ARIA/labels */
@media (hover: hover) and (pointer: fine) {
	.lpt-tb--trigger-hover.lpt-tb--truncate:not(.lpt-tb--no-truncate):hover {
		/* class sync handled in JS for reliable char/word modes */
	}
}

@media (prefers-reduced-motion: reduce) {
	.lpt-tb,
	.lpt-tb__fade,
	.lpt-tb__toggle {
		transition: none !important;
	}
}

[dir="rtl"] .lpt-tb__toggle-wrap {
	/* justify-content still driven by Elementor control */
}