/* ==========================================================================
   Ensoul Divider v2.5.5
   - Global vertical grid lines (sempre on, footer escluso via JS)
   - Layout overrides per .ensoul-columns-section.divider (North columns)
   - Animazioni clip-path per immagini e video
   ========================================================================== */

/* ── Global vertical grid lines ──────────────────────────── */
#escr-global-lines {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	pointer-events: none;
	z-index: 0;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	/* No blend mode by default: line colors render exactly as picked
	   in Settings → Ensoul Utilities → Line Colors palette.
	   Sections with .ens-lines-diff still toggle mix-blend-mode:difference
	   at runtime via ens-line-colors.js.

	   --ens-line-border-alpha drives the divider-line opacity. Default
	   0.3. Sections with .ens-lines-soft tween this down (typically to
	   ~0.1) via ens-line-colors.js to soften the dividers without
	   affecting the colored fill. */
	--ens-line-border-alpha: 0.3;
}

#escr-global-lines > span {
	display: block;
}

#escr-global-lines > span:not(:last-child) {
	border-right: 1px solid rgba(255, 255, 255, var(--ens-line-border-alpha, 0.3));
}

/* ── Mobile: 8 colonne (di cui 6 centrali per i contenuti) ─── */
@media (max-width: 767px) {
	#escr-global-lines {
		grid-template-columns: repeat(8, 1fr);
	}

	#escr-global-lines > span:nth-child(n+9) {
		display: none;
	}

	/* Override della variabile sorgente del north-theme: cambia il padding
	   mobile da 30px a 12.5vw (= 1/8 viewport) per allineare i contenuti
	   alle 6 colonne centrali sulle 8 totali. */
	:root {
		--spacing-content-padding-mobile: 12.5vw;
	}

	/* Annulla la variabile dentro i container "padded" su mobile.
	   `.max-w-container-content-padded` ha la utility Tailwind
	   `px-[var(--spacing-content-padding-left)]` che riapplicherebbe
	   12.5vw → padding totale 25vw (2 colonne). Ridefinendo la variabile
	   a 0 nel contesto, l'utility legge 0 e non aggiunge padding doppio. */
	.max-w-container-content-padded {
		--spacing-content-padding-left: 0;
	}

	/* Le colonne North su mobile hanno `flex: 1 1 0%` di default che le
	   fa stare side-by-side anche con flex-wrap, restringendo ognuna a
	   1/N del viewport. La utility `max-md:!w-full` setta solo `width`
	   ma flex-basis prevale. Forziamo flex-basis 100% così le colonne
	   stack-ano verticalmente e il contenuto usa l'intera larghezza
	   disponibile (= padding 1 colonna a sinistra dato dal wp-site-blocks). */
	.ensoul-columns-block > .ensoul-column-wrapper {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ── Divider: sezione contenitore ────────────────────────── */
/*
   North con dimension=full wrappa il blocco in un <section>.
   Specificita 0,2,0 / 0,3,0 (unlayered) batte North @layer (0,1,0 layered).
   !important non necessario.
*/
.ensoul-columns-section.divider,
.ensoul-columns-section.divider .ensoul-columns-block {
	margin-top: 0;
	margin-bottom: 0;
}

/* ── Divider: grid row ───────────────────────────────────── */
.ensoul-columns-section.divider .ensoul-columns-block {
	gap: 0;
	min-height: 100vh;
	padding: 0;
	/* grid-template-columns è già gestito da North tramite md:grid-cols-N */
}

/* ── Divider: ogni colonna ───────────────────────────────── */
.ensoul-columns-section.divider .ensoul-columns-block > .ensoul-column-wrapper {
	position: relative;
	overflow: clip;
	min-height: 100vh;
	padding: 0;
	isolation: isolate;
}

/* ── Reveal: immagine (strips) ───────────────────────────── */
.ediv-image-wrap {
	position: absolute;
	inset: 0;
}

.ediv-strip {
	position: absolute;
	inset: 0;
	will-change: clip-path;
}

.ediv-strip img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

/* ── Reveal: video (single wipe) ─────────────────────────── */
.ediv-video-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	will-change: clip-path;
}

/* Video full-bleed: !important necessario per sovrascrivere
   stili core WP (wp-block-image img { max-width: 100% }) non layered */
.ediv-video {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	-webkit-appearance: none;
}

/* Vendor pseudo-elements: !important necessario */
.ediv-video::-webkit-media-controls             { display: none !important; }
.ediv-video::-webkit-media-controls-enclosure   { display: none !important; }
.ediv-video::-webkit-media-controls-panel       { display: none !important; }
.ediv-video::-webkit-media-controls-overlay-play-button { display: none !important; }

