/* === Gallery Widget Layout === */

/* Grid Layout */
.tpx-gallery-grid {
	display: grid;
	grid-template-columns: repeat(var(--columns, 4), 1fr);
	gap: var(--vgap, 10px) var(--hgap, 10px);
}

/* Masonry Layout */
.tpx-gallery-masonry {
	columns: var(--columns, 4);
	column-gap: var(--hgap, 10px);
}

.tpx-gallery-masonry .e-gallery-item {
	break-inside: avoid;
	margin-bottom: var(--vgap, 10px);
}

/* Justified Layout */
.tpx-gallery-justified {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vgap, 10px) var(--hgap, 10px);
}

.tpx-gallery-justified .e-gallery-item {
	flex-grow: 1;
	height: var(--row-height, 200px);
	min-width: 150px;
}

.tpx-gallery-justified .e-gallery-image {
	height: 100%;
	padding-top: 0 !important;
}

/* === Gallery Items === */
.elementor-gallery__container {
	min-height: 1px;
}

.e-gallery-item.elementor-gallery-item {
	position: relative;
	overflow: hidden;
	display: block;
	text-decoration: none;
	border: solid var(--image-border-width, 0) var(--image-border-color, transparent);
	border-radius: var(--image-border-radius, 0);
	transition: all 0.3s ease;
}

/* Image box: holds the ratio and the skeleton; the <img> fills it.
   Scoped to this widget: Elementor's own Gallery widget reuses `.e-gallery-image`,
   and a skeleton behind its images would be a visible regression on any page
   carrying both widgets. */
