/* =====================================================================
   Elegant Gallery Carousel — front-end
   ===================================================================== */

.egc {
	--egc-bg: #57543f;
	--egc-fg: #ffffff;
	--egc-arrow-bg: #ffffff;
	--egc-arrow-fg: #3d3b30;
	--egc-gap: 16px;
	--egc-h: 430px;
	--egc-radius: 0px;
	--egc-pad: 80px;
	--egc-title-size: 72px;
	--egc-font: Georgia, "Times New Roman", "Noto Serif Thai", serif;

	position: relative;
	background: var(--egc-bg);
	color: var(--egc-fg);
	padding: var(--egc-pad) 0;
	overflow-x: hidden;
	overflow-x: clip;
	box-sizing: border-box;
}

.egc--gfont {
	--egc-font: "Cormorant Garamond", Georgia, "Noto Serif Thai", serif;
}

.egc *,
.egc *::before,
.egc *::after {
	box-sizing: border-box;
}

/* กว้างเต็มหน้าจอแม้อยู่ในคอนเทนต์ที่มีความกว้างจำกัด */
.egc--fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ---------- หัวข้อ ---------- */

.egc__head {
	text-align: center;
	padding: 0 20px;
	margin: 0 0 clamp(28px, 4vw, 56px);
}

.egc__title {
	margin: 0;
	padding: 0;
	font-family: var(--egc-font);
	font-weight: 400;
	font-size: min(var(--egc-title-size), 13vw);
	line-height: 1.08;
	letter-spacing: 0.005em;
	color: inherit;
}

.egc__sub {
	margin: 14px auto 0;
	max-width: 620px;
	font-size: 16px;
	line-height: 1.65;
	opacity: 0.78;
	color: inherit;
}

/* ---------- ตัวสไลด์ ---------- */

.egc__carousel {
	position: relative;
}

.egc__viewport {
	overflow: hidden;
	touch-action: pan-y;
	cursor: grab;
}

.egc__viewport.is-dragging {
	cursor: grabbing;
}

.egc__track {
	display: flex;
	gap: var(--egc-gap);
	margin: 0;
	padding: 0;
	will-change: transform;
	transition: transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.egc__track.is-instant {
	transition: none;
}

/* ก่อน JS ทำงาน ใช้ค่าจำนวนรูปต่อจอคำนวณความกว้างไว้ก่อน จะได้ไม่กระตุก */
.egc__slide {
	flex: 0 0 auto;
	width: var(--egc-slide-w, calc((100% - (var(--egc-pv, 3) - 1) * var(--egc-gap)) / var(--egc-pv, 3)));
	margin: 0;
	padding: 0;
}

/* ถ้า JavaScript ไม่ทำงาน ยังเลื่อนดูรูปได้ด้วยการปัด */
.egc__carousel:not(.is-ready) .egc__viewport {
	overflow-x: auto;
	scrollbar-width: thin;
}

.egc__carousel:not(.is-ready) .egc__nav {
	opacity: 0;
}

.egc__frame {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: var(--egc-radius);
	overflow: hidden;
	cursor: zoom-in;
	-webkit-appearance: none;
	appearance: none;
}

.egc__frame--static {
	cursor: default;
}

.egc__frame:focus-visible {
	outline: 2px solid var(--egc-fg);
	outline-offset: 3px;
}

.egc__img {
	display: block;
	width: 100%;
	height: var(--egc-h);
	object-fit: cover;
	margin: 0;
	border-radius: 0;
	transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.egc__frame:hover .egc__img {
	transform: scale(1.045);
}

/* ---------- ปุ่มลูกศร ---------- */

.egc__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 58px;
	height: 58px;
	margin: 0;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: var(--egc-arrow-bg);
	background: color-mix(in srgb, var(--egc-arrow-bg) 72%, transparent);
	color: var(--egc-arrow-fg);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.egc__nav:hover {
	background: var(--egc-arrow-bg);
}

.egc__nav:focus-visible {
	outline: 2px solid var(--egc-fg);
	outline-offset: 3px;
}

.egc__nav svg {
	width: 20px;
	height: 20px;
	display: block;
}

.egc__nav--prev {
	left: clamp(10px, 2.2vw, 44px);
}

.egc__nav--next {
	right: clamp(10px, 2.2vw, 44px);
}

.egc__nav[disabled] {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}

/* ---------- จุดบอกตำแหน่ง ---------- */

.egc__dots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 30px;
	padding: 0 20px;
}

.egc__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	background: color-mix(in srgb, var(--egc-fg) 35%, transparent);
	cursor: pointer;
	transition: width 0.3s ease, background 0.3s ease;
}

