/*
 * Author: Caleb Bronn
 * Last Update: 13 Apr 2025

 * This page contains styling that applies to the Rosa Art page, mainly the gallery and Squaring-the-Square thingie.
 */

/* 2-column layout for art page links */
header ul {
	grid-template-columns: 1fr 1fr;
}

#contest-call-to-action {
	font-size: 1.3rem;
	/* Center */
	width: 70%;
	margin: auto;
	/* Call to action should span both columns */
	grid-column: 1 / span 2;
}

main > h2 {
	margin-bottom: 4rem;
}

@media screen and (width >= 700px) {
	main > h2 {
		width: 50%;
	}
}

/***********
 * GALLERY *
 ***********/

:root {
	--gallery-gap: 1.5rem;	/* Gap between each img */
	--gallery-num-cols: 4;	/* Number of columns in gallery */
}

/* For smol / mobile screens, change the number of columns */
@media screen and (width < 1200px) {
	:root {
		--gallery-num-cols: 2;
	}
}
@media screen and (width < 700px) {
	:root {
		--gallery-num-cols: 1;
	}
}

/* his gallery code is basically identical to the CSS Technique assignment I worked on */
.gallery {
	display: grid;
	grid-template-columns: repeat(var(--gallery-num-cols), 1fr);
	gap: var(--gallery-gap);
}

.col {
	display: flex;
	flex-flow: column nowrap;
	gap: var(--gallery-gap);
}

.col > li {
	position: relative;		/* for children */
	border: 2px solid white;
}

.col .art-credit {
	/* Position at the bottom */
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Cosmetics */
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.7);
	color: #fff;
	/* Effects */
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
.col li:hover > .art-credit {
	opacity: 1;
}

img,
iframe {
	display: block;
	width: 100%;
}

/* The underlines look kinda ugly in the galleries, so we remove them */
.gallery a {
	text-decoration: none;
}


/****************
 * IMAGE MODALS *
 ****************/

#modal {
	display: none;	/* hidden by default */
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	overflow-y: scroll;	/* if needed */
	background-color: rgba(0,0,0,0.9);
}

/* Center the div that contains the img and caption  */
#modal > div {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: max-content;
}

#modal-img {
	margin: auto;
	max-height: 95%;	/* leaves a bit of space for the caption */
	object-fit: contain;
}

#caption {
	text-align: center;
	color: #fff;
	padding: 1em 0;
}

#modal-img,
#caption {
	animation: zoom 0.4s ease-in;
}

@keyframes zoom {
	from { transform:scale(0) } 
	to { transform:scale(1) }
}

/* The X button for closing the modal goes in the top right corner */
.modal-button {
	position: absolute;
	z-index: 2;
	text-decoration: none;
	text-align: center;
	color: #fff;
	font-weight: 700;
	font-size: max(2.5rem, 4vw);
	transition: all 0.3s;
}
.modal-button:hover,
.modal-button:active {
	color: var(--mba-blue);
}
	
#close {
	top: 3vw;
	right: 3vw;
}

/*! An attempt at making a slideshow. Still a WIP */
#prev {
	left: 3vw;
	top: 50%;
	transform: translate(0, -50%);
}

#next {
	right: 3vw;
	top: 50%;
	transform: translate(0, -50%);
}


/*****************************
 * SQUARING THE SQUARE RULES *
 *****************************/

 /* The original Perfect Squaring the Square is a 122 units. To make our web version 
	responsive, we calculate the percentages of the width/height that each div should 
	take up as a percentage of the original 112-unit base size. 

	This CodePen I made might help to make it more clear what the code does, since it's a bit simpler:
	https://codepen.io/Chickenlord7321/pen/ogNdLrq

	There's also this video from Numberphile that explains how the Squaring the Square mathematical problem works: 
	https://www.youtube.com/watch?v=NoRjwZomUK0
 */
