@charset "UTF-8";

/**
 * grids.css 1.0.0
 *
 * Grid layout system — CSS Grid based, responsive, with AJAX support.
 * Custom grid types (table, search, products, events, posts) in CUSTOM.
 *
 * STRUCTURE
 * .grid > .items > .item > .item-content
 *                        > .images / .thumbnails
 *                        > .infos
 *
 * MODIFIERS
 * .grid.list        — single column, horizontal layout
 * .grid.swiperable  — switchable to swiper
 * .grid.fluid       — masonry-style fluid layout
 * .grid.table       — table-like layout
 * .grid.search      — search results layout
 *
 * ITEM SIZES
 * .item.large  — 2:1 thumbnail ratio
 * .item.small  — 1:1 thumbnail ratio
 * .item.sticky — full-width row (grid-column: 1 / -1)
 */


/* ============================================== */
/* ==================== VARS ==================== */
/* ============================================== */


/* ========== DEFAULT ========== */

.grid {
	--item-background-color: var(--bright-color);
}
.grid.list {
	--grid-gap: .25em;
	--items-per-row: 1 !important;
}
.grid.swiperable {
	--item-width: calc(100% / var(--items-per-row));
}

:root {
	--results-title-size: 2em;
}


/* ========== @MEDIA ========== */

@media (min-width: 0px) {
	:root,
	.grid {
		--grid-gap: .5rem;
		--grid-gap-short: .25rem;
		--item-width: calc(100% / var(--items-per-row) - var(--grid-gap) * 2);
		--item-border-radius: 0;
		--items-per-row: 1; /*2;*/
	}
	.grid.events {
		--items-per-row: 1;
	}
}
@media (min-width: 760px) {
	:root,
	.grid {
		--items-per-row: 2;
		--sticky-item-size: 2;
		--grid-gap: 1rem;
		--grid-gap-short: .5rem;
	}
	
	.grid.gallery {
		--items-per-row: 4;
	}
}
@media (min-width: 1000px) {
	:root,
	.grid {
		--items-per-row: 3;
	}
	.grid.products {
		--items-per-row: 4;
	}
	.grid.events {
		--items-per-row: 2;
	}
	.grid.short-size {
		--items-per-row: 6;
	}
	.grid.products.short-size {
		--items-per-row: 8;
	}
}
@media (min-width: 1600px) {
	:root,
	.grid {
		--items-per-row: 4;
	}
	.grid.events {
		--items-per-row: 3;
	}
	.grid.short-size {
		--items-per-row: 3;
	}
}


/* ========== FLUID ========== */

@media (max-width: 760px) {
	:root {
		--grid-fluid-height: 10rem;
	}
}
@media (min-width: 760px) {
	:root {
		--grid-fluid-height: 15rem;
	}
}
@media (min-width: 1000px) {
	:root {
		--grid-fluid-height: 20rem;
	}
}


/* ========== CUSTOM ========== */

/* here for project grid variable overrides */

:root {
	--grid-item-title: 1em;
}

/* unused yet */

@media (min-width: 0px) {
	.grid.events {
		--grid-event-title: 1em; /* 1.25em */
	}
}
@media (min-width: 1000px) {
	.grid.events {
		--grid-event-title: 1.25em; /*1.5em;*/
	}
}


/* ==================================================== */
/* ==================== ANIMATIONS ==================== */
/* ==================================================== */

.results-item,
.grid .item {
	transition:
		opacity var(--duration-normal) var(--ease),
		transform var(--duration-normal) var(--ease);
}
.results-title,
.grid .item.off {
	transition:
		opacity var(--duration-fast) var(--ease),
		transform var(--duration-fast) var(--ease);
}
.grid.posts .item .infos {
	transition:
		opacity var(--duration-fast) var(--ease),
		height var(--duration-fast) var(--ease);
}


/* ============================================== */
/* ==================== GRID ==================== */
/* ============================================== */

.grid {
	position: relative;
	width: 100%;
}


/* =============================================== */
/* ==================== ITEMS ==================== */
/* =============================================== */

