/* FeatherSlide — lightweight front-end styles (vanilla CSS, no framework) */

.fs-slider {
	--fs-bg: #14181f;
	--fs-text: #f6f4ee;
	--fs-accent: #c9a227;
	--fs-accent2: #1e7a6e;
	--fs-h: 520px;
	--fs-h-m: 360px;

	position: relative;
	width: 100%;
	height: var(--fs-h);
	overflow: hidden;
	border-radius: 10px;
	background: var(--fs-bg);
	font-family: 'Kanit', 'Sarabun', system-ui, -apple-system, sans-serif;
	isolation: isolate;
}

@media (max-width: 680px) {
	.fs-slider { height: var(--fs-h-m); border-radius: 6px; }
}

/* ---------- Themes ---------- */
.fs-theme-light  { --fs-bg: #f4f1ea; --fs-text: #1a2333; --fs-accent: #b6812a; --fs-accent2: #1e7a6e; }
.fs-theme-dark   { --fs-bg: #101318; --fs-text: #f2f0e9; --fs-accent: #e8b34f; --fs-accent2: #3ea592; }
.fs-theme-phayao-night { --fs-bg: #0b1e33; --fs-text: #f6f4ea; --fs-accent: #c9a227; --fs-accent2: #1e7a6e; }
/* .fs-theme-custom colors are supplied inline via style="" from the editor */

/* ---------- Track / slides ---------- */
.fs-track { position: absolute; inset: 0; }

.fs-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: translate3d(0, 0, 0);
	transition: opacity 700ms ease;
	pointer-events: none;
}
.fs-slide.fs-active { opacity: 1; z-index: 3; pointer-events: auto; }

.fs-slide-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fs-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,var(--fs-ov, .45)) 0%, rgba(0,0,0,calc(var(--fs-ov, .45) * .35)) 60%, rgba(0,0,0,0) 100%);
	--fs-ov: calc(var(--fs-overlay, 45) / 100);
}

.fs-content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	max-width: 620px;
	padding: 8% 7%;
	color: var(--fs-text);
}
.fs-pos-left   { align-items: flex-start; text-align: left; }
.fs-pos-center { align-items: center; text-align: center; margin: 0 auto; max-width: 720px; }
.fs-pos-right  { align-items: flex-end; text-align: right; margin-left: auto; }

.fs-eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--fs-accent);
}

.fs-title {
	margin: 0;
	font-size: clamp(22px, 4vw, 40px);
	line-height: 1.2;
	font-weight: 700;
	color: var(--fs-text);
}

.fs-text {
	margin: 0;
	font-size: clamp(14px, 1.6vw, 17px);
	line-height: 1.55;
	color: var(--fs-text);
	opacity: .88;
	max-width: 46ch;
}

.fs-button {
	display: inline-block;
	margin-top: 6px;
	padding: 11px 22px;
	border-radius: 999px;
	background: var(--fs-accent);
	color: #14181f;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: transform 200ms ease, background 200ms ease;
}
.fs-button:hover { transform: translateY(-1px); background: var(--fs-accent2); color: #fff; }
.fs-button:focus-visible { outline: 2px solid var(--fs-accent2); outline-offset: 3px; }

/* ---------- Controls ---------- */
.fs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,.32);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 180ms ease, transform 180ms ease;
}
.fs-arrow:hover { background: var(--fs-accent); color: #14181f; }
.fs-arrow:focus-visible { outline: 2px solid var(--fs-accent); outline-offset: 2px; }
.fs-arrow-prev { left: 16px; }
.fs-arrow-next { right: 16px; }

.fs-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.fs-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.65);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.fs-dot:hover { transform: scale(1.15); }
.fs-dot.is-active { background: var(--fs-accent); border-color: var(--fs-accent); }

.fs-progress {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: rgba(255,255,255,.18);
	z-index: 5;
}
.fs-progress-bar {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--fs-accent);
}
.fs-progress-bar.is-running { transition: width linear; width: 100%; }

