/* ==========================================================================
   Blog listing (home.php) — hero reuses contact.css (.ct-hero / .ct-follow).
   ========================================================================== */

.bl-hero .ct-hero__title { max-width: none; }
.bl-hero .ct-eyebrow { text-transform: none; letter-spacing: 0; }
.bl-hero__art { width: min(100%, 420px); }

/* ---------- Post grid ---------- */
.bl-list {
	padding: clamp(3rem, 5vw, 5rem) 0 clamp(4rem, 7vw, 7rem);
	background: var(--c-surface);
}
.bl-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2vw, 2rem);
	max-width: 1460px;
	margin-inline: auto;
}

.bl-card {
	display: flex;
	flex-direction: column;
	padding: 10px;
	border: 1px solid #B9A9EF;
	border-radius: 16px;
	background: #fff;
	transition: translate var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.bl-card:hover { translate: 0 -4px; box-shadow: 0 22px 40px -26px rgba(116, 88, 215, .55); }
.bl-card__media {
	position: relative;
	display: block;
	aspect-ratio: 492 / 254;
	overflow: hidden;
	border-radius: 12px;
	background: var(--c-tint);
}
.bl-card__media img,
.bl-card__media .wz-ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale var(--dur) var(--ease-out);
}
.bl-card:hover .bl-card__media img { scale: 1.04; }
.bl-card__go {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--c-brand);
	box-shadow: 0 6px 16px -8px rgba(47, 47, 47, .35);
	transition: rotate var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.bl-card__go svg { width: 18px; height: 18px; }
.bl-card:hover .bl-card__go { rotate: 45deg; background: var(--c-brand); color: #fff; }

.bl-card__body { padding: 1rem .5rem .6rem; }
.bl-card__cat {
	display: inline-block;
	padding-bottom: .35rem;
	border-bottom: 1.5px solid var(--c-brand);
	font-size: .85rem;
	color: var(--c-ink);
}
.bl-card__title {
	margin: .9rem 0 .5rem;
	font-family: var(--f-display);
	font-weight: 500;
	font-size: clamp(1.1rem, 1.3vw, 1.4rem);
	line-height: 1.3;
	color: var(--c-ink);
}
.bl-card__title a { color: inherit; text-decoration: none; }
.bl-card__title a:hover { color: var(--c-brand); }
.bl-card__excerpt { margin: 0; font-size: .98rem; line-height: 1.5; color: #4A4A4A; }

/* ---------- Pagination ---------- */
.bl-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .55rem;
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.bl-pager__step {
	padding: .55rem 1.7rem;
	border-radius: var(--r-pill);
	background: var(--c-brand);
	color: #fff;
	font-family: var(--f-display);
	font-weight: 500;
	font-size: .95rem;
	text-decoration: none;
	transition: background-color var(--dur-fast) ease;
}
a.bl-pager__step:hover { background: var(--c-brand-2); }
.bl-pager__step.is-disabled { background: #C9BEF2; cursor: default; }
.bl-pager__num {
	display: grid;
	place-items: center;
	min-width: 30px;
	height: 30px;
	padding: 0 .3rem;
	border-radius: 50%;
	font-family: var(--f-display);
	font-size: .95rem;
	color: var(--c-ink);
	text-decoration: none;
}
a.bl-pager__num:hover { color: var(--c-brand); }
.bl-pager__num.is-current { background: var(--c-brand); color: #fff; }
.bl-pager__gap { color: var(--c-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
	.bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.bl-grid { grid-template-columns: 1fr; max-width: 440px; }
}