/* Kodevio Blog Manager — grid styles, v3.0 (FINAL, hard-pixel-locked build) */
/*
 * Every dimension here is a hard px value (not %, not fr, not vw) and every
 * rule carries !important. This is intentional: relative units only work if
 * the theme's CSS behaves — on this site it hasn't, so nothing here is left
 * to inherit or be computed from an ancestor. Cards and images render at a
 * fixed pixel size no matter what the uploaded image's original dimensions
 * or the theme's global resets are.
 */

.kbm-blog-section {
	--kbm-card-bg: #ebf6fd;
	--kbm-card-bg-hover: #e8f5fc;
	--kbm-primary: #0078ae;
	--kbm-primary-dark: #005f8a;
	--kbm-black: #16253d;
	--kbm-gray: #8895a7;
	display: block !important;
	width: 100% !important;
	max-width: 1260px !important;
	margin: 0 auto !important;
	padding: 80px 24px !important;
	box-sizing: border-box !important;
	float: none !important;
	clear: both !important;
}

.kbm-blog-section * {
	box-sizing: border-box !important;
}

.kbm-blog-heading {
	margin: 0 0 8px !important;
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--kbm-black) !important;
	text-align: center !important;
}

.kbm-blog-subheading {
	margin: 0 auto 40px !important;
	max-width: 500px !important;
	font-size: 16px !important;
	color: var(--kbm-gray) !important;
	text-align: center !important;
}

/* ---------------------------------------------------------
 * Grid — flexbox with fixed-width cards that WRAP.
 * No grid-template-columns, no percentage widths: nothing here
 * for a theme reset to unravel.
 * ------------------------------------------------------- */
.kbm-blog-grid {
	display: flex !important;
	flex-flow: row wrap !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 24px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	transition: opacity .2s ease;
}

.kbm-blog-wrap.kbm-loading .kbm-blog-grid {
	opacity: .35;
	pointer-events: none;
}

/* ---------------------------------------------------------
 * Card — fixed 262px (218px image + 22px padding each side)
 * ------------------------------------------------------- */
.kbm-blog-card {
	display: block !important;
	flex: 0 0 262px !important;
	width: 262px !important;
	max-width: 262px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.kbm-blog-card-inner {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	width: 262px !important;
	height: 375px !important;
	background: var(--kbm-card-bg) !important;
	border-radius: 8px !important;
	padding: 22px !important;
	overflow: hidden !important;
	transition: background .25s ease;
}

.kbm-blog-card-inner:hover {
	--kbm-card-bg: var(--kbm-card-bg-hover);
	background: var(--kbm-card-bg-hover) !important;
}

/* media block: hard-locked 218×208px, the arrow/cutout anchor to this box */
.kbm-blog-media {
	position: relative !important;
	z-index: 0 !important;
	display: block !important;
	width: 218px !important;
	height: 208px !important;
	flex: 0 0 208px !important;
	line-height: 0 !important;
	overflow: hidden !important;
}

.kbm-blog-card-image {
	position: relative !important;
	display: block !important;
	width: 218px !important;
	height: 208px !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	border-radius: 10px !important;
	line-height: 0 !important;
	overflow: hidden !important;
}

.kbm-blog-card-image img,
.kbm-blog-card-image img.kbm-card-img {
	display: block !important;
	width: 218px !important;
	height: 208px !important;
	max-width: 218px !important;
	min-width: 218px !important;
	max-height: 208px !important;
	min-height: 208px !important;
	object-fit: cover !important;
	object-position: center center !important;
	border-radius: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.kbm-blog-noimg {
	display: block !important;
	width: 218px !important;
	height: 208px !important;
	border-radius: 10px !important;
	background: linear-gradient(135deg, #d7e9f6, #eef4f9) !important;
}

/* the corner "cutout" that lets the card background peek through the image corner */
.kbm-blog-cutout {
	position: absolute !important;
	bottom: -2px !important;
	right: -3px !important;
	z-index: 0 !important;
	line-height: 0 !important;
	pointer-events: none !important;
}

.kbm-cutout-path {
	fill: var(--kbm-card-bg);
	transition: fill .25s ease;
}

.kbm-blog-arrow {
	position: absolute !important;
	bottom: 0 !important;
	right: 0 !important;
	z-index: 2 !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: var(--kbm-primary) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	transition: background .2s ease;
}

.kbm-blog-arrow svg {
	width: 15px !important;
	height: 15px !important;
	display: block !important;
}

.kbm-blog-card-inner:hover .kbm-blog-arrow {
	background: var(--kbm-primary-dark) !important;
}

.kbm-blog-title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	text-align: left !important;
	flex: 0 0 auto !important;
}

.kbm-blog-title a {
	color: var(--kbm-black) !important;
	text-decoration: none !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

.kbm-blog-title a:hover {
	color: var(--kbm-primary) !important;
}

.kbm-blog-excerpt {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 12px !important;
	font-weight: 300 !important;
	line-height: 1.4 !important;
	color: var(--kbm-gray) !important;
	text-align: left !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	flex: 0 0 auto !important;
}

.kbm-blog-empty {
	width: 100% !important;
	text-align: center !important;
	color: var(--kbm-gray) !important;
	padding: 40px 0 !important;
}

/* ---------------------------------------------------------
 * Pagination — full reset on the buttons so theme button
 * defaults (padding, border, min-width) can't turn the
 * circles into ovals or hide the label text.
 * ------------------------------------------------------- */
.kbm-blog-pagination {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 6px !important;
	margin: 24px 0 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

.kbm-page-btn,
.kbm-page-next {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	max-width: 36px !important;
	min-height: 36px !important;
	max-height: 36px !important;
	flex: 0 0 36px !important;
	border-radius: 50% !important;
	border: none !important;
	outline: none !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	transition: background .2s ease, color .2s ease;
}

.kbm-page-btn {
	background: var(--kbm-card-bg) !important;
	color: var(--kbm-black) !important;
}

.kbm-page-btn:hover {
	background: rgba(0, 120, 174, .18) !important;
}

.kbm-page-btn.active {
	background: rgba(0, 120, 174, .5) !important;
	color: var(--kbm-black) !important;
}

.kbm-page-next {
	background: rgba(0, 120, 174, .2) !important;
	color: var(--kbm-primary) !important;
}

.kbm-page-next svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
}

.kbm-page-next:hover:not(:disabled) {
	background: rgba(0, 120, 174, .32) !important;
}

.kbm-page-next:disabled {
	opacity: .4 !important;
	cursor: not-allowed !important;
}

/* ---------------------------------------------------------
 * Responsive — cards are a fixed 262px, so on narrower
 * screens they simply wrap to fewer per row automatically.
 * ------------------------------------------------------- */
@media (max-width: 600px) {
	.kbm-blog-grid {
		justify-content: center !important;
	}
	.kbm-blog-section {
		padding: 48px 16px !important;
	}
	.kbm-blog-heading {
		font-size: 24px !important;
	}
	.kbm-blog-pagination {
		justify-content: center !important;
	}
}