/**
 * Content Block Carousel — Frontend Styles
 *
 * Layout geometry never changes per slide, so there is no FLIP-style
 * repositioning here. Each of the three panel stacks (featured image,
 * title+description, secondary image) is a simple absolute-positioned
 * cross-fade, all driven by the same --cbc-duration-c47b91af var.
 *
 * .cbc-content-block-c47b91af is a 2-row grid, exactly 50/50 of the
 * container's resolved height, split 68/32 against .cbc-secondary-col-c47b91af
 * for width. .cbc-secondary-col-c47b91af caps its image at 80% height,
 * leaving 20% for the static nav row, which is centered under that
 * secondary image (not right-aligned — there's nothing to the right of
 * it to align against once the image column ends there).
 *
 * IMPORTANT — why .cbc-container-c47b91af sets both height and min-height
 * to the same value instead of height: 100%: every element inside this
 * widget is position: absolute, so none of them have natural content
 * height. That means .cbc-container-c47b91af's own height has to be
 * fully self-contained — if it instead used height: 100% and relied on
 * inheriting a height from its ancestors, any broken link in that chain
 * (e.g. a parent section without an explicit height) leaves the box with
 * no definite height at all, and the 80%/100% percentage heights further
 * down silently fall through to each raw <img>'s intrinsic size instead,
 * producing a wildly oversized carousel. Setting height directly here
 * removes that dependency entirely: the box is always a known size, and
 * everything below it (the 68/32 split, the 1fr/1fr grid, the 80% image
 * cap) resolves against that fixed number reliably.
 *
 * Padding lives on .cbc-text-panel-c47b91af, not the outer
 * .cbc-content-body-c47b91af. Padding on the outer element would be
 * ignored by the absolutely positioned panel (inset: 0 sizes against the
 * padding box, i.e. it fills right up to the border, padding and all),
 * so padding has to sit on the panel that's actually positioned.
 *
 * IMPORTANT — the active/inactive panel rules share ONE layout, not two:
 * .cbc-text-panel-c47b91af gets its flex layout (title top, description
 * pushed to the bottom via margin-top: auto) at the base rule, identical
 * whether the panel is active or not. Only opacity/visibility/position
 * differ between states. Earlier this widget gave the active panel a
 * different layout (flex + justify-content: flex-end) than the inactive
 * one (plain block flow), so the instant the "active" class toggled
 * mid-fade, the panel's whole layout snapped to a different arrangement
 * while still visible — title would appear to jump from top to bottom
 * mid-transition. Sharing one layout across both states removes that
 * failure mode entirely: nothing about position changes on toggle, only
 * opacity.
 *
 * .cbc-description-c47b91af's margin-top: auto needs !important — TheGem's
 * theme CSS resets paragraph margins inside widget containers, and its
 * selector ties or beats ours on specificity, silently zeroing the
 * auto margin and collapsing the description back up against the title.
 *
 * IMPORTANT — the tablet/mobile breakpoint (max-width: 1024px) drops the
 * secondary image entirely and keeps only the content column. Two things
 * to know about how that's done: (1) only .cbc-secondary-image-stack-c47b91af
 * is hidden, not the whole .cbc-secondary-col-c47b91af — the nav arrows
 * live in that same column as a sibling, so hiding the column would take
 * navigation down with the image. (2) the active text panel has to come
 * back in-flow (position: relative) at this width, not stay absolute:
 * the grid's second row switches from a fixed split to "auto" here, sized
 * by its content, and an absolutely positioned element contributes
 * nothing to that sizing — left as absolute, the row collapsed to zero
 * height and the title/description disappeared entirely.
 *
 * Nav arrows: cbc-arrow-icon-c47b91af (a mask-image span) and the
 * cbc-arrow-has-icon-c47b91af class are the custom-icon path — same
 * technique as the Featured Content Carousel (widget ID 466), see its
 * style.css for the fuller original explanation. Short version: a
 * custom-uploaded icon is expected to already bake in its own circle/
 * border artwork, so that state drops the button's own border and lets
 * the icon fill 100% of the button instead of the default chevron's 40%.
 */

.elementor-widget-content_block_carousel_c47b91af,
.elementor-widget-content_block_carousel_c47b91af > .elementor-widget-container {
	width: 100%;
}

.cbc-container-c47b91af {
	--cbc-duration-c47b91af: 500ms;
	--cbc-radius-c47b91af: 0px;
	position: relative;
	width: 100%;
	height: 100vh; /* fallback, overridden by the Min Height control (sets both height and min-height) */
	min-height: 100vh; /* fallback, overridden by the Min Height control */
}

.cbc-row-c47b91af {
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 100%;
	column-gap: 24px; /* fallback, overridden by the Gap control */
}

/* Content Position: Right — swap which side each column renders on. */
.cbc-container-c47b91af[data-position="right"] .cbc-row-c47b91af {
	flex-direction: row-reverse;
}

/* ---------- Content block: 50/50 grid, image on top, text card below; 68% of the row's width ---------- */
.cbc-content-block-c47b91af {
	position: relative;
	flex: 1 1 68%;
	min-width: 0;
	display: grid;
	grid-template-rows: 1fr 1fr;
	border-radius: var( --cbc-radius-c47b91af );
	overflow: hidden; /* clips both the image and the text card to the shared radius */
}

.cbc-featured-image-stack-c47b91af,
.cbc-content-body-c47b91af {
	position: relative;
	min-height: 0; /* allow the grid row to actually constrain these instead of growing to content */
}

