/**
 * IMS Category Inline Intro
 *
 * Float-based layout: figure floats left, copy wraps next to it.
 * Predictable across themes regardless of parent flex/grid layouts.
 */

.ims-category-inline-intro {
	--ims-cii-accent: #f9b115;
	--ims-cii-highlight: #fce49c;
	--ims-cii-text: #000000;
	--ims-cii-muted: #333333;

	width: 100%;
	box-sizing: border-box;
	padding-block: clamp( 20px, 3vw, 36px );
	padding-inline: clamp( 16px, 3vw, 40px );
	background: #ffffff;
	color: var( --ims-cii-text );

	display: block;
	overflow: hidden;
}

.ims-category-inline-intro *,
.ims-category-inline-intro *::before,
.ims-category-inline-intro *::after {
	box-sizing: border-box;
}

.ims-category-inline-intro__figure {
	float: left;
	margin: 0 clamp( 18px, 2.5vw, 28px ) 8px 0;
	padding: 0;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var( --ims-cii-accent );
	box-shadow: 0 9px 22px rgba( 0, 0, 0, 0.08 ), 0 3px 8px rgba( 0, 0, 0, 0.05 );
}

.ims-category-inline-intro__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ims-category-inline-intro__copy {
	display: block;
	min-width: 0;
	/* On wide screens the heading and body should spread close to ~3/4 of the
	 * 1400px content area; clamp keeps it readable on smaller viewports. */
	max-width: clamp( 30rem, 75%, 70rem );
	padding-top: 2px;
}

.ims-category-inline-intro__title {
	margin: 0 0 clamp( 12px, 1.8vw, 18px );
	font-size: clamp( 22px, 2.85vw, 36px );
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var( --ims-cii-text );
}

.ims-category-inline-intro__mark {
	background: var( --ims-cii-highlight );
	color: var( --ims-cii-text );
	font-weight: inherit;
	padding: 0.04em 0.08em 0.06em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.ims-category-inline-intro__body {
	margin: 0;
	font-size: clamp( 14px, 1.05vw, 16px );
	line-height: 1.55;
	font-weight: 400;
	color: var( --ims-cii-muted );
	max-width: 80ch;
}

.ims-category-inline-intro__body p {
	margin: 0 0 0.75em;
}

.ims-category-inline-intro__body p:last-child {
	margin-bottom: 0;
}

/* Tablet */
@media ( max-width: 900px ) {
	.ims-category-inline-intro__figure {
		width: 120px;
		height: 120px;
		margin-right: clamp( 16px, 2.5vw, 24px );
	}
}

/* Mobile stack: clear the float and center the figure */
@media ( max-width: 640px ) {
	.ims-category-inline-intro__figure {
		float: none;
		margin: 0 auto 16px;
		width: 110px;
		height: 110px;
	}

	.ims-category-inline-intro__copy {
		padding-top: 0;
		max-width: none;
	}
}

/* Editor */
.ims-category-inline-intro--editor .ims-category-inline-intro__title,
.ims-category-inline-intro--editor .ims-category-inline-intro__body {
	cursor: text;
}