/**
 * Aluna Showcase Slider — Frontend styles
 * Matches: wireframes-html/aluna-home-v4.html  .alma-sec / .alma-slide
 * Prefix: .scs-
 */

/* ── CSS Variables ── */
.scs {
	--cream: #F2E6D0;
	--cream-lt: #FBF5EC;
	--sand: #D9C9A8;
	--taupe: #8B7E70;
	--brown: #6B5C4E;
	--black: #1C1814;
	--white: #FEFCF8;
	--text: #2C2420;
	--text-sec: #6B5C4E;
	--font-body: 'Jost', sans-serif;
	--font-display: 'Cormorant Garamond', serif;

	/* Type scale (matches wireframe global system) */
	--text-xs: 14px;
	--text-sm: 16px;
	--text-md: 20px;
	--text-lg: 22px;
	--text-xl: 28px;
	--text-2xl: 40px;
	--text-3xl: 60px;
	--lh-tight: 1.1;
	--lh-snug: 1.35;
	--lh-normal: 1.65;
	--lh-loose: 1.85;
}

/* ── alignfull safe margins ── */
.wp-block-aluna-showcase-slider.alignfull,
.wp-block-aluna-showcase-slider.alignwide {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ── Section ── */
.scs {
	position: relative;
	overflow: hidden;
}

/* ── Slider track ── */
.scs-track {
	display: flex;
	width: 100%;
	transition: transform .75s cubic-bezier(.77, 0, .18, 1);
}

/* ── Slide ── */
.scs-slide {
	flex: 0 0 100%;
}

/* ── Grid: image + text ── */
.scs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 680px;
}

/* ── Image column ── */
.scs-img {
	position: relative;
	overflow: hidden;
	min-height: 480px;
}

.scs-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.82) saturate(.8);
	object-position: center center;
}

/* Gradient fade into text column */
.scs-img::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Light theme: fade to cream */
.scs-slide[data-theme="light"] .scs-img::after {
	background: linear-gradient(to right, transparent 55%, var(--cream) 100%);
}

/* Dark theme: fade to black */
.scs-slide[data-theme="dark"] .scs-img::after {
	background: linear-gradient(to right, transparent 55%, var(--black) 100%);
}

/* ── Text column ── */
.scs-txt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(32px, 5vw, 80px) clamp(20px, 4vw, 72px) clamp(32px, 5vw, 80px) clamp(20px, 4vw, 60px);
	position: relative;
	overflow: hidden;
}

/* Decorative symbol */
.scs-txt::before {
	content: '∞';
	position: absolute;
	bottom: -30px;
	right: 24px;
	font-family: var(--font-display);
	font-size: 300px;
	font-weight: 300;
	line-height: 1;
	pointer-events: none;
}

/* Light theme text */
.scs-slide[data-theme="light"] .scs-txt {
	background: var(--cream);
}

.scs-slide[data-theme="light"] .scs-txt::before {
	color: rgba(139, 126, 112, .06);
}

/* Dark theme text */
.scs-slide[data-theme="dark"] .scs-txt {
	background: var(--black);
}

.scs-slide[data-theme="dark"] .scs-txt::before {
	color: rgba(242, 230, 208, .04);
}

/* ── Eyebrow ── */
.scs-ey {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.scs-ey::before {
	content: '';
	width: 28px;
	height: 1px;
	background: currentColor;
	flex-shrink: 0;
}

.scs-slide[data-theme="light"] .scs-ey {
	color: var(--taupe);
}

.scs-slide[data-theme="dark"] .scs-ey {
	color: var(--taupe);
}

/* ── Title ── */
.scs-title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 300;
	line-height: var(--lh-tight);
	margin-bottom: 28px;
}

.scs-title em {
	font-style: italic;
}

.scs-slide[data-theme="light"] .scs-title {
	color: var(--text);
}

.scs-slide[data-theme="light"] .scs-title em {
	color: var(--taupe);
}

.scs-slide[data-theme="dark"] .scs-title {
	color: var(--cream);
}

