/**
 * Blog articles section (.kc-posts, blocks/posts, Figma 170:320 + 170:329): the featured
 * post in a blush card, then a grid of white post cards (3 → 2 → 1 columns) and the
 * pagination. The same cards list archives and search (.kc-posts--listing) and the
 * "More articles" row under a single post (.kc-posts--related).
 */

/* The Figma frames are 1280 wide (80px margins), wider than the 1240 content column. */
.kc-posts.has-global-padding {
	padding-inline: var( --kc-gutter-wide );
}

.kc-posts {
	padding-top: 5rem;
	padding-bottom: var( --kc-section-space );
}

/* The site's standard section heading (display 48/48, dark purple, centred — as on
   Contact), not the Blogs frame's one-off Poppins 38 style. Figma positions kept: the
   card 110px below the heading's top, the grid 130px. */
.kc-posts .kc-posts__heading {
	margin-block: 0 3.875rem;
	color: var( --kc-dark-purple );
	font-family: var( --kc-font-display );
	font-size: clamp( 2rem, 3.334vw, 3rem );
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

/* Figma: 230 from the featured card down to "LATEST ARTICLES". */
.kc-posts .kc-post-feature + .kc-posts__heading--list {
	margin-top: clamp( 5rem, 15.97vw, 14.375rem );
}

.kc-posts .kc-posts__heading--list {
	margin-bottom: clamp( 2.5rem, 5.7vw, 5.125rem );
}

.kc-posts :is( .kc-post-feature, .kc-post-grid, .kc-pagination ) {
	max-width: 80rem;
}

.kc-posts__empty {
	text-align: center;
}

.kc-posts__empty a {
	/* A 44px tall hit area without changing the line height. */
	display: inline-block;
	margin-block: -0.625rem;
	padding-block: 0.625rem;
	color: var( --kc-dark-purple );
	text-decoration-color: var( --kc-pink );
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.kc-posts__empty a:is( :hover, :focus-visible ) {
	color: var( --kc-pink );
}

/* ---------------------------------------------------------- featured ---- */

.kc-post-feature {
	display: grid;
	grid-template-columns: minmax( 0, 560fr ) minmax( 0, 626fr );
	gap: 2.875rem;
	padding: 1.5rem;
	border-radius: var( --kc-radius-card );
	background: var( --kc-blush );
	color: var( --kc-dark-purple );
}

.kc-post-feature__image {
	display: block;
	aspect-ratio: 560 / 492;
	overflow: hidden;
	border-radius: var( --kc-radius-inner );
}

.kc-post-feature__image img,
.kc-post-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.kc-post-feature:hover .kc-post-feature__image img,
.kc-post-card:hover .kc-post-card__image img {
	transform: scale( 1.03 );
}

.kc-post-feature__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 3.5rem 3.5rem 1.5rem 0;
}

.kc-post-feature__title {
	margin: 0;
	font-family: var( --kc-font-display );
	font-size: clamp( 1.625rem, 2.36vw, 2.125rem );
	font-weight: 700;
	line-height: 1.2353;
}

.kc-post-feature__title a,
.kc-post-card__title a {
	display: block;
	margin-block: -0.625rem;
	padding-block: 0.625rem;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.kc-post-feature__title a:is( :hover, :focus-visible ),
.kc-post-card__title a:is( :hover, :focus-visible ) {
	color: var( --kc-pink );
}

.kc-post-feature__excerpt {
	max-width: 32.5rem;
	margin: 2.0625rem 0 0;
	font-size: 1.125rem;
	line-height: 1.6667;
}

.kc-post-feature__meta {
	margin: 2.1875rem 0 0;
	color: var( --kc-pink );
	/* 14px: the site's smallest text size (Figma 13). */
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.43;
	text-transform: uppercase;
}

.kc-post-feature__meta span {
	margin-inline: 0.5em;
}

.kc-post-feature__more {
	min-width: 10.625rem;
	min-height: 3.125rem;
	margin-top: 3.125rem;
}

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

.kc-post-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: clamp( 2rem, 5.56vw, 5rem ) 1.875rem;
}

.kc-post-card {
	display: flex;
	flex-direction: column;
	padding: 0.8125rem 0.8125rem 1rem;
	border: 1px solid var( --kc-card-border );
	border-radius: var( --kc-radius-card );
	background: var( --kc-white );
	color: var( --kc-dark-purple );
}

.kc-post-card__image,
.kc-post-card__placeholder {
	display: block;
	aspect-ratio: 372 / 300;
	overflow: hidden;
	border-radius: var( --kc-radius-image );
}

.kc-post-card__placeholder {
	background: var( --kc-lavender );
}

.kc-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.9375rem 0.625rem 0;
}

