/**
 * Sotusfa Custom Slider — Styles
 *
 * Ken Burns hero slider with progress bar, thumbnails, arrows, and
 * entrance animations. All selectors are scoped so multiple widget
 * instances on the same page do not collide.
 *
 * @package Sotusfa_Custom_Slider
 */

/* ==================================================================
   Design Tokens
   ================================================================== */
:root {
	--stf-vert-fonce:  #1a3a17;
	--stf-or:          #C28E58;
	--stf-blanc:       #FFFFFF;
	--stf-font-display:'Cormorant Garamond', serif;
	--stf-font-sans:   'Montserrat', sans-serif;
	--stf-ease:        cubic-bezier(.22, .61, .36, 1);
	--stf-maxw:        1340px;
}

/* ==================================================================
   Buttons (available inside injected templates)
   ================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--stf-font-sans);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 15px 30px;
	transition: all .35s var(--stf-ease);
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
}
.btn .ar {
	transition: transform .35s var(--stf-ease);
}
.btn:hover .ar {
	transform: translateX(5px);
}

.btn-gold {
	background: var(--stf-or);
	color: var(--stf-vert-fonce);
}
.btn-gold:hover {
	background: var(--stf-vert-fonce);
	color: var(--stf-blanc);
}

.btn-ghost {
	border-color: rgba(255, 255, 255, .4);
	color: var(--stf-blanc);
}
.btn-ghost:hover {
	background: var(--stf-blanc);
	color: var(--stf-vert-fonce);
	border-color: var(--stf-blanc);
}

/* ==================================================================
   Hero Container
   ================================================================== */
.hero {
	position: relative;
	height: clamp(560px, 82vh, 760px);
	overflow: hidden;
	background: var(--stf-vert-fonce);
}

/* ==================================================================
   Slides
   ================================================================== */
.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.1s var(--stf-ease);
	z-index: 1;
}
.hero-slide.active {
	opacity: 1;
	z-index: 2;
}

/* Ken Burns background layer */
.hero-slide .bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(var(--stf-kb-from, 1.06));
	transition: transform var(--stf-kb-duration, 6s) ease;
}
.hero-slide.active .bg {
	transform: scale(var(--stf-kb-to, 1));
}

/* Dark overlay gradient — colours & opacities driven by CSS variables */
.hero-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--stf-ov-start, rgba(15,30,13,.78)) 0%,
		var(--stf-ov-mid,   rgba(15,30,13,.45)) 42%,
		var(--stf-ov-end,   rgba(15,30,13,.12)) 75%
	);
	pointer-events: none;
}

/* ==================================================================
   Hero Inner (template content wrapper)
   ================================================================== */
.hero-inner {
	position: relative;
	z-index: 3;
	height: 100%;
	max-width: var(--stf-maxw);
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ==================================================================
   Content classes — available inside injected Elementor Templates
   ================================================================== */
.hero-copy {
	max-width: 620px;
}

/* Eyebrow */
.hero-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--stf-or);
	display: flex;
	align-items: center;
	gap: 14px;
	opacity: 0;
	transform: translateY(20px);
}
.hero-eyebrow::before {
	content: "";
	width: 46px;
	height: 1px;
	background: var(--stf-or);
}
.hero-slide.active .hero-eyebrow {
	animation: stf-up .8s var(--stf-ease) .2s forwards;
}

/* Main heading */
.hero-h1 {
	font-family: var(--stf-font-display);
	font-weight: 400;
	font-size: clamp(46px, 6.4vw, 86px);
	line-height: 1.02;
	color: var(--stf-blanc);
	letter-spacing: -.015em;
	margin: 22px 0 0;
	opacity: 0;
	transform: translateY(24px);
}
.hero-h1 em {
	font-style: italic;
	color: var(--stf-or);
}
.hero-slide.active .hero-h1 {
	animation: stf-up .9s var(--stf-ease) .35s forwards;
}

/* Sub-text */
.hero-sub {
	font-size: 15px;
	line-height: 1.85;
	color: rgba(255, 255, 255, .78);
	max-width: 440px;
	margin-top: 24px;
	opacity: 0;
	transform: translateY(24px);
}
.hero-slide.active .hero-sub {
	animation: stf-up .9s var(--stf-ease) .5s forwards;
}

/* CTA actions */
.hero-actions {
	display: flex;
	gap: 16px;
	margin-top: 38px;
	flex-wrap: wrap;
	opacity: 0;
	transform: translateY(24px);
}
.hero-slide.active .hero-actions {
	animation: stf-up .9s var(--stf-ease) .65s forwards;
}

/* Entrance animation keyframes */
@keyframes stf-up {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Brand badge (optional, used inside templates) */
.hero-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	opacity: 0;
	transform: translateY(20px);
}
.hero-slide.active .hero-brand {
	animation: stf-up .8s var(--stf-ease) .1s forwards;
}
.hero-brand .hb-mark {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
}
.hero-brand .hb-name {
	font-family: var(--stf-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 30px;
	color: #fff;
	line-height: 1;
}
.hero-brand .hb-name b {
	font-style: normal;
	font-weight: 600;
	letter-spacing: .04em;
}

/* ==================================================================
   Thumbnails
   ================================================================== */
.hero-thumbs {
	position: absolute;
	right: 40px;
	bottom: 36px;
	z-index: 5;
	display: flex;
	gap: 14px;
}

.hero-thumb {
	width: 96px;
	height: 64px;
	border: 2px solid rgba(255, 255, 255, .3);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: border-color .3s, transform .3s;
	background-size: cover;
	background-position: center;
}
.hero-thumb:hover {
	transform: translateY(-4px);
}
.hero-thumb.active {
	border-color: var(--stf-or);
}

.hero-thumb .tn {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(transparent, rgba(0, 0, 0, .7));
	padding: 8px 6px 5px;
	text-align: center;
	font-family: var(--stf-font-sans);
}

/* ==================================================================
   Progress Bar
   ================================================================== */
.hero-progress {
	position: absolute;
	left: 40px;
	bottom: 44px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 16px;
	color: rgba(255, 255, 255, .7);
}
.hero-progress .idx {
	font-family: var(--stf-font-sans);
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	line-height: 1;
	letter-spacing: .05em;
}
.hero-progress .bar {
	width: 120px;
	height: 2px;
	background: rgba(255, 255, 255, .25);
	position: relative;
	overflow: hidden;
}
.hero-progress .bar i {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0;
	background: var(--stf-or);
	display: block;
}
.hero-progress .tot {
	font-size: 14px;
	font-family: var(--stf-font-sans);
	font-weight: 500;
	letter-spacing: .05em;
	color: rgba(255, 255, 255, .5);
}

/* ==================================================================
   Navigation Arrows
   ================================================================== */
.hero-arrows {
	position: absolute;
	left: 40px;
	bottom: 96px;
	z-index: 5;
	display: flex;
	gap: 10px;
}

.hero-arrow {
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(0, 0, 0, .12);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: .3s;
	font-size: 16px;
}
.hero-arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}
.hero-arrow:hover {
	background: var(--stf-or);
	border-color: var(--stf-or);
	color: var(--stf-vert-fonce);
}

/* ==================================================================
   Responsive
   ================================================================== */
@media (max-width: 640px) {
	.hero {
		height: 88vh;
		min-height: 520px;
	}
	.hero-thumbs,
	.hero-arrows {
		display: none;
	}
	.hero-progress {
		left: 22px;
	}
	.hero-inner {
		padding: 0 22px;
	}
}