/*
Design pages: Workplace design and Financial institution branch design. Each opens with the intro (intro.css) and a
table of contents (to the intro's right on wide screens), then sections under alternating dividers: a featured card, the design process
(process.css), pricing panels, state tiles and an award schedule.
*/
.architecture {
	> section {
		margin-bottom: 4rem;
	}

	.divider {
		margin-bottom: 2rem;
	}
}

/* A section's opening sentence and its closing "Let's talk" line, on Porcelain highlights. */
.arch-lead {
	margin: 0 0 2rem;
	font-size: 1.35rem;
	line-height: 1.8;
}

.arch-cta {
	margin: 2rem 0 0;
	font-size: 1.25rem;
	line-height: 1.8;

	/* "Let's talk:", the email and the number each wrap as one piece. */
	strong,
	a {
		white-space: nowrap;
	}
}

/* A full sentence in bold, not a "Let's talk:" label, so it wraps like the rest of the line on phones. */
.arch-cta--sentence strong {
	white-space: normal;
}

/* The closing invitation under the service area: larger, so it reads as the page's last word. */
.arch-cta--large {
	max-width: none;
	margin-top: 3rem;
	font-size: clamp(1.4rem, 4vw, 2rem);
	line-height: 1.7;
}

/* Contents: a traditional table of contents, one line per section with a dotted leader to its number. */
.contents {
	max-width: 38.5rem;
	margin: 0 0 4rem calc(1.25rem + 0.3rem); /* Lines up with the intro's text, past its orange rule. */
	padding: 1.25rem 1.5rem 1.4rem;
	border-top: 3px solid var(--color-spicy-black);
	border-bottom: 1px solid var(--color-spicy-black);
	background-color: var(--color-porcelain);

	ol {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	li {
		max-width: none;
	}
}

/* Opening: on wide screens the contents sit to the right of the intro, tops aligned, instead of beneath it. */
@media (min-width: 1280px) { /* Below this the contents column (beside the FI page's wider intro) gets too narrow and its lines wrap. */
	.arch-opening {
		display: flex;
		align-items: flex-start;
		gap: 3rem;
		margin-bottom: 4rem;

		.intro {
			flex: 0 1 39.75rem;
			margin-bottom: 0;
		}

		.intro--wide {
			flex-basis: 41rem;
		}

		/* The contents' top rule lines up with the top of the intro's first paragraph: the intro's top padding, one
		line of its title (2.6rem at these widths, line-height 1.2) and the title's 0.4em bottom margin. */
		.contents {
			flex: 1 1 22rem;
			margin: calc(1.25rem + 2.6rem * (1.2 + 0.4)) 0 0;
		}
	}
}

.contents__title {
	margin: 0 0 0.75rem;
	font-family: "Oswald", "Oswald Fallback", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.contents__link {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.35rem 0;
	box-sizing: border-box;
	font-size: 1.25rem;
	text-decoration: none;
}

/* The dotted leader between a section's name and its number. */
.contents__leader {
	flex-grow: 1;
	border-bottom: 2px dotted var(--color-spicy-black);
	transform: translateY(-0.3rem);
}

.contents__number {
	font-family: "Oswald", "Oswald Fallback", sans-serif;
	letter-spacing: 0.1em;
	color: var(--color-spicy-orange);
}

/* A featured product: its logo beside what it does, on its colour block with a hard shadow, like the Products cards. */
.feature {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem 2.5rem;
	margin-right: 8px; /* Room for the shadow. */
	padding: 2.25rem;
	border: 3px solid var(--color-spicy-black);
	box-shadow: 8px 8px 0 var(--color-spicy-black);
	background-color: var(--color-blueprint);
	background-image: url("/assets/images/noise.svg");
	background-repeat: repeat;
	color: var(--color-porcelain);

	> img {
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
		height: 7.5rem;
	}
}

.feature__body {
	display: flex;
	flex: 999 1 24rem;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

.feature__text {
	max-width: none;
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.6;
}

.feature__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 1.25rem;
	border-top: 1.5px solid var(--color-porcelain);
}

.feature__tag {
	padding: 0.25rem 0.6rem;
	border: 1.5px solid var(--color-porcelain);
	font-family: "Oswald", "Oswald Fallback", sans-serif;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.feature__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0.55rem 1rem;
	border: 2px solid var(--color-spicy-black);
	background-color: var(--color-spicy-black);
	color: var(--color-porcelain);
	font-family: "Oswald", "Oswald Fallback", sans-serif;
	font-size: 1.1rem;
	text-decoration: none;

	&:hover {
		background-color: var(--color-porcelain);
		color: var(--color-spicy-black);
	}

	&:focus-visible {
		outline: 3px solid var(--color-jasmine);
		outline-offset: 3px;
	}

	svg {
		width: 1.1rem;
		height: 1.1rem;
	}
}

/*
Pricing: each offer is a framed block, a grained colour panel with its label and big figure beside (or above,
on narrow screens) the explanation on Porcelain.
*/
.price {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	border: 3px solid var(--color-spicy-black);
	background-color: var(--color-spicy-black);

	& + .price {
		margin-top: 2rem;
	}
}

.price__panel {
	display: flex;
	flex: 1 1 16rem;
	flex-direction: column;
	justify-content: center;
	gap: 0.4rem;
	padding: 2rem;
	background-color: var(--color-spicy-black);
	background-image: url("/assets/images/noise.svg");
	background-repeat: repeat;
	color: var(--color-porcelain);
}

.price__panel--orange {
	background-color: var(--color-spicy-orange--darker);
}

.price__panel--green {
	background-color: var(--color-pine-teal);
}

.price__label {
	font-family: "Oswald", "Oswald Fallback", sans-serif;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.price__figure {
	font-family: "Oswald", "Oswald Fallback", sans-serif;
	font-size: clamp(3.25rem, 8vw, 5rem);
	font-weight: 700;
	line-height: 0.95;
}

.price__unit {
	font-family: "Oswald", "Oswald Fallback", sans-serif;
	font-size: 1.5rem;
}

.price__figure .price__unit {
	font-size: 1.8rem;
	font-weight: 500;
}

.price__body {
	display: flex;
	flex: 2 1 26rem;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	min-width: 0; /* Shrink below its longest line, so it never pushes past a 320px screen. */
	padding: clamp(1.25rem, 6vw, 2rem);
	background-color: var(--color-porcelain);

	p {
		max-width: none;
		margin: 0;
		font-size: 1.25rem;
		line-height: 1.6;
	}

	.intro__contact {
		margin: 0.25rem 0 0;
		font-size: 1.25rem;
	}
}

/* A body that spans the whole block, under two panels side by side. */
.price__body--wide {
	flex-basis: 100%;
}

/* A worked example of a price, set off like the articles' blockquotes: an orange rule down its left side. */
.price__example {
	margin: 0;
	padding-left: 1rem;
	border-left: 0.5rem solid var(--color-spicy-orange);

	/* The note's size, a step down from the panel's paragraphs. */
	p {
		font-size: 1rem;
	}
}

.price__note {
	font-size: 1rem !important;
}

.price__list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.15rem;

	li {
		display: flex;
		align-items: baseline;
		gap: 0.7rem;
		max-width: none;

		&::before {
			content: "✓";
			font-family: "Oswald", "Oswald Fallback", sans-serif;
			color: var(--color-spicy-orange--darker);
		}
	}
}

/*
Where we offer services: each state's own outline (assets/images/state-outlines/, see .claude/skills/state-outlines),
fitted into the same square, with its code, name and status beneath. Licensed states are Porcelain with a solid
black outline and a dark offset shadow; states on the way are a dashed outline.
*/
.states {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 7.5rem)); /* Equal columns, so a state alone on the last row stays the same size as the rest. */
	gap: 1.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.state {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	max-width: none;
	margin: 0;
}

.state__shape {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	margin-bottom: 0.4rem;
	overflow: visible; /* The shadow and stroke may run past the square. */
	fill: var(--color-porcelain);
	stroke: var(--color-spicy-black);
	stroke-width: 2.5px;
	stroke-linejoin: round;
	filter: drop-shadow(6px 6px 0 color-mix(in oklch, var(--color-spicy-black) 30%, transparent));
}

.state--soon .state__shape {
	stroke-dasharray: 7 5;
	filter: none;
}

/* The code and name on a Porcelain strip, so the shape field doesn't run through them. */
.state__label {
	padding: 0.1rem 0.4rem;
	background-color: var(--color-porcelain);
}

.state__code {
	font-family: "Oswald", "Oswald Fallback", sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.state__name {
	font-size: 0.95rem;
}

.state__tag {
	padding: 0.2rem 0.5rem;
	background-color: var(--color-spicy-black);
	color: var(--color-porcelain);
	font-family: "Oswald", "Oswald Fallback", sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.state--soon .state__tag {
	border: 1px dashed var(--color-spicy-black);
	background-color: var(--color-porcelain);
	color: var(--color-spicy-black);
}

/* Awards: a schedule of year, project and award, between a heavy rule at the top and bottom. */
.award-schedule {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 3px solid var(--color-spicy-black);
	border-bottom: 3px solid var(--color-spicy-black);
	background-color: var(--color-porcelain);
}

.award-schedule__row {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: baseline;
	gap: 1.5rem;
	max-width: none;
	margin: 0;
	padding: 1.1rem 1.5rem;

	& + .award-schedule__row {
		border-top: 1px solid var(--color-spicy-black);
	}
}

.award-schedule__year {
	font-family: "Oswald", "Oswald Fallback", sans-serif;
	font-size: 1.6rem;
	color: var(--color-spicy-orange);
}

.award-schedule__project {
	font-family: "Oswald", "Oswald Fallback", sans-serif;
	font-size: 1.4rem;
}

.award-schedule__award {
	font-size: 1.05rem;
	line-height: 1.5;
}

/* Narrow screens: the award rows stack, year above project above award. */
@media (max-width: 700px) {
	.award-schedule__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.35rem;
	}
}