/* ==========================================================================
   Ensoul Depth Parallax v11.5.14 – Frontend + Editor
   Tailwind (PHP): relative w-full overflow-hidden on .esdp-wrap
                   block w-full h-full on .esdp-canvas
                   absolute inset-0 flex flex-col pointer-events-none on .esdp-overlay
                   flex flex-col on .esdp-overlay-inner
   ========================================================================== */
.esdp-wrap{cursor:crosshair;background:#e5d3ce;border-bottom-left-radius:8px;border-bottom-right-radius:8px}
.esdp-overlay{z-index:3;display:flex;flex-direction:column;gap:.25em;padding:2rem 3rem;user-select:none;opacity:0}
.esdp-overlay.esdp-align-left{align-items:flex-start;text-align:left}
.esdp-overlay.esdp-align-center{align-items:center;text-align:center}
.esdp-overlay.esdp-align-right{align-items:flex-end;text-align:right}
.esdp-overlay.esdp-valign-top{justify-content:flex-start}
.esdp-overlay.esdp-valign-center{justify-content:center}
.esdp-overlay.esdp-valign-bottom{justify-content:flex-end}
.esdp-overlay.esdp-shadow .esdp-overlay-paragraph,
.esdp-overlay.esdp-shadow .esdp-overlay-title,
.esdp-overlay.esdp-shadow .esdp-overlay-subtitle{text-shadow:0 2px 20px rgba(45,31,61,.7),0 1px 4px rgba(45,31,61,.5),0 0 40px rgba(45,31,61,.3)}
.esdp-overlay-inner{display:flex;flex-direction:column;width:65%;max-width:65%;gap:.25em}
.esdp-overlay-paragraph{font-size:clamp(.65rem,1.5vw,.8rem);font-weight:400;line-height:1.4;letter-spacing:.04em;margin:0 0 30px 0;opacity:.7;color:inherit;text-transform:uppercase}
/* Base title rule: typography applies to EVERY layoutPreset (custom, centered,
   corners) so the theme's h2 font never leaks through, regardless of which
   preset the user picked. !important survives WP FSE :where()/heading layers. */
.esdp-overlay-title{
	font-size:clamp(1.8rem,5vw,3.5rem);
	line-height:1.1;
	margin:0;
	color:inherit;
	font-family:'Basis Grotesque Arabic Pro','Helvetica Neue',Arial,sans-serif !important;
	font-weight:700 !important;
	font-style:normal !important;
	font-variant:normal !important;
	text-transform:uppercase !important;
}
.esdp-overlay-subtitle{font-size:clamp(.54rem,1.5vw,1.2rem);font-weight:400;line-height:1.3;letter-spacing:.01em;margin:20px 0 0 0;opacity:.85;color:inherit}
/* Fullscreen */
.esdp-wrap.esdp-fullscreen{width:100vw!important;height:100vh!important;max-width:none!important;border-radius:0!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
.esdp-wrap.esdp-fullscreen .esdp-canvas{width:100%;height:100%}
/* Mobile: 4:5 aspect ratio, crop center + wider overlay text */
@media (max-width:768px){
.esdp-wrap:not(.esdp-fullscreen){aspect-ratio:4/5!important;height:auto!important}
.esdp-overlay-inner{width:78%;max-width:78%}
.esdp-overlay-subtitle{font-size:14px}
}
/* Editor */
.esdp-editor-wrap{border:1px solid #ddd;border-radius:8px;overflow:hidden;background:#f9f9f9;box-sizing:border-box}
/* Override WP editor constrained layout — fill parent column/container */
.block-editor-block-list__block:has(> .esdp-editor-wrap),
.wp-block[data-type="ensoul/depth-parallax"]{max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important;align-self:stretch!important}
.esdp-editor-wrap.esdp-fullscreen .esdp-editor-preview{min-height:80vh}
.esdp-editor-preview{position:relative;width:100%;overflow:hidden;background:#e5d3ce;cursor:crosshair}
.esdp-editor-preview img{display:block;width:100%;height:100%;object-fit:cover}
.esdp-editor-preview .esdp-overlay{position:absolute;inset:0;display:flex;flex-direction:column}
.esdp-editor-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:300px;padding:40px;text-align:center;color:#666}
.esdp-editor-placeholder .dashicons{font-size:48px;width:48px;height:48px;color:#999}
.esdp-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;background:#fff;border-top:1px solid #eee}
.esdp-upload-grid-3{grid-template-columns:1fr 1fr 1fr}
/* v10.3.0 — sidebar variant: no extra padding/background/border (PanelBody handles chrome) */
.esdp-upload-grid.esdp-upload-grid-sidebar{padding:0;background:transparent;border-top:0;gap:10px}
.esdp-upload-grid.esdp-upload-grid-sidebar .esdp-slot-label{font-size:10px}
.esdp-upload-slot{display:flex;flex-direction:column;align-items:center;gap:8px}
.esdp-upload-slot .esdp-slot-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#888}
.esdp-upload-slot .esdp-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;border:1px solid #ddd}
.esdp-upload-slot .components-button{width:100%;justify-content:center}
.esdp-upload-slot .esdp-thumb-wrap{position:relative;width:100%}
.esdp-upload-slot .esdp-thumb-wrap .esdp-remove-btn{position:absolute;top:4px;right:4px;min-width:24px;height:24px;padding:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center}
.esdp-upload-slot .esdp-thumb-wrap .esdp-remove-btn:hover{background:#c00}
/* Scroll container: negative margin pulls next content behind sticky block.
   z-index ensures the block stays on top of content scrolling behind it. */
.esdp-scroll-container{margin-bottom:0;position:relative;z-index:100}
/* ── LOW tier fallback ── */
.esdp-wrap.esdp-low-tier .esdp-canvas{display:none}
.esdp-fallback-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;transition:transform 0.1s ease-out;z-index:1}

/* ── Udine time & weather overlay ── */
#esdp-udine-time,
#esdp-udine-weather {
	position: fixed;
	top: 20px;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	font-size: clamp(9px, 1vw, 11px);
	letter-spacing: 0.08em;
	text-transform: lowercase;
	line-height: 1;
	transition: opacity 0.8s ease;
}
#esdp-udine-time   { left: 8.33%; }
#esdp-udine-weather { right: 8.33%; text-align: right; }
#esdp-udine-time.visible,
#esdp-udine-weather.visible { opacity: 1; }

/* difference blend mode requires no stacking context interference */
#esdp-udine-time,
#esdp-udine-weather {
	mix-blend-mode: difference !important;
	color: #fff !important;
}

/* ── ASCII Home Preloader ── */
.esdp-ascii-preloader {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e5d3ce;
	opacity: 1;
	pointer-events: none;
	overflow: hidden;
	will-change: opacity, background;
}
.esdp-ascii-pre {
	font-family: 'Courier New', Courier, monospace;
	font-size: clamp(6.24px, 1.32vw, 14.04px);
	line-height: 1.15;
	letter-spacing: 0;
	color: #1a1a1a;
	white-space: pre;
	margin: 0;
	text-align: center;
	overflow: hidden;
	will-change: opacity;
}
.esdp-ascii-line {
	display: inline;
	opacity: 0;
	transition: opacity 0.08s ease;
}
/* GPU-accelerate clip + filter during home preloader */
.esdp-wrap[data-home="true"] .esdp-canvas {
	will-change: clip-path, filter, opacity;
}
@media (max-width: 768px) {
	.esdp-ascii-pre {
		/* v8.1: 1.8vw fits ~82-char lines within 375 px viewport (was 2.5vw) */
		font-size: clamp(3px, 1.8vw, 7px);
	}
}

/* ── Center-page column reveal ── */
.esdp-center-reveal-overlay {
	will-change: clip-path;
}

/* v11.5.11 — when centerReveal flag is on, the overlay title uses PP Editorial
   italic (not Basis Grotesque, not uppercase). Scoped via data-center-reveal
   on the wrap so the rule only applies to blocks with the flag enabled and
   leaves homePreloader / corners / centered presets untouched on other blocks. */
.esdp-wrap[data-center-reveal="true"] .esdp-overlay-title {
	font-family: 'PP Editorial New', 'PP Editorial', 'Times New Roman', serif !important;
	font-style: italic !important;
	font-weight: 400 !important;
	text-transform: none !important;
}

/* ==========================================================================
   Layout presets — v11.1.0+
   Two opinionated overlay layouts, opt-in via layoutPreset attribute.
   Legacy `custom` preset (overlayAlign + overlayVAlign) is untouched.
   ========================================================================== */

/* Title typography (font-family + bold + uppercase) is declared on the base
   .esdp-overlay-title rule near the top of this file, with !important, so it
   applies to ALL layoutPreset values (custom, centered, corners). The per-
   preset rules below only adjust font-size / layout. */

/* ── Preset 1: CENTERED ─────────────────────────────────────────────────── */
.esdp-overlay.esdp-preset-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem;
	gap: .25em;
}
.esdp-overlay.esdp-preset-centered .esdp-overlay-inner {
	width: 100%;
	max-width: 600px;
	align-items: center;
	text-align: center;
	gap: .25em;
}
.esdp-overlay.esdp-preset-centered .esdp-overlay-title {
	font-size: clamp(1.5rem, 2.5vw, 3rem);
	line-height: 1;
	margin: 0;
}
/* paragraph + subtitle keep existing styles, only re-center them */
.esdp-overlay.esdp-preset-centered .esdp-overlay-paragraph,
.esdp-overlay.esdp-preset-centered .esdp-overlay-subtitle {
	text-align: center;
}

/* ── Preset 2: CORNERS ──────────────────────────────────────────────────── */
.esdp-overlay.esdp-preset-corners {
	display: block;
	padding: 0;
	gap: 0;
}
.esdp-overlay.esdp-preset-corners .esdp-corner {
	position: absolute;
	display: flex;
	flex-direction: column;
}
/* Bottom-left: paragraph + title.
   `top` is a safety ceiling: prevents the title from rising into the
   fixed udine-time/weather strip (which sits at top:20px, ~11px tall).
   Horizontal anchor at 4.165% — the udine-time/weather strips share the
   same anchor (inline-style in PHP) so the four columns line up vertically.
   bottom:125px (v11.5.5). */
.esdp-overlay.esdp-preset-corners .esdp-corner-bl {
	left: 4.165%;
	bottom: 125px;
	top: 80px;
	right: auto;
	max-width: 35%;
	justify-content: flex-end;
	text-align: left;
	padding: 0;
	margin: 0;
	gap: 0;
}
.esdp-overlay.esdp-preset-corners .esdp-corner-br {
	right: 4.165%;
	bottom: 125px;
	left: auto;
	max-width: 35%;
	align-items: flex-start;
	text-align: left;
	padding: 0;
	margin: 0;
}
/* Paragraph: 10px gap below toward the title. */
.esdp-overlay.esdp-preset-corners .esdp-corner-bl .esdp-overlay-paragraph {
	margin: 0;
	padding-bottom: 10px;
}
/* Title fills its corner column (35%); +40% over the 11.3.1 baseline.
   Min 2.1rem, scales at 3.5vw, max 5.6rem on large monitors. */
.esdp-overlay.esdp-preset-corners .esdp-overlay-title {
	font-size: clamp(2.1rem, 3.5vw, 5.6rem);
	line-height: 1;
	margin: 0;
	max-width: 100%;
	overflow-wrap: break-word;
}
/* HOME ONLY: title scaled to ~0.78 of the default (-40% then +30% again).
   WordPress adds `.home` to <body> on the front page (whether static-page
   or latest-posts), so this scope targets the home alone. */
body.home .esdp-overlay.esdp-preset-corners .esdp-overlay-title {
	font-size: clamp(1.638rem, 2.73vw, 4.368rem);
}
/* Subtitle keeps base styles; only reset top margin since it stands alone */
.esdp-overlay.esdp-preset-corners .esdp-corner-br .esdp-overlay-subtitle {
	margin-top: 0;
}

/* ── Mobile: both presets collapse to a single readable column ──────────── */
@media (max-width: 768px) {
	.esdp-overlay.esdp-preset-centered {
		padding: 1.5rem;
	}
	.esdp-overlay.esdp-preset-centered .esdp-overlay-inner {
		max-width: 90%;
	}
	.esdp-overlay.esdp-preset-corners {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		/* v11.5.10: single-column mobile layout, 140px clearance from bottom. */
		padding: 1.5rem 1.5rem 140px 1.5rem;
		gap: 1rem;
	}
	/* v11.5.9: both corners full-width on mobile, stacked into one column
	   (paragraph + title from corner-bl, then subtitle from corner-br). */
	.esdp-overlay.esdp-preset-corners .esdp-corner {
		position: static;
		max-width: 100%;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
	}
	.esdp-overlay.esdp-preset-corners .esdp-corner-br {
		align-items: flex-start;
		text-align: left;
	}
	/* Subtitle fixed at 14px on mobile. */
	.esdp-overlay.esdp-preset-corners .esdp-overlay-subtitle {
		font-size: 14px;
	}
	/* Ignore hardcoded line breaks inside the subtitle on mobile — let
	   text flow naturally within the available width. */
	.esdp-overlay.esdp-preset-corners .esdp-overlay-subtitle br {
		display: none;
	}
}