#projects {
	margin-top: calc(6 * var(--spacing));
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: calc(4 * var(--spacing));
}

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

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

		h2 { font-size: var(--text-lg) }

		.details {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: calc(1 * var(--spacing));
			font-size: var(--text-sm);
		}
	}
}

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

.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(--bg-color-xdark);
	}
}

.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: calc(4 * var(--spacing));

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

	> *: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: calc(2 * var(--spacing));
}

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

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

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

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

		@media (width < 40rem) {
			background-color: var(--bg-color-light);
		}
	}
}

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

	> * {
		flex: 1;
	}

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

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

		.field {
			background-color: initial;
			padding: 0;
			border: 0;
			border-radius: 0;
		}

		.attachment {
			background-color: var(--bg-color-dark);
		}
	}
}

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

	> * {
		flex: 1;
	}

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

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

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

#project-photos-gallery h4 {
	font-size: var(--text-lg);
	font-weight: 500;
	margin: calc(4 * var(--spacing)) 0;
	padding: calc(2 * var(--spacing)) 0;
	border-bottom: 1px solid var(--color-neutral-200);
	&:first-of-type { margin-top: 0 }
}

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

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

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

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

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

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

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

	.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: calc(4 * var(--spacing));

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

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

		.reservation-notes {
			display: flex;
			flex-direction: column;
			gap: calc(2 * var(--spacing));
		}
	}
}

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

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

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

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

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

.room-form {
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--rounded-lg);
	padding: calc(3 * var(--spacing));
}

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

/* project tasks ----------------------------------------------------------- */

#project-tasks {
	max-width: 50%;

	@media (width < 40rem) {
		max-width: initial;
	}
}

.task-list {
	display: flex;
	flex-direction: column;
	gap: calc(4 * var(--spacing));
	margin-top: calc(4 * var(--spacing));
}

.task-lineitem {
	position: relative;

	.icon {
		position: absolute;
		top: calc(3 * var(--spacing));
		width: calc(5 * var(--spacing));
		height: calc(5 * var(--spacing));

		&:nth-of-type(1) {
			left: calc(3 * var(--spacing));
		}

		&:nth-of-type(2) {
			right: calc(3 * var(--spacing));
		}
	}

	.body {
		margin-left: calc(8 * var(--spacing));
		display: flex;
		flex-direction: column;
		gap: calc(2 * var(--spacing));
	}
}