/* O'Brien's Grove — front-end masonry gallery + Load More */

.og-gallery-wrap {
	--og-columns: 3;
	--og-gap: 24px;
}

/* Grid masonry — row-wise order (1-2-3 across the top), JS sets row spans */
.og-gallery {
	display: grid;
	grid-template-columns: repeat( var( --og-columns ), 1fr );
	grid-auto-rows: 1px;   /* fine unit; JS spans rows per image height */
	column-gap: var( --og-gap );
	row-gap: 0;            /* vertical spacing is baked into each item's span */
}

.og-gallery__item {
	display: block;
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
	line-height: 0;
	grid-row-end: span 1; /* placeholder until JS measures */
}

.og-gallery__img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.4s ease;
}

.og-gallery__item:hover .og-gallery__img {
	transform: scale( 1.04 );
}

.og-gallery__item.is-hidden {
	display: none;
}

/* Reveal animation for items shown via Load More */
.og-gallery__item.og-reveal {
	animation: ogFadeUp 0.55s cubic-bezier( 0.22, 0.61, 0.36, 1 ) both;
}

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

@media ( prefers-reduced-motion: reduce ) {
	.og-gallery__item.og-reveal {
		animation: none;
	}
}

/* If JS is off, reveal everything so nothing is lost. */
.no-js .og-gallery__item.is-hidden {
	display: block;
}

/* Load More button — matches the Figma dark-green pill */
.og-gallery__more {
	text-align: center;
	margin-top: 40px;
}

.og-loadmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: #fff !important;
	background: #1f3d1f !important; /* deep green — adjust to brand token if needed */
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: none;
	transition: background 0.2s ease, transform 0.1s ease;
}

/* Pin the green across every state so theme/Elementor globals can't recolor it. */
.og-loadmore:hover,
.og-loadmore:focus,
.og-loadmore:focus-visible,
.og-loadmore:active {
	color: #fff !important;
	background: #2c5530 !important;
	outline: none;
}

.og-loadmore:active {
	transform: translateY( 1px );
}

.og-loadmore.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

.og-loadmore__icon {
	flex: none;
	width: 20px;
	height: 20px;
}

/* Elementor lightbox: make the prev/next arrows visible (covers <i> and <svg> icons) */
.elementor-lightbox {
	--lightbox-navigation-icons-size: 44px;
}

.elementor-lightbox .elementor-swiper-button.elementor-swiper-button-prev,
.elementor-lightbox .elementor-swiper-button.elementor-swiper-button-next {
	/* Position them ourselves — e-swiper.css (which normally does this) isn't
	   loaded on a page with no Swiper widget, so the buttons would otherwise
	   fall to the bottom of the document, off-screen. */
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	height: 100% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	opacity: 1 !important;
	visibility: visible !important;
	font-size: 44px !important;
	color: #fff !important;
	cursor: pointer;
	z-index: 30;
}

.elementor-lightbox .elementor-swiper-button.elementor-swiper-button-prev {
	left: 0 !important;
	right: auto !important;
}

.elementor-lightbox .elementor-swiper-button.elementor-swiper-button-next {
	right: 0 !important;
	left: auto !important;
}

/* Draw our own chevrons (no dependency on Elementor's SVG sprite / icon font) */
.elementor-lightbox .elementor-swiper-button svg,
.elementor-lightbox .elementor-swiper-button i {
	display: none !important;
}

.elementor-lightbox .elementor-swiper-button-prev::before,
.elementor-lightbox .elementor-swiper-button-next::before {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
	filter: drop-shadow( 0 1px 3px rgba( 0, 0, 0, 0.6 ) );
	transition: opacity 0.2s ease;
}

/* Push the chevrons to the screen edges (like the old site) */
.elementor-lightbox .elementor-swiper-button-prev {
	justify-content: flex-start !important;
	padding-left: 34px;
}

.elementor-lightbox .elementor-swiper-button-next {
	justify-content: flex-end !important;
	padding-right: 34px;
}

.elementor-lightbox .elementor-swiper-button-prev::before {
	transform: rotate( -135deg ); /* points left  < */
}

.elementor-lightbox .elementor-swiper-button-next::before {
	transform: rotate( 45deg );   /* points right > */
}

.elementor-lightbox .elementor-swiper-button:hover::before {
	opacity: 0.7;
}

.elementor-lightbox .elementor-swiper-button.swiper-button-disabled {
	opacity: 0.35 !important;
}

/* Responsive columns */
@media ( max-width: 1024px ) {
	.og-gallery {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 600px ) {
	.og-gallery {
		grid-template-columns: repeat( 1, 1fr );
	}
}