.kc-post-card__cat {
	margin: 0 0 1.25rem;
	/* 14px: the site's smallest text size (Figma 12). */
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.43;
	text-transform: uppercase;
}

/* The hit area reaches 44px tall without moving the text. */
.kc-post-card__cat a {
	position: relative;
	color: var( --kc-pink );
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.2s ease;
}

.kc-post-card__cat a::after {
	position: absolute;
	inset: -0.75rem 0;
	content: "";
}

.kc-post-card__cat a:is( :hover, :focus-visible ) {
	text-decoration-color: currentColor;
}

/* Card titles as elsewhere on the site (party / feature cards): display 24/30. */
.kc-post-card__title {
	margin: 0;
	font-family: var( --kc-font-display );
	font-size: clamp( 1.25rem, 1.67vw, 1.5rem );
	font-weight: 700;
	line-height: 1.25;
}

.kc-post-card__excerpt {
	margin: 1.3125rem 0 1.0625rem;
	font-size: 0.875rem;
	line-height: 1.7143;
}

.kc-post-card__more {
	min-width: 9.375rem;
	min-height: 3.125rem;
	margin-top: auto;
}

/* -------------------------------------------------------- pagination ---- */

.kc-posts .kc-pagination {
	margin-top: clamp( 3rem, 5.56vw, 5rem );
}

/* paginate_links() gives the <ul> the page-numbers class too; only its items are pills. */
.kc-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kc-pagination li > .page-numbers {
	transition: background-color 0.2s ease, border-color 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	height: 3rem;
	padding: 0 0.75rem;
	border: 1px solid var( --kc-card-border );
	border-radius: var( --kc-radius-pill );
	color: var( --kc-dark-purple );
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.kc-pagination a.page-numbers:is( :hover, :focus-visible ) {
	border-color: var( --kc-dark-purple );
	background: var( --kc-blush );
}

.kc-pagination .page-numbers.current {
	border-color: var( --kc-dark-purple );
	background: var( --kc-dark-purple );
	color: var( --kc-white );
}

.kc-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ------------------------------------------------------------ variants ---- */

/* Figma leaves 330px between the grid and the newsletter card. */
.kc-posts:has( + .kc-subscribe ) {
	padding-bottom: clamp( 4rem, 22.92vw, 20.625rem );
}

/* The footer's wave rises into the last section, so leave room for it. */
.kc-posts:last-child {
	padding-bottom: calc( var( --kc-section-space ) + var( --kc-wave-h ) );
}

/* Archive / blog index / search: the band above carries the title and its wave hangs
   into the top of this section. */
.kc-posts--listing {
	padding-top: calc( var( --kc-wave-h ) + clamp( 2.5rem, 4.17vw, 3.75rem ) );
}

/* Single post: "More articles" on a blush band with a wavy top. */
.kc-posts--related {
	padding-top: clamp( 2.5rem, 4.17vw, 3.75rem );
	background: var( --kc-blush );
}

.kc-posts--related .kc-posts__heading--list {
	margin-bottom: clamp( 2rem, 4.45vw, 4rem );
}

/* ---------------------------------------------------------- responsive ---- */

@media ( max-width: 1100px ) {
	.kc-post-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 900px ) {
	.kc-post-feature {
		grid-template-columns: minmax( 0, 1fr );
		gap: 0;
	}

	.kc-post-feature__image {
		aspect-ratio: 16 / 10;
	}

	.kc-post-feature__body {
		padding: 1.75rem 0.5rem 0.5rem;
	}

	.kc-post-feature__excerpt {
		margin-top: 1rem;
		font-size: 1rem;
	}

	.kc-post-feature__meta {
		margin-top: 1rem;
	}

	.kc-post-feature__more {
		margin-top: 1.75rem;
	}
}

@media ( max-width: 781px ) {
	.kc-posts:not( .kc-posts--listing, .kc-posts--related ) {
		padding-top: 3.5rem;
	}

	.kc-posts .kc-posts__heading {
		margin-bottom: 2rem;
	}

	.kc-post-feature {
		padding: 1rem;
	}

	.kc-post-grid {
		gap: 1.5rem;
	}

	.kc-post-card__body {
		padding-top: 1.5rem;
	}

	.kc-post-card__cat {
		margin-bottom: 0.75rem;
	}

	.kc-post-card__excerpt {
		margin-block: 0.75rem 1.25rem;
	}
}

@media ( max-width: 600px ) {
	.kc-post-grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}