#project-nav {
	display: block;
	@media (width < 40rem) { display: none }

	margin-bottom: var(--spacing-6);

	.breadcrumbs {
		display: flex;
		align-items: center;
		gap: calc(1.5 * var(--spacing));

		a { text-decoration: underline }
	}

	.breadcrumb-separator {
		width: var(--spacing-4);
		height: var(--spacing-4);
	}

	header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: var(--spacing-6);

		h1 { font-size: var(--text-xl) }
	}
}

.project-filters-container,
.project-filters-container form {
	display: flex;
	gap: var(--spacing-3);

	> *:first-child {
		flex-grow: 1;
	}
}

#projects {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: var(--spacing-4);

	@media (width < 40rem) {
		grid-template-columns: 1fr 1fr;
		margin-top: var(--spacing-3);
	}
}

.project-lineitem {
	header {
		height: calc(36 * var(--spacing));

		.image {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}
	}

	.body {
		padding: var(--spacing-4);

		h2 { font-size: var(--text-lg) }
		p {
			font-size: var(--text-sm);
			@media (width < 40rem) { color: var(--text-color-secondary) }
		}

		.details {
			display: flex;
			flex-direction: column;
			gap: var(--spacing-3);
		}
	}
}

/* show --------------------------------------------------------------------- */

#project-details .body {
	padding: var(--spacing-3);
}

.empty-copy {
	max-width: 30%;
	text-align: center;
	font-size: var(--text-lg);
	margin: calc(30 * var(--spacing)) auto;

	a {
		text-decoration: underline;
		color: var(--text-color-secondary);
	}
}

.project-details {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: calc(8 * var(--spacing));
	padding-top: var(--spacing-4);

	> * {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-2);
	}

	> *:nth-child(1) { grid-column: span 6 / span 6 }
	> *:nth-child(2) { grid-column: span 3 / span 3 }
	> *:nth-child(3) { grid-column: span 3 / span 3 }
}

.project-card {
	min-height: calc(60 * var(--spacing));
}

.project-moving-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
	margin-bottom: var(--spacing-2);
}

.project-availability {
	text-align: center;
	margin-bottom: var(--spacing-2);

	p {
		font-size: var(--text-lg);
		font-weight: 600;
	}
}

.message-preview {
	background-color: var(--color-neutral-100);
	border-radius: var(--rounded-lg);
	padding: var(--spacing-2);
}

.property-details-form {
	.quick-select {
		padding: 0 var(--spacing);
		text-decoration: underline;

		&:first-of-type {
			margin-left: var(--spacing-2);
		}
	}
}

.floorplan {
	details {
		border-radius: var(--rounded-lg);
		border: 1px solid var(--bg-color-dark);
	}
}

.floorplan-room {
	display: flex;
	gap: var(--spacing-6);
	margin-top: var(--spacing-2);

	> * {
		flex: 1;
	}

	.room-detail {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: var(--bg-color-light);
		padding: var(--spacing-2);
		border: 1px solid var(--bg-color);
		border-radius: var(--rounded);
	}
}

.risk-assessment {
	display: flex;
	gap: var(--spacing-6);

	> * {
		flex: 1;
	}

	@media (width < 40rem) {
		flex-direction: column;
	}
}

.risk-assessment-photo {
	width: 100%;
	max-height: calc(32 * var(--spacing));
	object-fit: cover;
}

/* project photos ---------------------------------------------------------- */

.gallery {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--spacing);

	@media (width < 40rem) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.project-photo {
	display: inline-block;
	aspect-ratio: 1;
}

/* project reservations ---------------------------------------------------- */

#project-reservations {
	@media (width < 40rem) {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-2);
		padding: var(--spacing-3);
	}
}

#project-reservations-load-progress {
	margin-bottom: var(--spacing-4);

	> .inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: var(--spacing-2);
		font-size: var(--text-xs);
		font-weight: 600;
		text-transform: uppercase;
	}
}

.reservation-category {
	header {
		display: flex;
		align-items: center;
		gap: var(--spacing-2);
		padding: var(--spacing-4);
		background-color: var(--bg-color-light);

		svg {
			width: var(--spacing-4);
			height: var(--spacing-4);
		}
	}
}

.reservation {
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
	padding: var(--spacing-4);
	border-bottom: 1px solid var(--color-neutral-200);
	position: relative;

	.image {
		width: calc(16 * var(--spacing));
		height: calc(16 * var(--spacing));
	}

	.reservation-details {
		flex-grow: 1;

		.reservation-inner {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: var(--spacing-4);

			h3 {
				font-size: var(--text-sm);
			}

			.reservation-status {
				display: flex;
				align-items: center;
				gap: var(--spacing-2);
				font-size: var(--text-sm);
			}
		}
	}
}

.reservation-mobile {
	background: var(--bg-color);
	border-radius: var(--radius);
	padding: var(--spacing-3);
	display: flex;
	/* align-items: center; */
	gap: var(--spacing-3);

	.image {
		width: calc(12 * var(--spacing));
		height: calc(12 * var(--spacing));
	}

	h3 {
		font-size: var(--text-sm);
		font-weight: 600;
		margin-bottom: calc(0.5 * var(--spacing));
	}

	p {
		font-size: var(--text-xs);
		color: var(--text-color-secondary);
		display: flex;
		align-items: center;
		gap: calc(1.5 * var(--spacing));
	}
}

.reservation-radio-group {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--spacing-3);
	max-height: calc(128 * var(--spacing));
	overflow-y: scroll;

	@media (width < 40rem) {
		grid-template-columns: 1fr;
		max-height: 50vh;
	}
}

.reservation-radio {
	display: flex;
	align-items: center;
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--rounded-lg);
	padding: var(--spacing-3);

	.image {
		width: calc(16 * var(--spacing));
		height: calc(16 * var(--spacing));
		margin-right: var(--spacing-4);
	}
}

/* project rooms ----------------------------------------------------------- */

.project-rooms-combo {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);

	> *:first-child {
		flex-grow: 1;
	}
}

#project-rooms {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
	margin-top: var(--spacing-4);

	.photos {
		display: flex;
		gap: var(--spacing-2);
		overflow-x: scroll;
		overflow-y: hidden;
		height: calc(20 * var(--spacing));

		& > * {
			flex: 0 0 30%;
		}
	}

	.room-details {
		> div {
			display: flex;
			align-items: center;
			justify-content: space-between;

			dt {
				text-transform: initial;
			}
		}
	}
}

.room {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-height: calc(15.5 * var(--spacing));
	font-weight: 600;

	.room-dimensions {
		display: block;
		font-weight: normal;
	}
}