:root{
	--section-padding: 100px;
	--bg01: #ececdb;
	--bg02: #539ddf;
}
#pageLayout {
	max-width: 100%;
}
main#main-root {
	padding: 0;
}
#header-root{
	position: fixed;
}
section.section{
	padding-block: var(--section-padding);
	padding-left: clamp(15px, -47.027px + 7.658vw, 100px);
	height: 100vh;
	width: 100%;

	&.section01{background: var(--bg01);}
	&.section02{background: var(--bg02);}
	&.section03{background: var(--bg01);}
	&.section04{background: var(--bg02);}
	&.section05{background: var(--bg01);}
	&.section06{background: var(--bg02);}
	&.section07{background: var(--bg01);}

	.inner{
		display:grid;
		grid-template-columns: repeat( 4, 1fr );
		gap: 25px;
		max-width: 1600px;
		margin-inline: 10vw;
		.column{
			display: grid;
			gap: 25px;
			height: calc(100vh - (var(--section-padding) * 2));
			&.split30-70{
				grid-template-rows: minmax(0,30%) minmax(0,1fr);
			}
			&.split40-60{
				grid-template-rows: minmax(0,40%) minmax(0,1fr);
			}
			&.split50-50{
				grid-template-rows: minmax(0,50%) minmax(0,1fr);
			}
			&.split60-40{
				grid-template-rows: minmax(0,60%) minmax(0,1fr);
			}
			&.split70-30{
				grid-template-rows: minmax(0,70%) minmax(0,1fr);
			}
			.item{
				overflow: clip;
				border-radius: 16px;
				transition: all 0.4s ease;
				position: relative;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
				&:hover{
					transform: translateY(-5px);
					box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
				}
				figure{
					margin: 0;
					width:100%;
					height:100%;
				}
				> figure.post__image{
					position: relative;
					img{
						width:100%;
						height:100%;
						object-fit: cover;
						object-position: top;
						cursor: pointer;
						transition: all 0.4s ease;
						filter: brightness(100%);
						&:hover{
							filter: brightness(80%);
						}
					}
					figcaption{
						position: absolute;
						inset: 0;
						margin: auto;
						width: fit-content;
						background-color: rgba(0, 0, 0, 0.85);
						color: white;
						text-align: center;
						padding: 12px;
						border-radius: 16px;
						height: fit-content;
						max-width: 150px;
						font-variation-settings: "wght" 500;
						opacity: 0;
						transition: all 1s ease;
						pointer-events: none;
					}
					&:hover figcaption{
						opacity: 1;
					}
				}
				&:has(p){
					padding: 30px;
					background-color: rgba(0, 0, 0, 0.85);
					color: white;
				}
			}
		}
		.item.blurb{
			background-color: #333;
			display: grid;
			place-content: center;
			padding: 20px;
			h2{
				color: white;
				font-weight: 200;
				margin-top: 0;
				margin-bottom: 0;
				text-transform: uppercase;
				text-align: center;
				font-size: 24px;
				transition: all 0.4s ease;
			}
			&:hover{
				transform: none;
				box-shadow: none;
				cursor: default;
				h2{
					font-weight: 800;
					letter-spacing: -1px;
				}
			}
		}
	}
}


/*:: Custom Lightbox
**************************************************/
	@keyframes fadeInUp {
		0% {
			opacity: 0;
			transform: translateY(20px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
	@keyframes prompt{
		0%{
			opacity: 0;
			top: 20%;
		}
		50%{
			opacity: 1;
		}
		100%{
			opacity: 0;
			top:80%
		}
	}
	.underlay {
		display: none;
	}
	#drawer{
		position: fixed;
		z-index: 100;
		left: 100%;
		right: -15px;
		top: 20px;
		bottom: 20px;
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
		transition: all 0.5s ease 0.2s;
		background-color: #333;
		.inner{
			height: 100%;
			overflow-y:scroll;
			padding-left: 40px;
			img{
				opacity: 0;
				animation: fadeInUp 0.3s ease-in-out both reverse;
			}
		}
		.closeDrawer{
			position: absolute;
			z-index: 102;
			cursor: pointer;
			top: 0;
			left: 0px;
			padding-top: 30px;
			color: white;
			background: #333;
			width: 40px;
			height: 100%;
			display: grid;
			place-content: center end;
			border-right: 1px solid #444;
			writing-mode: sideways-lr;
			font-size: 12px;
			font-weight: bold;
			&:hover{
				background-color: #444;
			}
		}
	}
	body.drawerActive{
		/* position: fixed; */
		overflow: hidden;
		.underlay{
			display: block;
			position: fixed;
			z-index: 99;
			inset: 0;
			background-color: rgba(0, 0, 0, 0.75);
		}
		#drawer{
			left: 25%;
			img{
				animation: fadeInUp 0.3s ease-in-out 0.8s both;
			}
			.prompt{
				position:absolute;
				z-index: 103;
				left:0;
				right:0;
				margin-left:auto;
				margin-right:auto;
				top: 0;
				background: #333;
				padding: 15px;
				color: white;
				width: 100px;
				height: 100px;
				display: grid;
				place-content: center;
				text-align: center;
				border-radius: 50%;
				animation: prompt 3s ease-in-out 1.2s both;
			}
		}
	}

	/* @1024px */
	@media only screen and (max-width: 1024px){
		section.section	.inner{
			grid-template-columns: repeat( 2, 1fr );
			height: auto;
		}
	}
	/* @810px */
	@media only screen and (max-width: 810px){
		section.section{
			height: auto;
			.inner{
				grid-template-columns: 1fr;
			}
			.column:has(.item.blurb){
				order:-1;
				grid-template-rows: auto minmax(0,1fr)
			}
			.item.blurb{
				order: -1;
				background-color: var(--brand02) !important;
				h2{
					color: var(--brand04) !important;
				}
			}
		}
	}