/*!
 * Village Gallery for Elementor — v0.9.1
 * Layouts: grid · masonry · spotlight · strip
 *
 * Colourways are defined with :where() (zero specificity) so anything set
 * in the Elementor Style tab always wins without !important.
 */

/* ---------------------------------------------------------------
 * 1. Tokens & colourways
 * ------------------------------------------------------------- */
:where(.vg) {
	--vg-cols: 4;
	--vg-gap: 16px;
	--vg-ratio: 1.3333;
	--vg-pos: center center;
	--vg-fc: 2;
	--vg-fr: 2;
	--vg-radius: 4px;
	--vg-mat: 0px;
	--vg-cap-h: 5rem;
	--vg-cap-space: 0px;
	--vg-cap-align: left;
	--vg-strip-h: 440px;
	--vg-strip-scale: 0.86;
	--vg-label-radius: 2px;
	--vg-ease: cubic-bezier(.2, .7, .2, 1);

	/* Clean White — Blue (default) */
	--vg-bg: #ffffff;
	--vg-pad: 0px;
	--vg-tile: #f2f4f8;
	--vg-line: #e4e7ef;
	--vg-text: #1c244b;
	--vg-muted: #6b7286;
	--vg-accent: #294aa1;
	--vg-accent-text: #ffffff;
	--vg-overlay: rgba(28, 36, 75, .78);
	--vg-on-img: #ffffff;
	--vg-card: #ffffff;
	--vg-card-text: #1c244b;
	--vg-card-muted: #6b7286;
	--vg-card-accent: var(--vg-accent);
	--vg-shadow: rgba(28, 36, 75, .14);
}

:where(.vg-scheme-white-pink) {
	--vg-accent: #fd4ebe;
	--vg-overlay: rgba(28, 36, 75, .74);
}

:where(.vg-scheme-navy) {
	--vg-bg: #1c244b;
	--vg-pad: clamp(20px, 4vw, 56px);
	--vg-tile: #27315e;
	--vg-line: rgba(255, 255, 255, .16);
	--vg-text: #ffffff;
	--vg-muted: rgba(255, 255, 255, .7);
	--vg-accent: #fd4ebe;
	--vg-accent-text: #ffffff;
	--vg-overlay: rgba(15, 32, 66, .82);
	--vg-card: #ffffff;
	--vg-card-text: #1c244b;
	--vg-card-muted: #6b7286;
	--vg-shadow: rgba(0, 0, 0, .35);
}

:where(.vg-scheme-blue) {
	--vg-bg: #294aa1;
	--vg-pad: clamp(20px, 4vw, 56px);
	--vg-tile: #3456b0;
	--vg-line: rgba(255, 255, 255, .2);
	--vg-text: #ffffff;
	--vg-muted: rgba(255, 255, 255, .75);
	--vg-accent: #ffe817;
	--vg-accent-text: #1c244b;
	--vg-card-accent: #fd4ebe;
	--vg-overlay: rgba(28, 36, 75, .8);
	--vg-card: #ffffff;
	--vg-card-text: #1c244b;
	--vg-card-muted: #6b7286;
	--vg-shadow: rgba(15, 32, 66, .35);
}

:where(.vg-scheme-pink) {
	--vg-bg: #fd4ebe;
	--vg-pad: clamp(20px, 4vw, 56px);
	--vg-tile: #fe7fd0;
	--vg-line: rgba(255, 255, 255, .45);
	--vg-text: #ffffff;
	--vg-muted: rgba(255, 255, 255, .88);
	--vg-accent: #ffe817;
	--vg-accent-text: #1c244b;
	--vg-card-accent: #fd4ebe;
	--vg-overlay: rgba(28, 36, 75, .78);
	--vg-card: #ffffff;
	--vg-card-text: #1c244b;
	--vg-card-muted: #6b7286;
	--vg-shadow: rgba(120, 10, 80, .28);
}

:where(.vg-scheme-sky) {
	--vg-bg: #66d3ff;
	--vg-pad: clamp(20px, 4vw, 56px);
	--vg-tile: #8fdfff;
	--vg-line: rgba(28, 36, 75, .16);
	--vg-text: #1c244b;
	--vg-muted: rgba(28, 36, 75, .72);
	--vg-accent: #fd4ebe;
	--vg-accent-text: #ffffff;
	--vg-overlay: rgba(28, 36, 75, .78);
	--vg-card: #ffffff;
	--vg-card-text: #1c244b;
	--vg-card-muted: #6b7286;
	--vg-shadow: rgba(15, 32, 66, .2);
}

