/**
 * Post Callout widget
 *
 * Highlighted callout block used inside blog posts (TL;DR, Key Takeaway, Note…).
 * Rounded container with a colored accent bar on the left and a subtle
 * horizontal gradient background. All colors/sizes are exposed via CSS custom
 * properties so Elementor style controls can override them without duplicating
 * rules.
 */

.tc-post-callout {
	--tc-pc-accent: #41A541;
	--tc-pc-accent-width: 4px;
	--tc-pc-bg-start: #DDEEDD;
	--tc-pc-bg-end: #FFFFFF;

	position: relative;
	overflow: hidden;
	background-image: linear-gradient( to right, var( --tc-pc-bg-start ), var( --tc-pc-bg-end ) );
	border-radius: 0;
	padding: 24px 32px;
}

/* Left accent bar. Uses a pseudo-element so the padding control keeps working
   consistently regardless of border-box quirks. */
.tc-post-callout::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: var( --tc-pc-accent-width );
	background-color: var( --tc-pc-accent );
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
}

.tc-post-callout__title {
	margin: 0 0 8px;
	color: #102A43;
	font-family: "Proxima Nova", sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;
	letter-spacing: 0;
}

.tc-post-callout__content {
	color: #102A43;
	font-family: "Proxima Nova", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 23px;
	letter-spacing: 0;
}

.tc-post-callout__content > *:first-child {
	margin-top: 0;
}

.tc-post-callout__content > *:last-child {
	margin-bottom: 0;
}