/*
 * CTA Banner widget: a two-column call to action — the offer on one side, a
 * picture on the other. Loads on top of shell.css, which owns the section
 * panel, the eyebrow, heading, description and button.
 *
 * The banner reuses the shared header rather than declaring its own copy of
 * it, so the eyebrow, heading, description and button answer exactly the same
 * controls here as in every other widget. All this sheet does is lay the header
 * out as a left-aligned column beside the picture.
 */

.mcb {
	--mcb-gap: 40px;
	--mcb-media-w: 46%;
	--mcb-align: center;

	--mcb-note-gap: 16px;

	--mcb-media-h: 340px;
	--mcb-media-radius: 18px;
	--mcb-img-fit: cover;
	--mcb-img-pos: center center;
	--mcb-img-bg: transparent;

	overflow: hidden;
	background-color: #0b2138;
}

/*
 * Dark-section defaults for the shared header, so the banner reads right the
 * moment it is dropped in rather than after four colour controls. Elementor's
 * own controls carry an extra class and load later, so setting any of these by
 * hand still wins.
 */
.mcb .msw__title {
	color: #ffffff;
}

.mcb .msw__desc {
	color: rgba(255, 255, 255, 0.76);
}

/* The eyebrow is a pill here — the shared controls can reshape it. */
.mcb {
	--msw-eyebrow-radius: 999px;
}

.mcb .msw__eyebrow {
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background-color: rgba(255, 255, 255, 0.07);
	color: #f59e0b;
}

/* An accent button, because a white one disappears into a light picture. */
.mcb .msw__btn {
	border-color: transparent;
	background-color: #f59e0b;
	color: #12213a;
}

.mcb .msw__btn:hover,
.mcb .msw__btn:focus-visible {
	background-color: #fbbf24;
	color: #12213a;
}

/* -------------------------------------------------------------------- grid */

.mcb__grid {
	display: flex;
	align-items: var(--mcb-align);
	gap: var(--mcb-gap);
}

.mcb__text {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * A flex parent so the frame inside fills the column's full height once the
 * grid stretches it. Left as a plain block, the frame keeps its own height and
 * a bled picture stops short of the section's bottom edge.
 */
.mcb__media {
	display: flex;
	flex: 0 0 var(--mcb-media-w);
	min-width: 0;
}

.mcb__media-inner {
	flex: 1 1 auto;
}

.mcb--media-left .mcb__grid {
	flex-direction: row-reverse;
}

/*
 * The header is a left-aligned column here whatever its own layout setting,
 * because in a banner the button belongs under the copy rather than opposite
 * it. The bottom margin goes too — the grid's own gap is the spacing now.
 */
.mcb .msw__head {
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 0;
	text-align: left;
}

.mcb .msw__head-text {
	flex: 0 1 auto;
	width: 100%;
}

/* Button and the reassurance line sit side by side under the copy. */
.mcb .msw__head-action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mcb-note-gap);
}

.mcb__note {
	margin: 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	line-height: 1.5;
}

/* ------------------------------------------------------------------- media */

.mcb__media-inner {
	display: flex;
	align-items: stretch;
	justify-content: center;
	height: var(--mcb-media-h);
	overflow: hidden;
	border-radius: var(--mcb-media-radius);
	background-color: var(--mcb-img-bg);
}

.mcb__media-inner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--mcb-img-fit);
	object-position: var(--mcb-img-pos);
}

/*
 * Bleed: the picture reaches the section's own edges by cancelling exactly the
 * padding variables the shell declares, and drops the corners that now meet a
 * straight edge. The section clips it, so the outer corners stay rounded.
 */
.mcb--bleed .mcb__media {
	margin-top: calc(var(--msw-pt) * -1);
	margin-bottom: calc(var(--msw-pb) * -1);
}

.mcb--bleed:not(.mcb--media-left) .mcb__media {
	margin-right: calc(var(--msw-pr) * -1);
}

.mcb--bleed.mcb--media-left .mcb__media {
	margin-left: calc(var(--msw-pl) * -1);
}

.mcb--bleed .mcb__media-inner {
	height: auto;
	min-height: var(--mcb-media-h);
	border-radius: 0;
}

/* A bled picture has to fill the height the copy sets, not just its own. */
.mcb--bleed .mcb__grid {
	align-items: stretch;
}

.mcb--bleed .mcb__text {
	align-self: var(--mcb-align);
}

/* ------------------------------------------------------------- placeholder */

.mcb-ph {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 160px;
	padding: 16px;
	color: rgba(255, 255, 255, 0.45);
	text-align: center;
	background-image: linear-gradient(
		150deg,
		rgba(255, 255, 255, 0.1) 0%,
		rgba(255, 255, 255, 0.04) 45%,
		rgba(245, 158, 11, 0.12) 100%
	);
}

.mcb-ph__icon {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.mcb-ph__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.mcb {
		--mcb-gap: 28px;
		--mcb-media-h: 280px;
	}
}

@media (max-width: 767px) {
	.mcb {
		--mcb-gap: 24px;
		--mcb-media-h: 240px;
	}

	/*
	 * One column on a phone. The picture keeps its bleed to the left and right
	 * so it still meets the section's edges, but not to the top, or it would
	 * collide with the copy above it.
	 */
	.mcb__grid,
	.mcb--media-left .mcb__grid {
		flex-direction: column;
		align-items: stretch;
	}

	/*
	 * width:auto, not 100%: a fixed width means the negative margins only shift
	 * the box instead of widening it, and the picture bleeds off one edge while
	 * leaving a gap at the other. Stretch already gives it the full width.
	 */
	.mcb__media {
		flex: 0 0 auto;
		width: auto;
	}

	.mcb--bleed .mcb__media {
		margin-top: 0;
		margin-right: calc(var(--msw-pr) * -1);
		margin-left: calc(var(--msw-pl) * -1);
		margin-bottom: calc(var(--msw-pb) * -1);
	}

	.mcb--bleed .mcb__text {
		align-self: auto;
	}

	.mcb .msw__head-action {
		gap: 12px;
	}
}

/*
 * Picture above the copy once stacked. Only inside the stacked breakpoint —
 * applied unconditionally it would reverse the desktop row as well.
 */
@media (max-width: 767px) {
	.mcb--stack-top .mcb__grid,
	.mcb--stack-top.mcb--media-left .mcb__grid {
		flex-direction: column-reverse;
	}

	.mcb--stack-top.mcb--bleed .mcb__media {
		margin-top: calc(var(--msw-pt) * -1);
		margin-bottom: 0;
	}
}