/* =============================================================================
   Signijkerk Slider Block
   All animation timing is driven by CSS custom properties set via inline style
   on the block element — edit them in block settings under "Animaties".
   ============================================================================= */

/* ── Default timing variables (overridden by inline style from block attrs) ── */
.wp-block-signijkerk-slider {
	--anim-duration:         600ms;
	--anim-stagger:          220ms;
	--btn-slide-duration:    520ms;
	--btn-fill-duration:     680ms;
	--slide-fade-duration:   450ms;
	--anim-easing:           cubic-bezier(0.22, 1, 0.36, 1);
	--btn-easing:            cubic-bezier(0.65, 0, 0.35, 1);
	--height-desktop:        85vh;
	--height-tablet:         75vh;
	--height-mobile:         65vh;
	--slide-overlay-opacity: 0.45;
	--slide-padding-v:       5rem;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */
.wp-block-signijkerk-slider {
	position: relative;
	overflow: hidden;
	/* full-width handled by WordPress align="full" */
}

/* ── Track: stacks all slides on top of each other ───────────────────────── */
.slider-track {
	position: relative;
	min-height: var( --height-desktop, 85vh );
}

@media ( max-width: 1024px ) {
	.slider-track { min-height: var( --height-tablet, 75vh ); }
}

@media ( max-width: 640px ) {
	.slider-track { min-height: var( --height-mobile, 65vh ); }
}

/* ── Individual slide ─────────────────────────────────────────────────────── */
.slider-slide {
	position: absolute;
	inset: 0;
	min-height: var( --height-desktop, 85vh );
	/* No background-* here — background lives in .slide-bg */
	overflow: hidden; /* clips the slide-bg during parallax */

	/* Hidden by default — JS adds .is-active */
	opacity: 0;
	pointer-events: none;
	transition: opacity var( --slide-fade-duration ) ease;
	z-index: 0;
}

@media ( max-width: 1024px ) {
	.slider-slide { min-height: var( --height-tablet, 75vh ); }
}

@media ( max-width: 640px ) {
	.slider-slide { min-height: var( --height-mobile, 65vh ); }
}

/* ── Background image layer (separate div for parallax) ───────────────────── */
.slide-bg {
	position: absolute;
	inset: 0;
	/* Default: fills the slide exactly */
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* JS sets height: 130% / top: -15% when parallax is active */
	will-change: transform;
}

/* The first slide is shown immediately (before JS boots) */
.slider-slide.is-first {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

.slider-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

/* ── Dark overlay over background image ──────────────────────────────────── */
.slide-overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, var( --slide-overlay-opacity ) );
	z-index: 0;
	pointer-events: none;
}

/* ── Inner content wrapper ────────────────────────────────────────────────── */
.slide-inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: var( --slide-padding-v ) 1.5rem;
	min-height: var( --height-desktop, 85vh );
	display: flex;
	align-items: center;
}

@media ( max-width: 1024px ) {
	.slide-inner { min-height: var( --height-tablet, 75vh ); }
}

@media ( max-width: 640px ) {
	.slide-inner { min-height: var( --height-mobile, 65vh ); }
}

/* Two-column layout */
.slide-inner--columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

