/* IMPORT */
@import url("CooperHewitt/CooperHewitt_font-min.css");




/*	=	=	=	=	=	=	=	=	=	=	*/
/*	VARIABLES */

/* color */
:root {
	--color-h: 210; /* Hue        */
	--color-s: 10%; /* Saturation */
	--color-l: 62%; /* Lightness  */

	--sd-grey: hsl(var(--color-h), var(--color-s), var(--color-l));

	--sd-grey-dark: hsl(
		var(--color-h),
		var(--color-s),
		calc(var(--color-l) - 20%)
	);

	--sd-grey-light: hsl(
		var(--color-h),
		var(--color-s),
		calc(var(--color-l) + 20%)
	);

	/* https://codesalad.dev/blog/color-manipulation-with-css-variables-and-hsl-16 */
	/* → https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl */
}

/* metrics */
:root {
	--unit: 1rem;

	/* alignement posiiton logo… */
	--logoTypeOffset: -7.9788233012%;
	--logoMonogramOffset: -42.5109693511%;
}




/*	=	=	=	=	=	=	=	=	=	=	*/
/*	=	=	=	=	=	=	=	=	=	=	*/

/*	=	=	=	=	=	=	=	=	=	=	*/
/* RESET */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img {
	display: block;
}





/*	=	=	=	=	=	=	=	=	=	=	*/
/* UTILITY */

img {
	max-width: 100%;
}

.row{
	display: flex;
	gap: var(--unit);
	flex-direction: column;
}
@media (min-width: 720px) {
	.row {
		display: flex;
		gap: var(--unit);
		flex-direction: row;
	}
	.row > * {
		flex: 1;
	}
}






/*	=	=	=	=	=	=	=	=	=	=	*/
/* TYPOGRAPHY */
html {
	font-family: "CooperHewittFont", sans-serif;
}

a {
	color: inherit;
	text-decoration: none;
}

p + p {
	margin-top: 0.5em;
}

li{
	margin-bottom: 0.5rem;
}

main.defaultPageContent h1, 
main.defaultPageContent h2, 
main.defaultPageContent h3, 
main.defaultPageContent h4, 
main.defaultPageContent h5, 
main.defaultPageContent h6{ margin-top: 1.5rem; }





/*	=	=	=	=	=	=	=	=	=	=	*/
/* COLOR */

body {
	color: var(--sd-grey-dark);
}

#Logo svg .SDlogoType {
	fill: var(--sd-grey);
}
#LogoMono svg .SDlogoMonogram {
	fill: var(--sd-grey);
}




/*	=	=	=	=	=	=	=	=	=	=	*/
/* LAYOUT */
body {
	margin: var(--unit);
}

.col.primary {
	flex: 1 0 70.71067812%;
	flex: 1 1 auto;
}
.col.secondary {
	flex: 0 1 29.28932188%;
	flex: 0 0 20rem;
}

main.defaultPageContent{
	max-width: 40rem;
}

@media (min-width: 720px) {
	body {
		margin: var(--unit) calc(var(--unit) * 5);
	}

	#Logo {
		width: 70.71067812%;
		transform: translate(var(--logoTypeOffset), 0);
	}
	#LogoMono {
		width: calc(var(--unit) * 5);
		transform: translate(var(--logoMonogramOffset), 0);
	}
}





/*	=	=	=	=	=	=	=	=	=	=	*/
/*	MODULES									*/
/*	=	=	=	=	=	=	=	=	=	=	*/

header {
	margin-bottom: calc(var(--unit) * 2);
}

#usefulInfo {
}

#usefulInfo b {
	font-weight: 500;
}

#usefulInfo > * {
	border-top: 1px solid var(--sd-grey-light);
	margin-bottom: 2rem;
}

main.defaultPageContent a,
#usefulInfo a {
	text-decoration: underline;
}

#Horaires {
	border-top: 1px solid var(--sd-grey-light);
}

.mapHolder {
	width: 100%;
	aspect-ratio: 4/2;
	filter: grayscale(0.75);
}
.mapHolder iframe {
	width: 100%;
	height: 100%;
}

#Contact > * {
	margin-bottom: 2rem;
}

.signUp {
	background-color: #f8f8f8;
	padding: 0.5em;
}

#Contact input,
#Contact button {
	padding: 0.2rem;
	margin: 0.2rem;
}
#Contact .formInput label {
	display: inline-block;
	width: 7em;
	text-align: right;
	padding-right: 0.5em;
}




/*	=	=	=	=	=	=	=	=	=	=	*/
/* Shows (defaults) */

