/* Colonial Hunting — Frame Gallery (v1.1) */

/*
 * MOBILE FIX: inside an Elementor flex container a widget whose only content is an
 * aspect-ratio box gets an intrinsic height of 0 on narrow screens, so the frame
 * overflowed onto the next heading. A definite width fixes it. Elementor's own
 * "Advanced > Width" setting has higher specificity and still wins when used.
 */
.elementor-widget-chfg-frame-gallery { width: 100%; }

.chfg {
	position: relative;
	width: 100%;
	max-width: 100%;
	-webkit-user-select: none;
	user-select: none;
}

/* The stage keeps the frame PNG's proportions so the % window stays lined up at every width. */
.chfg-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 744 / 519;
}

/* Frame on top, never intercepts clicks. */
.chfg-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
	z-index: 3;
	pointer-events: none;
	display: block;
}

/* The transparent hole in the frame: photos live in here, clipped and tilted. */
.chfg-window {
	position: absolute;
	left: 25.5%;
	top: 12.5%;
	width: 64%;
	height: 71.5%;
	transform: rotate(-2deg);
	transform-origin: center center;
	overflow: hidden;
	z-index: 1;
	background: #e9dcc3;
	/* Keeps the rotated clip crisp in Safari/Chrome. */
	-webkit-mask-image: -webkit-radial-gradient(#fff, #fff);
	isolation: isolate;
}

.chfg--guide .chfg-window {
	outline: 2px dashed #e11d48;
	outline-offset: -2px;
}

.chfg-track {
	position: absolute;
	inset: 0;
}

.chfg-slide {
	position: absolute;
	inset: 0;
	transition-property: opacity, transform;
	transition-duration: 900ms;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.chfg-slide a {
	display: block;
	width: 100%;
	height: 100%;
}

.chfg-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* --- Fade --- */
.chfg--fade .chfg-slide {
	opacity: 0;
	z-index: 1;
	pointer-events: none;
}

.chfg--fade .chfg-slide.is-active {
	opacity: 1;
	z-index: 2;
	pointer-events: auto;
}

/* --- Slide --- */
.chfg--slide .chfg-slide {
	transform: translateX(100%);
	pointer-events: none;
}

.chfg--slide .chfg-slide.is-active {
	transform: translateX(0);
	pointer-events: auto;
	z-index: 2;
}

.chfg--slide .chfg-slide.is-prev {
	transform: translateX(-100%);
}

.chfg--slide.is-reverse .chfg-slide {
	transform: translateX(-100%);
}

.chfg--slide.is-reverse .chfg-slide.is-active {
	transform: translateX(0);
}

.chfg--slide.is-reverse .chfg-slide.is-prev {
	transform: translateX(100%);
}

.chfg-slide.no-transition {
	transition: none !important;
}

/* Soft inner shadow so the print looks tucked under the paper edge. */
.chfg-window-shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
	display: none;
}

.chfg-shadow-yes .chfg-window-shade {
	display: block;
	box-shadow: inset 0 0 18px 6px rgba(40, 25, 10, 0.35);
}

/* Vintage tones */
.chfg-tone-warm .chfg-slide img { filter: sepia(0.25) saturate(0.9) contrast(1.02); }
.chfg-tone-sepia .chfg-slide img { filter: sepia(0.7) contrast(1.05); }
.chfg-tone-mono .chfg-slide img { filter: grayscale(1) contrast(1.05); }

/* Arrows — .chfg button.x selectors out-rank Hello Elementor's pink button:hover/focus */
.chfg button.chfg-arrow,
.chfg button.chfg-arrow:hover,
.chfg button.chfg-arrow:focus {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 1.8em;
	height: 1.8em;
	font-size: 28px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #3b2a1a;
	cursor: pointer;
	padding: 0;
	opacity: 0.85;
	transition: opacity .2s, color .2s, transform .2s;
}

.chfg button.chfg-arrow:hover,
.chfg button.chfg-arrow:focus-visible {
	opacity: 1;
}
.chfg button.chfg-arrow:focus-visible,
.chfg button.chfg-dot:focus-visible,
.chfg:focus-visible {
	outline: 2px solid #8a5a2b;
	outline-offset: 2px;
	box-shadow: none;
}

.chfg-arrow--prev { left: 0; }
.chfg-arrow--next { right: 0; }

.chfg-arrow svg {
	width: 1em;
	height: 1em;
	filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.5));
}

/* Dots — space is reserved below the frame so they never overlap the next element */
.chfg--dots { padding-bottom: 30px; }
.chfg-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -28px;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 4;
}

.chfg button.chfg-dot,
.chfg button.chfg-dot:hover,
.chfg button.chfg-dot:focus {
	min-width: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(59, 42, 26, 0.35);
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}

.chfg button.chfg-dot.is-active {
	background: #3b2a1a;
	transform: scale(1.25);
}

/* Larger touch area for dots on phones without changing their look */
@media (hover: none) {
	.chfg-dots { gap: 4px; }
	.chfg button.chfg-dot,
	.chfg button.chfg-dot.is-active { width: 9px; height: 9px; box-sizing: content-box; padding: 8px; background-clip: content-box; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	.chfg-slide { transition-duration: 0ms !important; }
}