.grid .items {
	position: relative;
	display: grid;
	grid-auto-flow: dense;
	grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
	gap: var(--grid-gap);
}
.grid .items * {
	margin: 0;
}
.grid .items * + * {
	margin-top: 0;
}


/* ============================================== */
/* ==================== ITEM ==================== */
/* ============================================== */

.grid .item {
	position: relative;
	display: flex;
	height: 100%;
	width: 100%;
	overflow: hidden;
	border-radius: var(--item-border-radius);
}


/* ================================== */
/* ========== ITEM CONTENT ========== */
/* ================================== */

.grid .item-content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--item-background-color);
}
.grid .item-content > * {
	margin: 0;
}
.grid a.item-content::after {
	display: none;
}
.grid a.item-content:hover {
	color: var(--text-color);
	background: var(--item-background-color);
}
.grid a.item-content .thumbnail,
.grid a.item-content .infos {
	transition: all var(--duration-fast);
}


/* ================================================ */
/* ==================== STATUS ==================== */
/* ================================================ */

.grid .item.empty {
	opacity: .33;
}
.grid .item.not {
	opacity: .5;
}


/* ================================================ */
/* ==================== STICKY ==================== */
/* ================================================ */

.grid:not(.list) .item.sticky {
	/*grid-column: 1 / -1 !important;
	grid-row: auto;*/
	grid-column: span var(--sticky-item-size);
	grid-row: span var(--sticky-item-size);
}


/* ================================================= */
/* ==================== LOADING ==================== */
/* ================================================= */

.grid-container.is-loading:before,
.grid.is-loading:before {
	position: fixed;
	z-index: 100;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
}
.grid-container.is-loading .results-title,
.grid-container.is-loading .item,
.grid.is-loading .item {
	opacity: 0;
}


/* ================================================ */
/* ==================== IMAGES ==================== */
/* ================================================ */

.grid .images {
	position: relative;
	height: 100%;
	width: 100%;
}


/* ==================================================== */
/* ==================== THUMBNAILS ==================== */
/* ==================================================== */

.grid .thumbnails {
	position: absolute;
	z-index: 10;
	inset: 0;
	width: 100%;
	aspect-ratio: 16/9;
	opacity: 0;
	pointer-events: none;
}
.grid.list .thumbnails {
	height: 100%;
}
.grid a.item-content:hover .thumbnails {
	opacity: 1;
}
.grid .item.large .thumbnail {
	aspect-ratio: 2/1;
}
.grid .item.small .thumbnail {
	aspect-ratio: 1/1;
}
.grid.list.small .thumbnail {
	display: none;
}


/* =============================================== */
/* ==================== INFOS ==================== */
/* =============================================== */

.grid .infos {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	text-align: center;
	padding: 1em; /*1.5em;*/
	gap: var(--grid-gap-short);
	margin: 0;
	width: 100%;
}
.grid:not(.list) .infos {
	font-size: var(--font-size);
}
.grid .infos > * {
	margin: 0;
}
.grid .infos > .inline {
	justify-content: center;
}
/*
.grid .infos > * + * {
	margin-top: var(--grid-gap-short);
}
*/


/* ===================================================== */
/* ==================== DESCRIPTION ==================== */
/* ===================================================== */

.grid .post-description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-top: 1em;
	height: 3em;
	width: 100%;
	font-size: .875em;
	line-height: 1;
	text-align: left !important;
}
.grid .post-time {
	display: flex;
	gap: 0 1em;
}
.grid .infos .post-time > * {
	flex-basis: 0;
}
.grid .post-location {
	text-align: center;
}
.grid.events:not(.list) .post-time {
	justify-content: space-between;
}
.grid.events:not(.list) .post-location {
	flex-basis: 100%;
}


/* ================================================= */
/* ==================== GALLERY ==================== */
/* ================================================= */

/* ========== DEFAULT ========== */

.grid.gallery img {
	height: 100%;
	object-fit: cover;
}


/* ========== VIEWER ========== */

.grid.gallery.has-viewer .items:hover a.item-content {
	filter: grayscale(1) blur(.25em);
}
.grid.gallery.has-viewer .items:hover a.item-content:hover,
.grid.gallery.has-viewer a.item-content:hover {
	filter: grayscale(0) blur(0);
}


