@charset "UTF-8";

/* === CSS STARTER: Grid + Container Queries (mobile-first) === */

/* Base reset essentials */
*, *::before, *::after {  -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; margin:0;}
html { font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-variant-ligatures: none; -webkit-font-variant-ligatures: none; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; -webkit-font-smoothing: antialiased;	height:100%; scroll-behavior: smooth;	scroll-padding-top: 100px; }
body { margin: 0; font-size: 1rem; line-height: var(--line-height);	overflow-x: hidden; display: grid; grid-template-rows: auto 1fr auto auto; min-height: 100vh;	min-height: 100svh; }

/* Variables */
:root{
  --gap: 1rem;
  --container-pad: 1rem;
}

/* Container wrapper (non cambio id/nome) */
#maincontainer{
  container-type: inline-size;
  container-name: maincontainer;
}

/* Grid base */
.grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  width: 100%;
  margin-inline: auto;
  container: inline-size; /* abilita @container sui discendenti */
}

/* default: ogni item full-width su mobile se non specificato */
.grid > *{ grid-column: 1 / -1; }

/* Reset width dentro .grid per evitare il 50% “interno” al cell */
/* .grid > [class^="s-"],
.grid > [class^="p-"],
.grid > [class^="m-"],
.grid > [class^="l-"],
.grid > [class^="xl-"],
.grid > [class^="xxl-"]{ width: auto; } */

/* Gap utilities */
.grid.no-gap{ gap: 0; }

/* P (≥520px) */
@media (min-width: 520px) {
  .grid.gap       { grid-column-gap: 1.5625rem; }  /* 25px */
  .grid.gap-more  { grid-column-gap: 1.875rem; }   /* 30px */
  .grid.parent-gap{ grid-column-gap: 1.875rem; }   /* 30px */
}

/* M (≥768px) */
@media (min-width: 768px) {
  .grid.parent-gap{ grid-column-gap: 2.5rem; }     /* 40px */
}

/* L (≥1024px) */
@media (min-width: 1024px) {
  .grid.parent-gap{ grid-column-gap: 3.125rem; }   /* 50px */
}

/* XL (≥1360px) */
@media (min-width: 1360px) {
  .grid.parent-gap{ grid-column-gap: 5rem; }       /* 80px */
  .grid.gap       { grid-column-gap: 1.875rem; }   /* 30px */
  .grid.gap-more  { grid-column-gap: 2.5rem; }     /* 40px */
}

/* XXL (≥1600px) */
@media (min-width: 1600px) {
  .grid.parent-gap{ grid-column-gap: 6.25rem; }    /* 100px */
  .grid.gap       { grid-column-gap: 2.1875rem; }   /* 35px */
  .grid.gap-more  { grid-column-gap: 3.125rem; }     /* 50px */
}

/* ========== Colonne 12-col: classi compatibili (s, p, m, l, xl, xxl) ========== */
/* Base mobile (s) - width% (fallback) + grid span */
/* ========== Small (≥320px) ========== */
.s-1{ width: 8.3333%; }   .grid .s-1{ width:auto; grid-column: span 1; } .s-1.center{ width:8.3333%; }
.s-2{ width: 16.6667%; }  .grid .s-2{ width:auto; grid-column: span 2; } .s-2.center{ width:16.6667%; }
.s-3{ width: 25%; }       .grid .s-3{ width:auto; grid-column: span 3; } .s-3.center{ width:25%; }
.s-4{ width: 33.3333%; }  .grid .s-4{ width:auto; grid-column: span 4; } .s-4.center{ width:33.3333%; }
.s-5{ width: 41.6667%; }  .grid .s-5{ width:auto; grid-column: span 5; } .s-5.center{ width:41.6667%; }
.s-6{ width: 50%; }       .grid .s-6{ width:auto; grid-column: span 6; } .s-6.center{ width:50%; }
.s-7{ width: 58.3333%; }  .grid .s-7{ width:auto; grid-column: span 7; } .s-7.center{ width:58.3333%; }
.s-8{ width: 66.6667%; }  .grid .s-8{ width:auto; grid-column: span 8; } .s-8.center{ width:66.6667%; }
.s-9{ width: 75%; }       .grid .s-9{ width:auto; grid-column: span 9; } .s-9.center{ width:75%; }
.s-10{ width: 83.3333%; } .grid .s-10{ width:auto; grid-column: span 10; } .s-10.center{ width:83.3333%; }
.s-11{ width: 91.6667%; } .grid .s-11{ width:auto; grid-column: span 11; } .s-11.center{ width:91.6667%; }
.s-12{ width: 100%; }     .grid .s-12{ width:auto; grid-column: span 12; } .s-12.center{ width:100%; }

