/**
* Ploomia — "maschera" immagine con tecnica overlay (replica esatta ploomia.com).
*
* Su ploomia.com (div[data-w-id="4525b0dd-606d-f937-b500-afd2410c03c4"], .approach-image-wrap)
* NON c'è clip-path/mask sull'immagine. La struttura è:
*
* .approach-image-wrap { position: relative } ← WRAPPER
* img.approach-image { border-radius: 2.5rem } ← immagine semplice
* .approach-sticky-block-right-bottom ← blocco bianco overlay
* { position:absolute; inset:auto 0 0 auto; width:10vw; height:6vw;
* background:#fcfcfc; border-radius:2.5rem 0 0 0 }
* .approach-sticky-corner-left-bottom { 40×40; inset:auto 10vw 0 auto } ← angolo SVG
* .approach-sticky-corner-right-top { 40×40; inset:auto 0 6vw auto } ← angolo SVG
*
* Gli angoli usano lo stesso SVG dell'hero (nessuna rotazione):
*
* = quarto di cerchio concavo che riempie la tasca basso-destra del box 40×40.
*
* QUI replichiamo con pseudo-elementi sul WRAPPER (no markup extra):
* ::after = blocco bianco
* ::before = striscia basso-destra con i 2 angoli disegnati via mask-image
* (background-color + mask = colore pilotabile da variabile CSS,
* cosa impossibile con un data-URI colorato).
*
* REQUISITO: le classi vanno su un WRAPPER che contiene l'immagine
* (un ![]()
nudo non può ospitare pseudo-elementi).
* In Elementor: widget Immagine → Avanzate → Classi CSS — sempre la classe
* base "ploomia-img-mask" + UNA variante:
*
* VERTICALI (blocco stretto e alto, default 15%×49%):
* ploomia-img-mask ploomia-img-mask--br basso-destra (come ploomia.com)
* ploomia-img-mask ploomia-img-mask--bl basso-sinistra (speculare)
*
* ORIZZONTALI (blocco largo e basso, default 49%×15% — proporzioni
* invertite via override di --ploomia-mask-w/h; stessa tecnica):
* ploomia-img-mask ploomia-img-mask--h-tl alto-sinistra
* ploomia-img-mask ploomia-img-mask--h-tr alto-destra
* ploomia-img-mask ploomia-img-mask--h-bl basso-sinistra
* ploomia-img-mask ploomia-img-mask--h-br basso-destra
*
* Geometria comune a tutte le varianti: blocco ancorato flush ai due bordi
* del suo angolo; l'angolo INTERNO del blocco (quello rivolto verso il
* centro immagine, opposto in diagonale all'angolo di ancoraggio) è
* arrotondato con --ploomia-mask-radius; due quarti di cerchio CONCAVI
* (SVG via mask-image, lato --ploomia-mask-corner) raccordano le estremità
* esterne del blocco ai bordi immagine — uno lungo il bordo orizzontale,
* uno lungo il bordo verticale. Le varianti --h-bl/--h-br condividono le
* regole di --bl/--br (stessa geometria, cambiano solo le proporzioni).
*
* SCALING: a differenza di ploomia.com (10vw×6vw, legati al viewport),
* qui blocco in PERCENTUALI del wrapper → la maschera scala con l'immagine.
* Proporzioni misurate dallo screenshot di riferimento (foto 873×466px,
* blocco 131×228px, angoli 40px):
* larghezza ≈ 15% della larghezza immagine
* altezza ≈ 49% dell'altezza immagine
* (varianti --h-*: valori scambiati, 49%×15%).
* Le % funzionano perché gli pseudo-elementi sono position:absolute nel
* box che abbraccia l'immagine: width%/height% → dimensioni immagine.
*
* ANCORAGGIO (fix allineamento bottom): gli pseudo-elementi NON stanno sul
* widget root ma su .elementor-widget-container. Il root può essere stirato
* da flex/grid (es. height:100% in #about-section) e diventare più alto
* dell'immagine: bottom:0 sul root finirebbe sotto il bordo della foto.
* Il container invece abbraccia l'immagine, quindi bottom:0 = bottom foto
* (a patto che il container non abbia padding e che, se stirato anche lui,
* l'immagine lo riempia con height:100% — vedi home-about.css).
* Fallback per markup senza .elementor-widget-container (Elementor
* "optimized markup" o wrapper custom): pseudo sul root, selezionato con
* :not(:has(...)) avvolto in :is() — parsing forgiving, i browser senza
* :has() ignorano solo quel selettore senza invalidare la regola.
*
* LIMITE: la maschera presuppone bottom container == bottom immagine.
* Le didascalie (figcaption) sotto l'immagine NON sono supportate.
*
* Variabili (override sul wrapper o su un antenato):
* --ploomia-mask-w larghezza blocco (% del wrapper; default 15%,
* 49% sulle varianti --h-*)
* --ploomia-mask-h altezza blocco (% del wrapper; default 49%,
* 15% sulle varianti --h-*)
* --ploomia-mask-radius raggio immagine + angolo interno blocco (2.5rem)
* --ploomia-mask-corner lato angoli SVG — SOLO px (entra in calc() sia su
* width sia su height: una % risolverebbe basi diverse)
* --ploomia-mask-bg colore overlay (deve combaciare con lo sfondo sezione)
*/
/* Base + varianti: in Elementor spesso compare solo la variante (--bl, --h-br…)
* senza la classe base; le variabili devono vivere su entrambe. */
.ploomia-img-mask,
[class*="ploomia-img-mask--"] {
--ploomia-mask-bg: #fcfcfc;
--ploomia-mask-radius: 2.5rem;
--ploomia-mask-w: 15%;
--ploomia-mask-h: 49%;
--ploomia-mask-corner: 40px;
position: relative;
}
.ploomia-img-mask img {
border-radius: 30px!important;
}
/* Varianti orizzontali: proporzioni invertite (blocco largo e basso).
* Stessa specificità (0,1,0) della regola base ma dichiarata DOPO → vince
* il tie sullo stesso elemento. Gli override per-widget/per-sezione
* (es. #about-section .ploomia-img-mask) restano più specifici e vincono. */
.ploomia-img-mask--h-tl,
.ploomia-img-mask--h-tr,
.ploomia-img-mask--h-bl,
.ploomia-img-mask--h-br {
--ploomia-mask-w: 49%;
--ploomia-mask-h: 15%;
}
/* Host degli pseudo-elementi: abbraccia l'immagine (height:auto di default).
* line-height:0 azzera eventuali line-box residui da whitespace/nodi inline.
* Copre: container discendente, container con classe, widget optimized (img diretta),
* widget optimized annidato in un e-con con classe maschera. */
[class*="ploomia-img-mask"] .elementor-widget-container,
[class*="ploomia-img-mask"].elementor-widget-container,
[class*="ploomia-img-mask"].elementor-widget-image:not(:has(> .elementor-widget-container)),
[class*="ploomia-img-mask"] .elementor-widget-image:not(:has(> .elementor-widget-container)),
.ploomia-sticky-scroll__image-wrap[class*="ploomia-img-mask"],
.ploomia-contact__image-wrap[class*="ploomia-img-mask"] {
position: relative;
line-height: 0;
}
/* Immagine: solo border-radius, nessuna maschera/clip.
* display:block elimina il gap di baseline inline sotto l'immagine.
* margin:0 — i template (page.php) avvolgono the_content() in
* .ploomia-single-content, il cui "img { margin: 20px 0 }" (style.css,
* pensato per il corpo articoli) entra anche nelle pagine Elementor e
* spinge il bordo immagine 20px sopra il bottom del wrapper → maschera
* disallineata. Stessa specificità (0,1,1) ma questo file carica dopo
* style.css (dipendenza ploomia-style), quindi vince il tie. */
[class*="ploomia-img-mask"] img {
display: block;
width: 100%;
margin: 0;
border-radius: var(--ploomia-mask-radius);
}
/* Link che avvolge l'immagine (custom URL/lightbox): block, altrimenti
* l'anchor inline genera line-box che aggiungono altezza sotto l'immagine. */
[class*="ploomia-img-mask"] a {
display: block;
}
/* ── Varianti --br / --h-br: blocco basso-destra (replica .approach-sticky-block-right-bottom).
* Geometria identica: blocco flush destra+basso, angolo interno arrotondato
* in alto-sinistra. --h-br differisce solo per i default 49%×15%. ── */
.ploomia-img-mask--br .elementor-widget-container::after,
.elementor-widget-container.ploomia-img-mask--br::after,
.ploomia-img-mask--br.elementor-widget-image:not(:has(> .elementor-widget-container))::after,
.ploomia-img-mask--br .elementor-widget-image:not(:has(> .elementor-widget-container))::after,
.ploomia-img-mask--h-br .elementor-widget-container::after,
.elementor-widget-container.ploomia-img-mask--h-br::after,
.ploomia-img-mask--h-br.elementor-widget-image:not(:has(> .elementor-widget-container))::after,
.ploomia-img-mask--h-br .elementor-widget-image:not(:has(> .elementor-widget-container))::after,
.ploomia-img-mask--br:not(.elementor-widget-image):not(.elementor-widget-container):has(> img)::after,
.ploomia-img-mask--h-br:not(.elementor-widget-image):not(.elementor-widget-container):has(> img)::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: var(--ploomia-mask-w);
height: var(--ploomia-mask-h);
background-color: var(--ploomia-mask-bg);
border-radius: var(--ploomia-mask-radius) 0 0 0;
pointer-events: none;
z-index: 2;
}
/*
* Angoli di raccordo --br/--h-br (replica corner-left-bottom + corner-right-top).
* Un solo pseudo-elemento che copre (w+corner)×(h+corner) in basso-destra;
* i due quarti di cerchio sono ritagliati via mask multipla:
* - "left bottom" → a sinistra del blocco, sul bordo inferiore
* - "right top" → sopra il blocco, sul bordo destro
* Le due aree non si sovrappongono mai (il blocco occupa l'angolo opposto).
* SVG = riempimento della "tasca" basso-destra del box 40×40 (tocca i bordi
* destro e inferiore, arco concavo verso alto-sinistra): la stessa
* orientazione serve entrambi i raccordi.
*/
.ploomia-img-mask--br .elementor-widget-container::before,
.elementor-widget-container.ploomia-img-mask--br::before,
.ploomia-img-mask--br.elementor-widget-image:not(:has(> .elementor-widget-container))::before,
.ploomia-img-mask--br .elementor-widget-image:not(:has(> .elementor-widget-container))::before,
.ploomia-img-mask--h-br .elementor-widget-container::before,
.elementor-widget-container.ploomia-img-mask--h-br::before,
.ploomia-img-mask--h-br.elementor-widget-image:not(:has(> .elementor-widget-container))::before,
.ploomia-img-mask--h-br .elementor-widget-image:not(:has(> .elementor-widget-container))::before,
.ploomia-img-mask--br:not(.elementor-widget-image):not(.elementor-widget-container):has(> img)::before,
.ploomia-img-mask--h-br:not(.elementor-widget-image):not(.elementor-widget-container):has(> img)::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: calc(var(--ploomia-mask-w) + var(--ploomia-mask-corner));
height: calc(var(--ploomia-mask-h) + var(--ploomia-mask-corner));
background-color: var(--ploomia-mask-bg);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M40 40V0C40 22.0914 22.0914 40 0 40H40Z' fill='%23fff'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M40 40V0C40 22.0914 22.0914 40 0 40H40Z' fill='%23fff'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M40 40V0C40 22.0914 22.0914 40 0 40H40Z' fill='%23fff'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M40 40V0C40 22.0914 22.0914 40 0 40H40Z' fill='%23fff'/%3E%3C/svg%3E");
/* offset 1px verso il blocco: evita hairline di giuntura da arrotondamento subpixel */
-webkit-mask-position: left 1px bottom 0, right 0 top 1px;
mask-position: left 1px bottom 0, right 0 top 1px;
-webkit-mask-size: var(--ploomia-mask-corner) var(--ploomia-mask-corner);
mask-size: var(--ploomia-mask-corner) var(--ploomia-mask-corner);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
pointer-events: none;
z-index: 2;
}
/* ── Varianti --bl / --h-bl: speculare, blocco basso-sinistra (= screenshot di riferimento) ──
* Geometria: blocco flush a sinistra+basso, angolo arrotondato in alto-destra
* (border-radius 0 R 0 0); angoli SVG concavi: uno sul bordo sinistro appena
* sopra il blocco (mask-position left top), uno a destra del blocco sul bordo
* inferiore (mask-position right bottom).
* --h-bl: stessa geometria, solo default 49%×15%. */
.ploomia-img-mask--bl .elementor-widget-container::after,
.elementor-widget-container.ploomia-img-mask--bl::after,
.ploomia-img-mask--bl.elementor-widget-image:not(:has(> .elementor-widget-container))::after,
.ploomia-img-mask--bl .elementor-widget-image:not(:has(> .elementor-widget-container))::after,
.ploomia-img-mask--h-bl .elementor-widget-container::after,
.elementor-widget-container.ploomia-img-mask--h-bl::after,
.ploomia-img-mask--h-bl.elementor-widget-image:not(:has(> .elementor-widget-container))::after,
.ploomia-img-mask--h-bl .elementor-widget-image:not(:has(> .elementor-widget-container))::after,
.ploomia-img-mask--bl:not(.elementor-widget-image):not(.elementor-widget-container):has(> img)::after,
.ploomia-img-mask--h-bl:not(.elementor-widget-image):not(.elementor-widget-container):has(> img)::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: var(--ploomia-mask-w);
height: var(--ploomia-mask-h);
background-color: var(--ploomia-mask-bg);
border-radius: 0 var(--ploomia-mask-radius) 0 0;
pointer-events: none;
z-index: 2;
}
/* Path specchiato sull'asse X: riempie la tasca basso-sinistra del box 40×40 */
.ploomia-img-mask--bl .elementor-widget-container::before,
.elementor-widget-container.ploomia-img-mask--bl::before,
.ploomia-img-mask--bl.elementor-widget-image:not(:has(> .elementor-widget-container))::before,
.ploomia-img-mask--bl .elementor-widget-image:not(:has(> .elementor-widget-container))::before,
.ploomia-img-mask--h-bl .elementor-widget-container::before,
.elementor-widget-container.ploomia-img-mask--h-bl::before,
.ploomia-img-mask--h-bl.elementor-widget-image:not(:has(> .elementor-widget-container))::before,
.ploomia-img-mask--h-bl .elementor-widget-image:not(:has(> .elementor-widget-container))::before,
.ploomia-img-mask--bl:not(.elementor-widget-image):not(.elementor-widget-container):has(> img)::before,
.ploomia-img-mask--h-bl:not(.elementor-widget-image):not(.elementor-widget-container):has(> img)::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: calc(var(--ploomia-mask-w) + var(--ploomia-mask-corner));
height: calc(var(--ploomia-mask-h) + var(--ploomia-mask-corner));
background-color: var(--ploomia-mask-bg);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 40V0C0 22.0914 17.9086 40 40 40H0Z' fill='%23fff'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 40V0C0 22.0914 17.9086 40 40 40H0Z' fill='%23fff'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 40V0C0 22.0914 17.9086 40 40 40H0Z' fill='%23fff'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 40V0C0 22.0914 17.9086 40 40 40H0Z' fill='%23fff'/%3E%3C/svg%3E");
/* offset 1px verso il blocco: evita hairline di giuntura da arrotondamento subpixel */
-webkit-mask-position: right 1px bottom 0, left 0 top 1px;
mask-position: right 1px bottom 0, left 0 top 1px;
-webkit-mask-size: var(--ploomia-mask-corner) var(--ploomia-mask-corner);
mask-size: var(--ploomia-mask-corner) var(--ploomia-mask-corner);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
pointer-events: none;
z-index: 2;
}
/* ── Variante --h-tl: blocco alto-sinistra (orizzontale: largo e basso) ──
* Geometria: blocco flush a sinistra+alto, angolo interno arrotondato in
* basso-destra (border-radius 0 0 R 0); angoli SVG concavi: uno a destra
* del blocco sul bordo superiore (mask-position right top), uno sotto il
* blocco sul bordo sinistro (mask-position left bottom). */
.ploomia-img-mask--h-tl .elementor-widget-container::after,
.elementor-widget-container.ploomia-img-mask--h-tl::after,
.ploomia-img-mask--h-tl.elementor-widget-image:not(:has(> .elementor-widget-container))::after,
.ploomia-img-mask--h-tl .elementor-widget-image:not(:has(> .elementor-widget-container))::after,
.ploomia-img-mask--h-tl:not(.elementor-widget-image):not(.elementor-widget-container):has(> img)::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: var(--ploomia-mask-w);
height: var(--ploomia-mask-h);
background-color: var(--ploomia-mask-bg);
border-radius: 0 0 var(--ploomia-mask-radius) 0;
pointer-events: none;
z-index: 2;
}
/* Path ruotato di 180° rispetto a --br: riempie la tasca alto-sinistra del
* box 40×40 (tocca i bordi sinistro e superiore, arco concavo verso
* basso-destra) — un raccordo aderisce al bordo superiore dell'immagine
* (e al blocco alla sua sinistra), l'altro al bordo sinistro (blocco sopra). */
.ploomia-img-mask--h-tl .elementor-widget-container::before,
.elementor-widget-container.ploomia-img-mask--h-tl::before,
.ploomia-img-mask--h-tl.elementor-widget-image:not(:has(> .elementor-widget-container))::before,
.ploomia-img-mask--h-tl .elementor-widget-image:not(:has(> .elementor-widget-container))::before,
.ploomia-img-mask--h-tl:not(.elementor-widget-image):not(.elementor-widget-container):has(> img)::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: calc(var(--ploomia-mask-w) + var(--ploomia-mask-corner));
height: calc(var(--ploomia-mask-h) + var(--ploomia-mask-corner));
background-color: var(--ploomia-mask-bg);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 0V40C0 17.9086 17.9086 0 40 0H0Z' fill='%23fff'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 0V40C0 17.9086 17.9086 0 40 0H0Z' fill='%23fff'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 0V40C0 17.9086 17.9086 0 40 0H0Z' fill='%23fff'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 0V40C0 17.9086 17.9086 0 40 0H0Z' fill='%23fff'/%3E%3C/svg%3E");
/* offset 1px verso il blocco: evita hairline di giuntura da arrotondamento subpixel */
-webkit-mask-position: right 1px top 0, left 0 bottom 1px;
mask-position: right 1px top 0, left 0 bottom 1px;
-webkit-mask-size: var(--ploomia-mask-corner) var(--ploomia-mask-corner);
mask-size: var(--ploomia-mask-corner) var(--ploomia-mask-corner);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
pointer-events: none;
z-index: 2;
}
/* ── Variante --h-tr: blocco alto-destra (speculare di --h-tl) ──
* Geometria: blocco flush a destra+alto, angolo interno arrotondato in
* basso-sinistra (border-radius 0 0 0 R); angoli SVG concavi: uno a sinistra
* del blocco sul bordo superiore (mask-position left top), uno sotto il
* blocco sul bordo destro (mask-position right bottom). */
.ploomia-img-mask--h-tr .elementor-widget-container::after,
.elementor-widget-container.ploomia-img-mask--h-tr::after,
.ploomia-img-mask--h-tr.elementor-widget-image:not(:has(> .elementor-widget-container))::after,
.ploomia-img-mask--h-tr .elementor-widget-image:not(:has(> .elementor-widget-container))::after,
.ploomia-img-mask--h-tr:not(.elementor-widget-image):not(.elementor-widget-container):has(> img)::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: var(--ploomia-mask-w);
height: var(--ploomia-mask-h);
background-color: var(--ploomia-mask-bg);
border-radius: 0 0 0 var(--ploomia-mask-radius);
pointer-events: none;
z-index: 2;
}
/* Path ruotato di 180° rispetto a --bl: riempie la tasca alto-destra del
* box 40×40 (tocca i bordi destro e superiore, arco concavo verso
* basso-sinistra). */
.ploomia-img-mask--h-tr .elementor-widget-container::before,
.elementor-widget-container.ploomia-img-mask--h-tr::before,
.ploomia-img-mask--h-tr.elementor-widget-image:not(:has(> .elementor-widget-container))::before,
.ploomia-img-mask--h-tr .elementor-widget-image:not(:has(> .elementor-widget-container))::before,
.ploomia-img-mask--h-tr:not(.elementor-widget-image):not(.elementor-widget-container):has(> img)::before {
content: '';
position: absolute;
right: 0;
top: 0;
width: calc(var(--ploomia-mask-w) + var(--ploomia-mask-corner));
height: calc(var(--ploomia-mask-h) + var(--ploomia-mask-corner));
background-color: var(--ploomia-mask-bg);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M40 0V40C40 17.9086 22.0914 0 0 0H40Z' fill='%23fff'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M40 0V40C40 17.9086 22.0914 0 0 0H40Z' fill='%23fff'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M40 0V40C40 17.9086 22.0914 0 0 0H40Z' fill='%23fff'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M40 0V40C40 17.9086 22.0914 0 0 0H40Z' fill='%23fff'/%3E%3C/svg%3E");
/* offset 1px verso il blocco: evita hairline di giuntura da arrotondamento subpixel */
-webkit-mask-position: left 1px top 0, right 0 bottom 1px;
mask-position: left 1px top 0, right 0 bottom 1px;
-webkit-mask-size: var(--ploomia-mask-corner) var(--ploomia-mask-corner);
mask-size: var(--ploomia-mask-corner) var(--ploomia-mask-corner);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
pointer-events: none;
z-index: 2;
}
.ploomia-img-mask--h-br:not(.elementor-widget-image):not(.elementor-widget-container):has(> img)::before {
right: -1px;
width: calc(var(--ploomia-mask-w) + var(--ploomia-mask-corner) - 6px);
}
/*
* Niente override vw ai breakpoint: le % scalano già con l'immagine.
* Su schermi piccoli si riducono solo gli angoli SVG fissi, che altrimenti
* diventerebbero sproporzionati rispetto a un blocco ormai piccolo
* (es. immagine 320px → blocco 48px vs angoli 40px).
*/
@media (max-width: 479px) {
.ploomia-img-mask,
[class*="ploomia-img-mask--"] {
--ploomia-mask-corner: 24px;
--ploomia-mask-radius: 1.5rem;
}
}