/* ============================================================
   GRID.CSS — Mini-framework responsive in stile Bootstrap
   Nessuna dipendenza esterna. Funziona offline al 100%.
   Contiene: reset, container, grid a 12 colonne, utility,
   componenti base (button, navbar, card).
   ============================================================ */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg { vertical-align: middle; max-width: 100%; }
ul, ol { padding-left: 0; }

/* ---------- CONTAINER ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}
.container-fluid {
  width: 100%;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}

/* ---------- GRID: 12 colonne, flexbox ---------- */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
  row-gap: 1.5rem;
}
.row > * {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  width: 100%;
}
[class*="col"] { flex-shrink: 0; }

.col { flex: 1 0 0%; }

.col-1  { flex: 0 0 auto; width: 8.3333%; }
.col-2  { flex: 0 0 auto; width: 16.6667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.3333%; }
.col-5  { flex: 0 0 auto; width: 41.6667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.3333%; }
.col-8  { flex: 0 0 auto; width: 66.6667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.3333%; }
.col-11 { flex: 0 0 auto; width: 91.6667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* breakpoints: sm 576 / md 768 / lg 992 / xl 1200 */
@media (min-width: 576px){
  .col-sm-1{width:8.3333%}.col-sm-2{width:16.6667%}.col-sm-3{width:25%}
  .col-sm-4{width:33.3333%}.col-sm-5{width:41.6667%}.col-sm-6{width:50%}
  .col-sm-7{width:58.3333%}.col-sm-8{width:66.6667%}.col-sm-9{width:75%}
  .col-sm-10{width:83.3333%}.col-sm-11{width:91.6667%}.col-sm-12{width:100%}
}
@media (min-width: 768px){
  .col-md-1{width:8.3333%}.col-md-2{width:16.6667%}.col-md-3{width:25%}
  .col-md-4{width:33.3333%}.col-md-5{width:41.6667%}.col-md-6{width:50%}
  .col-md-7{width:58.3333%}.col-md-8{width:66.6667%}.col-md-9{width:75%}
  .col-md-10{width:83.3333%}.col-md-11{width:91.6667%}.col-md-12{width:100%}
}
@media (min-width: 992px){
  .col-lg-1{width:8.3333%}.col-lg-2{width:16.6667%}.col-lg-3{width:25%}
  .col-lg-4{width:33.3333%}.col-lg-5{width:41.6667%}.col-lg-6{width:50%}
  .col-lg-7{width:58.3333%}.col-lg-8{width:66.6667%}.col-lg-9{width:75%}
  .col-lg-10{width:83.3333%}.col-lg-11{width:91.6667%}.col-lg-12{width:100%}
}
@media (min-width: 1200px){
  .col-xl-1{width:8.3333%}.col-xl-2{width:16.6667%}.col-xl-3{width:25%}
  .col-xl-4{width:33.3333%}.col-xl-5{width:41.6667%}.col-xl-6{width:50%}
  .col-xl-7{width:58.3333%}.col-xl-8{width:66.6667%}.col-xl-9{width:75%}
  .col-xl-10{width:83.3333%}.col-xl-11{width:91.6667%}.col-xl-12{width:100%}
}

.g-0 { margin:0; } .g-0 > * { padding:0; }
.g-2 { margin-right:-.5rem; margin-left:-.5rem; row-gap:1rem; } .g-2 > * { padding-right:.5rem; padding-left:.5rem; }
.g-4 { margin-right:-1rem; margin-left:-1rem; row-gap:2rem; } .g-4 > * { padding-right:1rem; padding-left:1rem; }

/* ---------- FLEX UTILITIES ---------- */
.d-flex { display: flex; }
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-flex { display: inline-flex; }
@media (min-width: 768px){
  .d-md-flex { display: flex; }
  .d-md-none { display: none; }
  .d-md-block { display: block; }
}
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; } .gap-4 { gap: 2rem; }

/* ---------- SPACING (margin / padding) ---------- */
:root{ --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.5rem; --sp-5:4rem; }
.m-0{margin:0} .mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)}
.mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)}
.py-1{padding-top:var(--sp-1);padding-bottom:var(--sp-1)} .py-2{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.py-3{padding-top:var(--sp-3);padding-bottom:var(--sp-3)} .py-4{padding-top:var(--sp-4);padding-bottom:var(--sp-4)} .py-5{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
.px-2{padding-left:var(--sp-2);padding-right:var(--sp-2)} .px-3{padding-left:var(--sp-3);padding-right:var(--sp-3)}

/* ---------- TEXT UTILITIES ---------- */
.text-center { text-align: center; }
.text-start { text-align: left; }
.text-end { text-align: right; }
.text-uppercase { text-transform: uppercase; }
.fw-light{font-weight:300} .fw-normal{font-weight:400} .fw-medium{font-weight:500} .fw-semibold{font-weight:600} .fw-bold{font-weight:700}

/* ---------- BUTTON BASE (stile riempito a pillola, brand-agnostico) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .9rem 1.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all .25s ease;
  line-height: 1;
}
.btn svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

/* ---------- NAVBAR BASE ---------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  width: 100%;
}
.navbar .container,
.navbar .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* ---------- CARD BASE ---------- */
.card {
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
}

/* ---------- VISUALLY HIDDEN (accessibilità) ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- FOCUS VISIBILE (accessibilità tastiera) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #8aa9c4;
  outline-offset: 2px;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}