/* ARN Unfold: long content folded to a set height with a "Read more" button. */

.arnsc-unfold {
	--arnsc-unfold-height: 180px;
	--arnsc-unfold-fade: 80px;
	--arnsc-unfold-duration: 400ms;
	--arnsc-unfold-fade-color: var(--vendix-color-bg-light, #f7f8fa);
	--arnsc-unfold-accent: var(--vendix-color-primary, var(--vt-accent, #d71920));
	--arnsc-unfold-accent-hover: color-mix(in srgb, var(--arnsc-unfold-accent) 80%, var(--vendix-color-secondary, #111827));
	min-width: 0;
}

.arnsc-unfold__content {
	position: relative;
	max-height: var(--arnsc-unfold-height);
	overflow: hidden;
	transition: max-height var(--arnsc-unfold-duration) ease;
}

.arnsc-unfold__content:focus {
	outline: none;
}

.arnsc-unfold.is-open .arnsc-unfold__content,
.arnsc-unfold.is-short .arnsc-unfold__content {
	max-height: none;
}

.arnsc-unfold__inner {
	min-width: 0;
	overflow-wrap: anywhere;
}

.arnsc-unfold__inner > :first-child {
	margin-block-start: 0;
}

.arnsc-unfold__inner > :last-child {
	margin-block-end: 0;
}

/* Fade out: a mask, so the content blends into any background (the mask uses only alpha). */
.arnsc-unfold--fade-transparent:not(.is-open):not(.is-short) .arnsc-unfold__content {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--arnsc-unfold-fade)), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--arnsc-unfold-fade)), transparent);
}

/* Fade to a color: an overlay that matches the background behind the widget. */
.arnsc-unfold__fade {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: var(--arnsc-unfold-fade);
	background: linear-gradient(to bottom, transparent, var(--arnsc-unfold-fade-color));
	pointer-events: none;
	transition: opacity var(--arnsc-unfold-duration) ease;
}

.arnsc-unfold.is-open .arnsc-unfold__fade {
	opacity: 0;
}

.arnsc-unfold.is-short .arnsc-unfold__fade,
.arnsc-unfold.is-short .arnsc-unfold__actions,
.arnsc-unfold--no-less.is-open .arnsc-unfold__actions {
	display: none;
}

.arnsc-unfold__actions {
	display: flex;
	justify-content: center;
	margin-block-start: 12px;
}

/* Two classes keep theme button rules (nowrap, hover fill) off the toggle button. */
.arnsc-unfold .arnsc-unfold__button {
	--arnsc-unfold-current: var(--arnsc-unfold-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: var(--arnsc-unfold-button-width, auto);
	min-height: 44px;
	max-width: 100%;
	padding: 10px 4px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: var(--arnsc-unfold-current);
	font: inherit;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	white-space: normal;
	cursor: pointer;
	transition: color .2s, background-color .2s, border-color .2s;
}

.arnsc-unfold__button:hover,
.arnsc-unfold__button:focus-visible {
	--arnsc-unfold-current: var(--arnsc-unfold-accent-hover);
}

.arnsc-unfold__button:focus-visible {
	outline: 2px solid var(--arnsc-unfold-accent);
	outline-offset: 2px;
}

.arnsc-unfold__button--link:hover .arnsc-unfold__label,
.arnsc-unfold__button--link:focus-visible .arnsc-unfold__label {
	text-decoration: underline;
	text-underline-offset: .2em;
}

.arnsc-unfold__button.arnsc-unfold__button--outline {
	padding: 10px 22px;
	border-color: var(--arnsc-unfold-current);
}

.arnsc-unfold__button--outline:hover,
.arnsc-unfold__button--outline:focus-visible {
	background-color: color-mix(in srgb, var(--arnsc-unfold-current) 8%, transparent);
}

.arnsc-unfold__button.arnsc-unfold__button--solid {
	padding: 10px 22px;
	border-color: var(--arnsc-unfold-current);
	background-color: var(--arnsc-unfold-current);
	color: #fff;
}

.arnsc-unfold__button--icon-before {
	flex-direction: row-reverse;
}

.arnsc-unfold__icon {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 1;
}

.arnsc-unfold__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.arnsc-unfold__label--less,
.arnsc-unfold__icon--less,
.arnsc-unfold__button[aria-expanded="true"] .arnsc-unfold__label--more,
.arnsc-unfold__button[aria-expanded="true"] .arnsc-unfold__icon--more {
	display: none;
}

.arnsc-unfold__button[aria-expanded="true"] .arnsc-unfold__label--less {
	display: inline;
}

.arnsc-unfold__button[aria-expanded="true"] .arnsc-unfold__icon--less {
	display: inline-flex;
}

@media (prefers-reduced-motion: reduce) {
	.arnsc-unfold__content,
	.arnsc-unfold__fade,
	.arnsc-unfold .arnsc-unfold__button {
		transition: none;
	}
}