/* ILPA L Container — immagine con maschera a L su layout 2x2,
 * quarta area (scanso) come contenitore Elementor.
 *
 * Geometria: lo scanso della MASCHERA = dimensioni slot + gap,
 * così il contenitore resta a filo con i bordi esterni del widget
 * e il gap è lo spazio tra contenuto e bordo curvo dell'immagine.
 *
 * --ilpa-lc-clip è iniettato dal JS (path arrotondato); il fallback
 * è un polygon a spigoli vivi, uno per orientamento.
 */

.ilpa-lc {
	--ilpa-lc-slot-w: 38%;
	--ilpa-lc-slot-h: 42%;
	--ilpa-lc-gap: 20px;
	--ilpa-lc-radius: 20px;
	--ilpa-lc-bg: #d3dcea;

	/* scanso totale della maschera: slot + gap */
	--_nw: calc(var(--ilpa-lc-slot-w) + var(--ilpa-lc-gap));
	--_nh: calc(var(--ilpa-lc-slot-h) + var(--ilpa-lc-gap));

	position: relative;
	display: block;
	box-sizing: border-box;
}

.ilpa-lc *,
.ilpa-lc *::before,
.ilpa-lc *::after {
	box-sizing: border-box;
}

/* ---------- IMMAGINE ---------- */

.ilpa-lc__media {
	position: relative;
	width: 100%;
	background: var(--ilpa-lc-bg);
	overflow: hidden;
}

.ilpa-lc__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Fallback polygon per orientamento (spigoli vivi, sostituito dal JS). */
.ilpa-lc--br .ilpa-lc__media {
	clip-path: var(--ilpa-lc-clip, polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--_nh)),
		calc(100% - var(--_nw)) calc(100% - var(--_nh)),
		calc(100% - var(--_nw)) 100%,
		0 100%
	));
}

.ilpa-lc--bl .ilpa-lc__media {
	clip-path: var(--ilpa-lc-clip, polygon(
		0 0,
		100% 0,
		100% 100%,
		var(--_nw) 100%,
		var(--_nw) calc(100% - var(--_nh)),
		0 calc(100% - var(--_nh))
	));
}

.ilpa-lc--tr .ilpa-lc__media {
	clip-path: var(--ilpa-lc-clip, polygon(
		0 0,
		calc(100% - var(--_nw)) 0,
		calc(100% - var(--_nw)) var(--_nh),
		100% var(--_nh),
		100% 100%,
		0 100%
	));
}

.ilpa-lc--tl .ilpa-lc__media {
	clip-path: var(--ilpa-lc-clip, polygon(
		var(--_nw) 0,
		100% 0,
		100% 100%,
		0 100%,
		0 var(--_nh),
		var(--_nw) var(--_nh)
	));
}

/* Scanso annullato dal JS (troppo grande/piccolo): rettangolo tondo. */
.ilpa-lc__media[data-no-clip="1"] {
	clip-path: none;
	border-radius: var(--ilpa-lc-radius);
}

/* ---------- SLOT ---------- */

.ilpa-lc__slot {
	position: absolute;
	width: var(--ilpa-lc-slot-w);
	height: var(--ilpa-lc-slot-h);
	z-index: 1;
}

.ilpa-lc--br .ilpa-lc__slot { right: 0;  bottom: 0; }
.ilpa-lc--bl .ilpa-lc__slot { left: 0;   bottom: 0; }
.ilpa-lc--tr .ilpa-lc__slot { right: 0;  top: 0; }
.ilpa-lc--tl .ilpa-lc__slot { left: 0;   top: 0; }

/* Il container figlio riempie la cella; nessuno stile visivo:
 * sfondo, radius, ombre si gestiscono dai controlli nativi del container. */
.ilpa-lc__slot > .e-con {
	height: 100%;
	max-width: 100%;
	min-height: 0;
}

/* ---------- COLLASSO (classe applicata dal JS sotto il breakpoint) ---------- */

.ilpa-lc.ilpa-lc--collapsed {
	display: flex;
	flex-direction: column;
}

.ilpa-lc--collapsed .ilpa-lc__media {
	clip-path: none;
	border-radius: var(--ilpa-lc-radius);
}

.ilpa-lc--collapsed .ilpa-lc__slot {
	position: static;
	width: 100%;
	height: auto;
	margin-top: var(--ilpa-lc-gap);
}

.ilpa-lc--collapsed .ilpa-lc__slot > .e-con {
	height: auto;
}

/* Slot sopra l'immagine */
.ilpa-lc--collapse-stacktop.ilpa-lc--collapsed .ilpa-lc__slot {
	order: -1;
	margin-top: 0;
	margin-bottom: var(--ilpa-lc-gap);
}

/* Slot nascosto */
.ilpa-lc--collapse-hide.ilpa-lc--collapsed .ilpa-lc__slot {
	display: none;
}