/* ── Infinite Carousel Gallery — Frontend Styles ─────────────────────── */

.icg-wrapper {
	position:   relative;
	display:    flex;
	align-items: center;
	width:      100%;
	outline:    none;
}

/* ── Track ───────────────────────────────────────────────────────────── */

.icg-track-wrapper {
	overflow:  hidden;
	width:     100%;
}

.icg-track {
	display:    flex;
	flex-wrap:  nowrap;
	will-change: transform;
	/* transition is set by JS — not here */
}

/* ── Slides ──────────────────────────────────────────────────────────── */

/* flex-basis is set inline per block instance so column counts are
   independent between multiple carousels on the same page. */
.icg-slide,
.icg-clone {
	flex-shrink: 0;
	box-sizing:  border-box;
	padding:     4px;
}

.icg-slide img,
.icg-clone img {
	display:    block;
	width:      100%;
	height:     200px;
	object-fit: cover;
	border-radius: 4px;
}

/* ── Navigation arrows ───────────────────────────────────────────────── */

.icg-arrow {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           40px;
	height:          40px;
	background:      rgba( 0, 0, 0, 0.45 );
	color:           #fff;
	border:          none;
	border-radius:   50%;
	cursor:          pointer;
	font-size:       18px;
	line-height:     1;
	z-index:         10;
	transition:      background 0.2s;
	/* sit just outside the track wrapper */
	position:        relative;
	flex-shrink:     0;
}

.icg-arrow:hover,
.icg-arrow:focus-visible {
	background: rgba( 0, 0, 0, 0.75 );
	outline:    none;
}

.icg-arrow-prev { margin-right: 6px; }
.icg-arrow-next { margin-left:  6px; }

/* ── Minimal touch feedback ──────────────────────────────────────────── */

.icg-slide img:hover,
.icg-clone img:hover {
	opacity: 0.92;
	transition: opacity 0.15s;
}