/* ==========================================================================
   Il telaio
   ==========================================================================
   Linee sottili che sporgono oltre gli angoli, con una crocetta su ogni
   angolo: la firma dei componenti nuovi (modulo di contatto, features,
   processo). Dai riferimenti contact-7 e features-4 scelti da Daniele.
   Spec 2026-09-27-larghezze-e-componenti, §4.1 e C5: solo su quei
   componenti, non ovunque.

   Solo pseudo-elementi: ::before le quattro linee, ::after le crocette.
   La sporgenza (14px) resta sotto il margine minimo della pagina (20px),
   quindi su mobile non esce dallo schermo.
   ========================================================================== */

.htmb-telaio {
	--htmb-telaio-linea: var(--htmb-bordo);
	--htmb-telaio-sporgenza: 14px;
	--htmb-telaio-croce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%2394a3b8'/%3E%3C/svg%3E");

	position: relative;
	isolation: isolate;
}

.htmb-telaio::before,
.htmb-telaio::after {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--htmb-telaio-sporgenza));
	z-index: -1;
	pointer-events: none;
}

/* Le quattro linee, ognuna lunga quanto il lato piu' le due sporgenze. */
.htmb-telaio::before {
	--s: var(--htmb-telaio-sporgenza);
	--c: var(--htmb-telaio-linea);
	background:
		linear-gradient(var(--c), var(--c)) 0 var(--s) / 100% 1px no-repeat,
		linear-gradient(var(--c), var(--c)) 0 calc(100% - var(--s)) / 100% 1px no-repeat,
		linear-gradient(var(--c), var(--c)) var(--s) 0 / 1px 100% no-repeat,
		linear-gradient(var(--c), var(--c)) calc(100% - var(--s)) 0 / 1px 100% no-repeat;
}

/* Le crocette, centrate sui quattro angoli. */
.htmb-telaio::after {
	--p: calc(var(--htmb-telaio-sporgenza) - 5px);
	--q: calc(100% - var(--htmb-telaio-sporgenza) + 5px);
	background:
		var(--htmb-telaio-croce) var(--p) var(--p) / 11px no-repeat,
		var(--htmb-telaio-croce) var(--q) var(--p) / 11px no-repeat,
		var(--htmb-telaio-croce) var(--p) var(--q) / 11px no-repeat,
		var(--htmb-telaio-croce) var(--q) var(--q) / 11px no-repeat;
}