/*
 * Redesign 2026 — the project page, on carbon. The text and the button, then
 * the data row (key facts large, secondary ones small, the small map of the
 * country beside them), then the images large (one full width, then two side
 * by side), and at the end "← Back to <service>". Only the standard
 * appearing of texts and images (.wsme-rv, .wsme-fd). Values: tokens.css.
 */

.wsme-v2 .wsme-proj {
	--acc: var(--c-stone);
	padding: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 12px) var(--m) clamp(80px, 12vh, 140px);
	background: var(--c-carbon);
	color: var(--t-on-dark);
}

/* ---------- the first block: back pill, label, name and status, text, button ---------- */

/* On a computer the text on the left and the country's map on the right, as
   tall as the text and centred on it; on a phone the map under the text. */
.wsme-v2 .wsme-proj__intro {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: stretch;
	column-gap: clamp(32px, 5vw, 96px);
}

.wsme-v2 .wsme-proj__lead .wsme-back {
	margin-block-end: 18px;
}

.wsme-v2 .wsme-proj__kicker {
	display: block;
	color: var(--acc);
}

.wsme-v2 .wsme-proj__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px clamp(14px, 1.6vw, 24px);
	margin-block-start: 0.6rem;
}

.wsme-v2 .wsme-proj__title {
	font-size: var(--fs-title-page);
}

/* Built / Under construction / Concept: a small round label. */
.wsme-v2 .wsme-proj__status {
	flex: none;
	margin-block-end: 0.5em;
	padding: 6px 12px;
	border-radius: var(--r-round);
	background: var(--glass-light);
	color: var(--t-on-dark);
	white-space: nowrap;
}

.wsme-v2 .wsme-proj__sub {
	margin: 0.9rem 0 0;
	max-inline-size: 30em;
}

.wsme-v2 .wsme-proj__story {
	margin-block-start: 0.9rem;
	max-inline-size: 40rem;
	color: var(--c-stone);
}

.wsme-v2 .wsme-proj__story > * {
	margin-block: 0 0.9em;
}

