.page-wrapper {
    display:flex;
    position: relative;
	justify-content: center;
    flex-direction: column;
}

.content {
	display: flex;
	/* width: 100vh; */
	width: var(--content-width);
	flex-direction: column;
	align-self: center;
	/* justify-content: center; */
}

.stripe {
	height: 3vh;
	width: 100%;
	background:
		linear-gradient( to bottom, var(--dark) 0%, var(--dark) 27.4%, var(--bg) 27.4%, var(--bg) 36.2%, var(--med) 36.2%, var(--med) 63.7%, var(--bg) 63.7%, var(--bg) 72.5%, var(--light) 72.5%, var(--light) 100% );
	transform-box: fill-box;
	transform-origin: center;
	transform: scaleX(0);
	animation: drawStripe 2s ease-in forwards;
}

@keyframes drawStripe {
	to {
		transform: scaleX(10);
	}
}

/*
=====================
LIGHTBOX LOGIC

Images can be clicked on and will expand to the center of the screen from their position using code from main.js
=====================
*/

.hover-container {
    position: relative;
    cursor: pointer;
    display: contents;
}

	.hover-container img {
		display: block;
		pointer-events: auto;
	}

	.hover-container:has(img[style*="z-index"]) {
		z-index: 9999;
		position: relative;
	}

#img-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9998;
    align-items: center;
    justify-content: center;
    cursor: pointer;
	background-color: rgba(0,0,0,0);
    transition: background-color 0.25s ease;
    pointer-events: none;
}

#img-overlay.active {
    background-color: var(--lightbox);
	opacity: 100%;
    pointer-events: auto;
}

#img-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: var(--drop-shadow);
    pointer-events: none;
    transition: transform 0.25s ease;
	backface-visibility: hidden;
}

#img-overlay.active img {
    transform: none;
}


/* img {
	transition: var(--image-scale-anim);
}

	img:hover {
		transform: scale(1.1);
	} */

/*
=====================
CONTENT: SECTIONS
=====================
Remember: sections have 2% margin on top and bottom, so don't add margins on the top or bottom titles/paragraphs
*/

section {
	margin: 1.5vmax 0;
}

.showcase-grid {
	display: grid;
	margin: 1vmax 0;
    border: clamp(.25rem, .5vmax, .95rem) var(--dark) solid;
    border-radius: min(2.5rem,1.75vmax);
    padding: .75vmax;
}

	.showcase-grid img, video {
		width: 100%;
		height: auto;
		object-fit: cover;
		border-radius: .35rem;
		/* transition: var(--image-scale-anim); */
	}

.descriptor {
	text-align:right;
}

/* Full-width segment wrapper */
.full-width {
	width: 100vw; /* Make it as wide as the screen */
	position: relative;
	left: 50%;
	right: 50%;
	margin: 2vh -50vw;
}

	.full-width p {
		display:grid;
		text-align: center;
		justify-self: center;
		align-self:center;
		color:white;
		text-transform:uppercase;
		font-weight: 600;
		font-size:clamp(1rem, 1.25vmax, 4rem);
		padding:1vh;
	}

	/* Content within full-width segment */
	.full-width-grid {
		display: grid;

		/* The CONTENT in the full-width segment should still follow the rest of the page */
		width: var(--content-width);

		margin: 0 auto;
	}

/*
=====================
METADATA: PARENT GRID

Was 2 rows and 2 columns, but that made it difficult to actually scale elements on mobile. This divided top row and bottom row allows the job date to be independent of the programs grid width and makes life not miserable.
=====================
*/

.metadata {
	display:grid;
	grid-auto-flow: column;
	grid-auto-columns: 2fr 1fr;
	margin: 1.25vmax 0 1vmax 0;
	align-items: center;
}

	.meta-label {
		font-size: clamp(1rem, 1.5vmax, 3rem);
		font-weight: 400;
		text-transform: uppercase;
	}

	.date {
		text-align:end;
	}

.metainfo {
	display:grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr min-content;
	gap: 1.5vmax;
}

	.image-row {
		margin: 2% 0;
		display:grid;
		grid-auto-flow: column;
		grid-auto-columns: auto;
		gap: 1%;
	}

		.image-row img {
			width:100%;
			height:100%;
			object-fit: cover;
			border-radius: .75rem;
			/* transition: var(--image-scale-anim); */
		}

		/* .image-row img:hover {
			transform: scale(3);
			filter: var(--drop-shadow);
		} */
	
	.press {
		grid-auto-flow: column;
		grid-auto-columns: auto;
		gap: 1%;
	}

		.press img {
			height: 100%;
			/* object-fit: contain; */
			border-radius: .5rem;
			/* transition: var(--image-scale-anim); */
		}

/* 
======================
METADATA: PROGRAMS USED

Right aligned grid that will dynamically adjust
======================
*/

.programs {
    display: grid;
    padding: clamp(.55rem, .55vmax, 1.5rem);
    gap: min(.5rem, .75vh);
    grid-template-columns: repeat(2, min-content);
    grid-template-rows: min-content;
    justify-content: end;
    align-items: center;
    align-content: start;
    border: clamp(.25rem, .55vh, .95rem) var(--dark) solid;
    border-radius: 2vh;
    height: fit-content;
}

	.programs svg {
		display: block;
		justify-self: center;
		align-self: center;
		width: 6vh;
		height: 7vh;
		transition: var(--image-scale-anim);
	}

		.programs svg:hover {
			transform: scale(1.1);
		}

/* 
======================
FOOTER
======================
*/

footer {
	display: grid;
	/* grid-template-columns: 1fr 1fr; */
	grid-template-areas: 
		'logo space'
		'logo nav';
	grid-template-rows: 7.5vh auto;
	/* row-gap: 1.5rem; */
	align-items: center;
	margin-bottom: 5vh;
	margin-top: 1vh;
}

	.logo {
		grid-area: logo;
	}

	.logo svg{
		width: 25vh;
		overflow: visible;
	}

        .l-rects rect {
            transform-box: fill-box;
            transform-origin: right center;
            transform: scaleX(0);
            animation: drawStripe 1s ease-in forwards;
        }

        .r-rects rect {
            transform-box: fill-box;
            transform-origin: left center;
            transform: scaleX(0);
            animation: drawStripe 1s ease-in forwards;
        }

        @keyframes drawStripe {
        to {
            transform: scaleX(150);
        }
        }



/*
=====================
RESPONSIVE ELEMENTS
=====================
*/

/* Predominantly meant for smart devices */

@media only screen and (max-width:725px) {
	
	.programs {
		grid-template-columns: auto;
		width:fit-content;
		justify-self: end;

	}

		.programs svg {
			width: 6vmax;
			height: 7vmax;
		}

	.divider {
		height: 4px;
		width: 100%;
	}

	.footer-links {
		grid-template-columns: auto auto;
		gap: 5%;
	}

}