/**
 * Component: project card (parts/components/project-card.php).
 *
 * Figma card/projects 1598:47317, pulled 2026-09-16:
 *   desktop 311 wide, white, 1px border/light, radius 16, clipped, 16px gaps.
 *   Image area: background-purple, 150 tall, 110px illustration centred.
 *   Body: 20px sides and bottom — tag/small (Approved, 10/8 padding,
 *   subtitle/S), 16px, then header/XS title and, 10px under it, the grey
 *   lines (subtitle/M) 8px apart: application type, then council with a 14px
 *   location icon.
 *   Mobile (REF/14): 231 wide, image 120 with an 84px illustration, 16px
 *   body padding, header/2XS title, subtitle/S lines.
 *
 * The Approved tag itself is .project-tag, shared with the live map
 * (assets/css/live-map.css).
 */

/* ------------------------------------------------------------------
 * Approved tag: tag/small with the check icon. Shared with the live map's
 * card and project dialog (assets/css/live-map.css).
 * ---------------------------------------------------------------- */

.project-tag {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
	justify-content: center;
	padding: 0.375rem 0.5rem; /* 6 8 */
	font: var(--type-subtitle-s);
	color: var(--color-text-dark);
	white-space: nowrap;
	background-color: var(--color-secondary);
	border-radius: 6.25rem;
}

.project-tag__icon {
	display: inline-flex;
	width: 0.75rem;
	height: 0.75rem;
}

.project-tag__icon svg {
	width: 100%;
	height: 100%;
}

/* card/projects uses a slightly taller tag than the map card (10/8 padding). */
.project-card .project-tag {
	padding: 0.5rem 0.625rem;
}

.project-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 14.4375rem; /* 231 */
	height: 100%; /* equal height across a row: projects with no application
	               * type have one line less */
	overflow: hidden;
	background-color: var(--color-background-white);
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-16);
}

.project-card__image {
	display: grid;
	place-items: center;
	height: 7.5rem; /* 120 */
	background-color: var(--color-background-purple);
}

.project-card__icon {
	width: 5.25rem; /* 84 */
	height: 5.25rem;
}

.project-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
	padding: 0 1rem 1rem;
}

.project-card__text {
	display: flex;
	flex-direction: column;
	gap: 0.625rem; /* 10 */
	width: 100%;
}

.project-card__title {
	font: var(--type-header-2xs);
	color: var(--color-text-dark);
}

.project-card__meta {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.project-card__application,
.project-card__row {
	font: var(--type-subtitle-s);
	color: var(--color-text-grey);
}

.project-card__row {
	display: flex;
	gap: 0.25rem;
	align-items: center;
}

.project-card__row-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 0.875rem; /* 14 */
	height: 0.875rem;
	color: var(--color-primary);
}

.project-card__row-icon svg {
	width: 100%;
	height: 100%;
}

@media (min-width: 64rem) {
	.project-card {
		width: 19.4375rem; /* 311 */
	}

	.project-card__image {
		height: 9.375rem; /* 150 */
	}

	.project-card__icon {
		width: 6.875rem; /* 110 */
		height: 6.875rem;
	}

	.project-card__body {
		padding: 0 1.25rem 1.25rem;
	}

	.project-card__title {
		font: var(--type-header-xs);
	}

	.project-card__application,
	.project-card__row {
		font: var(--type-subtitle-m);
	}
}