@import "cols.css";

body.home main h2 {

	text-align: center;
	margin-top: 3rem;
	margin-bottom: 2rem;
	
	font-size: 2rem;
}





/* ------------------------------------------ INVITATION ------------------------------------------ */









details#invite {

	box-shadow: 0 0 1em hsla(0, 0%, 0%, 0.75);
	overflow: auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3rem;
	
	height: 10rem;
	width: calc(10rem/114*229);
	
	position: relative;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	background: hsl(60, 100%, 95.5%);
}


details#invite[open] em,
details#invite[open] time, 
details#invite[open] strong,
details#invite[open] a {
	
	font-style: inherit;
	font-weight: normal;
	text-decoration: underline;
	color: inherit;
}


details#invite[open] {
		
	width: calc(10rem/114*229);
	height: auto;
	
	font-style: italic;
}

details#invite[open] > * {
	
	max-height: calc(3*10rem);
	height: auto;
	position: relative;
	overflow: hidden;
	width: 100%;
}

details#invite[open] > *:before, 
details#invite[open] > *:after {
	
	content: "";
	width: 100%;
	position: absolute;
	top: 0;
	border-bottom: 0.125rem solid hsla(60, 50%, 50%, 0.07);
}
 
details#invite[open] > *:before {

	height: 33%;
	
}

details#invite[open] > *:after {

	height: 66%;
}

details#invite[open] > * > * {
	
	margin-left: 1rem;
	margin-right: 1rem;
}

details#invite summary {
	
	list-style: none;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: right;
	
	padding-top: 1rem;
	padding-right: 3rem;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	
	cursor: pointer;
}

details#invite summary time {
	
	position: absolute;
	top: 0;
	right: 0;
	
	padding-right: 1rem;
	padding-top: 0.5rem;
}

details#invite[open] summary {
	
	display: none;
}







/* ------------------------------------------ BLOCKS ------------------------------------------ */





.guides img, 
#worlds img, 
.benefits dd > :first-child
{
	width: 100%;
}


.guides {

	padding-left: 0;
}


.benefits, 
.guides {
	
	display: grid;
	justify-content: center;

}

	
.benefits {

	grid-row-gap: 0;
}

.guides {
	
	list-style: none;
	
	grid-row-gap: 2rem;
}

.benefits dd {
	
	margin-bottom: 1rem;
}

.benefits dt {

	margin-top: 1rem;
}

.benefits {

	margin-top: 0;
}

#worlds, 
.guides {
	
	padding-top: 1rem;
}

#worlds {
	
	padding-bottom: 1rem;
}

#worlds dd {
	
	margin-bottom: 2rem;
	margin-left: 0;
}

#worlds dd:last-of-type {
	
	margin-bottom: 0;
}

.benefits dt, 
#worlds dt, 
.guides > li a dfn, 
.guides > li a:visited  dfn {

	padding: 1rem;
	text-align: center;
	font-size: 1.25rem;
	border-top-width: 0.25rem;
	border-bottom-width: 0;
}

.benefits dd,
#worlds dd, 
.guides > li a > span, 
.guides > li a img {
	
	border-top-width: 0;
	border-bottom-width: 0.25rem;
	margin-left: 0;
}
.guides > li a img {

	border-top-width: 0;
	border-bottom-width: 0;
}
	
.benefits dd img, 
.benefits dd figure, 
#worlds dd img {

	display: block;
}

.benefits dd p, 
#worlds dd p,
#worlds dd address {

	margin: 1rem;
}



/* ------------------------------------------ MONDES ------------------------------------------ */

#worlds {
	
	display: grid;
	grid-row-gap: 0;
	justify-content: center;
}

#worlds dt {

	text-align: center;
}

.map_button {
	
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 12px;
}

.map_button img {
	
	width: 48px !important;
	padding-right: 8px;
}

/* ------------------------------------------ GUIDES ------------------------------------------ */


.guides > li {
	
	margin: 0;
	padding: 0;
}

.guides > li a, 
.guides > li a:visited {
	
	display: flex;
	flex-direction: column;
	height: 100%;
}

.guides > li a dfn 	{ order: 1; }
.guides > li a img 	{ order: 2; }
.guides > li a > span 	{ order: 3; }



.guides > li a > span {

	padding: 1rem;
	width: calc(100% - 2 * 1rem);
}






