/* BS23 US Addon — Blog Grid. Tokens from "Blog Landing With Search". */

.bs23-us-blog-grid {
	--bs23-bg-ink: #0F1A2E;
	--bs23-bg-ink-hover: #0F1A2E;
	--bs23-bg-body: #3A4459;
	--bs23-bg-muted: #7A8497;
	--bs23-bg-cat: #7A8497;
	--bs23-bg-line: #E3E6EC;
	--bs23-bg-line-hover: #0F1A2E;
	--bs23-bg-surface: #FFFFFF;
	--bs23-bg-radius: 16px;
	--bs23-bg-pager: #3A4459;
	--bs23-bg-pager-hover: #E3E6EC;
	--bs23-bg-pager-active: #0F1A2E;
	--bs23-bg-pager-active-text: #FFFFFF;

	font-family: 'Manrope', 'Helvetica Neue', Helvetica, sans-serif;
	color: var(--bs23-bg-ink);
	-webkit-font-smoothing: antialiased;
}

.bs23-us-blog-grid *,
.bs23-us-blog-grid *::before,
.bs23-us-blog-grid *::after {
	box-sizing: border-box;
}

.bs23-us-blog-grid__inner {
	transition: opacity .15s;
}

.bs23-us-blog-grid.is-loading .bs23-us-blog-grid__inner {
	opacity: .45;
	pointer-events: none;
}

/* ---------------------------------------------------------------- grid -- */

.bs23-us-blog-grid__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.bs23-us-blog-grid__card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: var(--bs23-bg-surface);
	border: 1px solid var(--bs23-bg-line);
	border-radius: var(--bs23-bg-radius);
	color: var(--bs23-bg-ink);
	text-decoration: none;
	transition: border-color .15s;
}

.bs23-us-blog-grid__card:hover,
.bs23-us-blog-grid__card:focus-visible {
	border-color: var(--bs23-bg-line-hover);
	color: var(--bs23-bg-ink);
}

.bs23-us-blog-grid__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: repeating-linear-gradient(135deg, #E9EDF5 0 12px, #E1E6F0 12px 24px);
}

.bs23-us-blog-grid__media img,
.bs23-us-blog-grid__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

.bs23-us-blog-grid__placeholder {
	position: absolute;
	inset: 0;
}

.bs23-us-blog-grid__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 24px;
}

.bs23-us-blog-grid__cat {
	font-size: 13px;
	font-weight: 700;
	color: var(--bs23-bg-cat);
}

.bs23-us-blog-grid__title {
	flex: 1;
	margin: 0;
	font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-wrap: pretty;
	color: var(--bs23-bg-ink);
	transition: color .15s;
}

.bs23-us-blog-grid__card:hover .bs23-us-blog-grid__title {
	color: var(--bs23-bg-ink-hover);
}

.bs23-us-blog-grid__excerpt {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--bs23-bg-body);
}

.bs23-us-blog-grid__meta {
	font-size: 13px;
	font-weight: 600;
	color: var(--bs23-bg-muted);
}

.bs23-us-blog-grid__empty {
	padding: 56px 32px;
	text-align: center;
	background: var(--bs23-bg-surface);
	border: 1px dashed #C4C9D4;
	border-radius: var(--bs23-bg-radius);
	font-size: 16px;
	color: var(--bs23-bg-body);
}

/* --------------------------------------------------------------- pager -- */

.bs23-us-blog-grid__pager {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 48px;
	font-size: 14px;
	font-weight: 700;
}

.bs23-us-blog-grid__num {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	color: var(--bs23-bg-pager);
	text-decoration: none;
	transition: background .15s, color .15s;
}

a.bs23-us-blog-grid__num:hover,
a.bs23-us-blog-grid__num:focus-visible {
	background: var(--bs23-bg-pager-hover);
	color: var(--bs23-bg-ink);
}

.bs23-us-blog-grid__num.is-current {
	background: var(--bs23-bg-pager-active);
	color: var(--bs23-bg-pager-active-text);
}

.bs23-us-blog-grid__dots {
	padding: 0 4px;
	color: var(--bs23-bg-muted);
}

.bs23-us-blog-grid__step {
	height: 40px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	border-radius: 8px;
	border: 1px solid var(--bs23-bg-line);
	background: var(--bs23-bg-surface);
	color: var(--bs23-bg-ink);
	text-decoration: none;
	transition: border-color .15s;
}

.bs23-us-blog-grid__step.is-next { margin-left: 12px; }
.bs23-us-blog-grid__step.is-prev { margin-right: 12px; }

.bs23-us-blog-grid__step:hover,
.bs23-us-blog-grid__step:focus-visible {
	border-color: var(--bs23-bg-line-hover);
	color: var(--bs23-bg-ink);
}

/* Fallbacks; the widget's Columns control (more specific) overrides these. */
@media (max-width: 1024px) {
	.bs23-us-blog-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.bs23-us-blog-grid__grid { grid-template-columns: minmax(0, 1fr); }
	.bs23-us-blog-grid__pager { gap: 4px; }
	.bs23-us-blog-grid__num { width: 36px; height: 36px; }
	.bs23-us-blog-grid__step { height: 36px; padding: 0 12px; }
	.bs23-us-blog-grid__step.is-next { margin-left: 4px; }
	.bs23-us-blog-grid__step.is-prev { margin-right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.bs23-us-blog-grid__inner,
	.bs23-us-blog-grid__card,
	.bs23-us-blog-grid__title { transition: none; }
}