/**
 * IMS Stock Callout
 *
 * Two-column gold callout band:
 *
 *  Left  - small uppercase eyebrow
 *        - large bold heading split into a "lead" and an italic "accent"
 *        - short supporting description
 *
 *  Right - dark "Speak to a specialist" contact card with a label, large
 *          phone number, and hours / availability line.
 *
 * Mirrors the source design exactly (minus the Request Quote / Live Chat
 * buttons, which are intentionally omitted).
 *
 * The wrapper background and copy max-width are exposed as CSS custom
 * properties so the block can be retinted from the editor sidebar without
 * needing dedicated style overrides.
 */

.ims-stock-callout {
	--ims-stock-callout-bg: var( --wp--preset--color--primary, #FAB000 );
	--ims-stock-callout-copy-max: 640px;
	--ims-stock-callout-card-bg: var( --wp--preset--color--dark, #111111 );
	--ims-stock-callout-card-fg: #ffffff;
	--ims-stock-callout-card-muted: #9CA3AF;
	--ims-stock-callout-card-accent: var( --wp--preset--color--primary, #FAB000 );

	background: var( --ims-stock-callout-bg );
	color: var( --wp--preset--color--dark, #111111 );
	width: 100%;
}

.ims-stock-callout__inner {
	max-width: 1344px;
	margin: 0 auto;
	padding: clamp( 32px, 5vw, 56px ) clamp( 16px, 4vw, 32px );
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp( 24px, 4vw, 48px );
}

/* Copy column */
.ims-stock-callout__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: var( --ims-stock-callout-copy-max );
	min-width: 0;
	flex: 1 1 auto;
}

.ims-stock-callout__eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--preset--color--dark, #111111 );
	line-height: 1.2;
}

.ims-stock-callout__title {
	margin: 0;
	font-size: clamp( 36px, 5.2vw, 56px );
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var( --wp--preset--color--dark, #111111 );
}

.ims-stock-callout__title-lead {
	font-style: normal;
}

.ims-stock-callout__title-accent {
	font-style: italic;
	font-weight: 800;
}

.ims-stock-callout__desc {
	margin: 0;
	font-size: clamp( 14px, 1.1vw, 16px );
	line-height: 1.55;
	color: var( --wp--preset--color--dark, #111111 );
	max-width: 56ch;
}

/* Contact card */
.ims-stock-callout__card {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var( --ims-stock-callout-card-bg );
	color: var( --ims-stock-callout-card-fg );
	border-radius: 14px;
	padding: clamp( 20px, 2.4vw, 28px ) clamp( 24px, 2.8vw, 36px );
	min-width: 280px;
}

.ims-stock-callout__card-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --ims-stock-callout-card-accent );
	line-height: 1.2;
}

.ims-stock-callout__card-phone {
	display: block;
	font-size: clamp( 28px, 3vw, 36px );
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var( --ims-stock-callout-card-fg );
	text-decoration: none;
}

a.ims-stock-callout__card-phone:hover,
a.ims-stock-callout__card-phone:focus-visible {
	color: var( --ims-stock-callout-card-accent );
	outline: none;
}

a.ims-stock-callout__card-phone:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ims-stock-callout__card-hours {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var( --ims-stock-callout-card-muted );
	line-height: 1.3;
}

/* Editor preview parity */
.ims-stock-callout--editor .ims-stock-callout__title-accent:empty::before,
.ims-stock-callout--editor .ims-stock-callout__title-lead:empty::before {
	content: '';
}

.ims-stock-callout--editor .ims-stock-callout__card-phone {
	cursor: text;
}

/* Responsive: stack the contact card under the copy on narrow screens */
@media ( max-width: 900px ) {
	.ims-stock-callout__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.ims-stock-callout__copy {
		max-width: none;
	}

	.ims-stock-callout__card {
		width: 100%;
		min-width: 0;
	}
}