/* =============================================== */
/* ==================== FLUID ==================== */
/* =============================================== */

/**
 * Google Images style / JS
 * figure: aspect-ratio inline via style="aspect-ratio: 22/13;"
 * .grid-initialized — after JS init
 */

/* ========== DEFAULT ========== */

.grid.fluid .items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--grid-gap);
}
.grid.fluid .item {
	flex: 1 0 auto;
	width: auto;
	height: var(--grid-fluid-height);
}
.grid.fluid figure {
	width: 100%;
	height: 100%;
	position: relative;
	max-width: none;
	aspect-ratio: auto !important;
}


/* ========== INIT ========== */

.grid.fluid.grid-initialized .item {
	height: auto;
	flex-grow: 0;
	aspect-ratio: auto !important;
}
.grid.fluid.grid-initialized .item-content,
.grid.fluid.grid-initialized figure {
	height: auto;
}



/* ================================================= */
/* ==================== RESULTS ==================== */
/* ================================================= */

.results {
	display: flex;
	flex-direction: column;
	gap: calc(var(--content-spacing) * 2);
}
.results + .results {
	margin-top: var(--content-spacing);
}
.results > .results-items {
	display: flex;
	flex-direction: column;
	gap: calc(var(--content-spacing) * 2);
}
.results-item {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border-top: solid var(--stroke-width);
}
.results-item-content {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin: 0;
}
.results-title {
	display: flex;
	align-items: baseline;
	font-size: var(--results-title-size);
	font-weight: var(--font-weight-bold);
	margin-top: var(--content-spacing);
}
.results-title > * {
	margin: 0;
}
.results-title + * {
	margin-top: 0 !important;
}
body.is-loading .results-title {
	opacity: 0;
}
.results.unavailable .results-title {
	color: var(--grey-color);
}
.results-description {
	max-width: calc(var(--content-max-width) * 2 / 3);
}


/* ========== MIN ========== */

.results.min {
	gap: var(--global-spacing);
}


/* ========== SWIPER ========== */

.results.swiper-container .swiper-slide {
	opacity: 0;
}
.results.swiper-container .swiper-slide-active {
	opacity: 1;
}


/* ========== @MEDIA ========== */

@media (min-width: 0px) {
	.results-description {
		font-size: 1.125em;
	}
}
@media (min-width: 1000px) {
	.results-description {
		font-size: 1.25em;
	}
}


/* ================================================ */
/* ==================== EVENTS ==================== */
/* ================================================ */

/* ========== DEFAULT ========== */

/*
.grid.events .infos {
	color: var(--bright-color);
	background: var(--dark-color);
}
*/
.grid.events .post-title {
	font-size: var(--grid-item-title);
	font-family: var(--font-family);
	text-align: left;
}
.grid.events .post-meta {
	order: -1;
	justify-content: space-between;
}
.grid.events .infos > * {
	width: 100%;
}


/* ========== LIST ========== */

.grid.list.events .item-content {
	flex-direction: row;
	align-items: stretch;
}
.grid.list.events .images {
	position: relative;
}
.grid.list.events .infos {
	flex-direction: row;
	align-items: center;
	color: currentColor;
	background: none;
}
.grid.list.events .post-tag {
	color: var(--dark-color);
	border-color: var(--yellow-color);
	background: var(--yellow-color);
}
.grid.list.events a.item-content:hover .post-tag {
	color: var(--yellow-color);
	border-color: var(--dark-color);
	background: var(--dark-color);
}
.grid.list.events .post-meta {
	justify-content: flex-start;
}
.grid.list.events .post-date.large {
	padding: 1.5em;
}


/* ========== @MEDIA ========== */

@media (max-width: 760px) {
	.grid.list.events .images {
		display: none;
	}
}
@media (min-width: 1000px) {
	.grid.events.list .images {
		width: 20%;
	}
	.grid.events.list .infos {
		width: 80%;
	}
	.grid.events.list .post-date.large {
		width: 5%;
	}
	.grid.events.list .post-date.large + .infos {
		width: 75%;
	}
}


