/*
 * MH CTA Box — front-end styles.
 * No custom @font-face is loaded here on purpose: font-family is left to
 * `inherit` so the box always matches whatever font the active theme uses.
 */

.mhcta-box {
	box-sizing: border-box;
	font-family: inherit;
	margin-block: 1.75em;
	max-width: 100%;
}

.mhcta-box * {
	box-sizing: border-box;
}

.mhcta-box__inner {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px;
	background: var( --mhcta-color-bg, #fff );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 ), 0 8px 24px rgba( 0, 0, 0, 0.06 );
}

.mhcta-box__media {
	flex: 0 0 auto;
	background: rgba( 0, 0, 0, 0.03 );
}

.mhcta-box__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 260px;
	object-fit: cover;
}

.mhcta-box__content {
	flex: 1 1 auto;
	padding: 1.25em 1.5em;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	min-width: 0;
}

.mhcta-box__title {
	margin: 0;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.5;
	color: var( --mhcta-color-title, #1a1a1a );
}

.mhcta-box__desc {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.8;
	color: var( --mhcta-color-desc, #6b7280 );
}

.mhcta-box__btn {
	margin-block-start: 0.5em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.75em 1.25em;
	border-radius: 10px;
	border: 0;
	font-family: inherit;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	background: var( --mhcta-color-btn-bg, #2563eb );
	color: var( --mhcta-color-btn-text, #fff );
	transition: filter 0.15s ease, transform 0.15s ease;
}

.mhcta-box__btn:hover,
.mhcta-box__btn:focus {
	filter: brightness( 0.94 );
	color: var( --mhcta-color-btn-text, #fff );
}

.mhcta-box__btn:active {
	transform: translateY( 1px );
}

.mhcta-box__btn-icon {
	display: inline-flex;
	width: 1.1em;
	height: 1.1em;
	color: var( --mhcta-color-btn-icon, #fff );
}

.mhcta-box__btn-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Desktop / wide layout: image and content side by side.
   The wrapper sets no `dir` of its own — it inherits direction from wherever
   it's placed (the theme's RTL setup, not necessarily WordPress' is_rtl(),
   ends up in control). Because the image markup comes first in the DOM, an
   inherited rtl context naturally places it on the right (matching the
   design) while an ltr context mirrors it correctly — no override needed. */
@media ( min-width: 601px ) {
	.mhcta-box__inner {
		flex-direction: row;
		align-items: stretch;
	}

	.mhcta-box__media {
		flex: 0 0 42%;
		max-width: 42%;
	}

	.mhcta-box__image {
		width: 100%;
		height: 100%;
		max-height: none;
	}

	.mhcta-box__content {
		flex: 1 1 auto;
		justify-content: center;
		padding: 1.75em 2em;
	}

	.mhcta-box__btn {
		align-self: flex-start;
	}
}