/* ── Reveal: testo ───────────────────────────────────────── */
.ediv-text-content {
	opacity: 0;
	will-change: opacity;
	position: relative;
	z-index: 1;
	padding: clamp(2rem, 5vw, 5rem);
}

/* Legacy .ediv-line-mask: non più generato da SplitText 3.13 (mask:'lines'),
   mantenuto per retrocompatibilità con eventuale markup statico */
.ediv-line-mask {
	display: block;
	overflow: hidden;
	padding-bottom: 0.08em;
}

/* .ediv-line: nessun transform di default.
   La posizione iniziale è gestita interamente da GSAP (from/fromTo).
   SplitText 3.13 con mask:'lines' crea i wrapper overflow:hidden in automatico. */
.ediv-line {
	display: block;
}

/* ── Utility: allineamento verticale colonne (desktop) ───── */
@media (min-width: 768px) {
	.ensoul-columns-section .ensoul-column-wrapper.vert-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
	}

	.ensoul-columns-section .ensoul-column-wrapper.vert-flex {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
	}
}

/* ── Mobile: divider override altezze ──────────────────────── */
@media (max-width: 767px) {
	.ensoul-columns-section.divider .ensoul-columns-block {
		min-height: 0;
	}

	.ensoul-columns-section.divider .ensoul-columns-block > .ensoul-column-wrapper {
		min-height: 0;
	}

	.ensoul-columns-section.divider .ensoul-columns-block > .ensoul-column-wrapper.ediv--image,
	.ensoul-columns-section.divider .ensoul-columns-block > .ensoul-column-wrapper.ediv--video {
		height: 100vw;
		min-height: 60vh;
		max-height: 80vh;
	}

	.ensoul-columns-section.divider .ensoul-columns-block > .ensoul-column-wrapper.ediv--text {
		min-height: 0;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
}

/* ==========================================================================
   DIVIDER-PIN v2.3.0
   Sequenza pinnata senza wrapper extra.
   La prima section fa da trigger pinnato.
   Le section successive vengono gestite come fixed overlay via JS.
   ========================================================================== */

/* ── Ogni pannello nel gruppo ─────────────────────────── */
.ediv-pin-panel .ensoul-columns-block {
	height: 100vh;
	min-height: 100vh;
	gap: 0;
	padding: 0;
	margin: 0;
}

.ediv-pin-panel .ensoul-column-wrapper {
	height: 100vh;
	min-height: 100vh;
	overflow: hidden;
	padding: 0;
	position: relative;
}

/* ── Immagini: coprono tutta la colonna ───────────────── */
/* !important necessario: sovrascrive stili core WP non layered */
.ediv-pin-panel .ensoul-column-wrapper img,
.ediv-pin-panel .ensoul-column-wrapper figure,
.ediv-pin-panel .ensoul-column-wrapper .wp-block-image {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.ediv-pin-panel .ensoul-column-wrapper img {
	object-fit: cover;
	object-position: center;
}

/* ── Video: coprono tutta la colonna ──────────────────── */
/* !important necessario: sovrascrive stili core WP non layered */
.ediv-pin-panel .ediv-pin--video video {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

/* Vendor pseudo-elements: !important necessario */
.ediv-pin-panel .ediv-pin--video video::-webkit-media-controls,
.ediv-pin-panel .ediv-pin--video video::-webkit-media-controls-enclosure { display: none !important; }

/* ── Testo: centrato verticalmente nel pannello ───────── */
.ediv-pin-panel .ediv-pin--text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: clamp(2rem, 5vw, 5rem);
}

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 767px) {
	.ediv-pin-panel .ensoul-columns-block {
		height: 100svh;
		min-height: 100svh;
	}

	.ediv-pin-panel .ensoul-column-wrapper {
		height: auto;
		min-height: 0;
		flex: 1 1 0;
	}

	.ediv-pin-panel .ediv-pin--text {
		flex: none;
		height: auto;
		padding: 2rem;
	}
}

/* ── Sticky: applicabile a qualsiasi contenuto dentro la colonna ─── */
@media (min-width: 768px) {
	.sticky {
		position: sticky;
		top: 0;
	}
}

/* ── Override: text-split non spezza sui trattini ──────── */
.text-split {
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* ── text-split: supporto tag inline (a, strong, em …) ─── */
.ediv-line a,
.ediv-line-mask a {
	pointer-events: auto;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.ediv-line a:hover {
	opacity: 0.7;
}