:where(.vg-scheme-sunshine) {
	--vg-bg: #ffe817;
	--vg-pad: clamp(20px, 4vw, 56px);
	--vg-tile: #fff07a;
	--vg-line: rgba(41, 74, 161, .2);
	--vg-text: #294aa1;
	--vg-muted: rgba(28, 36, 75, .72);
	--vg-accent: #fd4ebe;
	--vg-accent-text: #ffffff;
	--vg-overlay: rgba(41, 74, 161, .8);
	--vg-card: #ffffff;
	--vg-card-text: #1c244b;
	--vg-card-muted: #6b7286;
	--vg-shadow: rgba(120, 100, 0, .22);
}

/* .vg-scheme-custom uses the white base; set colours in the Style tab. */

/* ---------------------------------------------------------------
 * 2. Shell
 * ------------------------------------------------------------- */
/* A gallery has no natural width, so inside a flex Container whose items are
   centred or start-aligned it would collapse to nothing. Fill the row by
   default; Elementor's own Advanced > Width setting still takes priority. */
.elementor-widget.elementor-widget-vg-gallery {
	width: var(--container-widget-width, 100%);
	max-width: 100%;
	min-width: 0;
	align-self: var(--align-self, stretch);
}

.vg {
	position: relative;
	container-type: inline-size;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	color: var(--vg-text);
}

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

.vg.vg-panel {
	background: var(--vg-bg);
	padding: var(--vg-pad);
}

.vg-stage {
	position: relative;
}

.vg-track {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-item {
	position: relative;
	margin: 0;
	min-width: 0;
	border-radius: var(--vg-radius);
}

.vg-media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--vg-radius);
	background: var(--vg-tile);
	color: inherit;
	text-decoration: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

a.vg-media {
	cursor: zoom-in;
}

a.vg-media:not([data-elementor-open-lightbox]) {
	cursor: pointer;
}

a.vg-media:focus-visible {
	box-shadow: 0 0 0 2px var(--vg-bg), 0 0 0 4px var(--vg-accent);
}

.vg-img {
	display: block;
	max-width: none;
	border: 0;
	border-radius: 0 !important; /* themes often round every img */
	box-shadow: none !important;
	transition: transform .8s var(--vg-ease), filter .5s ease, opacity .4s ease;
}

.vg-empty {
	padding: 2.5rem 1rem;
	text-align: center;
	border: 1px dashed #c7cbd6;
	color: #6b7286;
	font-size: .9rem;
}

/* ---------------------------------------------------------------
 * 3. Grid & Spotlight — even tiles, rows sized from container width
 * ------------------------------------------------------------- */
.vg--grid,
.vg--spotlight {
	--vg-colw: calc((100cqw - (var(--vg-cols) - 1) * var(--vg-gap)) / var(--vg-cols));
}

.vg--grid.vg-cap--below,
.vg--spotlight.vg-cap--below {
	--vg-cap-space: var(--vg-cap-h);
}

.vg--grid .vg-track,
.vg--spotlight .vg-track {
	display: grid;
	grid-template-columns: repeat(var(--vg-cols), minmax(0, 1fr));
	grid-auto-rows: calc(var(--vg-colw) / var(--vg-ratio) + var(--vg-cap-space) + 2 * var(--vg-mat));
	grid-auto-flow: row dense;
	gap: var(--vg-gap);
}

.vg--grid .vg-item,
.vg--spotlight .vg-item {
	display: flex;
	flex-direction: column;
}

.vg--grid .vg-media,
.vg--spotlight .vg-media {
	flex: 1 1 auto;
	min-height: 0;
}

.vg--grid .vg-img,
.vg--spotlight .vg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--vg-pos);
}

.vg--grid .is-featured,
.vg--spotlight .is-featured {
	grid-column: span var(--vg-fc-eff, var(--vg-fc));
	grid-row: span var(--vg-fr);
}

.vg--spotlight .is-spot {
	grid-column: 1 / span var(--vg-fc-eff, var(--vg-fc));
	grid-row: 1 / span var(--vg-fr);
}

.vg--spotlight.vg-spot-right .is-spot {
	grid-column: span var(--vg-fc-eff, var(--vg-fc)) / -1;
}

/* ---------------------------------------------------------------
 * 4. Masonry — natural photo shapes
 *    JS sets each item's row span; without JS it falls back to a tidy grid.
 * ------------------------------------------------------------- */