.wsme-v2 .wsme-proj__story p {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.wsme-v2 .wsme-proj__cta {
	margin-block-start: 1.2rem;
}

/* ---------- the map: the country's outline, the city on its dot ---------- */

/* The figure is as tall as the text beside it (the grid row); the drawing
   fills it, at most 80% of the screen high, centred. */
.wsme-v2 .wsme-pmap {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	min-block-size: 0;
}

.wsme-v2 .wsme-pmap__svg {
	display: block;
	flex: 0 1 auto;
	inline-size: 100%;
	block-size: 100%;
	max-block-size: 80svh;
	min-block-size: 0;
	overflow: visible;
}

.wsme-v2 .wsme-pmap__line {
	fill: none;
	stroke: var(--c-cement);
	stroke-width: 1.2;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.wsme-v2 .wsme-pmap__dot {
	fill: var(--c-cement);
}

/* City, country and coordinates: under the map without JavaScript, or when
   no free space near the dot is found (never on the outline); project-map.js
   moves them into a free space near the dot; either way a thin line joins
   them to the dot. Narrow: four lines; wide (.is-wide): two. */
.wsme-v2 .wsme-pmap__label {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	margin-block-start: 10px;
	color: var(--t-on-dark);
	white-space: nowrap;
	pointer-events: none;
}

.wsme-v2 .wsme-pmap__pair {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wsme-v2 .wsme-pmap__label.is-wide .wsme-pmap__pair {
	flex-direction: row;
	gap: 0.7em;
}

.wsme-v2 .wsme-pmap__coords {
	color: var(--t-soft-on-dark);
}

.wsme-v2 .wsme-pmap.is-placed .wsme-pmap__label {
	position: absolute;
	margin: 0;
}

.wsme-v2 .wsme-pmap.is-end .wsme-pmap__label,
.wsme-v2 .wsme-pmap.is-end .wsme-pmap__pair {
	align-items: flex-end;
	text-align: end;
}

.wsme-v2 .wsme-pmap__leader {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
	pointer-events: none;
	visibility: hidden;
}

.wsme-v2 .wsme-pmap:is(.is-placed, .is-below) .wsme-pmap__leader {
	visibility: visible;
}

.wsme-v2 .wsme-pmap__leader line {
	stroke: var(--c-stone);
	stroke-width: 1;
}

/* The outline draws itself once (project-map.js sets the length). */
.js .wsme-v2 .wsme-pmap.is-armed .wsme-pmap__line {
	stroke-dasharray: var(--len);
	stroke-dashoffset: var(--len);
}

.js .wsme-v2 .wsme-pmap.is-armed :is(.wsme-pmap__dot, .wsme-pmap__label, .wsme-pmap__leader) {
	opacity: 0;
	transition: opacity var(--dur-2) var(--ease-out) var(--dur-4);
}

.js .wsme-v2 .wsme-pmap.is-drawn .wsme-pmap__line {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 2s var(--ease-out);
}

.js .wsme-v2 .wsme-pmap.is-drawn :is(.wsme-pmap__dot, .wsme-pmap__label, .wsme-pmap__leader) {
	opacity: 1;
}

/* ---------- the data: one table, full width ---------- */

/* Row 1 Status · Year · Area · Location (large), row 2 Zone · Services ·
   Images (about half), both in Oswald, in the same four columns; the thin lines are the
   1px gaps between the cells (the table's own colour), so they stay in line
   whatever spans the cells take (wsme_v2_project_table()). The table reaches
   into the page margin by the cells' padding, so the first column's text
   starts at the margin. */
.wsme-v2 .wsme-proj__data {
	--cell-pad: clamp(16px, 2vw, 32px);
	margin-block-start: clamp(40px, 7vh, 80px);
	border-block-start: 1px solid var(--line-on-dark);
}

.wsme-v2 .wsme-proj__table {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 0 calc(-1 * var(--cell-pad));
	background: var(--line-on-dark);
	border-block-end: 1px solid var(--line-on-dark);
}

.wsme-v2 .wsme-proj__cell {
	min-inline-size: 0;
	padding: clamp(20px, 3vh, 28px) var(--cell-pad);
	background: var(--c-carbon);
}

.wsme-v2 .wsme-proj__cell.wsme-d2 {
	grid-column: span 2;
}

.wsme-v2 .wsme-proj__cell.wsme-d3 {
	grid-column: span 3;
}

.wsme-v2 .wsme-proj__cell.wsme-d4 {
	grid-column: span 4;
}

.wsme-v2 .wsme-proj__cell dt {
	color: var(--t-soft-on-dark);
}

.wsme-v2 .wsme-proj__cell dd {
	margin: 10px 0 0;
	line-height: var(--lh-title);
	color: var(--t-on-dark);
	/* Long uppercase values ("Architecture, Art Direction, Interior Design",
	   "Photography — Courtesy of …") wrap inside their cell, never cut. */
	overflow-wrap: break-word;
	text-wrap: balance;
}

.wsme-v2 .wsme-proj__cell--r1 dd {
	font-size: var(--fs-fact);
}

/* Row 2 in the same Oswald, about half the size; the same space under the label. */
.wsme-v2 .wsme-proj__cell--r2 dd {
	font-size: var(--fs-fact-sm);
	line-height: 1.12;
}

/* "m²" keeps its small m. */
.wsme-v2 .wsme-proj__unit {
	text-transform: none;
}

@media (max-width: 900px) {
	.wsme-v2 .wsme-proj__intro {
		grid-template-columns: minmax(0, 1fr);
	}
	.wsme-v2 .wsme-pmap {
		block-size: 35svh;
		margin-block-start: clamp(28px, 5vh, 48px);
	}
}

/* Phone: the table in two columns, in the same order. */
@media (max-width: 760px) {
	.wsme-v2 .wsme-proj__table {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.wsme-v2 .wsme-proj__cell.wsme-d2,
	.wsme-v2 .wsme-proj__cell.wsme-d3,
	.wsme-v2 .wsme-proj__cell.wsme-d4 {
		grid-column: auto;
	}
	.wsme-v2 .wsme-proj__cell.wsme-m2 {
		grid-column: span 2;
	}
}

/* ---------- images: always whole, in their own proportions ---------- */

/* Every row is a flex line; every figure grows in proportion to its width /
   height ratio (--ar, exact, from wsme_v2_project_ratio_css()), so two images
   side by side get the same height with nothing cropped. No image is taller
   than 85% of the screen: the width cap (85% of the screen height × ratio)
   shrinks a row as a whole, keeping its proportions, and centres it.
   A landscape image is a row of its own; portrait and square ones go two by
   two; one left alone is centred, about half the page wide. */
.wsme-v2 .wsme-proj__images {
	--gap: clamp(12px, 1.4vw, 20px);
	--img-max: 85vh;
	display: grid;
	gap: var(--gap);
	margin-block-start: clamp(40px, 7vh, 80px);
}

@supports (height: 1svh) {
	.wsme-v2 .wsme-proj__images {
		--img-max: 85svh;
	}
}

.wsme-v2 .wsme-proj__row {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: var(--gap);
}

.wsme-v2 .wsme-proj__fig {
	flex: var(--ar, 1.5) 1 0;
	min-inline-size: 0;
	max-inline-size: calc(var(--img-max) * var(--ar, 1.5));
	margin: 0;
	overflow: hidden;
	border-radius: var(--r);
	background: var(--c-graphite);
}

.wsme-v2 .wsme-proj__row--single .wsme-proj__fig {
	flex: 0 1 calc(50% - var(--gap) / 2);
}

.wsme-v2 .wsme-proj__fig picture,
.wsme-v2 .wsme-proj__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

@media (max-width: 760px) {
	.wsme-v2 .wsme-proj__row--single .wsme-proj__fig {
		flex-basis: 70%;
	}
}

/* ---------- end ---------- */

.wsme-v2 .wsme-proj__end {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 14px;
	margin-block-start: clamp(48px, 8vh, 96px);
	padding-block-start: clamp(28px, 4vh, 40px);
	border-block-start: 1px solid var(--line-on-dark);
}

@media (max-width: 760px) {
	.wsme-v2 .wsme-proj__row--pair {
		grid-template-columns: 1fr;
	}
	.wsme-v2 .wsme-proj__row--pair .wsme-proj__fig,
	.wsme-v2 .wsme-proj__row--pair.is-portrait .wsme-proj__fig {
		aspect-ratio: auto;
	}
	.wsme-v2 .wsme-proj__row--pair picture,
	.wsme-v2 .wsme-proj__row--pair .wsme-proj__img {
		block-size: auto;
	}
}