.elementor-widget-gallery-widget .e-gallery-image.elementor-gallery-item__image {
	position: relative;
	width: 100%;
	overflow: hidden;
	transition-duration: var(--image-transition-duration, 400ms);
	transition-property: filter, transform;

	/* Skeleton. Sits under the image and is simply covered once it paints, so
	   there is no state to clear and nothing to go wrong if JS never runs. */
	background-color: var(--tpx-skeleton-base, #e9eaec);
	background-image: linear-gradient(
		100deg,
		var(--tpx-skeleton-base, #e9eaec) 30%,
		var(--tpx-skeleton-sheen, #f4f5f6) 50%,
		var(--tpx-skeleton-base, #e9eaec) 70%
	);
	background-size: 300% 100%;
	animation: tpx-gallery-skeleton 1.4s ease-in-out infinite;
}

/* Beats Elementor's `.elementor img { height: auto }` (specificity 0,1,1) on
   class count, without resorting to !important. Without it every tile renders
   at the image's natural ratio instead of the cell's. */
.elementor-widget-gallery-widget .e-gallery-image > .e-gallery-image__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* No opacity gate here on purpose. An <img> with no data yet paints nothing,
	   so the skeleton behind it shows through and is covered the moment pixels
	   arrive -- with no JS involved. Gating this on a class would leave every
	   lazy image invisible on any page where the script fails to run. */
}

/* Once loaded, stop animating. An infinite gradient under every tile of a
   100-image gallery is real compositor cost for something nobody can see.
   Purely an optimisation: if the script never runs, the animation is simply
   hidden behind an opaque photograph. */
.elementor-widget-gallery-widget .e-gallery-image.is-loaded {
	animation: none;
	background-image: none;
	background-color: transparent;
}

@keyframes tpx-gallery-skeleton {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

/* Grid: fixed aspect ratio */
.tpx-gallery-grid .e-gallery-image {
	padding-top: var(--aspect-ratio, 66.67%);
}

/* Justified rows size by height, so the ratio box must not also claim height. */
.tpx-gallery-justified .e-gallery-image {
	padding-top: 0;
}

/* Masonry: per-item natural ratio */
.tpx-gallery-masonry .e-gallery-image {
	padding-top: var(--item-ratio, 75%);
}

/* === Overlay === */
.elementor-gallery-item__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: var(--overlay-mix-blend-mode, normal);
	transition-duration: var(--overlay-transition-duration, 400ms);
	transition-property: mix-blend-mode, transform, opacity, background-color;
}

/* === Content (title + description) === */
.elementor-gallery-item__content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: var(--content-justify-content, center);
	align-items: center;
	text-align: var(--content-text-align, center);
	padding: var(--content-padding, 20px);
}

.elementor-gallery-item__content > div {
	transition-duration: var(--content-transition-duration, 400ms);
}

.elementor-gallery-item__content.elementor-gallery--sequenced-animation > div:nth-child(2) {
	transition-delay: calc(var(--content-transition-delay, 400ms) / 3);
}

.elementor-gallery-item__content.elementor-gallery--sequenced-animation > div:nth-child(3) {
	transition-delay: calc(var(--content-transition-delay, 400ms) / 3 * 2);
}

.elementor-gallery-item__title {
	color: var(--title-text-color, #fff);
	font-weight: 700;
	width: 100%;
}

.elementor-gallery-item__description {
	color: var(--description-text-color, #fff);
	width: 100%;
}

.elementor-gallery-item__title + .elementor-gallery-item__description {
	margin-top: var(--description-margin-top, 0);
}

/* === Hover animations === */
.e-gallery-item.elementor-animated-content .elementor-gallery-item__overlay,
.e-gallery-item.elementor-animated-content .elementor-gallery-item__content,
.e-gallery-item.elementor-animated-content .elementor-gallery-item__content > div {
	opacity: 0;
}

.e-gallery-item:hover .elementor-gallery-item__overlay,
.e-gallery-item:focus .elementor-gallery-item__overlay,
.e-gallery-item:hover .elementor-gallery-item__content,
.e-gallery-item:focus .elementor-gallery-item__content,
.e-gallery-item:hover .elementor-gallery-item__content > div,
.e-gallery-item:focus .elementor-gallery-item__content > div {
	opacity: 1;
}

/* Image hover animations */
.e-gallery-item:hover .elementor-animated-item--grow,
.e-gallery-item:focus .elementor-animated-item--grow {
	transform: scale(1.1);
}

.e-gallery-item:hover .elementor-animated-item--shrink-contained,
.e-gallery-item:focus .elementor-animated-item--shrink-contained {
	transform: scale(0.9);
}

.e-gallery-item:hover .elementor-animated-item--move-contained-left,
.e-gallery-item:focus .elementor-animated-item--move-contained-left {
	transform: translateX(-5%);
}

.e-gallery-item:hover .elementor-animated-item--move-contained-right,
.e-gallery-item:focus .elementor-animated-item--move-contained-right {
	transform: translateX(5%);
}

.e-gallery-item:hover .elementor-animated-item--move-contained-top,
.e-gallery-item:focus .elementor-animated-item--move-contained-top {
	transform: translateY(-5%);
}

.e-gallery-item:hover .elementor-animated-item--move-contained-bottom,
.e-gallery-item:focus .elementor-animated-item--move-contained-bottom {
	transform: translateY(5%);
}

/* Content hover animations - entrance */
.elementor-animated-item--enter-from-right { transform: translateX(30px); }
.elementor-animated-item--enter-from-left { transform: translateX(-30px); }
.elementor-animated-item--enter-from-top { transform: translateY(-30px); }
.elementor-animated-item--enter-from-bottom { transform: translateY(30px); }
.elementor-animated-item--enter-zoom-in { transform: scale(0.5); }
.elementor-animated-item--enter-zoom-out { transform: scale(1.5); }
.elementor-animated-item--fade-in { opacity: 0; }

.e-gallery-item:hover .elementor-animated-item--enter-from-right,
.e-gallery-item:hover .elementor-animated-item--enter-from-left,
.e-gallery-item:hover .elementor-animated-item--enter-from-top,
.e-gallery-item:hover .elementor-animated-item--enter-from-bottom,
.e-gallery-item:hover .elementor-animated-item--enter-zoom-in,
.e-gallery-item:hover .elementor-animated-item--enter-zoom-out,
.e-gallery-item:focus .elementor-animated-item--enter-from-right,
.e-gallery-item:focus .elementor-animated-item--enter-from-left,
.e-gallery-item:focus .elementor-animated-item--enter-from-top,
.e-gallery-item:focus .elementor-animated-item--enter-from-bottom,
.e-gallery-item:focus .elementor-animated-item--enter-zoom-in,
.e-gallery-item:focus .elementor-animated-item--enter-zoom-out {
	transform: none;
}

.e-gallery-item:hover .elementor-animated-item--fade-in,
.e-gallery-item:focus .elementor-animated-item--fade-in {
	opacity: 1;
}

/* Overlay entrance/exit animations */
.elementor-animated-item--enter-from-right,
.elementor-animated-item--exit-to-left { transform: translateX(100%); }
.elementor-animated-item--enter-from-left,
.elementor-animated-item--exit-to-right { transform: translateX(-100%); }
.elementor-animated-item--enter-from-top,
.elementor-animated-item--exit-to-bottom { transform: translateY(-100%); }
.elementor-animated-item--enter-from-bottom,
.elementor-animated-item--exit-to-top { transform: translateY(100%); }

/* === Filter Bar / Tabs === */
.elementor-gallery__titles-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--titles-container-justify-content, center);
	margin-bottom: 20px;
	gap: 6px;
}

a.elementor-item.elementor-gallery-title {
	cursor: pointer;
	color: var(--galleries-title-color-normal, #820606);
	font-weight: 500;
	position: relative;
	padding: 8px 20px;
	transition: color 0.3s, background-color 0.3s, box-shadow 0.3s;
	text-decoration: none;
	--space-between: 8px;
	border-radius: 4px;
	background-color: var(--gallery-title-bg-normal, #f3f4f6);
	user-select: none;
}

a.elementor-item.elementor-gallery-title:not(:last-child) {
	margin-inline-end: var(--space-between, 8px);
}

a.elementor-item.elementor-gallery-title:hover,
a.elementor-item.elementor-gallery-title:focus {
	color: var(--galleries-title-color-hover, #820606);
	background-color: var(--gallery-title-bg-hover, #e5e7eb);
}

a.elementor-item.elementor-gallery-title.elementor-item-active {
	color: var(--gallery-title-color-active, #ffffff);
	background-color: var(--gallery-title-bg-active, #820606);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	/* Weight, not colour alone, marks the current tab -- the bg difference is
	   invisible to anyone who cannot separate these two blues. */
	font-weight: 700;
}

/* Keyboard users get a ring the pointer never shows. */
a.elementor-item.elementor-gallery-title:focus-visible {
	outline: 2px solid var(--gallery-title-bg-active, #820606);
	outline-offset: 2px;
}

/* Pointer: underline */
.elementor-gallery__titles-container:not(.e--pointer-framed) .elementor-item:after,
.elementor-gallery__titles-container:not(.e--pointer-framed) .elementor-item:before {
	background-color: var(--galleries-pointer-bg-color-hover);
}

.elementor-gallery__titles-container:not(.e--pointer-framed) .elementor-item.elementor-item-active:after,
.elementor-gallery__titles-container:not(.e--pointer-framed) .elementor-item.elementor-item-active:before {
	background-color: var(--galleries-pointer-bg-color-active);
}

/* Pointer: framed */
.elementor-gallery__titles-container.e--pointer-framed .elementor-item:before {
	border-color: var(--galleries-pointer-bg-color-hover);
	border-width: var(--galleries-pointer-border-width, 3px);
}

.elementor-gallery__titles-container.e--pointer-framed .elementor-item.elementor-item-active:before,
.elementor-gallery__titles-container.e--pointer-framed .elementor-item.elementor-item-active:after {
	border-color: var(--galleries-pointer-bg-color-active);
}

/* Pointer line heights */
.elementor-gallery__titles-container .e--pointer-underline .elementor-item:after,
.elementor-gallery__titles-container .e--pointer-overline .elementor-item:before,
.elementor-gallery__titles-container .e--pointer-double-line .elementor-item:before,
.elementor-gallery__titles-container .e--pointer-double-line .elementor-item:after {
	height: var(--galleries-pointer-border-width, 3px);
}

/* === Tab transition animation === */
.elementor-gallery__container {
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.elementor-gallery__container.tpx-gallery-fade-out {
	opacity: 0;
	transform: translateY(10px);
}

.elementor-gallery__container.tpx-gallery-fade-in {
	opacity: 1;
	transform: translateY(0);
}

/* === Filtering (show/hide) === */
.e-gallery-item.tpx-gallery-hidden {
	display: none;
}

/* === Single mode hover overlay === */
.e-gallery-item .elementor-gallery-item__single-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--tpx-single-overlay-idle, rgba(18, 6, 6, 0));
	opacity: 0 !important;
	transition: opacity 0.3s ease, background-color 0.3s ease;
	z-index: 999;
	pointer-events: none;
}

.e-gallery-item.elementor-gallery-item--single-mode:hover .elementor-gallery-item__single-overlay,
.e-gallery-item.elementor-gallery-item--single-mode:focus-visible .elementor-gallery-item__single-overlay {
	background-color: var(--tpx-single-overlay, rgba(18, 6, 6, 0.72));
	opacity: 1 !important;
	pointer-events: auto;
}

.e-gallery-item.elementor-gallery-item--single-mode:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

/* A finger has no hover to give. The post name is the only thing saying where
   the tile goes, so on touch it is shown outright, anchored to the bottom
   rather than covering the photograph. */
@media (hover: none) {
	.e-gallery-item .elementor-gallery-item__single-overlay {
		opacity: 1 !important;
		align-items: flex-end;
		background-image: linear-gradient(to top, var(--tpx-single-overlay, rgba(18, 6, 6, 0.82)) 0%, var(--tpx-single-overlay-idle, rgba(18, 6, 6, 0)) 60%);
		pointer-events: none;
	}

	.elementor-gallery-item__single-name {
		font-size: 14px;
		padding: 12px;
	}
}

.elementor-gallery-item__single-name {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	padding: 20px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	max-width: 100%;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-word;
	box-sizing: border-box;
}

/* === Container widget support === */
.e-con-inner > .elementor-widget-gallery-widget,
.e-con > .elementor-widget-gallery-widget {
	width: var(--container-widget-width);
	--flex-grow: var(--container-widget-flex-grow);
}

/* === Reduced motion === */
/* Movement, delay and transition go; the state changes still happen, at once.
   The tab handler reads this same preference so its 300ms stagger collapses
   too -- CSS alone would leave the container invisible for that window. */
@media (prefers-reduced-motion: reduce) {
	.elementor-gallery__container,
	.e-gallery-item.elementor-gallery-item,
	.e-gallery-image.elementor-gallery-item__image,
	.elementor-gallery-item__overlay,
	.elementor-gallery-item__content > div,
	.elementor-gallery-item__single-overlay,
	a.elementor-item.elementor-gallery-title {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}

	.elementor-gallery__container.tpx-gallery-fade-out {
		opacity: 1;
		transform: none;
	}

	.e-gallery-item:hover .elementor-animated-item--grow,
	.e-gallery-item:focus .elementor-animated-item--grow,
	.e-gallery-item:hover .elementor-animated-item--shrink-contained,
	.e-gallery-item:focus .elementor-animated-item--shrink-contained {
		transform: none;
	}
}

/* === Editor-only empty notice === */
.tpx-gallery-editor-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 20px;
	border: 1px dashed #c3c4c7;
	border-radius: 4px;
	color: #50575e;
	font-size: 13px;
	line-height: 1.5;
}

.tpx-gallery-editor-notice .elementor-widget-empty-icon {
	font-size: 22px;
	flex-shrink: 0;
}