@import '../components/count.css';

/*GRILLE D'IMAGE ---------------------*/
/*------------------------------------*/
section{
	margin:0;
	width:100vw;
	position: fixed;
}

.page-grid{
	height:100%;
	width:100vw;
	display:flex;
	position: absolute;
	list-style: none;
}

.page-grid li{
	height:100%;
	margin-right:20px;
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	padding-bottom:0;
	width: auto;
}

.page-grid li #first-image{
	height:55vh;
}

.page-grid li img{
	height:60vh;
}

.page-grid li:nth-child(2) img,
.page-grid li:nth-child(3n) img,
.page-grid li:nth-child(4n) img{
	height:80vh;

}


/*LÉGENDES ---------------------------*/
/*------------------------------------*/

figcaption{
	position: relative;
    z-index: 5;
    display:none;
    flex-direction:row;
    flex-wrap:wrap;
    max-width: 20vw;
    width:100%;
    color:var(--color-second);
}

#first-image ~ figcaption{
	display: flex;
}


figcaption p, 
figcaption a,
.figcaption-line,
.figcaption-block{
    font-size:var(--font-size-small);
}

figcaption a:hover{
	opacity: 0.3;
}

.figcaption-line{
	min-width:100%;
	display:flex;
	z-index:5;
}

.figcaption-block{
	min-width:100%;
	display:flex;
	flex-direction:column;
}



/*MENU COLLECTION --------------------*/
/*------------------------------------*/
.menu-collection{
	position: fixed;
	top:90vh;
	transform:translate(0, -100%);
	left:3vh;
	list-style: none;
	padding: 0;
	margin:0;
    font-size:var(--font-size-normal);
    z-index: 5;
}

.menu-collection a{
	text-decoration: none;
}

.active-page{
    color:var(--color-second);
}

/*CURSOR -----------------------------*/
/*------------------------------------*/

.carousel__prev, .carousel__next {
    position: fixed;
    top: 10vh;
    bottom: 10vh;
    width: 50%;
    display: flex;
    z-index: 3;
    cursor: none; 
}

.carousel__prev { left: 0; }

.carousel__next { right: 0; }

.cursor {
    position: fixed;
    pointer-events: none; 
    display: none;
    transform: translate(-50%, -50%);
    z-index: 4;
    text-align: center;
    line-height: 40px;
    user-select: none;
    cursor:none;
}

/*LAZY LOAD --------------------------*/
/*------------------------------------*/

.fade-in {
  opacity:0;
}

.fade-in-active {
  opacity:0.08;
  transition: filter 1s ease;
}


@media screen and (max-width: 768px) {

	section{
		width:calc(100vw - 6vh);
		margin:0vh 3vh;
	}

	.menu-collection{ 
		position:sticky;
		top:0;
		transform:translate(0, 0);
		height:fit-content;
		left:0;
	}	

	.page-grid{
		flex-direction:column;
		overflow-y:scroll;
		gap: 2vh;
	}

	.carousel__prev, .carousel__next { display:none; }

	.page-grid li{
		height: auto;
		display:flex;
	}

	.page-grid li:nth-child(1){
		opacity: 1 !important;
	}

	.page-grid li img,
	.page-grid li:nth-child(2) img,
	.page-grid li:nth-child(3n) img{
		height:auto;
		width:100%;
	}

	.page-grid li #first-image,
	.page-grid li:nth-child(4n) img{
		height:auto;
		width:80%;
	}

	.page-grid li img{
		order:2;
	}

	figcaption{
	    max-width: calc(100% - 6vh);
	    order:1;
	    margin-top:25px;
	   	margin-bottom:5px;
	}

	.page-grid li:last-child{
		margin-bottom:var(--spacing-big);
	}

}