/*
 * 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;
	aspect-ratio: 16 / 10;
	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 38%;
		max-width: 38%;
		/* No height override here on purpose — .mhcta-box__image keeps the
		   base aspect-ratio-based sizing. Forcing height:100% on a flex
		   child with no definite parent height made browsers fall back to
		   the uploaded photo's own (sometimes tall/portrait) intrinsic
		   ratio, so a tall photo could inflate the whole card's height and
		   leave the shorter text column centered with empty space around it. */
	}

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

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