:root {
	--color-accent: hsl(174 58 42);
	--color-bg: hsl(218 22 20);
	--color-border: hsl(222 6 40);
	--color-surface: hsl(222 6 22);
	--color-text: hsl(222 15 92);
	--radius: .5rem;
	--space-m: 1rem;
	--space-s: .5rem;
	--space-l: 2rem;
	color-scheme: dark;
}

* {
	box-sizing: border-box;
}

body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: "Figtree", system-ui, sans-serif;
	margin: 0;
}

html {
	scrollbar-gutter: stable;
}

.fslightbox-container {
	background-image: linear-gradient(hsl(218 22 26 / .9), hsl(218 22 8) 100%) !important;
}

.fslightbox-thumbs {
	background-image: linear-gradient(transparent, hsl(218 22 10)) !important;
}

.fslightboxb {
	background: hsl(218 22 30 / .65) !important;
}

.home {
	margin-inline: auto;
	max-width: 70rem;
	padding: var(--space-l) var(--space-m);
}

.home-documents {
	text-align: center;

	h2 {
		margin: 0 0 var(--space-m);
	}

	.badge {
		background: var(--color-surface);
		border: 1px dashed var(--color-border);
		border-radius: var(--radius);
		color: var(--color-text);
		display: inline-block;
		font-weight: 600;
		opacity: .7;
		padding: var(--space-s) var(--space-l);
	}
}

.home-galleries {
	margin-bottom: var(--space-l);

	h2 {
		margin: 0 0 var(--space-m);
		text-align: center;
	}

	.card {
		border-radius: var(--radius);
		display: block;
		overflow: hidden;
		position: relative;

		&:hover img,
		&:focus-visible img {
			scale: 1.05;
		}

		img {
			aspect-ratio: 4 / 3;
			display: block;
			height: 100%;
			object-fit: cover;
			transition: scale .4s;
			width: 100%;
		}

		.label {
			background: linear-gradient(transparent, hsl(0 0 0 / .7));
			bottom: 0;
			color: white;
			font-weight: 600;
			left: 0;
			padding: var(--space-l) var(--space-s) var(--space-s);
			position: absolute;
			right: 0;
		}
	}

	.cards {
		display: grid;
		gap: var(--space-m);
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	}
}

.home-hero {
	margin-bottom: var(--space-l);
	text-align: center;

	h1 {
		margin: 0 0 var(--space-s);
	}

	p {
		color: var(--color-text);
		margin: 0;
		opacity: .7;
	}
}

.sub-gallery {
	--thumb-ratio: 3 / 2;
	margin-inline: auto;
	max-width: 80rem;
	padding: var(--space-l) var(--space-m);

	h1 {
		margin: 0 0 var(--space-m);
		text-align: center;
	}

	&:has(#tabFirstFloor:checked) {
		.sub-gallery-first-floor {
			display: grid;
		}

		label[for="tabFirstFloor"] {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: white;
		}
	}

	&:has(#tabLivingRoom:checked) {
		.sub-gallery-living-room {
			display: grid;
		}

		label[for="tabLivingRoom"] {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: white;
		}
	}

	&:has(#tabKitchen:checked) {
		.sub-gallery-kitchen {
			display: grid;
		}

		label[for="tabKitchen"] {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: white;
		}
	}

	&:has(#tabPrimaryBedroom:checked) {
		.sub-gallery-primary-bedroom {
			display: grid;
		}

		label[for="tabPrimaryBedroom"] {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: white;
		}
	}

	&:has(#tabSecondFloor:checked) {
		.sub-gallery-second-floor {
			display: grid;
		}

		label[for="tabSecondFloor"] {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: white;
		}
	}

	&:has(#tabBasementGarage:checked) {
		.sub-gallery-basement-garage {
			display: grid;
		}

		label[for="tabBasementGarage"] {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: white;
		}
	}

	&:has(#tabExterior:checked) {
		.sub-gallery-exterior {
			display: grid;
		}

		label[for="tabExterior"] {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: white;
		}
	}

	&:has(#tabAppliances:checked) {
		.sub-gallery-appliances {
			display: grid;
		}

		label[for="tabAppliances"] {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: white;
		}
	}

	&:has(#tabCabinets:checked) {
		.sub-gallery-cabinets {
			display: grid;
		}

		label[for="tabCabinets"] {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: white;
		}
	}

	&:has(#tabClosets:checked) {
		.sub-gallery-closets {
			display: grid;
		}

		label[for="tabClosets"] {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: white;
		}
	}

	&:has(#tabFlooring:checked) {
		.sub-gallery-flooring {
			display: grid;
		}

		label[for="tabFlooring"] {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: white;
		}
	}

	&:has(#tabFurniture:checked) {
		.sub-gallery-furniture {
			display: grid;
		}

		label[for="tabFurniture"] {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: white;
		}
	}

	&:has(#tabElectronics:checked) {
		.sub-gallery-electronics {
			display: grid;
		}

		label[for="tabElectronics"] {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: white;
		}
	}

	&:has(#tabMisc:checked) {
		.sub-gallery-misc {
			display: grid;
		}

		label[for="tabMisc"] {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: white;
		}
	}

	&:has(.tab-input:focus-visible) .sub-gallery-tabs {
		outline: 2px solid var(--color-accent);
		outline-offset: .25rem;
	}

	.tab-input {
		opacity: 0;
		position: absolute;
		pointer-events: none;
	}

	&.sub-gallery-lot-plan {
		--thumb-ratio: 4 / 3;
	}

	.sub-gallery-panel {
		display: none;
		gap: var(--space-s);
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));

		.empty {
			color: var(--color-text);
			grid-column: 1 / -1;
			margin: var(--space-l) 0;
			opacity: .6;
			text-align: center;
		}

		a {
			aspect-ratio: var(--thumb-ratio);
			background: var(--color-surface);
			border-radius: var(--radius);
			display: block;
			overflow: hidden;
			position: relative;

			&::after {
				background: linear-gradient(transparent, hsl(0 0 0 / .7));
				bottom: 0;
				color: white;
				content: attr(data-caption);
				font-size: .875rem;
				left: 0;
				opacity: 0;
				padding: var(--space-l) var(--space-s) var(--space-s);
				position: absolute;
				right: 0;
				transition: opacity .3s;
			}

			&:hover::after,
			&:focus-visible::after {
				opacity: 1;
			}

			&:hover img,
			&:focus-visible img {
				scale: 1.05;
			}

			img {
				display: block;
				height: 100%;
				object-fit: cover;
				transition: scale .4s;
				width: 100%;
			}
		}
	}

	.sub-gallery-flat {
		display: grid;
	}

	.sub-gallery-switcher {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-s) var(--space-l);
		justify-content: center;
		margin-bottom: var(--space-l);

		a {
			border-bottom: 2px solid transparent;
			color: var(--color-text);
			font-weight: 600;
			padding-block: .25rem;
			text-decoration: none;

			&:hover {
				border-color: var(--color-border);
			}

			&[aria-current="page"] {
				border-color: var(--color-accent);
				color: var(--color-accent);
			}
		}
	}

	.sub-gallery-tabs {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-s);
		justify-content: center;
		margin-bottom: var(--space-l);

		label {
			border: 1px solid var(--color-border);
			border-radius: 100vmax;
			cursor: pointer;
			padding: var(--space-s) var(--space-m);
			transition: background .2s, color .2s;

			&:hover {
				border-color: var(--color-accent);
			}

			.count {
				font-size: .75rem;
				opacity: .7;

				&:empty {
					display: none;
				}
			}
		}
	}
}