.show .artistsNames span:not(:first-of-type)::before {
	content: " & ";
}

/*.show .event*/.min00 {
	display: none; /* this is a hack. Or is it? */
}

.artistsNames span {
	white-space: nowrap;
/* 	TO-DO, replace multiple long artist list & & & & & & with commas... */
}





/*	=	=	=	=	=	=	=	=	=	=	*/
/* Current and Next shows */

#theShows { 
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-bottom: 2rem; 
}

#CurrentShows { }
#NextShows { }




#CurrentShows:not(:has(.show)){ display: none; }

#NextShows:not(:has(.show)){ display: none; }






#NextShows{
	border-top: 1px solid var(--sd-grey-light); 
}

#NextShows > h2:first-child { display: block;  margin-bottom: 1rem; }



#NextShows{
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

#NextShows > h2:first-child { flex: 0 0 100%; }

#NextShows > .show { flex: 1; }

#NextShows > .show .showFlyer img { aspect-ratio: 4/3; object-fit: contain; }















#theShows .artistsNames {
	font-size: 3rem;
	margin-top: 1rem;
}

#theShows .showTitle {
	font-size: 3rem;
	font-weight: 400;
}

#theShows .flyerText {
	margin-top: 1rem;
	max-width: 50rem;
}

#theShows img {
	/*max-width: 100%;*/
	width: 100%;
	max-height: 90vh;
	object-fit: contain;
	object-position: top left;
}





/*	=	=	=	=	=	=	=	=	=	=	*/
/* Futre Shows */

#FutureShows {}

#FutureShowsList{
	display: flex;
	flex-direction: column-reverse;
}

#FutureShowsList .show .artistsNames { }

#FutureShowsList .show .artistsNames span {	font-weight: 500; }


#FutureShows h4,
#FutureShowsList .show { margin-bottom: 1rem; }

#FutureShows { margin-bottom: 1rem; }





/*	=	=	=	=	=	=	=	=	=	=	*/
/* Archives */

#Archives {
	border-top: 1px solid var(--sd-grey-light);
	margin-top: 5rem;
}

#ArchivesList * {
	font-size: 1rem;
	font-weight: 400;
}

#ArchivesList { }

#ArchivesList .show {
	margin-top: 0.5rem;
}

#ArchivesList {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

#ArchivesList .show .showFlyer a {
	aspect-ratio: 4/3;
	overflow: hidden;
	display: block;
	background-color: var(--sd-grey-light);
}
#ArchivesList .show .showFlyer img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

#ArchivesList .show .artistsNames,
#ArchivesList .show .artistsNames * {
	margin-top: 0.5em;
	font-weight: 500;
}

#ArchivesList .show .showTitle {
	font-style: italic;
	line-height: 1em;
	margin: 0.5em 0;
}

#ArchivesList .show .showDates {
	font-size: 80%;
}

#Archives .artistsNames span {
	white-space: normal;
}




/*	=	=	=	=	=	=	=	=	=	=	*/
/* Footer */

footer {
	margin-top: 3rem;
}

/* desktop */
@media (min-width: 720px) {
	footer .row {
		align-items: flex-end;
	}
	footer #Sponsors img {
		max-width: 6rem !important;
	}
}

/* mobile */
@media (max-width: 720px) {
	
	footer #LogoMono {
		max-width: 7.5rem !important;
	}
	footer #Sponsors img {
		max-width: 7.5rem !important;
	}
}




/*	=	=	=	=	=	=	=	=	=	=	*/
/* Show display */

.showPage{}


.showPage .artistsNames {
	font-size: 3rem;
	margin-top: 1rem;
}

.showPage .showTitle {
	font-size: 3rem;
	font-weight: 400;
}

.showPage .flyerText {
	margin-top: 1rem;
	max-width: 50rem;
}

.showPage .longText {
	border-top: 1px solid var(--sd-grey-light);
	padding-top: 0.5rem;
	
	margin: 2rem 0;
	max-width: 50rem;
}


.showPage .showFlyer img {
	/*max-width: 100%;*/
	width: 100%;
	max-height: 90vh;
	object-fit: contain;
	object-position: top left;
}


.showPage .gallery:has(img){
	margin: 2rem 0;
	border-top: 1px solid var(--sd-grey-light);
	padding-top: 0.5rem;
	
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}


p.author {
	font-style: italic;
}
p.author::before{
	content: "– ";
}










/* TEMP HACKS remove for production*/

#ArchivesList .show .showFlyer a { background-color: var(--sd-grey-light); }

.show.event{ 
	/* activate this line to make events easy to see… */
/*	 background-color: #FC0;
*/}