/**
 * Circular Image Gallery v2 — Frontend Styles
 *
 * All motion here is pure CSS, no JS dependency for the rotation.
 * Elementor injects breakpoint-specific values for --cig-radius-7f3b2c91,
 * --cig-image-size-7f3b2c91 and --cig-arc-height-7f3b2c91 via its own
 * inline <style> blocks based on the responsive controls in the widget,
 * so no manual media queries are needed for those three properties here.
 */

.cig-container-7f3b2c91 {
	position: relative;
	width: 100%;
	text-align: center;
}

/* ---------- Clipping container: only the top slice of the circle is visible ---------- */
.cig-arc-7f3b2c91 {
	--cig-arc-height-7f3b2c91: 740px; /* fallback, overridden per-breakpoint by Elementor */
	--cig-image-size-7f3b2c91: 274px; /* fallback, overridden per-breakpoint by Elementor. Declared here (not on .cig-node) so .cig-track can also read it for its top-offset calc below. */
	position: relative;
	height: var( --cig-arc-height-7f3b2c91 );
	overflow: hidden;
}

/* ---------- The rotating circle, top-anchored so Arc Height acts as a clean cutoff from the very top of the circle downward ---------- */
.cig-track-7f3b2c91 {
	--cig-radius-7f3b2c91: 1100px; /* fallback, overridden per-breakpoint by Elementor */
	--cig-duration-7f3b2c91: 60s; /* fallback, overridden by the rotation speed control */
	position: absolute;
	/*
	 * Offset down by half the image height, plus a small 10px buffer,
	 * so the OUTER edge of the apex image (not its center) lands just
	 * inside the container's top edge rather than exactly flush with
	 * it. Flush-to-the-pixel still clipped a sliver as images rotated
	 * in and out. 383/548 is half the image height as a fraction of
	 * its width, derived from the locked 274:383 aspect ratio
	 * (383 / (274 * 2)).
	 */
	top: calc( var( --cig-image-size-7f3b2c91 ) * 383 / 548 + 10px );
	left: 50%;
	width: calc( var( --cig-radius-7f3b2c91 ) * 2 );
	height: calc( var( --cig-radius-7f3b2c91 ) * 2 );
	margin-left: calc( var( --cig-radius-7f3b2c91 ) * -1 );
	animation: cig-spin-7f3b2c91 var( --cig-duration-7f3b2c91 ) linear infinite;
	will-change: transform;
}

.cig-7f3b2c91--counterclockwise .cig-track-7f3b2c91 {
	animation-direction: reverse;
}

/* ---------- Individual image placement (static offset, not animated itself) ---------- */
.cig-node-7f3b2c91 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var( --cig-image-size-7f3b2c91 );
	aspect-ratio: 274 / 383;
	/*
	 * Placement + orientation: rotate to the target angle, then
	 * translate outward along that (now-rotated) direction to sit on
	 * the circle. No cancelling rotation afterward, so each image's
	 * top edge keeps facing outward, away from the center, like rays
	 * or petals pointing out. No counter-rotation is applied on the
	 * inner wrapper either, so as the track spins, each node inherits
	 * that rotation and keeps pointing outward throughout the
	 * animation rather than staying page-upright.
	 */
	transform:
		translate( -50%, -50% )
		rotate( var( --cig-angle-7f3b2c91, 0deg ) )
		translateY( calc( var( --cig-radius-7f3b2c91 ) * -1 ) );
}

.cig-node-inner-7f3b2c91 {
	width: 100%;
	height: 100%;
}

.cig-image-7f3b2c91 {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}

/* ---------- Image shape variants ---------- */
.cig-shape-7f3b2c91-square .cig-image-7f3b2c91 {
	border-radius: 0;
}

.cig-shape-7f3b2c91-rounded .cig-image-7f3b2c91 {
	border-radius: 12px;
}

.cig-shape-7f3b2c91-circle .cig-image-7f3b2c91 {
	border-radius: 50%;
}

/* ---------- Keyframes ---------- */
@keyframes cig-spin-7f3b2c91 {
	from { transform: rotate( 0deg ); }
	to   { transform: rotate( 360deg ); }
}

/* ---------- Respect reduced-motion preference ---------- */
@media ( prefers-reduced-motion: reduce ) {
	.cig-track-7f3b2c91 {
		animation: none;
	}
}

/* ---------- Editor-only placeholder notice ---------- */
.cig-editor-notice-7f3b2c91 {
	padding: 40px 20px;
	margin-bottom: 20px;
	background: #fff4e5;
	border: 1px dashed #d9822b;
	color: #7a4a05;
	font-size: 14px;
}

/* ---------- Center content block ---------- */
.cig-content-7f3b2c91 {
	--cig-content-overlap-7f3b2c91: 80px; /* fallback, overridden per-breakpoint by Elementor */
	position: relative;
	z-index: 2;
	max-width: 610px;
	margin: 0 auto;
	margin-top: calc( var( --cig-content-overlap-7f3b2c91 ) * -1 );
}

@media (max-width:1024px) {
	.cig-content-7f3b2c91 {
		width: 100%;
		padding-left: 10%;
		padding-right: 10%;
	}
}

.cig-title-7f3b2c91 {
	margin: 0 0 16px;
}

.cig-description-7f3b2c91 {
	margin: 0 0 24px;
}

.cig-button-7f3b2c91 {
	display: inline-block;
	text-decoration: none !important;
	font-size:14px;
	line-height: 18px;
	letter-spacing:0.7px;
	font-weight:500;
	text-transform: uppercase;
	border-bottom: 1px solid #6F2F21;
	padding-bottom: 2px;
}