/* ========== P ≥520px ========== */
@media (min-width:520px){
  .p-1{ width: 8.3333%; }    .grid .p-1{ width:auto; grid-column: span 1; } .p-1.center{ width:8.3333%; }
  .p-2{ width: 16.6667%; }   .grid .p-2{ width:auto; grid-column: span 2; } .p-2.center{ width:16.6667%; }
  .p-3{ width: 25%; }        .grid .p-3{ width:auto; grid-column: span 3; } .p-3.center{ width:25%; }
  .p-4{ width: 33.3333%; }   .grid .p-4{ width:auto; grid-column: span 4; } .p-4.center{ width:33.3333%; }
  .p-5{ width: 41.6667%; }   .grid .p-5{ width:auto; grid-column: span 5; } .p-5.center{ width:41.6667%; }
  .p-6{ width: 50%; }        .grid .p-6{ width:auto; grid-column: span 6; } .p-6.center{ width:50%; }
  .p-7{ width: 58.3333%; }   .grid .p-7{ width:auto; grid-column: span 7; } .p-7.center{ width:58.3333%; }
  .p-8{ width: 66.6667%; }   .grid .p-8{ width:auto; grid-column: span 8; } .p-8.center{ width:66.6667%; }
  .p-9{ width: 75%; }        .grid .p-9{ width:auto; grid-column: span 9; } .p-9.center{ width:75%; }
  .p-10{ width: 83.3333%; }  .grid .p-10{ width:auto; grid-column: span 10; } .p-10.center{ width:83.3333%; }
  .p-11{ width: 91.6667%; }  .grid .p-11{ width:auto; grid-column: span 11; } .p-11.center{ width:91.6667%; }
  .p-12{ width: 100%; }      .grid .p-12{ width:auto; grid-column: span 12; } .p-12.center{ width:100%; }
}

/* ========== M ≥768px ========== */
@media (min-width:768px){
  .m-1{ width: 8.3333%; }    .grid .m-1{ width:auto; grid-column: span 1; } .m-1.center{ width:8.3333%; }
  .m-2{ width: 16.6667%; }   .grid .m-2{ width:auto; grid-column: span 2; } .m-2.center{ width:16.6667%; }
  .m-3{ width: 25%; }        .grid .m-3{ width:auto; grid-column: span 3; } .m-3.center{ width:25%; }
  .m-4{ width: 33.3333%; }   .grid .m-4{ width:auto; grid-column: span 4; } .m-4.center{ width:33.3333%; }
  .m-5{ width: 41.6667%; }   .grid .m-5{ width:auto; grid-column: span 5; } .m-5.center{ width:41.6667%; }
  .m-6{ width: 50%; }        .grid .m-6{ width:auto; grid-column: span 6; } .m-6.center{ width:50%; }
  .m-7{ width: 58.3333%; }   .grid .m-7{ width:auto; grid-column: span 7; } .m-7.center{ width:58.3333%; }
  .m-8{ width: 66.6667%; }   .grid .m-8{ width:auto; grid-column: span 8; } .m-8.center{ width:66.6667%; }
  .m-9{ width: 75%; }        .grid .m-9{ width:auto; grid-column: span 9; } .m-9.center{ width:75%; }
  .m-10{ width: 83.3333%; }  .grid .m-10{ width:auto; grid-column: span 10; } .m-10.center{ width:83.3333%; }
  .m-11{ width: 91.6667%; }  .grid .m-11{ width:auto; grid-column: span 11; } .m-11.center{ width:91.6667%; }
  .m-12{ width: 100%; }      .grid .m-12{ width:auto; grid-column: span 12; } .m-12.center{ width:100%; }
}

/* ========== L ≥1024px ========== */
@media (min-width:1024px){
  .l-1{ width: 8.3333%; }    .grid .l-1{ width:auto; grid-column: span 1; } .l-1.center{ width:8.3333%; }
  .l-2{ width: 16.6667%; }   .grid .l-2{ width:auto; grid-column: span 2; } .l-2.center{ width:16.6667%; }
  .l-3{ width: 25%; }        .grid .l-3{ width:auto; grid-column: span 3; } .l-3.center{ width:25%; }
  .l-4{ width: 33.3333%; }   .grid .l-4{ width:auto; grid-column: span 4; } .l-4.center{ width:33.3333%; }
  .l-5{ width: 41.6667%; }   .grid .l-5{ width:auto; grid-column: span 5; } .l-5.center{ width:41.6667%; }
  .l-6{ width: 50%; }        .grid .l-6{ width:auto; grid-column: span 6; } .l-6.center{ width:50%; }
  .l-7{ width: 58.3333%; }   .grid .l-7{ width:auto; grid-column: span 7; } .l-7.center{ width:58.3333%; }
  .l-8{ width: 66.6667%; }   .grid .l-8{ width:auto; grid-column: span 8; } .l-8.center{ width:66.6667%; }
  .l-9{ width: 75%; }        .grid .l-9{ width:auto; grid-column: span 9; } .l-9.center{ width:75%; }
  .l-10{ width: 83.3333%; }  .grid .l-10{ width:auto; grid-column: span 10; } .l-10.center{ width:83.3333%; }
  .l-11{ width: 91.6667%; }  .grid .l-11{ width:auto; grid-column: span 11; } .l-11.center{ width:91.6667%; }
  .l-12{ width: 100%; }      .grid .l-12{ width:auto; grid-column: span 12; } .l-12.center{ width:100%; }
}

