/* ==========================================================================
   Blog List AJAX — styles
   Primary #8e9686 · Secondary #575756 (hover / focus). No pink, no underlines.
   Selectors are scoped under .bll-section so theme/Elementor styles don't leak in.
   ========================================================================== */

.bll-section {
	--bll-primary: #8e9686;
	--bll-secondary: #575756;
	--bll-text: #575756;
	--bll-muted: #a3a69f;
	--bll-border: #e3e2de;
	--bll-badge-bg: rgba(72, 82, 96, .82);
	--bll-gap: 24px;
	--bll-image-height: 200px;

	position: relative;
	scroll-margin-top: 24px;
}

.bll-section.is-loading .bll-grid {
	opacity: .5;
	pointer-events: none;
	transition: opacity .15s ease;
}

/* Links: never underlined, never theme-coloured */
.bll-section a,
.bll-section a:hover,
.bll-section a:focus,
.bll-section a:active {
	text-decoration: none;
}

/* ---------- Grid ---------- */
.bll-section .bll-grid {
	--bll-cols: var(--bll-columns, 3);

	display: flex;
	flex-wrap: wrap;
	gap: var(--bll-gap);
	align-items: stretch;
}

/* ---------- Card ---------- */
.bll-section .bll-card {
	/* flex-grow 0: a last row with 1-2 cards keeps the normal column width */
	flex: 0 1 calc((100% - (var(--bll-cols) - 1) * var(--bll-gap)) / var(--bll-cols));
	max-width: calc((100% - (var(--bll-cols) - 1) * var(--bll-gap)) / var(--bll-cols));
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
	overflow: hidden;
}

/* ---------- Image + category badge ---------- */
.bll-section .bll-card__media {
	position: relative;
	width: 100%;
	height: var(--bll-image-height);
	overflow: hidden;
	background: #eceae5;
}

.bll-section .bll-card__image {
	display: block;
	width: 100%;
	height: 100%;
}

.bll-section .bll-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform .35s ease;
}

.bll-section .bll-card:hover .bll-card__image img {
	transform: scale(1.04);
}

.bll-section .bll-card__noimg {
	display: block;
	width: 100%;
	height: 100%;
}

.bll-section .bll-card__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	max-width: calc(100% - 24px);
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--bll-badge-bg);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Body ---------- */
.bll-section .bll-card__body {
	display: flex;
	flex-direction: column;
	flex: 1; /* every footer sits on the same line across a row */
	padding: 24px 22px 18px;
}

.bll-section .bll-card__title {
	margin: 0 0 18px;
	padding: 0;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.1em;
	color: var(--bll-primary);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bll-section .bll-card__title a,
.bll-section .bll-card__title a:visited {
	color: inherit;
	text-decoration: none;
}

.bll-section .bll-card__title a:hover,
.bll-section .bll-card__title a:focus,
.bll-section .bll-card__title a:active {
	color: var(--bll-secondary);
	text-decoration: none;
}

.bll-section .bll-card__excerpt {
	flex: 1; /* pushes "Read more" to the bottom */
	margin: 0 0 22px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--bll-text);
}

.bll-section .bll-card__readmore,
.bll-section .bll-card__readmore:visited {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--bll-primary);
	text-decoration: none;
}

.bll-section .bll-card__readmore:hover,
.bll-section .bll-card__readmore:focus,
.bll-section .bll-card__readmore:active {
	color: var(--bll-secondary);
	text-decoration: none;
}

/* ---------- Footer (divider + date) ---------- */
.bll-section .bll-card__footer {
	padding: 14px 22px;
	border-top: 1px solid var(--bll-border);
}

.bll-section .bll-card__date {
	font-size: 10px;
	color: var(--bll-muted);
}

.bll-section .bll-no-posts {
	width: 100%;
	padding: 48px 0;
	text-align: center;
	color: var(--bll-text);
}

/* ---------- Pagination: [Prev] [1] [2] … [5] [6] [Next] ---------- */
.bll-section .bll-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 36px;
}

/* Reset everything a theme / Elementor may put on <button> (big pills, uppercase, pink hover…) */
.bll-section .bll-pager .bll-page-btn {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--bll-border);
	border-radius: 4px;
	background: #fff;
	background-image: none;
	box-shadow: none;
	text-shadow: none;
	color: var(--bll-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.bll-section .bll-pager .bll-page-btn:focus {
	outline: none;
	background: #fff;
	border-color: var(--bll-border);
	color: var(--bll-text);
}

.bll-section .bll-pager .bll-page-btn:focus-visible {
	outline: 2px solid var(--bll-secondary);
	outline-offset: 2px;
}

/* Hover = secondary */
.bll-section .bll-pager .bll-page-btn:hover:not(:disabled) {
	background: var(--bll-secondary);
	border-color: var(--bll-secondary);
	color: #fff;
}

/* Active = primary (declared after hover so it wins) */
.bll-section .bll-pager .bll-page-btn.is-active,
.bll-section .bll-pager .bll-page-btn.is-active:hover,
.bll-section .bll-pager .bll-page-btn.is-active:focus {
	background: var(--bll-primary);
	border-color: var(--bll-primary);
	color: #fff;
	cursor: default;
}

.bll-section .bll-pager .bll-page-btn:disabled {
	background: #fff;
	border-color: var(--bll-border);
	color: var(--bll-text);
	opacity: .4;
	cursor: not-allowed;
}

.bll-section .bll-pager .bll-page-dots {
	min-width: 20px;
	text-align: center;
	color: var(--bll-muted);
	font-size: 14px;
	line-height: 1;
	user-select: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
	.bll-section .bll-grid {
		--bll-cols: 2;
	}
}

@media (max-width: 640px) {
	.bll-section .bll-grid {
		--bll-cols: 1;
	}
	.bll-section .bll-card__title {
		font-size: 20px;
	}
}

@media (max-width: 480px) {
	.bll-section .bll-pager {
		gap: 4px;
	}
	.bll-section .bll-pager .bll-page-btn {
		min-width: 34px;
		height: 34px;
		padding: 0 9px;
		font-size: 13px;
	}
}