/*
 * Projects. Figma section/projects 2022:61387 (desktop: column, 24 gap,
 * centred; maparea 1220x374 radius 20; cards 311 wide, 16 apart, clipped by
 * the column; pagination 16 under them, right; button/M 284 wide, 1841:47346),
 * mobile 556:13691 / 1839:45306 (left header/L; maparea 390x320 full bleed,
 * no radius; cards 231 wide with 20px side padding; pagination row "1 / 5" +
 * 187px progress line + prev/next, 24 under the cards; button/M hug).
 *
 * .map-preview and .project-card are shared components (also used by the
 * neighbourhood section and the live map). They are defined here and in
 * neighbourhood.css with identical rules until they move to base.css.
 */

.projects__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.projects__head { align-self: stretch; }

/* ---------- map-preview (maparea) ---------- */
.map-preview {
	--map-w: 1308px;
	--map-h: 959px;
	--map-top: -427px;
	--map-right: 0px;
	--map-pin-top: 178px;
	--map-open-top: 295px;
	position: relative;
	display: block;
	align-self: stretch;
	height: 374px;
	overflow: hidden;
	border-radius: var(--r-l);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
}

.map-preview__image {
	position: absolute;
	top: var(--map-top);
	right: var(--map-right);
	width: var(--map-w);
	max-width: none;
	height: var(--map-h);
	object-fit: cover;
	pointer-events: none;
}

.map-preview__pin {
	position: absolute;
	top: var(--map-pin-top);
	left: 50%;
	width: 61px;
	height: 54px;
	filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, .15));
	transform: translateX(-50%);
}

.map-preview__pin-shape { width: 100%; height: 98.5%; }

.map-preview__pin-label {
	position: absolute;
	top: calc(50% - 12.5px);
	inset-inline: 13.64%;
	font: var(--f-subtitle-m);
	text-align: center;
	white-space: nowrap;
}

.map-preview__open {
	--icon-size: 12px;
	position: absolute;
	top: var(--map-open-top);
	left: 50%;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 44px;
	padding: 7px 16px 8px;
	border-radius: var(--r-pill);
	background: var(--c-primary);
	color: var(--c-text-white);
	font: var(--f-subtitle-m);
	white-space: nowrap;
	transform: translateX(-50%);
	transition: background-color .15s ease;
}

.map-preview:hover .map-preview__open { background: var(--c-primary-hover); }

/* ---------- card/projects (1598:47317) ---------- */
.project-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 311px;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-m);
	background: var(--c-bg-white);
}

.project-card__image {
	display: grid;
	place-items: center;
	height: 150px;
	background: var(--c-bg-purple);
}

.project-card__icon { width: 110px; height: 110px; }

.project-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 0 20px 20px;
}

.project-card__tag {
	--icon-size: 12px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 10px;
	border-radius: var(--r-pill);
	background: var(--c-secondary);
	color: var(--c-text-dark);
	font: var(--f-subtitle-s);
	white-space: nowrap;
}

.project-card__text {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

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

.project-card__meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.project-card__line { font: var(--f-subtitle-m); color: var(--c-text-grey); }

.project-card__line--icon {
	--icon-size: 14px;
	display: flex;
	align-items: flex-start;
	gap: 4px;
}

/* Centred on the first line, so a council name on two lines keeps the pin at the top. */
.project-card__line--icon .icon { flex: none; margin-top: 2px; color: var(--c-primary); }

/* ---------- slider/projects + pagination ---------- */
.projects__slider {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-self: stretch;
	min-width: 0;
}

.projects__track { margin: 0; }
.projects__item { display: flex; }

/* pagination 1841:47354 (desktop: arrows only, right) / slider 1839:45314 (mobile) */
.projects__pagination {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
}

/* Nothing to slide: no pagination at all. */
.projects__slider.is-static .projects__pagination { display: none; }

.projects__count,
.projects__progress { display: none; }

.projects__count {
	font: var(--f-subtitle-m);
	color: var(--c-text-grey);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.projects__current { color: var(--c-primary); }

/* Line 2 (#d8d8d8) with Line 3 (#090313) growing over it. */
.projects__progress {
	--progress: .2;
	position: relative;
	flex: 0 1 187px;
	min-width: 40px;
	height: 1px;
	background: var(--c-border-light);
}

.projects__progress::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--progress) * 100%);
	background: var(--c-border-dark);
	transition: width .2s ease;
}

.projects__arrows {
	display: flex;
	gap: 16px;
	margin-left: auto;
}

.projects__arrow {
	--icon-size: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-border-dark);
	border-radius: var(--r-xs);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
	transition: background-color .15s ease, color .15s ease;
}

.projects__arrow:hover { background: var(--c-border-dark); color: var(--c-text-white); }

.projects__arrow[aria-disabled="true"] {
	border-color: var(--c-border-light);
	color: var(--c-border-light);
	pointer-events: none;
}

/* button/M 1841:47358: fixed 284 on desktop. */
.projects__more { width: 284px; max-width: 100%; }

@media (max-width: 767px) {
	.map-preview.projects__map {
		--map-w: 942px;
		--map-h: 691px;
		--map-top: -264px;
		--map-pin-top: 140px;
		--map-open-top: 246px;
		height: 320px;
		margin-inline: calc(-1 * var(--gutter));
		border-radius: 0;
	}

	/* Mobile map: the same picture at 72% (the frame's zoom), London kept
	   35px right of the middle as in the frame. */
	.projects__map .map-preview__image {
		right: auto;
		left: calc(50% - 539px);
	}

	.projects__map .map-preview__pin { width: 44px; height: 39px; }

	.projects__slider { margin-inline: calc(-1 * var(--gutter)); }
	.projects .projects__track { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }

	/* Mobile pagination row: 24 under the cards, counter / line / arrows spread. */
	.projects__slider { gap: 24px; }

	.projects__pagination {
		justify-content: space-between;
		padding-inline: var(--gutter);
	}

	.projects__count,
	.projects__progress { display: block; }

	.projects__more { width: auto; }

	.project-card { width: 231px; }
	.project-card__image { height: 120px; }
	.project-card__icon { width: 84px; height: 84px; }
	.project-card__body { padding: 0 16px 16px; }
	.project-card__text { gap: 12px; }
	.project-card__title { font: var(--f-header-2xs); }
	.project-card__line { font: var(--f-subtitle-s); }
	.project-card__line--icon .icon { margin-top: 1px; }
}