.cbc-content-body-c47b91af {
	background-color: #ffffff; /* fallback, overridden by the Background Color control */
	overflow: hidden;
}

.cbc-title-c47b91af {
	margin: 0 0 12px !important;
}

.cbc-description-c47b91af {
	margin-top: auto !important; /* pushes the description to the bottom of the panel; title stays put at the top */
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
}

/* ---------- Secondary column: 32% of the row's width, image capped at 80% height, nav in the remaining 20% ---------- */
.cbc-secondary-col-c47b91af {
	flex: 1 1 32%;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.cbc-secondary-image-stack-c47b91af {
	position: relative;
	height: 80%;
	border-radius: var( --cbc-radius-c47b91af );
	overflow: hidden;
}

.cbc-nav-c47b91af {
	flex: 1 1 auto;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 12px;
	padding-top: 16px;
}

.cbc-arrow-c47b91af {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.cbc-arrow-c47b91af svg {
	width: 40%;
	height: 40%;
}

/* Custom-uploaded icon (mask-image technique): background-color:currentColor lets it inherit Arrow Color's tint, same as an inline SVG's stroke=currentColor would, but works for any single-color silhouette image, not just SVG. */
.cbc-arrow-icon-c47b91af {
	display: inline-block;
	width: 40%;
	height: 40%;
	background-color: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* A custom-uploaded icon already bakes in its own circle/border artwork, so the button's own border would double up with it — drop the border and let the icon fill the button instead of the 40% sizing meant for the plain chevron. */
.cbc-arrow-c47b91af.cbc-arrow-has-icon-c47b91af {
	border: none;
}

.cbc-arrow-has-icon-c47b91af .cbc-arrow-icon-c47b91af {
	width: 100%;
	height: 100%;
}

/* ---------- Panel stacks: absolutely positioned, cross-fade via opacity ---------- */
.cbc-featured-image-c47b91af,
.cbc-text-panel-c47b91af,
.cbc-secondary-image-c47b91af {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var( --cbc-duration-c47b91af ) ease,
		visibility 0s linear var( --cbc-duration-c47b91af );
}

/* The text panel's real layout (flex column, title top, description
 bottom) lives here at the base rule so it's identical in both the
 active and inactive state — see the file header note on why. */
.cbc-text-panel-c47b91af {
	display: flex;
	flex-direction: column;
	padding: 32px; /* fallback, overridden by the Padding control */
	box-sizing: border-box;
}

.cbc-featured-image-active-c47b91af,
.cbc-text-panel-active-c47b91af,
.cbc-secondary-image-active-c47b91af {
	position: relative;
	opacity: 1;
	visibility: visible;
	transition:
		opacity var( --cbc-duration-c47b91af ) ease,
		visibility 0s linear 0s;
}

/* Text panels need to stay absolute even when active, since the grid row's
 height is set by the tallest panel otherwise, breaking the 50/50 split —
 the generic "position: relative" above is overridden back to absolute
 here. Nothing else about the layout changes between states. */
.cbc-text-panel-active-c47b91af {
	position: absolute;
}

/* Image panels need an explicit size once they go position: relative (the
 active rule above removes the inset: 0 sizing that position: absolute
 was providing), otherwise the panel — and the object-fit: cover <img>
 inside it — has no defined height to fill and collapses to the image's
 intrinsic size instead of the space reserved for it. */
.cbc-featured-image-active-c47b91af,
.cbc-secondary-image-active-c47b91af {
	width: 100%;
	height: 100%;
}

.cbc-featured-image-c47b91af img,
.cbc-secondary-image-c47b91af img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ---------- Editor-only placeholder notice ---------- */
.cbc-editor-notice-c47b91af {
	padding: 40px 20px;
	margin-bottom: 20px;
	background: #fff4e5;
	border: 1px dashed #d9822b;
	color: #7a4a05;
	font-size: 14px;
}

/* ---------- Respect reduced-motion preference ---------- */
@media ( prefers-reduced-motion: reduce ) {
	.cbc-featured-image-c47b91af,
	.cbc-text-panel-c47b91af,
	.cbc-secondary-image-c47b91af,
	.cbc-featured-image-active-c47b91af,
	.cbc-text-panel-active-c47b91af,
	.cbc-secondary-image-active-c47b91af {
		transition: none;
	}
}

/* ---------- Tablet/mobile: drop the secondary image, keep the content column + nav ---------- */
@media ( max-width: 1024px ) {
	.cbc-container-c47b91af {
		min-height: auto !important;
		height: auto !important;
	}

	.cbc-row-c47b91af {
		flex-direction: column !important;
		height: auto;
		row-gap: 16px;
	}

	.cbc-content-block-c47b91af {
		flex: 1 1 auto;
		grid-template-rows: 260px auto;
	}

	.cbc-secondary-col-c47b91af {
		flex: 1 1 auto;
		height: auto;
	}

	/* Only the image is dropped; the nav arrows are a sibling inside the
	 same column and stay, so slide navigation still works. */
	.cbc-secondary-image-stack-c47b91af {
		display: none;
	}

	.cbc-nav-c47b91af {
		padding-top: 0;
	}

	/* Second grid row is now "auto" instead of a fixed split, so its
	 content has to be in-flow to be measured — see the file header note.
	 Inactive panels are hidden outright rather than left absolute, since
	 in normal flow they'd otherwise stack visibly on top of the active one. */
	.cbc-text-panel-c47b91af {
		display: none;
	}

	.cbc-text-panel-active-c47b91af {
		display: flex !important;
		position: relative !important;
		inset: auto;
		width: 100%;
		height: auto;
	}
}