/* KBH cards styles — owned by one concern (post listings as a card grid). */

:root {
	--kbh-card-pad: var(--wp--preset--spacing--40, 1.5rem);
	--kbh-card-gap: var(--wp--preset--spacing--40, 1.5rem);
	--kbh-card-border: var(--wp--preset--color--zilvergrijs, #c0c0c0);
	--kbh-card-blue: var(--wp--preset--color--koningsblauw, #23388e);
	--kbh-card-red: var(--wp--preset--color--venetiaans-rood, #a42a04);
	--kbh-card-white: var(--wp--preset--color--wit, #fff);
	--kbh-card-ink: var(--wp--preset--color--zwart, #000);
	--kbh-card-muted: #5a5a5a;
}

/* ---- Grid: 3 columns desktop ---------------------------------------- */
/* WP renders the post-template <ul> with an inline container class that sets
   grid-template-columns: repeat(3, minmax(0,1fr)) (specificity 0,1,0) and a
   core rule that collapses to 1 column at <=600px (specificity 0,4,0).
   We keep 3 up top, add a 2-col tablet step, and set our own gap. */
.kbh-card-grid.wp-block-post-template-is-layout-grid {
	gap: var(--kbh-card-gap);
	align-items: stretch;
}

/* Tablet: 2 columns (0,2,0 beats the inline container's 0,1,0) */
@media (min-width: 601px) and (max-width: 900px) {
	.kbh-card-grid.wp-block-post-template-is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile: 1 column. WP core already does this; mirror it for resilience. */
@media (max-width: 600px) {
	.kbh-card-grid.wp-block-post-template-is-layout-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Card ----------------------------------------------------------- */
.kbh-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--kbh-card-white);
	border: 1px solid var(--kbh-card-border);
	border-radius: var(--kbh-radius, 8px);
	overflow: hidden; /* clip the full-bleed featured image to the rounded corners */
	padding: var(--kbh-card-pad);
	box-shadow: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.kbh-card:hover,
.kbh-card:focus-within {
	transform: translateY(-4px);
	border-color: var(--kbh-card-blue);
	box-shadow: 0 8px 20px rgba(35, 56, 142, 0.16);
}

/* ---- Featured image (full-bleed top of card) ------------------------ */
.kbh-card .wp-block-post-featured-image {
	margin: calc(-1 * var(--kbh-card-pad)) calc(-1 * var(--kbh-card-pad)) var(--kbh-card-pad);
	overflow: hidden; /* clip the hover zoom */
	background: var(--kbh-card-border); /* fills before image paints */
	aspect-ratio: 4 / 3;
}

.kbh-card .wp-block-post-featured-image a {
	display: block;
	height: 100%;
}

.kbh-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

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

/* ---- Placeholder when a post has no featured image ------------------ */
/* WP adds .has-post-thumbnail on the <li> only when a thumbnail exists,
   so :not(.has-post-thumbnail) gives us a reliable hook (no :has needed). */
.wp-block-post:not(.has-post-thumbnail) .kbh-card::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 3;
	margin: calc(-1 * var(--kbh-card-pad)) calc(-1 * var(--kbh-card-pad)) var(--kbh-card-pad);
	background-color: var(--kbh-card-blue);
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.06) 0,
		rgba(255, 255, 255, 0.06) 2px,
		transparent 2px,
		transparent 14px
	);
}

/* ---- Title ---------------------------------------------------------- */
.kbh-card .wp-block-post-title {
	margin: 0 0 0.35rem;
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	line-height: 1.2;
	font-weight: 700;
	color: var(--kbh-card-blue);
}

.kbh-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.kbh-card:hover .wp-block-post-title a,
.kbh-card .wp-block-post-title a:hover,
.kbh-card .wp-block-post-title a:focus {
	color: var(--kbh-card-red); /* red = accent/hover only */
}

/* ---- Date ----------------------------------------------------------- */
.kbh-card .wp-block-post-date {
	margin: 0 0 0.75rem;
	color: var(--kbh-card-muted);
	font-size: var(--wp--preset--font-size--small, 0.85rem);
}

/* ---- Excerpt -------------------------------------------------------- */
.kbh-card .wp-block-post-excerpt {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto; /* pushes "Lees meer" toward the card foot for even rows */
	margin: 0;
	color: var(--kbh-card-ink);
}

.kbh-card .wp-block-post-excerpt__excerpt {
	margin: 0;
	line-height: 1.5;
}

.kbh-card .wp-block-post-excerpt__more-text {
	margin: 0.75rem 0 0;
}

.kbh-card .wp-block-post-excerpt__more-link {
	color: var(--kbh-card-blue);
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s ease;
}

.kbh-card .wp-block-post-excerpt__more-link:hover,
.kbh-card .wp-block-post-excerpt__more-link:focus {
	color: var(--kbh-card-red);
	text-decoration: underline;
}

/* ---- Reduced-motion override --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.kbh-card,
	.kbh-card .wp-block-post-featured-image img,
	.kbh-card .wp-block-post-title a,
	.kbh-card .wp-block-post-excerpt__more-link {
		transition: none;
	}
	.kbh-card:hover,
	.kbh-card:focus-within {
		transform: none;
	}
	.kbh-card:hover .wp-block-post-featured-image img,
	.kbh-card:focus-within .wp-block-post-featured-image img {
		transform: none;
	}
}