/* ============================================================
   Roman Numerals — Utilities 2
   ============================================================ */

/* ── Contenitore principale ── */
.rn-block {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
}

/* ── Mobile counter globale sticky ── */
.rn-mobile-counter {
	display: none; /* nascosto su desktop */
	position: sticky;
	top: 0;
	z-index: 10;
	text-align: center;
	padding: 16px 20px;
	user-select: none;
}

/* ── Numero per-slide (non più usato su mobile, tenuto per compatibilità) ── */
.rn-slide-num {
	display: none;
}

/* ── Layout desktop: tre colonne ── */
.rn-pin-inner {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	height: 100%;
}

/* Colonne laterali: invisibili nella griglia, numerali in absolute sul blocco */
/* Colonne laterali: in griglia ma senza occupare spazio visivo */
.rn-col-left,
.rn-col-right {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	position: relative;
}

/* Numerali posizionati in fixed rispetto al viewport */
.rn-col-left .rn-numeral {
	position: fixed;
	top: 50vh;
	left: var( --rn-numeral-pos, 12.5vw );
	transform: translate( -50%, -50% );
}

.rn-col-right .rn-numeral {
	position: fixed;
	top: 50vh;
	right: var( --rn-numeral-pos, 12.5vw );
	transform: translate( 50%, -50% );
}

/* Numerali */
.rn-numeral {
	/* font-size e font-style gestiti inline dal blocco */
	/* font-family e tracking ereditati dalle classi del tema via JS */
	line-height: 1;
	color: currentColor;
	user-select: none;
}

/* ── Cerchi SVG attorno ai numerali (solo desktop) ── */
.rn-circle-svg {
	position: fixed;
	top: 50vh;
	pointer-events: none;
	z-index: 1;
}

.rn-circle-svg--left {
	left: var( --rn-numeral-pos, 12.5vw );
	transform: translate( -50%, -50% ) rotate( -90deg );
}

.rn-circle-svg--right {
	right: var( --rn-numeral-pos, 12.5vw );
	transform: translate( 50%, -50% );
}

.rn-circle-bg {
	fill: none;
	stroke: #ffffff;
	stroke-width: 1.5;
}

.rn-circle-progress {
	fill: none;
	stroke: #2D1F3D;
	stroke-width: 1.5;
	stroke-linecap: round;
}

.rn-circle-border {
	fill: none;
	stroke: #2D1F3D;
	stroke-width: 1.5;
}

/* ── Colonna centrale ── */
.rn-col-center {
	height: 100%;
	overflow: hidden;
	position: relative;
}

.rn-scroll-area {
	width: 100%;
	will-change: transform;
}

/* Ogni slide alta 100vh, contenuto centrato verticalmente */
.rn-slide {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem clamp( 1rem, 5vw, 4rem );
	box-sizing: border-box;
}

/* Spazio visivo tra le slide nell'editor */
.rn-slide-edit {
	padding: 2rem clamp( 1rem, 5vw, 4rem );
	margin-bottom: 24px;
	border-bottom: 1px dashed #c0a882;
}

.rn-slide-edit:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.rn-slide-content {
	max-width: 640px;
	width: 100%;
}

.rn-slide-content img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

/* ── Mobile ── */
@media ( max-width: 768px ) {

	/* Il blocco non è più fullscreen fisso */
	.rn-block {
		height: auto;
		overflow: visible; /* necessario per sticky */
	}

	/* Mostra il counter sticky con fade su enter/exit della zona pinned */
	.rn-mobile-counter {
		display: block;
		opacity: 1;
		transition: opacity 0.35s ease;
	}

	.rn-mobile-counter.rn-counter-hidden {
		opacity: 0;
		pointer-events: none;
	}

	/* Nasconde il layout a tre colonne */
	.rn-pin-inner {
		display: block;
	}

	.rn-col-left,
	.rn-col-right {
		display: none;
	}

	.rn-col-center {
		height: auto;
		overflow: visible;
	}

	.rn-scroll-area {
		transform: none !important; /* annulla eventuale gsap.set */
	}

	/* Le slide su mobile scorrono normalmente */
	.rn-slide {
		height: auto;
		min-height: 50vh;
		opacity: 1;
	}


}