/**
 * "DB Archive Category Content" widget — Read More / Read Less.
 *
 * The description is never truncated in PHP; it is clamped visually. Two modes:
 *
 *   lines  — `-webkit-line-clamp`, so the cut always lands on a line boundary
 *            and adapts to the font size at every breakpoint.
 *   height — a `max-height`, for descriptions that mix text with images where
 *            a line count is meaningless.
 *
 * Both resting states are pure CSS, so the collapsed view is correct on the
 * very first paint with no flash of the full text. The script animates only
 * the transition between the two states.
 */

.dba-cc {
	--dba-cc-lines: 4;
	--dba-cc-height: 120px;
	--dba-cc-fade-height: 56px;
	--dba-cc-fade-color: #fff;
	--dba-cc-toggle-align: left;

	position: relative;
	width: 100%;
}

/* --------------------------------------------------------------------------
 * Content
 * ----------------------------------------------------------------------- */

.dba-cc__content {
	position: relative;
	overflow: hidden;
	font-family: inherit;
	color: var( --dba-text-color );
}

.dba-cc__content a {
	color: var( --dba-accent-color );
}

/* Collapsed — line-clamp mode. */
.dba-cc--lines .dba-cc__content {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var( --dba-cc-lines );
	line-clamp: var( --dba-cc-lines );
}

/* Collapsed — fixed-height mode. */
.dba-cc--height .dba-cc__content {
	max-height: var( --dba-cc-height );
}

/**
 * Expanded, and the "it already fits" case. Both restore normal flow: the
 * -webkit-box display used for clamping is dropped so margins between
 * paragraphs collapse the way they do everywhere else on the site.
 */
.dba-cc.is-expanded .dba-cc__content,
.dba-cc.is-not-clipped .dba-cc__content {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	max-height: none;
	overflow: visible;
}

/* While the script animates the height it owns overflow clipping. */
.dba-cc.is-animating .dba-cc__content {
	overflow: hidden;
}

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

/**
 * A grid rather than a flex row: `justify-items` accepts left / center / right
 * *and* stretch, so the "Full width" alignment option genuinely stretches the
 * button instead of silently behaving like left.
 */
.dba-cc__actions {
	position: relative;
	display: grid;
	justify-items: var( --dba-cc-toggle-align );
	margin-top: 0.75em;
}

.dba-cc__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var( --dba-accent-color );
	font: inherit;
	line-height: inherit;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: color var( --dba-transition ), background-color var( --dba-transition ), border-color var( --dba-transition );
}

.dba-cc--toggle-link .dba-cc__toggle {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.dba-cc--toggle-button .dba-cc__toggle {
	padding: 0.7em 1.4em;
	border: 1px solid currentColor;
	border-radius: var( --dba-radius );
	text-decoration: none;
}

.dba-cc__toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: transform var( --dba-transition );
}

.dba-cc__toggle-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.dba-cc.is-expanded .dba-cc__toggle-icon--rotates {
	transform: rotate( 180deg );
}

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

/**
 * Hung off the toggle row rather than the content: the content is a
 * `-webkit-box` while clamped, where a pseudo-element would be treated as a
 * child box and break the clamp. Sitting directly above the toggle puts it
 * over the final clipped line either way.
 */
.dba-cc--has-fade .dba-cc__actions::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	height: var( --dba-cc-fade-height );
	background: linear-gradient( to bottom, transparent, var( --dba-cc-fade-color ) );
	pointer-events: none;
	transition: opacity var( --dba-transition );
}

.dba-cc--has-fade.is-expanded .dba-cc__actions::before,
.dba-cc--has-fade.is-animating .dba-cc__actions::before {
	opacity: 0;
}

/* --------------------------------------------------------------------------
 * States
 * ----------------------------------------------------------------------- */

/**
 * `is-measuring` is present from the server render until the script has
 * decided whether the text actually overflows. Hiding rather than removing the
 * toggle keeps the layout height stable, so nothing shifts when it appears.
 */
.dba-cc.is-measuring .dba-cc__actions {
	visibility: hidden;
}

/* Descriptions short enough to fit need no control at all. */
.dba-cc.is-not-clipped .dba-cc__actions {
	display: none;
}

/* --------------------------------------------------------------------------
 * Responsive
 * ----------------------------------------------------------------------- */

@media ( max-width: 767px ) {
	.dba-cc__toggle {
		/* Comfortable tap target without changing the visual weight. */
		min-height: 44px;
	}

	.dba-cc--toggle-button .dba-cc__toggle {
		padding: 0.65em 1.15em;
	}
}