/* ── Callout Block ── */

.callout {
	position: relative;
	overflow: hidden;
	padding: 1rem 1.25rem;
	border-radius: 4px;
	border-left: 4px solid;
	margin: 1.5rem 0;
	line-height: 1.6;
}

.callout p { margin: 0; }

.callout__inner {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.callout__inner--row {
	flex-direction: row;
	align-items: center;
}

.callout--image-right .callout__inner--row {
	flex-direction: row-reverse;
}

.callout__image-wrap { flex-shrink: 0; }

.callout__image {
	display: block;
	max-width: 100%;
	border-radius: 3px;
}

.callout__inner--row .callout__image {
	width: 120px;
	height: 120px;
	object-fit: cover;
}

/* ── Overlay base — hidden by default ── */

.callout__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 1.25rem;
	pointer-events: none;
	/* default hidden state — overridden per effect below */
	opacity: 0;
	transform: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

/* ── Slide up: start below ── */
.callout[data-hover="slide-up"] .callout__overlay {
	transform: translateY(100%);
}

/* ── Slide left: start off left edge ── */
.callout[data-hover="slide-left"] .callout__overlay {
	transform: translateX(-100%);
}

/* ── Slide right: start off right edge ── */
.callout[data-hover="slide-right"] .callout__overlay {
	transform: translateX(100%);
}

/* ── On hover: always reveal fully, reset any transform ── */
.callout:hover .callout__overlay {
	opacity: 1;
	transform: translate(0, 0);
	pointer-events: auto;
}