/* AJAX Filter Gallery — Styles */

.ajg-wrapper {
	--ajg-cols: 3;
	--ajg-gap: 20px;
	width: 100%;
}

.ajg-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.ajg-eyebrow {
	font-size: 12px;
	letter-spacing: 2px;
	font-weight: 700;
	color: #b06a4f;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.ajg-title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 44px;
	font-weight: 400;
	color: #2c2420;
	margin: 0;
}

/* Filter tabs */
.ajg-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ajg-tab {
	background-color: transparent;
	border: 1px solid #ddd2c0;
	color: #6b6459;
	padding: 10px 18px;
	font-size: 11px;
	letter-spacing: 1px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	white-space: nowrap;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.ajg-tab:hover {
	background-color: #efe6d8;
}

.ajg-tab.active {
	background-color: #2c2420;
	border-color: #2c2420;
	color: #ffffff;
}

.ajg-tab:focus,
.ajg-tab:active,
.ajg-tab:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Grid */
.ajg-grid {
	display: grid;
	grid-template-columns: repeat(var(--ajg-cols), 1fr);
	gap: var(--ajg-gap);
}

.ajg-item {
	position: relative;
}

.ajg-item.ajg-hidden {
	display: none;
}

.ajg-item-media {
	position: relative;
	width: 100%;
	aspect-ratio: 4/5;
	overflow: hidden;
	background-color: #e8ddc9;
	cursor: pointer;
}

.ajg-image,
.ajg-image-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ajg-item:hover .ajg-image {
	transform: scale(1.07);
}

.ajg-image-placeholder {
	background: repeating-linear-gradient(45deg, #e8ddc9, #e8ddc9 10px, #ddcfb4 10px, #ddcfb4 20px);
}

/* Autoplay-in-grid video preview — fills the tile exactly like .ajg-image.
   !important is used defensively here: some WordPress themes automatically
   enhance every <video> tag on the page with the built-in MediaElement.js
   skin (adding a visible control bar and forcing the player back to its
   native pixel size via inline styles). These rules make sure our preview
   always fills and crops the tile regardless of that. */
.ajg-grid-video {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center;
	border: 0;
	pointer-events: none;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ajg-item:hover .ajg-grid-video {
	transform: scale(1.07);
}

/* A YouTube iframe can't be cropped with object-fit, so it's scaled up and
   centered instead to fill the tile without visible letterboxing. */
.ajg-grid-video-yt {
	width: 220% !important;
	height: 220% !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.ajg-item:hover .ajg-grid-video-yt {
	transform: translate(-50%, -50%) scale(1.07);
}

/* Defensive override for WordPress's default MediaElement.js video skin,
   in case the active theme auto-applies it site-wide. If it isn't present
   these selectors simply match nothing and have no effect. */
.ajg-item-media .mejs-container,
.ajg-item-media .mejs-inner,
.ajg-item-media .mejs-mediaelement {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
}

.ajg-item-media .mejs-controls,
.ajg-item-media .mejs-overlay-play,
.ajg-item-media .mejs-overlay-button,
.ajg-item-media .mejs-poster {
	display: none !important;
}

.ajg-item-overlay {
	position: absolute;
	inset: 0;
	background-color: #2c2420;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.ajg-item:hover .ajg-item-overlay {
	opacity: 0.45;
}

.ajg-item-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px;
	color: #ffffff;
	font-size: 14px;
	letter-spacing: 0.5px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 1;
}

.ajg-item:hover .ajg-item-caption {
	opacity: 1;
	transform: translateY(0);
}

/* Video items — always-visible play icon so it's clear it's a video */
.ajg-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.92);
	color: #2c2420;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
	pointer-events: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.ajg-play-icon svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	margin-left: 3px;
}

.ajg-item-video:hover .ajg-play-icon {
	transform: translate(-50%, -50%) scale(1.12);
	background-color: #ffffff;
}

/* Lightbox video playback */
.ajg-lb-video-wrap {
	max-width: 88vw;
	max-height: 74vh;
	width: 88vw;
	aspect-ratio: 16/9;
}

.ajg-lb-video-wrap video,
.ajg-lb-video-wrap iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

/* Entrance animation */
.ajg-wrapper[data-entrance="true"] .ajg-item {
	opacity: 0;
}

.ajg-wrapper[data-entrance="true"] .ajg-item.ajg-in-view {
	animation-name: ajgFadeUp;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	animation-fill-mode: forwards;
}

@keyframes ajgFadeUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Lightbox */
.ajg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	background-color: #14100c;
	--ajg-lb-opacity: 0.94;
}

.ajg-lightbox.ajg-lb-active {
	display: flex;
}

.ajg-lightbox::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: inherit;
	opacity: var(--ajg-lb-opacity);
	z-index: 0;
}

.ajg-lb-stage {
	position: relative;
	z-index: 1;
	max-width: 88vw;
	max-height: 82vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.ajg-lightbox.ajg-lb-active .ajg-lb-stage {
	opacity: 1;
	transform: scale(1);
}

.ajg-lb-image {
	max-width: 88vw;
	max-height: 74vh;
	object-fit: contain;
	display: block;
}

.ajg-lb-caption {
	margin-top: 16px;
	color: #e7ddd0;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-align: center;
}

.ajg-lb-close,
.ajg-lb-arrow {
	position: absolute;
	z-index: 2;
	background: transparent;
	border: 1px solid #ffffff;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.ajg-lb-close:focus, .ajg-lb-close:active,
.ajg-lb-arrow:focus, .ajg-lb-arrow:active {
	outline: none;
	box-shadow: none;
}

.ajg-lb-close {
	top: 24px;
	right: 24px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 16px;
}

.ajg-lb-arrow {
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border-radius: 50%;
	font-size: 22px;
}

.ajg-lb-prev { left: 24px; }
.ajg-lb-next { right: 24px; }

/* Responsive */
@media (max-width: 991px) {
	.ajg-wrapper { --ajg-cols: 2; }
	.ajg-title { font-size: 32px; }
}

@media (max-width: 600px) {
	.ajg-wrapper { --ajg-cols: 1; }
	.ajg-header { flex-direction: column; align-items: flex-start; }
	.ajg-lb-arrow { width: 38px; height: 38px; font-size: 18px; }
	.ajg-lb-prev { left: 10px; }
	.ajg-lb-next { right: 10px; }
}