/* Photo Collage — front end */
.pcol {
	--pcol-accent: var(--ast-global-color-0, var(--e-global-color-primary, var(--global-palette1, var(--wp--preset--color--primary, #26598c))));
	--pcol-gap: 24px;
	--pcol-gutter: 20px;
	--pcol-h: 720px;
	--pcol-ar: 1600 / 720;
	position: relative;
	width: 100%;
	max-width: 100%;
	/* No container-type here: inside Elementor flex containers it made the widget shorter than the collage on phones,
	   so the next section (e.g. reviews) was drawn over the photos. */
	container-type: normal !important;
	box-sizing: border-box;
}
.pcol *,
.pcol-lb * { box-sizing: border-box; }

/* Boxed: centred, never wider than the maximum width (plus side spacing). */
.pcol.pcol--boxed {
	width: 100%;
	max-width: calc(var(--pcol-maxw, 1200px) + 2 * var(--pcol-gutter));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pcol-gutter);
	padding-right: var(--pcol-gutter);
}

.pcol.pcol--full {
	width: calc(100vw - var(--pcol-sbw, 0px));
	max-width: none;
	margin-left: calc(50% - (50vw - var(--pcol-sbw, 0px) / 2));
	margin-right: 0;
	padding-left: var(--pcol-gutter);
	padding-right: var(--pcol-gutter);
}

/* ---------- Desktop / tablet: collage ---------- */
.pcol-track { display: flex; flex-direction: column; gap: var(--pcol-gap); }
.pcol-block {
	display: flex;
	align-items: stretch;
	gap: var(--pcol-gap);
	width: 100%;
	/* Height follows the width (full size = chosen height), capped at the chosen height. */
	aspect-ratio: var(--pcol-ar, 1600 / 720);
	max-height: var(--pcol-h, 720px);
	min-height: 240px;
	overflow: hidden;
}
.pcol-col {
	display: flex;
	flex-direction: column;
	gap: var(--pcol-gap);
	flex: 1 1 0px;
	min-width: 0;
	min-height: 0;
	height: auto !important;
}
.pcol-item {
	position: relative;
	flex: 1 1 0px;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	background: #e9e6e1;
}
.pcol-link { position: relative; display: block !important; width: 100%; height: 100% !important; cursor: zoom-in; line-height: 0; }

/* Expand icon: centred on hover with a soft dark tint; small in the corner on touch screens */
.pcol-link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(17, 32, 42, .28);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
.pcol-zoom {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .95);
	color: var(--pcol-accent);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	opacity: 0;
	transform: scale(.7);
	transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1), background-color .2s, color .2s;
	pointer-events: none;
}
.pcol-zoom svg { width: 22px; height: 22px; }
.pcol--captions .pcol-item .pcol-link::after { background: rgba(17, 32, 42, .18); }
.pcol-item:hover .pcol-link::after,
.pcol-link:focus-visible::after { opacity: 1; }
.pcol-item:hover .pcol-zoom,
.pcol-link:focus-visible .pcol-zoom { opacity: 1; transform: scale(1); }
.pcol-link:hover .pcol-zoom { background: var(--pcol-accent); color: #fff; }
@media (hover: none) {
	.pcol-zoom {
		top: 12px; left: auto; right: 12px; margin: 0;
		width: 38px; height: 38px;
		opacity: 1; transform: none;
		background: rgba(255, 255, 255, .9);
	}
	.pcol-zoom svg { width: 17px; height: 17px; }
}
.pcol-item img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	margin: 0 !important;
	border-radius: 0 !important;
	transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
}
.pcol--hover-zoom .pcol-item:hover img { transform: scale(1.06); }
.pcol-link:focus-visible { outline: 3px solid var(--pcol-accent); outline-offset: -3px; }

.pcol-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 36px 16px 14px;
	color: #fff;
	font-size: .95em;
	line-height: 1.35;
	background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
}
.pcol-item:hover .pcol-caption,
.pcol-link:focus-visible + .pcol-caption { opacity: 1; transform: none; }
@media (hover: none) { .pcol-caption { opacity: 1; transform: none; } }

.pcol-dots { display: none; }

