/* ── CAHOPE Advance Gallery ───────────────────────────────────────────── */

:root {
	--cadvg-size:         280px;
	--cadvg-gap:          20px;
	--cadvg-offset:       90px;
	--cadvg-radius:       16px;
	--cadvg-center-scale: 1.2;
	--cadvg-overlay:      rgba(30,45,77,0.45);
	--cadvg-overlay-dur:  0.35s;
}

/* ── Outer wrapper ────────────────────────────────────────────────────── */

.cadvg-wrap {
	position: relative;
	width: 100%;
	/*
	 * overflow: visible so the arc's lower items are not clipped vertically.
	 * Horizontal clipping is handled by .cadvg-track below.
	 */
	overflow: visible;
}

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

.cadvg-track {
	position: relative;
	width: 100%;
	overflow: hidden;        /* clips items sliding off left / right       */
	/* height is set dynamically by JS to fit centre scale + arc offsets   */
}

/* ── Individual item ──────────────────────────────────────────────────── */

.cadvg-item {
	position: absolute;
	left: 50%;
	top: 0;
	/* width & height set by JS so all 5 items fill 100% of the container */
	border-radius: var(--cadvg-radius);
	overflow: hidden;
	cursor: pointer;
	transform: translateX(-50%);
	opacity: 0;
	transition:
		transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
		opacity   0.45s ease;
	will-change: transform, opacity;
}

/* ── Image fills item completely ──────────────────────────────────────── */

.cadvg-img {
	position: absolute !important;
	inset: 0 !important;
	width:      100% !important;
	height:     100% !important;
	max-width:  none !important;
	max-height: none !important;
	object-fit:      cover !important;
	object-position: center !important;
	display: block !important;
	pointer-events: none;
}

/* ── Overlay ──────────────────────────────────────────────────────────── */

.cadvg-overlay {
	position: absolute;
	inset: 0;
	background: var(--cadvg-overlay);
	border-radius: inherit;
	transition: opacity var(--cadvg-overlay-dur) ease;
	pointer-events: none;
}

/* Centre item — no overlay ever, prominent shadow */
.cadvg-item.is-center .cadvg-overlay {
	opacity: 0 !important;
}

.cadvg-item.is-center {
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30);
}

/* Side items reveal on hover */
.cadvg-item:not(.is-center):hover .cadvg-overlay {
	opacity: 0;
}

/* ── Zoom icon (lightbox trigger) ─────────────────────────────────────── */

.cadvg-zoom {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.7);
	opacity: 0;
	transition: opacity var(--cadvg-overlay-dur) ease, transform var(--cadvg-overlay-dur) ease;
	color: #ffffff;
	pointer-events: none;
}

.cadvg-zoom svg {
	width: 36px;
	height: 36px;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.cadvg-item:hover .cadvg-zoom {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

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

.cadvg-arrow {
	position: absolute;
	/* top is set dynamically by JS to align with the centre item's midpoint */
	transform: translateY(-50%);
	z-index: 20;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,0.90);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0,0,0,0.18);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	flex-shrink: 0;
}

.cadvg-arrow:hover {
	background: #ffffff;
	box-shadow: 0 6px 24px rgba(0,0,0,0.22);
	transform: translateY(-50%) scale(1.08);
}

.cadvg-arrow svg {
	width: 22px;
	height: 22px;
	stroke: #1e2d4d;
}

.cadvg-prev { left:  12px; }
.cadvg-next { right: 12px; }

/* ════════════════════════════════════════════════════════════════════════
   LIGHTBOX  (mirrors gallery lightbox styles with cadvg- prefix)
   ════════════════════════════════════════════════════════════════════════ */

.cadvg-lb {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: var(--cadvg-lb-bg, rgba(0,0,0,0.92));
	align-items: center;
	justify-content: center;
	padding: 24px;
	animation: cadvg-lb-in 0.25s ease forwards;
}

.cadvg-lb.is-open { display: flex; }

@keyframes cadvg-lb-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.cadvg-lb-inner {
	position: relative;
	max-width: 90vw;
	max-height: 88vh;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: cadvg-lb-img-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cadvg-lb-img-in {
	from { transform: scale(0.88); opacity: 0; }
	to   { transform: scale(1);    opacity: 1; }
}

.cadvg-lb-img {
	max-width: 90vw;
	max-height: 85vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 24px 80px rgba(0,0,0,0.6);
	display: block;
}

.cadvg-lb-close,
.cadvg-lb-prev,
.cadvg-lb-next {
	position: fixed;
	background: rgba(255,255,255,0.12);
	border: 2px solid rgba(255,255,255,0.25);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background 0.2s ease, border-color 0.2s ease;
	line-height: 1;
	border-radius: 50%;
}

.cadvg-lb-close:hover,
.cadvg-lb-prev:hover,
.cadvg-lb-next:hover {
	background: rgba(255,255,255,0.28);
	border-color: #fff;
}

.cadvg-lb-close {
	top: 20px; right: 20px;
	width: 44px; height: 44px;
	font-size: 1.1rem;
	display: flex; align-items: center; justify-content: center;
}

.cadvg-lb-prev,
.cadvg-lb-next {
	top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px;
	font-size: 2rem;
	display: flex; align-items: center; justify-content: center;
}

.cadvg-lb-prev { left: 20px; }
.cadvg-lb-next { right: 20px; }

.cadvg-lb-counter {
	position: fixed;
	bottom: 20px;
	left: 50%; transform: translateX(-50%);
	color: rgba(255,255,255,0.65);
	font-size: 0.85rem;
	margin: 0;
	letter-spacing: 0.08em;
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.cadvg-item { transition: none !important; }
}