.scs-slide[data-theme="dark"] .scs-title em {
	color: var(--sand);
}

/* ── Quote ── */
.scs-quote {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 300;
	font-style: italic;
	padding-left: 22px;
	border-left: 2px solid var(--sand);
	line-height: 1.55;
	margin-bottom: 28px;
}

.scs-slide[data-theme="light"] .scs-quote {
	color: var(--brown);
}

.scs-slide[data-theme="dark"] .scs-quote {
	color: rgba(242, 230, 208, .82);
	border-color: var(--taupe);
}

/* ── Body ── */
.scs-body {
	font-family: var(--font-body);
	font-size: var(--text-md);
	font-weight: 300;
	line-height: var(--lh-loose);
	margin-bottom: 40px;
	max-width: 440px;
}

.scs-slide[data-theme="light"] .scs-body {
	color: var(--text-sec);
}

.scs-slide[data-theme="dark"] .scs-body {
	color: rgba(242, 230, 208, .80);
}

/* ── CTA button ── */
.scs-cta {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	padding: 14px 36px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: all .2s;
	align-self: flex-start;
	width: fit-content;
}

.scs-slide[data-theme="light"] .scs-cta {
	background: var(--taupe);
	color: var(--white);
	border: 1px solid var(--taupe);
}

.scs-slide[data-theme="light"] .scs-cta:hover {
	background: var(--brown);
	border-color: var(--brown);
}

.scs-slide[data-theme="dark"] .scs-cta {
	background: var(--cream);
	color: var(--black);
	border: none;
}

.scs-slide[data-theme="dark"] .scs-cta:hover {
	background: var(--white);
}

/* ── Navigation ── */
.scs-nav {
	position: absolute;
	bottom: 32px;
	right: 60px;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 18px;
}

.scs-dots {
	display: flex;
	gap: 8px;
	align-items: center;
}

.scs-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: rgba(139, 126, 112, .3);
	transition: all .3s;
	padding: 0;
}

.scs-dot.on {
	background: var(--taupe);
	width: 22px;
	border-radius: 3px;
}

.scs-arrows {
	display: flex;
	gap: 6px;
}

.scs-arrow {
	width: 44px;
	height: 44px;
	background: rgba(139, 126, 112, .15);
	border: 1px solid rgba(139, 126, 112, .3);
	color: var(--taupe);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	cursor: pointer;
	transition: all .2s;
}

.scs-arrow:hover {
	background: rgba(139, 126, 112, .3);
	border-color: var(--taupe);
}

/* ── Responsive — Tablet ── */
@media (max-width: 960px) {
	.scs-slide {
		display: flex;
		flex-direction: column;
	}

	.scs-grid {
		grid-template-columns: 1fr;
		grid-template-rows: clamp(240px, 48vw, 380px) 1fr;
		height: auto;
		flex: 1;
	}

	.scs-img {
		height: clamp(240px, 48vw, 380px);
		min-height: unset;
		order: -1;
	}

	/* Vertical gradient on mobile */
	.scs-slide[data-theme="light"] .scs-img::after {
		background: linear-gradient(to bottom, transparent 55%, var(--cream) 100%);
	}

	.scs-slide[data-theme="dark"] .scs-img::after {
		background: linear-gradient(to bottom, transparent 55%, var(--black) 100%);
	}

	.scs-txt {
		padding: 40px 24px 48px;
	}

	.scs-body {
		max-width: none;
	}

	.scs-cta {
		width: fit-content;
		align-self: flex-start;
	}

	.scs-nav {
		position: relative;
		bottom: auto;
		right: auto;
		padding: 12px 24px 28px;
		justify-content: center;
	}
}

/* ── Responsive — Small mobile ── */
@media (max-width: 600px) {
	.scs-img {
		height: clamp(200px, 52vw, 260px);
		min-height: unset;
	}

	.scs-grid {
		grid-template-rows: clamp(200px, 52vw, 260px) 1fr;
	}

	.scs-txt {
		padding: 28px 20px 36px;
	}
}