.vg--masonry .vg-track {
	display: grid;
	grid-template-columns: repeat(var(--vg-cols), minmax(0, 1fr));
	grid-auto-flow: row dense;
	column-gap: var(--vg-gap);
	row-gap: var(--vg-gap);
	align-items: start;
}

.vg--masonry.vg-mason-on .vg-track {
	grid-auto-rows: 2px;
	row-gap: 0;
}

.vg--masonry .vg-item {
	align-self: start;
}

.vg--masonry .is-featured {
	grid-column: span var(--vg-fc-eff, var(--vg-fc));
}

.vg--masonry .vg-img {
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------
 * 5. Strip — horizontal scroll, featured photos stand slightly taller
 * ------------------------------------------------------------- */
.vg--strip .vg-track {
	display: flex;
	align-items: center;
	gap: var(--vg-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 10px;
	scrollbar-width: thin;
	scrollbar-color: var(--vg-accent) transparent;
	outline: none;
}

.vg--strip .vg-track:focus-visible {
	box-shadow: 0 0 0 2px var(--vg-accent);
}

.vg--strip .vg-track::-webkit-scrollbar {
	height: 4px;
}

.vg--strip .vg-track::-webkit-scrollbar-thumb {
	background: var(--vg-accent);
	border-radius: 4px;
}

.vg--strip .vg-item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.vg--strip .vg-img {
	height: calc(var(--vg-strip-h) * var(--vg-strip-scale));
	width: auto;
	max-width: 86cqw; /* very wide photos never fill the whole screen on mobile */
	object-fit: cover;
	object-position: var(--vg-pos);
}

.vg--strip .is-featured .vg-img {
	height: var(--vg-strip-h);
}

.vg--strip .vg-cap {
	width: 0;
	min-width: 100%;
}

.vg-arrow {
	position: absolute;
	top: calc(50% - 5px);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vg-card);
	color: var(--vg-card-text);
	box-shadow: 0 6px 20px var(--vg-shadow);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color .25s ease, color .25s ease, opacity .25s ease, transform .25s ease;
}

.vg-cap--below .vg-arrow {
	top: calc(50% - var(--vg-cap-h) / 2);
}

.vg-arrow svg {
	width: 20px;
	height: 20px;
}

.vg-arrow--prev {
	left: 10px;
}

.vg-arrow--next {
	right: 10px;
}

.vg-arrow--next svg {
	transform: scaleX(-1);
}

.vg-arrow:hover,
.vg-arrow:focus-visible {
	background: var(--vg-accent);
	color: var(--vg-accent-text);
	outline: none;
}

.vg-arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* ---------------------------------------------------------------
 * 6. Frames
 * ------------------------------------------------------------- */
.vg-frame--line .vg-media::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--vg-line);
	border-radius: inherit;
	pointer-events: none;
}

.vg-frame--mat {
	--vg-mat: 10px;
}

.vg-frame--mat .vg-item {
	padding: var(--vg-mat);
	background: var(--vg-card);
	box-shadow: 0 1px 2px var(--vg-shadow), 0 8px 24px -12px var(--vg-shadow);
}

.vg-frame--mat .vg-media {
	border-radius: calc(var(--vg-radius) * .5);
}

/* ---------------------------------------------------------------
 * 7. Captions
 * ------------------------------------------------------------- */
.vg-cap {
	display: block;
	margin: 0;
	font-size: 1rem;
	text-align: var(--vg-cap-align);
	line-height: 1.35;
}

.vg-cap-title,
.vg-cap-sub {
	display: block;
	overflow-wrap: anywhere;
}

.vg-cap-title {
	font-size: .95em;
	font-weight: 600;
	letter-spacing: .005em;
}

.vg-cap-sub {
	margin-top: .2em;
	font-size: .8em;
	font-weight: 400;
	color: var(--vg-muted);
}

.vg-accent-bar:not(.vg-cap--label) .vg-cap::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 2px;
	margin-bottom: .5em;
	vertical-align: top;
	background: var(--vg-accent);
	border-radius: 2px;
}

.vg:not(.vg-cap--label) .is-featured .vg-cap {
	font-size: 1.08rem;
}

/* Below */
.vg-cap--below .vg-cap {
	padding: .8em .1em .1em;
	color: var(--vg-text);
}

.vg-cap--below.vg-frame--mat .vg-cap {
	padding: .8em .35em .2em;
	color: var(--vg-card-text);
}

.vg-cap--below.vg-frame--mat .vg-cap-sub {
	color: var(--vg-card-muted);
}