/* ================================================= */
/* ==================== ACTIONS ==================== */
/* ================================================= */

.grid.actions {
	--item-border-radius: .5em;
}
.grid.actions .infos {
	text-align: center;
}


/* =============================================== */
/* ==================== POSTS ==================== */
/* =============================================== */


/* ========== DEFAULT ========== */
/*
.grid.posts .items {
	display: grid;
	gap: var(--grid-gap-short);
	grid-template-columns: repeat(3, 1fr);
}
.grid.posts .item-content {
	display: block;
	height: 100%;
	width: 100%;
}
*/

/* ========== INFOS ========== */
/*
.grid.posts .infos {
	position: relative;
	text-align: center;
}
.grid.posts .thumbnail {
	height: 100%;
}
.grid.posts .item .infos {
	position: absolute;
	z-index: 20;
	inset: auto 0 0 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 1em;
}
.grid.posts .item .infos:after {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	backdrop-filter: blur(.25em);
	-webkit-backdrop-filter: blur(.25em);
	pointer-events: none;
	background: rgba(var(--bright-rgb), .66);
}
*/

/* ========== THUMBNAIL ========== */
/*
.grid.posts a.item-content .thumbnail:before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 15;
	opacity: 0;
	backdrop-filter: blur(.25em);
	pointer-events: none;
}
.grid.posts a.item-content:hover .thumbnail:before {
	opacity: 1;
}
*/

/* ========== STRUCTURE ========== */
/*
.grid.posts .thumbnail figcaption {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--bright-color);
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
	padding: 1em;
}
.grid.posts .item-content img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
*/

/* ================================================ */
/* ==================== CUSTOM ==================== */
/* ================================================ */


/* ========== WIP ========== */

.grid .post-tag {
	width: auto !important;
	max-width: calc(100% - 2em);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.grid.list .post-tag {
	order: -1;
	margin: 0 0 .5em 0;
}
.grid:not(.list) .post-tag {
	position: absolute;
	z-index: 30;
	top: -3em;
	left: 1em;
	transform: translate(0%, -100%);
	margin: 1em !important;
	width: auto !important;
	max-width: calc(100% - 2em);
}
.grid:not(.list) .post-tags {
	position: absolute;
	z-index: 30;
	top: -3em;
	right: 1em;
	transform: translate(0%, -100%);
	margin: 1em !important;
	width: auto !important;
	max-width: calc(100% - 2em);
}


/* ========== TABLE ========== */

.grid.table .items .item {
	flex-grow: 1;
}
.grid.table .items .item .item-content {
	padding: 1.25rem;
}
.grid.table .items .item .item-content > * {
	padding: 0;
}
.grid.table .items .item .item-content figure {
	max-width: 6rem;
	padding-bottom: 1.25rem;
}
.grid.table .items .item .item-content .infos {
	text-align: center;
}


/* ========== SEARCH ========== */

.grid.search .post-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .25em;
}
.grid.search .post-title .post-tag {
	order: initial;
	margin: 0;
}
.grid.search .post-meta {
	justify-content: flex-start;
}




/* ========== GRID ========== */

.grid {
	font-size: calc(var(--font-size) * 1.25);
}






/* ========== SEASONS ========== */

.grid.seasons .items:hover .item {
	filter: grayscale(1);
}
.grid.seasons .items:hover .item:hover {
	filter: grayscale(0);
}
.grid.seasons .item-content {
	background: var(--yellow-color);
}
.grid.seasons.is-festival .item-content {
	background: var(--edition-primary-color);
}
.grid.seasons .infos {
	position: absolute !important;
	z-index: 10;
	inset: 0;
	display: flex;
	justify-content: center;
	text-align: center;
	color: var(--dark-color) !important;
	background: none !important;
}
.grid.seasons .thumbnail.empty {
	opacity: 0 !important;
}


/* ========== PRODUCTIONS ========== */

@media (min-width: 1000px) {
	.grid.productions {
		--items-per-row: 2;
	}
}


/* ========== POSTS ========== */

@media (min-width: 1000px) {
	.grid.posts {
		--grid-gap: 1em;
	}
}