/* =========================================================
   Frame System — Design System baseline
   Token sorgente: LAYOUT.md v1.5.1
   Implementa: .bg-frame, .bg-frame--wide, .bg-frame--bleed,
   .bg-frame--bleed-padded
   Differiti: .bg-frame--asym (Comportamento A pagina progetto)
   Dipendenze: variables.css (--max-width, --max-width-wide, --pad-x)
   ========================================================= */

/* L1 — cornice editoriale standard (1280px, Comportamento B) */
.bg-frame {
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--pad-x);
	box-sizing: border-box;
}

/* L2 — wide (gallery, hero pagine, ceiling 4K) */
.bg-frame--wide {
	max-width: var(--max-width-wide);
	margin-inline: auto;
	padding-inline: var(--pad-x);
	box-sizing: border-box;
}

/* L3 — bleed (100vw, zero gutter; carosello, hero home, foto immersive) */
.bg-frame--bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: 0;
}

/* L4 — bleed-padded (100vw con contenuto interno in --pad-x;
   sezioni bleed che ospitano grid/track con gutter standard) */
.bg-frame--bleed-padded {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--pad-x);
	box-sizing: border-box;
}