/* ========== XL ≥1360px ========== */
@media (min-width:1360px){
  .xl-1{ width: 8.3333%; }    .grid .xl-1{ width:auto; grid-column: span 1; } .xl-1.center{ width:8.3333%; }
  .xl-2{ width: 16.6667%; }   .grid .xl-2{ width:auto; grid-column: span 2; } .xl-2.center{ width:16.6667%; }
  .xl-3{ width: 25%; }        .grid .xl-3{ width:auto; grid-column: span 3; } .xl-3.center{ width:25%; }
  .xl-4{ width: 33.3333%; }   .grid .xl-4{ width:auto; grid-column: span 4; } .xl-4.center{ width:33.3333%; }
  .xl-5{ width: 41.6667%; }   .grid .xl-5{ width:auto; grid-column: span 5; } .xl-5.center{ width:41.6667%; }
  .xl-6{ width: 50%; }        .grid .xl-6{ width:auto; grid-column: span 6; } .xl-6.center{ width:50%; }
  .xl-7{ width: 58.3333%; }   .grid .xl-7{ width:auto; grid-column: span 7; } .xl-7.center{ width:58.3333%; }
  .xl-8{ width: 66.6667%; }   .grid .xl-8{ width:auto; grid-column: span 8; } .xl-8.center{ width:66.6667%; }
  .xl-9{ width: 75%; }        .grid .xl-9{ width:auto; grid-column: span 9; } .xl-9.center{ width:75%; }
  .xl-10{ width: 83.3333%; }  .grid .xl-10{ width:auto; grid-column: span 10; } .xl-10.center{ width:83.3333%; }
  .xl-11{ width: 91.6667%; }  .grid .xl-11{ width:auto; grid-column: span 11; } .xl-11.center{ width:91.6667%; }
  .xl-12{ width: 100%; }      .grid .xl-12{ width:auto; grid-column: span 12; } .xl-12.center{ width:100%; }
}

/* ========== XXL ≥1600px ========== */
@media (min-width:1600px){
  .xxl-1{ width: 8.3333%; }    .grid .xxl-1{ width:auto; grid-column: span 1; } .xxl-1.center{ width:8.3333%; }
  .xxl-2{ width: 16.6667%; }   .grid .xxl-2{ width:auto; grid-column: span 2; } .xxl-2.center{ width:16.6667%; }
  .xxl-3{ width: 25%; }        .grid .xxl-3{ width:auto; grid-column: span 3; } .xxl-3.center{ width:25%; }
  .xxl-4{ width: 33.3333%; }   .grid .xxl-4{ width:auto; grid-column: span 4; } .xxl-4.center{ width:33.3333%; }
  .xxl-5{ width: 41.6667%; }   .grid .xxl-5{ width:auto; grid-column: span 5; } .xxl-5.center{ width:41.6667%; }
  .xxl-6{ width: 50%; }        .grid .xxl-6{ width:auto; grid-column: span 6; } .xxl-6.center{ width:50%; }
  .xxl-7{ width: 58.3333%; }   .grid .xxl-7{ width:auto; grid-column: span 7; } .xxl-7.center{ width:58.3333%; }
  .xxl-8{ width: 66.6667%; }   .grid .xxl-8{ width:auto; grid-column: span 8; } .xxl-8.center{ width:66.6667%; }
  .xxl-9{ width: 75%; }        .grid .xxl-9{ width:auto; grid-column: span 9; } .xxl-9.center{ width:75%; }
  .xxl-10{ width: 83.3333%; }  .grid .xxl-10{ width:auto; grid-column: span 10; } .xxl-10.center{ width:83.3333%; }
  .xxl-11{ width: 91.6667%; }  .grid .xxl-11{ width:auto; grid-column: span 11; } .xxl-11.center{ width:91.6667%; }
  .xxl-12{ width: 100%; }      .grid .xxl-12{ width:auto; grid-column: span 12; } .xxl-12.center{ width:100%; }
}


/* Opzionale: helpers di allineamento e fill */
.grid.center-items{ place-items: center; }
.grid.start-items{ align-items: start; justify-items: start; }
.grid.stretch-items{ align-items: stretch; justify-items: stretch; }


.center {
	float: none;
	margin: 0 auto;
	display: block;
}

.grid .center {
	justify-self: center;
	margin: auto;
	grid-column: 1 / -1;
}

.grid .grid {
	padding: 0;
	width: 100%;
}
/* Opzionale: forzare un item full width a qualsiasi breakpoint */
.full-bleed{ grid-column: 1 / -1; }

/* Fallback minimale per browser senza grid */
@supports not (display:grid){
  .grid{ display:block; }
  .s-6, .p-6, .m-6, .l-6, .xl-6, .xxl-6{ width:50%; float:left; }
  .s-12, .p-12, .m-12, .l-12, .xl-12, .xxl-12{ width:100%; float:none; }
}