.egc__dot.is-active {
	width: 26px;
	border-radius: 4px;
	background: var(--egc-fg);
}

/* ---------- Lightbox ---------- */

body.egc-lock {
	overflow: hidden;
}

.egc-lb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(14, 14, 12, 0.95);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.32s ease, visibility 0.32s;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.egc-lb.is-open {
	opacity: 1;
	visibility: visible;
}

.egc-lb__figure {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 94vw;
	touch-action: pan-y;
}

.egc-lb__img {
	display: block;
	max-width: 94vw;
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 2px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	transform: scale(0.97);
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.egc-lb.is-ready .egc-lb__img {
	transform: scale(1);
	opacity: 1;
}

.egc-lb__cap {
	margin: 0;
	max-width: min(900px, 90vw);
	text-align: center;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}

.egc-lb__counter {
	position: absolute;
	top: 26px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 13px;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.62);
	font-variant-numeric: tabular-nums;
}

.egc-lb__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	transition: background 0.25s ease;
}

.egc-lb__btn:hover {
	background: rgba(255, 255, 255, 0.22);
}

.egc-lb__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.egc-lb__btn svg {
	width: 22px;
	height: 22px;
	display: block;
}

.egc-lb__close {
	top: 18px;
	right: 18px;
}

.egc-lb__prev {
	left: clamp(10px, 2.5vw, 40px);
	top: 50%;
	transform: translateY(-50%);
}

.egc-lb__next {
	right: clamp(10px, 2.5vw, 40px);
	top: 50%;
	transform: translateY(-50%);
}

.egc-lb__spinner {
	position: absolute;
	width: 34px;
	height: 34px;
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.2s ease;
	animation: egc-spin 0.8s linear infinite;
	pointer-events: none;
}

.egc-lb.is-loading .egc-lb__spinner {
	opacity: 1;
}

@keyframes egc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- จอเล็ก ---------- */

@media (max-width: 1024px) {
	.egc__slide {
		width: var(--egc-slide-w, calc((100% - (var(--egc-pv-t, 2) - 1) * var(--egc-gap)) / var(--egc-pv-t, 2)));
	}

	.egc__img {
		height: calc(var(--egc-h) * 0.78);
	}

	.egc__nav {
		width: 48px;
		height: 48px;
	}
}

@media (max-width: 640px) {
	.egc {
		padding: calc(var(--egc-pad) * 0.62) 0;
	}

	.egc__slide {
		width: var(--egc-slide-w, calc((100% - (var(--egc-pv-m, 1.15) - 1) * var(--egc-gap)) / var(--egc-pv-m, 1.15)));
	}

	.egc__img {
		height: calc(var(--egc-h) * 0.6);
	}

	.egc__nav {
		width: 42px;
		height: 42px;
	}

	.egc__nav svg {
		width: 16px;
		height: 16px;
	}

	.egc-lb__btn {
		width: 44px;
		height: 44px;
	}

	.egc-lb__prev {
		left: 8px;
	}

	.egc-lb__next {
		right: 8px;
	}

	.egc-lb__img {
		max-height: 74vh;
	}
}

/* ---------- ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว ---------- */

@media (prefers-reduced-motion: reduce) {
	.egc__track,
	.egc__img,
	.egc-lb,
	.egc-lb__img {
		transition-duration: 0.01ms !important;
	}

	.egc__frame:hover .egc__img {
		transform: none;
	}

	.egc-lb__spinner {
		animation: none;
	}
}