@media ( max-width: 768px ) {
	.slide-inner--columns {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* ── Columns ──────────────────────────────────────────────────────────────── */
.slide-col--image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.slide-col--content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* ── Optional image in left column ───────────────────────────────────────── */
.slide-image {
	max-width: 100%;
	max-height: 60vh;
	-o-object-fit: contain;
	   object-fit: contain;
	display: block;
}

/* ── Text elements — initial (hidden) state ──────────────────────────────── */
/*
   JS sets `transition-delay` on each element via data-anim-index before
   adding .is-active, so the stagger is precise and independently tunable.
*/
.slide-element {
	opacity: 0;
	transform: translateY( 28px );
	transition:
		opacity  var( --anim-duration ) var( --anim-easing ),
		transform var( --anim-duration ) var( --anim-easing );
	will-change: opacity, transform;
}

/* Image gets a simpler fade (no vertical translate) */
.slide-image.slide-element {
	transform: none;
	transition: opacity var( --anim-duration ) var( --anim-easing );
}

/* ── Text elements — active state (JS adds .is-active to the slide) ──────── */
.slider-slide.is-active .slide-element {
	opacity: 1;
	transform: translateY( 0 );
}

/* Image fades to its custom opacity (set via --slide-img-opacity CSS var) */
.slider-slide.is-active .slide-image.slide-element {
	opacity: var( --slide-img-opacity, 0.85 );
	transform: none;
}

/* ── Small title ──────────────────────────────────────────────────────────── */
.slide-small-title {
	margin: 0;
	font-size: clamp( 0.9rem, 1.5vw, 1.1rem );
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var( --wp--preset--color--accent, #F07D00 );
}

/* ── Big title ────────────────────────────────────────────────────────────── */
.slide-big-title {
	margin: 0;
	font-size: clamp( 2rem, 5vw, 3.5rem );
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}

/* ── CTA wrapper — slides in from right ──────────────────────────────────── */
.slide-cta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 0.5rem;

	/* Hidden / off-screen to the right */
	opacity: 0;
	transform: translateX( 64px );
	transition:
		opacity  var( --btn-slide-duration ) var( --anim-easing ),
		transform var( --btn-slide-duration ) var( --anim-easing );
	will-change: opacity, transform;
}

/* JS adds .is-cta-in when the CTA should slide in */
.slider-slide.is-cta-in .slide-cta {
	opacity: 1;
	transform: translateX( 0 );
}

/* ── Button ───────────────────────────────────────────────────────────────── */
.slide-btn {
	display: inline-block;
	position: relative;
	padding: 0.9em 2.2em;
	border: 2px solid var( --wp--preset--color--accent, #F07D00 );
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	font-size: clamp( 0.9rem, 1.5vw, 1rem );
	font-weight: 600;

	/* Outline state: no fill, just border */
	background: transparent;
}

/* Fill pseudo-element — scales in from left */
.slide-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var( --wp--preset--color--accent, #F07D00 );
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform var( --btn-fill-duration ) var( --btn-easing );
	will-change: transform;
}

/* JS adds .is-cta-fill — triggers the fill */
.slider-slide.is-cta-fill .slide-btn::before {
	transform: scaleX( 1 );
}

/* ── Button text — hidden until fill is complete ─────────────────────────── */
.slide-btn__text {
	position: relative;
	z-index: 1;

	/* Start transparent (text hidden while outline-only) */
	color: transparent;

	/*
	  transition-delay is set by JS to (btnSlideDuration + btnFillDuration + buffer)
	  so the text only appears once the fill animation finishes.
	*/
	transition: color 150ms ease;
	white-space: nowrap;
	display: inline-block;
}

/* JS adds .is-cta-done — reveals the text */
.slider-slide.is-cta-done .slide-btn__text {
	color: #fff;
}

/* ── Navigation dots ──────────────────────────────────────────────────────── */
.slider-dots {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX( -50% );
	display: flex;
	gap: 0.5rem;
	z-index: 10;
}

.slider-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid rgba( 255, 255, 255, 0.7 );
	background: transparent;
	cursor: pointer;
	padding: 0;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.slider-dot.is-active {
	background: #fff;
	border-color: #fff;
	transform: scale( 1.25 );
}

.slider-dot:hover:not( .is-active ) {
	border-color: #fff;
	background: rgba( 255, 255, 255, 0.35 );
}

/* ── Arrow buttons ────────────────────────────────────────────────────────── */
.slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 10;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid rgba( 255, 255, 255, 0.5 );
	background: rgba( 0, 0, 0, 0.2 );
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, border-color 0.2s ease;
	padding: 0;
}

.slider-arrow:hover {
	background: rgba( 0, 0, 0, 0.5 );
	border-color: rgba( 255, 255, 255, 0.9 );
}

.slider-arrow svg {
	width: 20px;
	height: 20px;
	display: block;
}

.slider-arrow--prev { left: 1.5rem; }
.slider-arrow--next { right: 1.5rem; }

@media ( max-width: 640px ) {
	.slider-arrow { display: none; }
}

/* =============================================================================
   EDITOR-ONLY styles
   ============================================================================= */

.wp-block-signijkerk-slider .slider-editor-tabs {
	display: flex;
	gap: 4px;
	padding: 8px 8px 0;
	background: rgba( 0, 0, 0, 0.4 );
	position: relative;
	z-index: 2;
	flex-wrap: wrap;
}

.wp-block-signijkerk-slider .slider-editor-tab {
	padding: 4px 12px;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	background: transparent;
	color: rgba( 255, 255, 255, 0.8 );
	border-radius: 3px 3px 0 0;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	transition: background 0.15s ease;
}

.wp-block-signijkerk-slider .slider-editor-tab.is-active {
	background: rgba( 255, 255, 255, 0.2 );
	color: #fff;
	border-bottom-color: transparent;
}

.wp-block-signijkerk-slider .slider-editor-tab--add {
	font-size: 18px;
	line-height: 1;
	padding: 2px 10px;
	border-style: dashed;
}

.wp-block-signijkerk-slider .slider-editor-preview {
	position: relative;
	/* JS sets this via inline style from heightDesktop attr */
	min-height: var( --height-desktop, 85vh );
	background-size: cover;
	background-position: center;
	background-color: var( --wp--preset--color--primary, #1A3C5E );
}

.wp-block-signijkerk-slider .slider-editor-preview .slide-inner {
	position: relative;
	z-index: 1;
}

/* In editor: show all text elements visibly (no animation) */
.wp-block-signijkerk-slider .slider-editor-preview .slide-element {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Editor button shows as filled immediately */
.wp-block-signijkerk-slider .slide-cta--editor {
	opacity: 1;
	transform: none;
	transition: none;
}

.wp-block-signijkerk-slider .slide-cta--editor .slide-btn {
	background: var( --wp--preset--color--accent, #F07D00 );
	border-color: var( --wp--preset--color--accent, #F07D00 );
}

.wp-block-signijkerk-slider .slide-cta--editor .slide-btn__text--editor {
	color: #fff;
}

.wp-block-signijkerk-slider .slider-editor-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 10px;
	background: rgba( 0, 0, 0, 0.3 );
}

.wp-block-signijkerk-slider .slider-editor-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid rgba( 255, 255, 255, 0.5 );
	background: transparent;
	display: inline-block;
}

.wp-block-signijkerk-slider .slider-editor-dot.is-active {
	background: #fff;
	border-color: #fff;
}

/* Image placeholder in editor */
.wp-block-signijkerk-slider .slide-image-placeholder {
	width: 100%;
	min-height: 200px;
	border: 2px dashed rgba( 255, 255, 255, 0.4 );
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba( 255, 255, 255, 0.6 );
	font-size: 0.875rem;
}