/* Card container */
.box-blog-post {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #CACACA;
	background: #fff;
}

/* Remove default divider */
.box-blog-post .is-divider {
	display: none;
}

/* Text area spacing */
.box-blog-post .box-text {
	padding: 30px;
}

/* Title */
.box-blog-post .post-title a {
	font-weight: 700;
	color: #515151;
	font-size: 18px;
	margin-bottom: 20px !important;
}

/* Excerpt */
.box-blog-post .from_the_blog_excerpt {
	color: #515151;
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 30px;
	font-weight: 400;
}

.exc-mb-0 .box-blog-post .from_the_blog_excerpt{
	margin-bottom: 0;
}

/* Read more — text link style with icon */
.box-blog-post .box-text-inner > a.button {
	background: none !important;
	border: none !important;
	color: #3893AA;
	font-weight: 700;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-transform: unset;
	box-shadow: none !important;
	min-height: unset;
	height: unset;
}

/* External-link icon before text */
.box-blog-post .box-text-inner > a.button::before {
	content: "";
	display: inline-block;
	width: 23px;
	height: 23px;
	background-image: url(../link.svg);
	background-size: contain;
	background-repeat: no-repeat;
	flex-shrink: 0;
}
/* Extra breathing room above embedded HubSpot forms in post content */
.single-post .kiwi-post-content .hs-form-html,
.single-post .kiwi-post-content .hbspt-form,
.single-post .kiwi-post-content .hs-form-frame,
.single-post .kiwi-post-content .hsfc-Form {
	margin-top: 48px;
}

/* ─────────────────────────────────────────────────────────────
 *  Hover effects — mirror the custom-post-type grid
 *  (title underline + circular arrow over the image on hover)
 * ───────────────────────────────────────────────────────────── */

/* Title underline on hover */
.box-blog-post .post-title a:hover {
	color: #515151;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Image needs a positioning/clipping context for the overlay */
.box-blog-post .box-image {
	position: relative;
	overflow: hidden;
}

/* Dark veil over the image */
.box-blog-post .box-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	z-index: 1;
}
.box-blog-post:hover .box-image::after {
	opacity: 1;
}

/* Circular arrow — uses Flatsome primary color, same SVG as the CPT grid */
.box-blog-post .box-image::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: var(--primary-color, #52C1DE)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none'><path d='M4 12h15M13 5.5 19.5 12 13 18.5' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
		center / 26px 26px no-repeat;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.7);
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
	z-index: 2;
}
.box-blog-post:hover .box-image::before {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}