/* ================= EFFECT: fade (default) ================= */
.fs-effect-fade .fs-slide { transition: opacity 900ms ease; }

/* ================= EFFECT: slide (horizontal push) ================= */
.fs-effect-slide .fs-slide {
	opacity: 1;
	transform: translate3d(100%, 0, 0);
	transition: transform 650ms cubic-bezier(.65, .05, .36, 1);
	pointer-events: none;
	z-index: 1;
}
.fs-effect-slide .fs-slide.fs-active {
	transform: translate3d(0, 0, 0);
	z-index: 3;
	pointer-events: auto;
}

/* ================= EFFECT: ken burns (slow zoom + pan) ================= */
.fs-effect-kenburns .fs-slide-img {
	transform: scale(1.06);
	transition: transform 8s ease-out, opacity 900ms ease;
}
.fs-effect-kenburns .fs-slide.fs-active .fs-slide-img { transform: scale(1.16); }
.fs-effect-kenburns .fs-content { transform: translateY(10px); opacity: 0; transition: transform 700ms ease 150ms, opacity 700ms ease 150ms; }
.fs-effect-kenburns .fs-slide.fs-active .fs-content { transform: translateY(0); opacity: 1; }

/* ================= EFFECT: cards (stacked deck) ================= */
.fs-effect-cards .fs-slide {
	transform: translateY(26px) scale(.92);
	opacity: 0;
	border-radius: 14px;
	overflow: hidden;
	transition: transform 550ms cubic-bezier(.2, .8, .2, 1), opacity 500ms ease;
	z-index: 1;
	box-shadow: 0 20px 50px rgba(0,0,0,.28);
}
.fs-effect-cards .fs-slide.fs-active { transform: translateY(0) scale(1); opacity: 1; z-index: 3; }
.fs-effect-cards .fs-slide.fs-peek { opacity: .55; transform: translateY(16px) scale(.95); z-index: 2; }

/* ================= EFFECT: split (curtain wipe reveal) ================= */
.fs-effect-split .fs-slide {
	opacity: 1;
	clip-path: inset(0 0 0 100%);
	transition: clip-path 850ms cubic-bezier(.83, 0, .17, 1);
	z-index: 1;
}
.fs-effect-split .fs-slide.fs-active { clip-path: inset(0 0 0 0%); z-index: 3; }
.fs-effect-split .fs-content { max-width: 44%; background: linear-gradient(100deg, var(--fs-bg) 62%, transparent 100%); padding-right: 5%; }
.fs-effect-split .fs-overlay { display: none; }
@media (max-width: 680px) {
	.fs-effect-split .fs-content { max-width: 100%; background: linear-gradient(0deg, var(--fs-bg) 45%, transparent 100%); }
}

/* ================= EFFECT: minimal (quiet hero, dots-led) ================= */
.fs-effect-minimal .fs-content { max-width: 700px; gap: 14px; }
.fs-effect-minimal .fs-title { font-weight: 600; letter-spacing: -.01em; }
.fs-effect-minimal .fs-slide-img { transition: opacity 1100ms ease; }
.fs-effect-minimal .fs-slide:not(.fs-active) .fs-slide-img { opacity: 0; }
.fs-effect-minimal .fs-arrow { background: transparent; border: 1px solid rgba(255,255,255,.5); }
.fs-effect-minimal .fs-dots { bottom: 26px; gap: 10px; }
.fs-effect-minimal .fs-dot { width: 22px; height: 3px; border-radius: 2px; border: none; background: rgba(255,255,255,.35); }
.fs-effect-minimal .fs-dot.is-active { background: var(--fs-accent); }

/* ---------- Reduced motion & small screens ---------- */
@media (prefers-reduced-motion: reduce) {
	.fs-slide, .fs-slide-img, .fs-content, .fs-progress-bar {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
}

@media (max-width: 680px) {
	.fs-content { padding: 9% 6%; max-width: 100%; }
	.fs-arrow { width: 34px; height: 34px; font-size: 19px; }
	.fs-arrow-prev { left: 8px; }
	.fs-arrow-next { right: 8px; }
}