/**
 * Blog — card design, featured treatment, pagination.
 *
 * Companion stylesheet to the blog card pattern (.blog-post-card) and
 * the shared post grid. Token-based throughout; motion fully disabled
 * under prefers-reduced-motion.
 */

/* --- Card chrome + micro-interactions --- */

.blog-post-card {
	height: 100%; /* equal card heights within a grid row */
	overflow: hidden; /* clips the edge-to-edge image to the card radius */
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--outline, #ababab) 35%, transparent);
	transition: transform 0.2s ease, box-shadow 0.2s ease,
		background-color 0.2s ease;
}

/* Card links never underline — the card itself is the interaction. */
.blog-post-card a,
.blog-post-card a:hover,
.blog-post-card a:focus {
	text-decoration: none;
}

/* The body grows, so card bottoms align across a row. */
.blog-post-card > .wp-block-group {
	flex-grow: 1;
}

.blog-post-card:hover,
.blog-post-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.09);
	/* a whisper of the band tint */
	background-color: color-mix(in srgb, var(--wp--preset--color--primary-light, #eef0fb) 35%, var(--wp--preset--color--base, #fff));
}

.blog-post-card .wp-block-post-featured-image {
	overflow: hidden;
}

.blog-post-card .wp-block-post-featured-image img {
	transition: transform 0.35s ease;
}

.blog-post-card:hover .wp-block-post-featured-image img,
.blog-post-card:focus-within .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* --- Excerpt clamping ---
   The is-style-excerpt-truncate-3 style class ships in the card
   patterns; this is its (previously missing) definition. */

.wp-block-post-excerpt.is-style-excerpt-truncate-3 .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* --- Featured card ---
   The first post in the loop grid gets the magazine treatment: full row
   span, image | content split, larger title, longer excerpt. Pure CSS
   off :first-child, scoped to the main grid band (.is-style-combo-4)
   so secondary card rows (e.g. Keep Reading) stay uniform. Below
   tablet it's a normal stacked card. */

@media (min-width: 782px) {
	.is-style-combo-4 .wp-block-post-template.is-layout-grid > li:first-child {
		grid-column: 1 / -1;
	}

	.is-style-combo-4 .wp-block-post-template.is-layout-grid > li:first-child .blog-post-card {
		display: grid;
		grid-template-columns: 1.15fr 1fr;
		align-items: stretch;
	}

	.is-style-combo-4 .wp-block-post-template.is-layout-grid > li:first-child .blog-post-card .wp-block-post-featured-image {
		height: 100% !important; /* the block sets a fixed height inline */
		min-height: 380px;
	}

	/* The photo fills the whole pane — the isLink wrapper and the img
	   (which carries an inline fixed height) both stretch. */
	.is-style-combo-4 .wp-block-post-template.is-layout-grid > li:first-child .blog-post-card .wp-block-post-featured-image a {
		display: block;
		height: 100% !important; /* the isLink anchor carries the inline height too */
	}

	.is-style-combo-4 .wp-block-post-template.is-layout-grid > li:first-child .blog-post-card .wp-block-post-featured-image img {
		width: 100%;
		height: 100% !important;
		object-fit: cover;
	}

	/* The body earns hero breathing room and vertical centering. */
	.is-style-combo-4 .wp-block-post-template.is-layout-grid > li:first-child .blog-post-card > .wp-block-group {
		align-self: center;
		flex-grow: 0;
		padding: var(--wp--preset--spacing--large, 2rem);
	}

	.is-style-combo-4 .wp-block-post-template.is-layout-grid > li:first-child .blog-post-card .wp-block-post-title {
		/* !important: core emits preset font-size classes with !important. */
		font-size: var(--wp--preset--font-size--x-large, 2rem) !important;
	}

	/* Roomier description on the feature: bigger type, six lines. */
	.is-style-combo-4 .wp-block-post-template.is-layout-grid > li:first-child .blog-post-card .wp-block-post-excerpt {
		font-size: var(--wp--preset--font-size--base, 1rem) !important;
	}

	.is-style-combo-4 .wp-block-post-template.is-layout-grid > li:first-child .blog-post-card .wp-block-post-excerpt.is-style-excerpt-truncate-3 .wp-block-post-excerpt__excerpt {
		-webkit-line-clamp: 6;
	}
}

/* --- Pagination (scoped to the post grid band) ---
   Centered pill design: numbered circles with the current page filled,
   prev/next as soft bordered pills. */

.is-style-combo-4 .wp-block-query-pagination {
	align-items: center;
	gap: var(--wp--preset--spacing--small, 0.75rem);
	font-size: 0.95rem;
}

.is-style-combo-4 .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
}

.is-style-combo-4 .wp-block-query-pagination-numbers .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.5rem;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.is-style-combo-4 .wp-block-query-pagination-numbers .page-numbers:hover:not(.current) {
	background-color: var(--wp--preset--color--base, #fff);
}

.is-style-combo-4 .wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var(--wp--preset--color--primary, #453edb);
	color: var(--wp--preset--color--base, #fff);
}

.is-style-combo-4 .wp-block-query-pagination-previous,
.is-style-combo-4 .wp-block-query-pagination-next {
	padding: 0.45rem 1.1rem !important; /* over the button-link block style */
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--outline, #ababab) 45%, transparent) !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--base, #fff) !important;
	color: inherit !important;
	font-size: 0.9rem !important;
	text-decoration: none !important;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.is-style-combo-4 .wp-block-query-pagination-previous:hover,
.is-style-combo-4 .wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--primary, #453edb) !important;
	color: var(--wp--preset--color--primary, #453edb) !important;
}

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
	.blog-post-card,
	.blog-post-card .wp-block-post-featured-image img,
	.is-style-combo-4 .wp-block-query-pagination-numbers .page-numbers,
	.is-style-combo-4 .wp-block-query-pagination-previous,
	.is-style-combo-4 .wp-block-query-pagination-next {
		transition: none;
	}

	.blog-post-card:hover,
	.blog-post-card:focus-within {
		transform: none;
	}

	.blog-post-card:hover .wp-block-post-featured-image img,
	.blog-post-card:focus-within .wp-block-post-featured-image img {
		transform: none;
	}
}

/* --- Single post navigation (pill links) --- */

.blog-post-nav .wp-block-post-navigation-link a {
	display: inline-block;
	padding: 0.45rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--outline, #ababab) 45%, transparent);
	border-radius: 999px;
	background: var(--wp--preset--color--base, #fff);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.blog-post-nav .wp-block-post-navigation-link a:hover {
	border-color: var(--wp--preset--color--primary, #453edb);
	color: var(--wp--preset--color--primary, #453edb);
}

@media (prefers-reduced-motion: reduce) {
	.blog-post-nav .wp-block-post-navigation-link a {
		transition: none;
	}
}