/* ------------------------------------------ RESPONSIVE ------------------------------------------ */


.benefits, 
.guides, 
#worlds {

	grid-column-gap: var(--col-gap);
	grid-template-columns: calc(100% - 1rem);
}


.benefits dt, 
.benefits dd, 
#worlds dt, 
#worlds dd
{
	border-left-width: var(--box-border-width);
	border-right-width: var(--box-border-width);
}

.guides > li a {
	
	border-width: var(--box-border-width);
}





@media screen and (min-width: 28.5rem) {

	.benefits {
	
		grid-template-columns: 
			repeat(
				calc(var(--page-col-nb) / var(--benefits-col-nb)), 
				calc(
					var(--benefits-col-nb) * var(--col-width) + (var(--benefits-col-nb) - 1) * var(--col-gap)
				)
			);
	}
	
	.benefits dd iframe {
		
		--embeded-media-ratio: calc(1366/(766 - 20)); /* 1.831099196 */
		
		height: calc(
					(var(--benefits-col-nb) * var(--col-width) + (var(--benefits-col-nb) - 1) * var(--col-gap))
					
					/ var(--embeded-media-ratio)
				);
	}

	.guides {
	
		grid-template-columns: 
			repeat(
				calc(var(--page-col-nb) / var(--guides-col-nb)), 
				calc(
					var(--guides-col-nb) * var(--col-width) + (var(--guides-col-nb) - 1) * var(--col-gap)
				)
			);
	}
	

	#worlds {
	
		grid-template-columns: 
			repeat(
				calc(var(--page-col-nb) / var(--worlds-col-nb)), 
				calc(
					var(--worlds-col-nb) * var(--col-width) + (var(--worlds-col-nb) - 1) * var(--col-gap)
				)
			);
	}
}

@media screen and (min-width: 56rem) {
	
	/* BENEFITS */
	
	.benefits > dt:nth-of-type(2n+1), 
	.benefits > dd:nth-of-type(2n+1) {
		
		grid-column: 1;
	}

	.benefits > dt:nth-of-type(2n+2), 
	.benefits > dd:nth-of-type(2n+2) {
		
		grid-column: 2;
	}

	.benefits dt:nth-of-type(n + 1) {
		
		grid-row: 1;
	}

	.benefits dd:nth-of-type(n + 1) {

		grid-row: 2;
	}


	.benefits dt:nth-of-type(n + 3) {
		
		grid-row: 3;
	}
		
	.benefits dd:nth-of-type(n + 3) {

		grid-row: 4;
	}


	.benefits dt:nth-of-type(n + 5) {
		
		grid-row: 5;
	}
		
	.benefits dd:nth-of-type(n + 5) {

		grid-row: 6;
	}
	
	
	/* GUIDES */	
	
	.guides > li:nth-of-type(2n+1) {
		
		grid-column: 1;
	}
	.guides > li:nth-of-type(2n+2) {
		
		grid-column: 2;
	}
}

@media screen and (min-width: 83.5rem) {
	
	/* BENEFITS */

	.benefits > dt:nth-of-type(3n+1), 
	.benefits > dd:nth-of-type(3n+1) {
		
		grid-column: 1;
	}

	.benefits > dt:nth-of-type(3n+2), 
	.benefits > dd:nth-of-type(3n+2) {
		
		grid-column: 2;
	}

	.benefits > dt:nth-of-type(3n+3),
	.benefits > dd:nth-of-type(3n+3) {
		
		grid-column: 3;
	}
	
	.benefits dt:nth-of-type(n + 1) {
		
		grid-row: 1;
	}

	.benefits dd:nth-of-type(n + 1) {

		grid-row: 2;
	}


	.benefits dt:nth-of-type(n + 4) {
		
		grid-row: 3;
	}
		
	.benefits dd:nth-of-type(n + 4) {

		grid-row: 4;
	}
	
	/* WORLDS */
	
	#worlds dd {
		
		grid-row: 2;
		margin-bottom: 0rem;
	}
	
	/* GUIDES */
	
	.guides > li:nth-of-type(3n+1){
		
		grid-column: 1;
	}
	.guides > li:nth-of-type(3n+2) {
		
		grid-column: 2;
	}
	.guides > li:nth-of-type(3n+3) {
		
		grid-column: 3;
	}
}

#video-presentation {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3rem;
	max-width: 100%;
}