:root {
	--s50: calc(50 / 112 * 100%);
	--s42: calc(42 / 112 * 100%);
	--s37: calc(37 / 112 * 100%);
	--s35: calc(35 / 112 * 100%);
	--s33: calc(33 / 112 * 100%);
	--s29: calc(29 / 112 * 100%);
	--s27: calc(27 / 112 * 100%);
	--s25: calc(25 / 112 * 100%);
	--s24: calc(24 / 112 * 100%);
	--s19: calc(19 / 112 * 100%);
	--s18: calc(18 / 112 * 100%);
	--s17: calc(17 / 112 * 100%);
	--s16: calc(16 / 112 * 100%);
	--s15: calc(15 / 112 * 100%);
	--s11: calc(11 / 112 * 100%);
	--s9: calc(9 / 112 * 100%);
	--s8: calc(8 / 112 * 100%);
	--s7: calc(7 / 112 * 100%);
	--s6: calc(6 / 112 * 100%);
	--s4: calc(4 / 112 * 100%);
	--s2: calc(2 / 112 * 100%);
}

#squaring-the-square {
	width: 100vmin;
	height: 100vmin;
	position: relative;		/* for children with absolute position */
	border: 2px solid white;
}

#squaring-the-square li {
	border: 2px solid white;
	position: absolute;
}

#squaring-the-square li > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 0.3s;
}

#squaring-the-square li > img:hover {
	opacity: 0.7;
}

/* Size and positioning */
#s50 {
	width: var(--s50);
	height:var(--s50);
	top: 0;
	left: 0;
}
#s42 {
	width: var(--s42);
	height:var(--s42);
	bottom: 0;
	right: 0;
}
#s37 {
	width: var(--s37);
	height:var(--s37);
	bottom: 0;
	right: var(--s42);
}
#s35 {
	width: var(--s35);
	height:var(--s35);
	top: 0;	
	left: var(--s50);
}
#s33 {
	width: var(--s33);
	height:var(--s33);
	bottom: 0;
	left: 0;
}
#s29 {
	width: var(--s29);
	height:var(--s29);
	bottom: var(--s33);
	left: 0;
}
#s27 {
	width: var(--s27);
	height:var(--s27);
	top: 0;
	right: 0;
}
#s25 {
	width: var(--s25);
	height:var(--s25);
	bottom: var(--s37);
	left: var(--s29);
}
#s24 {
	width: var(--s24);
	height:var(--s24);
	bottom: var(--s42);
	right: 0;
}
#s19 {
	width: var(--s19);
	height:var(--s19);
	top: var(--s27);
	right: 0;
}
#s18 {
	width: var(--s18);
	height:var(--s18);
	bottom: var(--s42);
	right: var(--s24);
}
#s17 {
	width: var(--s17);
	height:var(--s17);
	top: var(--s35);
	left: calc(var(--s50) + var(--s15));
}
#s16 {
	width: var(--s16);
	height:var(--s16);
	bottom: var(--s37);
	right: var(--s42);
}
#s15 {
	width: var(--s15);
	height:var(--s15);
	top: var(--s35);
	left: var(--s50);
}
#s11 {
	width: var(--s11);
	height:var(--s11);
	top: var(--s35);
	right: var(--s19);
}
#s9 {
	width: var(--s9);
	height:var(--s9);
	top: var(--s50);
	left: calc(var(--s29) + var(--s25));
}
#s8 {
	width: var(--s8);
	height:var(--s8);
	top: var(--s27);
	right: var(--s19);
}
#s7 {
	width: var(--s7);
	height:var(--s7);
	top: calc(var(--s50) + var(--s2));
	right: calc(var(--s24) + var(--s18));
}
#s6 {
	width: var(--s6);
	height:var(--s6);
	top: calc(var(--s35) + var(--s11));
	right: var(--s24);
}
#s4 {
	width: var(--s4);
	height:var(--s4);
	bottom: var(--s33);
	left: var(--s29);
}
#s2 {
	width: var(--s2);
	height:var(--s2);
	top: calc(var(--s35) + var(--s15));
	left: calc(var(--s29) + var(--s25) + var(--s9));
}