/* =========================================================================
   KPV Project Grid – styled to match the KPV "About us" blurbs
   ========================================================================= */
.kpv-pg {
	--kpv-accent: #8fbf1f;       /* KPV green: borders, buttons, active filter */
	--kpv-accent-dark: #7aa615;  /* hover */
	--kpv-accent-text: #ffffff;
	--kpv-heading: #173c67;      /* KPV navy */
	--kpv-text: #666666;
	--kpv-border: 2px;
	--kpv-radius: 5px;
	--kpv-pad: 30px;             /* space around the text inside each card (not the image) */
	--kpv-gap-x: 40px;           /* space between cards, like the About us columns */
	--kpv-gap-y: 30px;
	--kpv-ratio: 3 / 2;          /* thumbnail proportions */
	width: 100%;
}

/* Filters ---------------------------------------------------------------- */
.kpv-pg__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 40px;
}
.kpv-pg .kpv-pg__filter {
	appearance: none;
	-webkit-appearance: none;
	background: #fff;
	border: var(--kpv-border) solid var(--kpv-accent);
	border-radius: var(--kpv-radius);
	color: var(--kpv-heading);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	padding: 11px 22px;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.kpv-pg .kpv-pg__filter:hover { background: #f4f9e8; }
.kpv-pg .kpv-pg__filter.is-active {
	background: var(--kpv-accent);
	color: var(--kpv-accent-text);
}

/* Grid -------------------------------------------------------------------- */
.kpv-pg__grid {
	display: grid;
	grid-template-columns: repeat(var(--kpv-cols, 3), minmax(0, 1fr));
	gap: var(--kpv-gap-y) var(--kpv-gap-x);
}
@media (max-width: 1100px) {
	.kpv-pg { --kpv-gap-x: 30px; --kpv-gap-y: 30px; --kpv-pad: 24px; }
}
@media (max-width: 980px) {
	.kpv-pg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.kpv-pg__grid { grid-template-columns: 1fr; }
	.kpv-pg { --kpv-pad: 20px; }
}

/* Card -------------------------------------------------------------------- */
.kpv-pg__item {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: var(--kpv-border) solid var(--kpv-accent);
	border-radius: var(--kpv-radius);
	overflow: hidden;            /* image follows the card's rounded corners */
	animation: kpvPgIn .35s ease both;
}
.kpv-pg__item[hidden] { display: none !important; }
@keyframes kpvPgIn { from { opacity: 0; } to { opacity: 1; } }

/* Image -------------------------------------------------------------------- */
.kpv-pg__media {
	position: relative;
	display: block;
	aspect-ratio: var(--kpv-ratio);
	overflow: hidden;
	background: #eef2f5;
}
.kpv-pg__media img,
.kpv-pg__noimg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
.kpv-pg__overlay {
	position: absolute;
	inset: 0;
	background: rgba(23, 60, 103, .35);
	opacity: 0;
	transition: opacity .3s ease;
}

/* "Project details" button – always visible on clickable projects,
   so it also works on phones where there is no hover. */
.kpv-pg .kpv-pg__btn {
	position: absolute;
	right: 0;
	bottom: 0;
	margin-bottom: 20px;
	background: var(--kpv-accent);
	color: var(--kpv-accent-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 12px 18px;
	border-radius: 0;
	transition: background-color .25s, padding .25s;
}

.kpv-pg__item.is-clickable:hover .kpv-pg__media img { transform: scale(1.05); }
.kpv-pg__item.is-clickable:hover .kpv-pg__overlay,
.kpv-pg__media:focus-visible .kpv-pg__overlay { opacity: 1; }
.kpv-pg__item.is-clickable:hover .kpv-pg__btn,
.kpv-pg__media:focus-visible .kpv-pg__btn {
	background: var(--kpv-accent-dark);
	padding-right: 24px;
}

/* Text under the image ---------------------------------------------------- */
.kpv-pg__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: calc(var(--kpv-pad) - 6px) var(--kpv-pad) var(--kpv-pad);
}

/* Card Tags – pills, pushed to the bottom so they line up across a row */
.kpv-pg .kpv-pg__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none !important;
	margin: auto 0 0 !important;
	padding: 18px 0 0 !important;
}
.kpv-pg .kpv-pg__tag {
	margin: 0 !important;
	padding: 5px 12px;
	background: #f1f7e4;
	border: 1px solid #d6e8b0;
	color: var(--kpv-heading);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	list-style: none !important;
}
.kpv-pg .kpv-pg__title {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
	text-transform: uppercase;
	text-align: left;
	color: var(--kpv-heading);
	margin: 0 0 14px;
	padding: 0;
}
.kpv-pg .kpv-pg__title a { color: inherit; text-decoration: none; }
.kpv-pg .kpv-pg__item.is-clickable:hover .kpv-pg__title a { color: var(--kpv-accent-dark); }

.kpv-pg__meta { font-size: 14px; line-height: 1.8; color: var(--kpv-text); }
.kpv-pg__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.kpv-pg__row + .kpv-pg__row { margin-top: 4px; }
.kpv-pg__icon {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: calc((1.8em - 16px) / 2);   /* centre on the first text line */
	color: var(--kpv-accent);
}
.kpv-pg__icon--divi {
	font-family: 'ETmodules' !important;
	font-size: 16px;
	line-height: 1;
	font-style: normal;
	font-weight: 400;
	text-align: center;
}
.kpv-pg__text { min-width: 0; }
.kpv-pg__label { color: var(--kpv-heading); font-weight: 600; }

.kpv-pg a:focus-visible,
.kpv-pg button:focus-visible { outline: 2px solid var(--kpv-heading); outline-offset: 3px; }

/* Show more ---------------------------------------------------------------- */
.kpv-pg__more { text-align: center; margin-top: 50px; }
.kpv-pg__more[hidden] { display: none; }
.kpv-pg .kpv-pg__more-btn {
	appearance: none;
	-webkit-appearance: none;
	background: var(--kpv-accent);
	color: var(--kpv-accent-text);
	border: 0;
	border-radius: var(--kpv-radius);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	padding: 14px 30px;
	cursor: pointer;
	transition: background-color .2s;
}
.kpv-pg .kpv-pg__more-btn:hover { background: var(--kpv-accent-dark); }

.kpv-pg .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.kpv-pg * { animation: none !important; transition: none !important; }
}