/* ---------- Phones ---------- */
@media (max-width: 767px) {
	.pcol.pcol--full,
	.pcol.pcol--boxed { padding-left: 0; padding-right: 0; }

	/* Slider: one row of photos you swipe through. */
	.pcol--m-slider .pcol-track {
		flex-direction: row;
		gap: 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 16px;
		padding: 0 16px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.pcol--m-slider .pcol-track::-webkit-scrollbar { display: none; }
	.pcol--m-slider .pcol-block,
	.pcol--m-slider .pcol-col { display: contents; }
	.pcol--m-slider .pcol-item {
		flex: 0 0 var(--pcol-mw, 82%) !important;
		aspect-ratio: var(--pcol-mr, 4 / 5);
		scroll-snap-align: center;
	}
	.pcol--m-slider .pcol-track::after { content: ""; flex: 0 0 4px; } /* end spacing */

	/* Dots / counter under the slider. */
	.pcol--m-slider .pcol-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		margin-top: 16px;
		min-height: 10px;
	}
	.pcol-dots button {
		all: unset;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: currentColor;
		opacity: .25;
		cursor: pointer;
		transition: opacity .25s, width .25s;
	}
	.pcol-dots button.is-active { opacity: 1; width: 22px; border-radius: 4px; background: var(--pcol-accent); }
	.pcol-dots .pcol-count { font-size: 13px; letter-spacing: .08em; opacity: .75; }

	/* 2-column grid alternative. */
	.pcol--m-grid { padding-left: 16px !important; padding-right: 16px !important; }
	.pcol--m-grid .pcol-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.pcol--m-grid .pcol-block,
	.pcol--m-grid .pcol-col { display: contents; }
	.pcol--m-grid .pcol-item { aspect-ratio: 1 / 1; }
	.pcol--m-grid .pcol-item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}

/* ---------- Full-screen view ---------- */
.pcol-lb {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(12, 12, 12, .94);
	color: #fff;
	opacity: 0;
	transition: opacity .3s ease;
	touch-action: pan-y;
}
.pcol-lb[hidden] { display: none; }
.pcol-lb.is-open { opacity: 1; }
.pcol-lb__stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 64px 84px 72px; }
.pcol-lb__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
	transition: opacity .25s ease, transform .25s ease;
	user-select: none;
	-webkit-user-drag: none;
}
.pcol-lb__img.is-loading { opacity: 0; transform: scale(.98); }
.pcol-lb button {
	all: unset;
	box-sizing: border-box;
	position: absolute;
	cursor: pointer;
	display: grid;
	place-items: center;
	color: #fff;
	border-radius: 50%;
	transition: background-color .2s;
}
.pcol-lb button { background: rgba(255, 255, 255, .1); z-index: 2; }
.pcol-lb button:hover { background: rgba(255, 255, 255, .22); }
.pcol-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pcol-lb .pcol-lb__close { top: 14px; right: 14px; width: 48px; height: 48px; }
.pcol-lb .pcol-lb__prev,
.pcol-lb .pcol-lb__next { top: 50%; width: 56px; height: 56px; margin-top: -28px; }
.pcol-lb .pcol-lb__prev { left: 14px; }
.pcol-lb .pcol-lb__next { right: 14px; }
.pcol-lb svg { width: 26px; height: 26px; }
.pcol-lb__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px 24px;
	display: flex;
	justify-content: center;
	gap: 18px;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
}
.pcol-lb__count { opacity: .7; letter-spacing: .08em; white-space: nowrap; }
html.pcol-locked, html.pcol-locked body { overflow: hidden !important; }
@media (max-width: 767px) {
	.pcol-lb__stage { padding: 56px 0 64px; }
	.pcol-lb .pcol-lb__prev, .pcol-lb .pcol-lb__next { top: auto; bottom: 10px; margin-top: 0; width: 46px; height: 46px; }
	.pcol-lb .pcol-lb__prev { left: 12px; }
	.pcol-lb .pcol-lb__next { right: 12px; }
	.pcol-lb .pcol-lb__close { top: 10px; right: 10px; }
	.pcol-lb__bar { padding: 22px 70px; }
}

@media (prefers-reduced-motion: reduce) {
	.pcol-item img, .pcol-caption, .pcol-lb, .pcol-lb__img, .pcol-zoom, .pcol-link::after { transition: none !important; }
	.pcol--m-slider .pcol-track { scroll-behavior: auto; }
}