/* ITS Canada Project Map blocks. Deliberately light: fonts, colours and spacing come from the site's theme
   (currentColor, inherit, and the theme's preset variables where present), so the blocks look like the rest of the site. */

.itsmap-cards {
	display: grid;
	/* auto-fit: three cards fill the row instead of leaving an empty fourth column. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--wp--style--block-gap, 1.5rem);
}

.itsmap-card {
	display: flex;
	flex-direction: column;
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	border-top: 4px solid var(--itsmap-cat, currentColor);
	border-radius: 4px;
	overflow: hidden;
	background: var(--wp--preset--color--base, transparent);
}

.itsmap-card-large {
	max-width: 42rem;
}

.itsmap-card-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	max-width: 100%;
}

.itsmap-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	padding: 1em 1.1em 1.2em;
}

.itsmap-card-cat {
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.75;
}

.itsmap-card-title {
	font-size: 1.1em;
	margin: 0;
	line-height: 1.25;
}

.itsmap-card-meta,
.itsmap-list-meta {
	font-size: 0.875em;
	opacity: 0.75;
	margin: 0;
}

.itsmap-card-summary {
	margin: 0;
}

.itsmap-latest,
.itsmap-list {
	list-style: none;
	padding: 0;
	margin: 0 0 0.75em;
}

.itsmap-latest li,
.itsmap-list li {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	padding: 0.6em 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.itsmap-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
	gap: var(--wp--style--block-gap, 1.5rem);
	margin: 0;
}

.itsmap-stats div {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}

/* The number first, so all numbers line up even when a label wraps. */
.itsmap-stats dd {
	order: -1;
}

.itsmap-stats dd {
	margin: 0;
	font-size: 2.4em;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.itsmap-stats dt {
	opacity: 0.8;
}

.itsmap-search {
	display: flex;
	gap: 0.5em;
	flex-wrap: wrap;
}

.itsmap-search input {
	flex: 1 1 14rem;
	min-width: 0;
	font: inherit;
	padding: 0.6em 0.8em;
}

.itsmap-embed iframe {
	border-radius: 4px;
}

.itsmap-error {
	padding: 0.75em 1em;
	border-left: 4px solid #b32d2e;
	background: color-mix(in srgb, #b32d2e 8%, transparent);
}

/* Project page (/projects/<project>/) */
.itsmap-detail {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.itsmap-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0;
}

.itsmap-chip {
	font-size: 0.8em;
	font-weight: 600;
	padding: 0.2em 0.7em;
	border-radius: 999px;
	border: 1px solid var(--itsmap-cat, currentColor);
	border-left-width: 6px;
}

.itsmap-detail > p {
	margin: 0;
}

.itsmap-detail-lead {
	font-size: 1.2em;
	margin: 0;
}

.itsmap-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 0.75em 1.5em;
	margin: 0;
	padding: 1em 0;
	border-block: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.itsmap-facts dt {
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.75;
}

.itsmap-facts dd {
	margin: 0.15em 0 0;
}

.itsmap-detail-image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.itsmap-detail-source {
	font-size: 0.875em;
	opacity: 0.8;
}