/**
 * Explore gallery — frontend.
 */

.m306-gal {
	--m306-gal-ink: #182220;
	--m306-gal-overlay: rgba(184, 212, 200, 0.9);
	--m306-gal-title-font: 'Cinzel', 'Times New Roman', serif;
	--m306-gal-body-font: 'Fahkwang', 'Times New Roman', serif;
	--m306-gal-gap: 20px;
	--m306-gal-border: #cfcfcf;
	--m306-gal-cream: #fefcf8;
	--m306-gal-pad-top: clamp(24px, 4vw, 48px);

	width: 100%;
	max-width: none;
	margin: 0;
	background: #fff;
	color: var(--m306-gal-ink);
	padding: var(--m306-gal-pad-top) 0 clamp(24px, 4vw, 48px);
	box-sizing: border-box;
}

.m306-gal *,
.m306-gal *::before,
.m306-gal *::after {
	box-sizing: border-box;
}

.m306-gal__filters {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	max-width: none;
	margin: 0 0 70px;
	padding: 0;
	background: var(--m306-gal-cream);
	/* Full-bleed cream band: extends to the screen edges and up to the section top, ends at the buttons' bottom */
	box-shadow: 0 0 0 100vmax var(--m306-gal-cream);
	clip-path: inset(calc(-1 * var(--m306-gal-pad-top)) -100vmax 0 -100vmax);
	border: 1px solid var(--m306-gal-border);
	border-radius: 0;
	gap: 0;
}

/* Measuring pass: JS fits the font with the bold (active) weight so hover never wraps */
.m306-gal__filters.is-measuring .m306-gal__filter {
	font-weight: 500 !important;
	letter-spacing: 0.06em !important;
}

.m306-gal__filter,
.m306-gal .m306-gal__filter,
.elementor .m306-gal__filter {
	appearance: none;
	-webkit-appearance: none;
	flex: 1 1 0;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	margin: 0;
	padding: 16px 8px;
	border: none !important;
	border-right: 1px solid var(--m306-gal-border) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #182220 !important;
	font-family: var(--m306-gal-body-font);
	font-size: var(--m306-gal-filter-fs, 24px);
	font-weight: 300;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	box-shadow: none !important;
	outline: none;
	transition:
		font-weight 0.35s ease,
		letter-spacing 0.35s ease,
		color 0.35s ease,
		background-color 0.35s ease;
}

.m306-gal__filter:last-child,
.m306-gal .m306-gal__filter:last-child,
.elementor .m306-gal__filter:last-child {
	border-right: none !important;
}

.m306-gal__filter:hover,
.m306-gal__filter:focus,
.m306-gal__filter:focus-visible,
.m306-gal__filter.is-active,
.m306-gal .m306-gal__filter:hover,
.m306-gal .m306-gal__filter.is-active,
.elementor .m306-gal__filter:hover,
.elementor .m306-gal__filter.is-active {
	background: #ffffff !important;
	color: #182220 !important;
	border-color: var(--m306-gal-border) !important;
	border-right-color: var(--m306-gal-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--m306-gal-body-font);
	font-size: var(--m306-gal-filter-fs, 24px);
	font-weight: 500;
	letter-spacing: 0.06em;
}

.m306-gal__filter:last-child:hover,
.m306-gal__filter:last-child.is-active,
.m306-gal .m306-gal__filter:last-child:hover,
.m306-gal .m306-gal__filter:last-child.is-active,
.elementor .m306-gal__filter:last-child:hover,
.elementor .m306-gal__filter:last-child.is-active {
	border-right: none !important;
}

.m306-gal__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--m306-gal-gap);
	width: 100%;
	max-width: none;
	margin: 0;
}

.m306-gal__card {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: #ececec;
}

.m306-gal__card[hidden] {
	display: none !important;
}

.m306-gal__media {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.m306-gal__media img,
.m306-gal .m306-gal__media img,
.elementor .m306-gal__media img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center !important;
	transition: transform 0.45s ease;
}

.m306-gal__hover {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(18px, 3vw, 36px);
	background: var(--m306-gal-overlay);
	color: var(--m306-gal-ink);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.m306-gal__card:hover .m306-gal__hover,
.m306-gal__card:focus-visible .m306-gal__hover,
.m306-gal__card.is-hover .m306-gal__hover {
	opacity: 1;
	visibility: visible;
}

.m306-gal__card:hover .m306-gal__media img,
.m306-gal__card:focus-visible .m306-gal__media img {
	transform: scale(1.04);
}

.m306-gal__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin: 0 0 18px;
}

.m306-gal__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--m306-gal-body-font);
	font-size: 12px;
	font-weight: 300;
	line-height: 1.3;
	color: var(--m306-gal-ink);
}

.m306-gal__meta-icon {
	display: inline-flex;
	line-height: 0;
	color: var(--m306-gal-ink);
}

.m306-gal__title {
	margin: 0 0 12px;
	font-family: var(--m306-gal-title-font);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: 0.2em;
	line-height: 1.15;
	text-transform: uppercase;
	color: #182220;
}

.m306-gal__desc {
	margin: 0;
	font-family: var(--m306-gal-body-font);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	color: #182220;
	max-width: 36rem;
}

.m306-gal__more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.m306-gal__more,
.m306-gal .m306-gal__more,
.elementor .m306-gal__more {
	appearance: none;
	-webkit-appearance: none;
	border: none !important;
	border-radius: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 8px 12px !important;
	cursor: pointer;
	font-family: 'Fahkwang', 'Times New Roman', serif !important;
	font-size: 18px !important;
	font-weight: 300 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #182220 !important;
	opacity: 1;
	transition: none;
}

.m306-gal__more:hover,
.m306-gal__more:focus,
.m306-gal__more:focus-visible,
.m306-gal__more:active,
.m306-gal .m306-gal__more:hover,
.m306-gal .m306-gal__more:focus,
.elementor .m306-gal__more:hover,
.elementor .m306-gal__more:focus {
	opacity: 1 !important;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	color: #182220 !important;
	text-decoration: none;
	box-shadow: none !important;
	transform: none;
}

.m306-gal__more[hidden] {
	display: none !important;
}

@media (max-width: 900px) {
	.m306-gal__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.m306-gal__title {
		font-size: 22px;
	}

	.m306-gal__desc {
		font-size: 15px;
	}
}

@media (max-width: 720px) {
	.m306-gal__filters {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		touch-action: pan-x;
		cursor: grab;
		width: 100%;
		max-width: 100%;
	}

	.m306-gal__filters::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.m306-gal__filters:active {
		cursor: grabbing;
	}

	.m306-gal__filter,
	.m306-gal .m306-gal__filter,
	.elementor .m306-gal__filter {
		flex: 0 0 auto;
		white-space: nowrap;
		min-width: max-content;
		padding: 14px 22px;
		border-right: 1px solid var(--m306-gal-border) !important;
		border-bottom: none !important;
	}

	.m306-gal__filter:last-child,
	.m306-gal .m306-gal__filter:last-child,
	.elementor .m306-gal__filter:last-child {
		border-right: none !important;
		border-bottom: none !important;
	}

	/* Photos flush with the screen edges */
	.m306-gal__grid,
	.elementor .m306-gal__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: 0 !important;
	}
}