.vg-cap--below.vg-frame--mat.vg-accent-bar .vg-cap::before {
	background: var(--vg-card-accent);
}

.vg--grid.vg-cap--below .vg-cap,
.vg--spotlight.vg-cap--below .vg-cap {
	flex: 0 0 var(--vg-cap-h);
	height: var(--vg-cap-h);
	overflow: hidden;
}

.vg--grid.vg-cap--below .vg-cap-title,
.vg--grid.vg-cap--below .vg-cap-sub,
.vg--spotlight.vg-cap--below .vg-cap-title,
.vg--spotlight.vg-cap--below .vg-cap-sub {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Overlays (hover / always) */
.vg-cap--hover .vg-cap,
.vg-cap--overlay .vg-cap {
	position: absolute;
	left: var(--vg-mat);
	right: var(--vg-mat);
	bottom: var(--vg-mat);
	z-index: 2;
	padding: 3.5em 1.1em 1em;
	color: var(--vg-on-img);
	background: linear-gradient(to top, var(--vg-overlay) 0%, transparent 100%);
	border-radius: 0 0 var(--vg-radius) var(--vg-radius);
	pointer-events: none;
}

.vg-cap--hover .vg-cap-sub,
.vg-cap--overlay .vg-cap-sub {
	color: inherit;
	opacity: .85;
}

.vg-cap--hover .vg-cap {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .35s ease, transform .45s var(--vg-ease);
}

.vg-cap--hover .vg-item:hover .vg-cap,
.vg-cap--hover .vg-item:focus-within .vg-cap {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	.vg-cap--hover .vg-cap {
		opacity: 1;
		transform: none;
	}
}

/* Label tag — echoes the site's "View Trader" pills */
.vg-cap--label .vg-cap {
	position: absolute;
	left: calc(var(--vg-mat) + 12px);
	bottom: calc(var(--vg-mat) + 12px);
	z-index: 2;
	max-width: calc(100% - 2 * var(--vg-mat) - 24px);
	padding: .5em .95em;
	background: var(--vg-accent);
	color: var(--vg-accent-text);
	border-radius: var(--vg-label-radius);
	pointer-events: none;
	transition: transform .35s var(--vg-ease);
}

.vg-cap--label .vg-cap-title {
	font-size: .7em;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vg-cap--label .vg-item:hover .vg-cap {
	transform: translateY(-3px);
}

/* ---------------------------------------------------------------
 * 8. Hover effects
 * ------------------------------------------------------------- */
.vg-hover--zoom .vg-item:hover .vg-img,
.vg-hover--zoom .vg-item:focus-within .vg-img {
	transform: scale(1.045);
}

.vg-hover--lift .vg-item {
	transition: transform .45s var(--vg-ease), box-shadow .45s var(--vg-ease);
}

.vg-hover--lift .vg-item:hover,
.vg-hover--lift .vg-item:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px -18px var(--vg-shadow);
}

.vg-hover--focus .vg-media {
	transition: opacity .4s ease;
}

.vg-hover--focus .vg-track:hover .vg-item:not(:hover) .vg-media {
	opacity: .5;
}

.vg-hover--mono .vg-img {
	filter: grayscale(1);
}

.vg-hover--mono .vg-item:hover .vg-img,
.vg-hover--mono .vg-item:focus-within .vg-img {
	filter: grayscale(0);
}

/* ---------------------------------------------------------------
 * 9. Reveal on scroll (only once JS is running)
 * ------------------------------------------------------------- */
.vg-reveal.vg-ready .vg-item {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .7s ease, transform .8s var(--vg-ease), box-shadow .45s var(--vg-ease);
	transition-delay: calc(var(--vg-i, 0) * 55ms);
}

.vg-reveal.vg-ready .vg-item.is-in {
	opacity: 1;
	transform: none;
}

.vg-reveal.vg-ready .vg-item.is-settled {
	transition-delay: 0s;
}

.vg-reveal.vg-ready.vg-hover--lift .vg-item.is-settled:hover {
	transform: translateY(-4px);
}

/* ---------------------------------------------------------------
 * 10. Motion preferences
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.vg *,
	.vg *::before,
	.vg *::after {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}

	.vg-reveal.vg-ready .vg-item {
		opacity: 1;
		transform: none;
	}

	.vg-hover--zoom .vg-item:hover .vg-img,
	.vg-hover--lift .vg-item:hover {
		transform: none;
	}

	.vg--strip .vg-track {
		scroll-behavior: auto;
	}
}