/* Filterable Grid for Elementor
   Neutral defaults that inherit the theme's fonts and colours; every value below can be changed
   from the widget's Style tab (most through the --efg-* variables). */

.efg {
	--efg-cols: 4;
	--efg-gap: 10px;
	--efg-ratio: 7 / 4;
	--efg-zoom: 1.03;
	--efg-duration: 700ms;
	--efg-ease: cubic-bezier(.22, 1, .36, 1);
	--efg-indicator: currentColor;
	--efg-indicator-size: 1px;
}

/* ---------- Filter ---------- */
.efg__filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	column-gap: 18px;
	row-gap: 9px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}
.efg__filter li { margin: 0; padding: 0; }
.efg__btn {
	appearance: none;
	background: none;
	border: 0 solid transparent;
	color: inherit;
	font: inherit;
	line-height: 1.4;
	padding: 0 0 4px;
	cursor: pointer;
	position: relative;
	transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
.efg__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.efg__count { margin-left: .35em; font-size: .8em; opacity: .6; font-variant-numeric: tabular-nums; }

/* Active indicator: underline that grows in */
.efg--filter-underline .efg__btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--efg-indicator-size);
	background: var(--efg-indicator);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--efg-ease);
}
.efg--filter-underline .efg__btn:hover::after { transform: scaleX(.4); }
.efg--filter-underline .efg__btn.is-active::after { transform: scaleX(1); }
/* Pill */
/* Pill: a neutral tint works on light and dark sites; set exact colours in Style › Filter › Active. */
.efg--filter-pill .efg__btn { padding: .45em 1em; border-radius: 999px; border-width: 1px; border-color: rgba(127, 127, 127, .45); }
.efg--filter-pill .efg__btn:hover { border-color: currentColor; }
.efg--filter-pill .efg__btn.is-active { background-color: rgba(127, 127, 127, .22); border-color: currentColor; }
/* Colour only: dim the inactive ones */
.efg--filter-plain .efg__btn:not(.is-active) { opacity: .6; }
.efg--filter-plain .efg__btn:hover { opacity: 1; }

/* ---------- Grid ---------- */
.efg__grid {
	display: grid;
	grid-template-columns: repeat(var(--efg-cols), minmax(0, 1fr));
	gap: var(--efg-gap);
}
.efg--masonry .efg__grid { display: block; column-count: var(--efg-cols); column-gap: var(--efg-gap); }
.efg--masonry .efg__item { break-inside: avoid; margin-bottom: var(--efg-gap); }

.efg__item { min-width: 0; }
.efg__item.is-hidden { display: none; }
.efg__card { display: block; position: relative; overflow: hidden; color: inherit; text-decoration: none; height: 100%; }
.efg__card:hover, .efg__card:focus { color: inherit; }
.efg__media { position: relative; overflow: hidden; background-color: rgba(127, 127, 127, .12); }
.efg--grid .efg__media { aspect-ratio: var(--efg-ratio); }
.efg__media img { display: block; width: 100%; height: auto; transition: transform calc(var(--efg-duration) * 1.4) var(--efg-ease), filter .4s ease; }
.efg--grid .efg__media img { height: 100%; object-fit: cover; }
.efg__card:hover .efg__media img { transform: scale(var(--efg-zoom)); }

/* ---------- Text ---------- */
.efg__content { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 20px; --efg-align: center; }
.efg__title { margin: 0 0 6px; color: inherit; }
.efg__terms { font-size: .8em; opacity: .75; }
.efg__excerpt { margin: 8px 0 0; font-size: .9em; }

/* Over the image */
.efg--text-overlay-hover .efg__content,
.efg--text-overlay .efg__content { position: absolute; inset: 0; color: #212121; background-color: rgba(255, 255, 255, .9); }
.efg--text-overlay-hover .efg__content { opacity: 0; transition: opacity .3s ease; }
.efg--text-overlay-hover .efg__content > * { transform: translateY(12px); transition: transform .35s var(--efg-ease); }
.efg--text-overlay-hover .efg__content > *:nth-child(2) { transition-delay: .04s; }
.efg--text-overlay-hover .efg__card:hover .efg__content,
.efg--text-overlay-hover .efg__card:focus-visible .efg__content { opacity: 1; }
.efg--text-overlay-hover .efg__card:hover .efg__content > *,
.efg--text-overlay-hover .efg__card:focus-visible .efg__content > * { transform: none; }
/* Below the image */
.efg--text-below .efg__content { background-color: transparent; }

/* ---------- Footer bits ---------- */
.efg__more { margin-top: 14px; text-align: right; }
.efg__empty { margin: 1em 0; opacity: .7; }
.efg__empty[hidden] { display: none; }

/* ---------- Animation ----------
   .efg-anim is added by the script only when motion is allowed, so without JS everything is visible. */
.efg-anim .efg__item.efg-wait { opacity: 0; transform: translate3d(0, 30px, 0) scale(.96); filter: blur(6px); }
.efg-anim .efg__item {
	transition:
		opacity calc(var(--efg-duration) * 1.4) var(--efg-ease) var(--efg-delay, 0ms),
		transform calc(var(--efg-duration) * 1.8) var(--efg-ease) var(--efg-delay, 0ms),
		filter calc(var(--efg-duration) * 1.4) var(--efg-ease) var(--efg-delay, 0ms);
}
.efg-anim.efg-settle .efg__item.efg-wait .efg__media img { transform: scale(1.08); }
.efg-anim.efg-settle .efg__item .efg__media img { transition-delay: var(--efg-delay, 0ms); }

/* Filtering: items leaving fade (and shrink), items arriving grow back in. */
.efg--anim-fade .efg__item.efg-out,
.efg--anim-fade-scale .efg__item.efg-out { opacity: 0; transition: opacity calc(var(--efg-duration) * .4) ease, transform calc(var(--efg-duration) * .4) ease; }
.efg--anim-fade-scale .efg__item.efg-out { transform: scale(.94); }
.efg--anim-fade .efg__item.efg-in,
.efg--anim-fade-scale .efg__item.efg-in { animation: efg-in var(--efg-duration) var(--efg-ease) both; }
.efg--anim-fade .efg__item.efg-in { animation-name: efg-fade-in; }
@keyframes efg-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes efg-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.efg *, .efg *::after { transition: none !important; animation: none !important; }
}