/* ========================================
   Background Grid Overlay — Responsive
   Linee verticali legate al container grid (non px fissi).
   Si ridimensionano con il viewport.

   VERTICAL LINES (bordi colonne 4-col grid):
     - DASHED (10px dash, 10px gap) — #212223 on dark, #E3E3E3 on light

   HORIZONTAL LINES (section boundaries):
     - SOLID — full viewport width

   CROSS MARKERS "+" (at intersections):
     - SOLID bars — 4px wide, 43px long
   ======================================== */

/* ----------------------------------------
   Vertical grid lines — DASHED
   Posizionate come bordi delle 4 colonne del container.
   Usano max-width: var(--container-max) + percentuali
   per essere responsive.
   ---------------------------------------- */

.section--grid-dark,
.section--grid-light {
  position: relative;
}

/* Dark bg — dashed vertical lines #212223 */
.section--grid-dark::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 0;
  max-width: var(--container-max);
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to bottom, var(--color-grid-line-dark) 0px, var(--color-grid-line-dark) 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(to bottom, var(--color-grid-line-dark) 0px, var(--color-grid-line-dark) 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(to bottom, var(--color-grid-line-dark) 0px, var(--color-grid-line-dark) 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(to bottom, var(--color-grid-line-dark) 0px, var(--color-grid-line-dark) 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(to bottom, var(--color-grid-line-dark) 0px, var(--color-grid-line-dark) 10px, transparent 10px, transparent 20px);
  background-size:
    1px 20px,
    1px 20px,
    1px 20px,
    1px 20px,
    1px 20px;
  background-position:
    0% 0,
    25% 0,
    50% 0,
    75% 0,
    100% 0;
  background-repeat:
    repeat-y,
    repeat-y,
    repeat-y,
    repeat-y,
    repeat-y;
}

/* Light bg — dashed vertical lines #E3E3E3 */
.section--grid-light::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--container-max);
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(to bottom, var(--color-grid-line-light) 0px, var(--color-grid-line-light) 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(to bottom, var(--color-grid-line-light) 0px, var(--color-grid-line-light) 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(to bottom, var(--color-grid-line-light) 0px, var(--color-grid-line-light) 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(to bottom, var(--color-grid-line-light) 0px, var(--color-grid-line-light) 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(to bottom, var(--color-grid-line-light) 0px, var(--color-grid-line-light) 10px, transparent 10px, transparent 20px);
  background-size:
    1px 20px,
    1px 20px,
    1px 20px,
    1px 20px,
    1px 20px;
  background-position:
    0% 0,
    25% 0,
    50% 0,
    75% 0,
    100% 0;
  background-repeat:
    repeat-y,
    repeat-y,
    repeat-y,
    repeat-y,
    repeat-y;
}

/* .no-grid — solo linee esterne (0% e 100%), niente colonne interne */
.no-grid.section--grid-dark::after,
.no-grid.section--grid-light::after {
  background-image:
    repeating-linear-gradient(to bottom, currentColor 0px, currentColor 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(to bottom, currentColor 0px, currentColor 10px, transparent 10px, transparent 20px);
  background-size: 1px 20px, 1px 20px;
  background-position: 0% 0, 100% 0;
  background-repeat: repeat-y, repeat-y;
}

.no-grid.section--grid-dark::after { color: var(--color-grid-line-dark); }
.no-grid.section--grid-light::after { color: var(--color-grid-line-light); }

/* .grid-center — linee esterne (0%, 100%) + centrale (50%) */
.grid-center.section--grid-dark::after,
.grid-center.section--grid-light::after {
  background-image:
    repeating-linear-gradient(to bottom, currentColor 0px, currentColor 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(to bottom, currentColor 0px, currentColor 10px, transparent 10px, transparent 20px),
    repeating-linear-gradient(to bottom, currentColor 0px, currentColor 10px, transparent 10px, transparent 20px);
  background-size: 1px 20px, 1px 20px, 1px 20px;
  background-position: 0% 0, 50% 0, 100% 0;
  background-repeat: repeat-y, repeat-y, repeat-y;
}

.grid-center.section--grid-dark::after { color: var(--color-grid-line-dark); }
.grid-center.section--grid-light::after { color: var(--color-grid-line-light); }

/* Content above grid */
.section--grid-dark > .container,
.section--grid-light > .container {
  position: relative;
  z-index: 1;
}

/* Wrapper non-container sopra il grid (es. clients-grid-wrap) */
.section--grid-dark > *:not(.grid-boundary):not(.grid-crosses):not(.services-crosses),
.section--grid-light > *:not(.grid-boundary):not(.grid-crosses):not(.services-crosses) {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------
   Horizontal boundary lines — SOLID
   Full viewport width (100vw), non legate al container
   ---------------------------------------- */

.grid-boundary {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  z-index: 2;
}

.grid-boundary--top {
  top: var(--section-pt, 0px);
}

.grid-boundary--bottom {
  bottom: 0;
}

.grid-boundary--dark {
  background-color: var(--color-grid-line-dark);
}

.grid-boundary--light {
  background-color: var(--color-grid-line-light);
}

/* ----------------------------------------
   Cross markers "+" — SOLID
   4px wide bars, 43px long
   Posizionati con percentuali sul container grid
   ---------------------------------------- */

.grid-crosses {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--container-max);
  height: 0;
  pointer-events: none;
  z-index: 2;
}

.grid-crosses--top {
  top: var(--section-pt, 0px);
}

.grid-crosses--bottom {
  bottom: 0;
}

.grid-cross {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 43px;
  height: 43px;
  z-index: 0;
}

.grid-cross::before,
.grid-cross::after {
  content: '';
  position: absolute;
  z-index: 0;
}

/* Vertical bar of + */
.grid-cross::before {
  width: 3px;
  height: 43px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* Horizontal bar of + */
.grid-cross::after {
  width: 43px;
  height: 3px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* Dark cross */
.grid-cross--dark::before,
.grid-cross--dark::after {
  background-color: var(--color-grid-line-dark);
}

/* Light cross */
.grid-cross--light::before,
.grid-cross--light::after {
  background-color: var(--color-grid-line-dark);
}
.single-line .grid-cross--light::before,
.single-line  .grid-cross--light::after {
  background-color: var(--color-grid-line-light);
}

/* ----------------------------------------
   Cross positions — percentuali (responsive)
   0% = bordo sx container, 100% = bordo dx container
   ---------------------------------------- */

/* Default: 2 crosses (left + right edges) */
.grid-cross:nth-child(1) { left: 0; }
.grid-cross:nth-child(2) { left: 100%; }

/* 3 crosses (left edge + 75% + right edge) */
.grid-crosses--three .grid-cross:nth-child(1) { left: 0; }
.grid-crosses--three .grid-cross:nth-child(2) { left: 75%; }
.grid-crosses--three .grid-cross:nth-child(3) { left: 100%; }

/* 5 crosses (all column edges) */
.grid-crosses--full .grid-cross:nth-child(1) { left: 0; }
.grid-crosses--full .grid-cross:nth-child(2) { left: 25%; }
.grid-crosses--full .grid-cross:nth-child(3) { left: 50%; }
.grid-crosses--full .grid-cross:nth-child(4) { left: 75%; }
.grid-crosses--full .grid-cross:nth-child(5) { left: 100%; }

/* ----------------------------------------
   Solid vertical grid lines variant
   Same positioning as dashed, but solid lines.
   ---------------------------------------- */

.section--grid-dark-solid {
  position: relative;
}

.section--grid-dark-solid::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--container-max);
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(to bottom, var(--color-grid-line-dark), var(--color-grid-line-dark)),
    linear-gradient(to bottom, var(--color-grid-line-dark), var(--color-grid-line-dark)),
    linear-gradient(to bottom, var(--color-grid-line-dark), var(--color-grid-line-dark)),
    linear-gradient(to bottom, var(--color-grid-line-dark), var(--color-grid-line-dark)),
    linear-gradient(to bottom, var(--color-grid-line-dark), var(--color-grid-line-dark));
  background-size:
    1px 100%,
    1px 100%,
    1px 100%,
    1px 100%,
    1px 100%;
  background-position:
    0% 0,
    25% 0,
    50% 0,
    75% 0,
    100% 0;
  background-repeat: no-repeat;
}

.section--grid-dark-solid > *:not(.grid-boundary):not(.grid-crosses) {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------
   Responsive: mobile — 3 linee (0%, 50%, 100%)
   ---------------------------------------- */
@media (max-width: 1024px) {
  .section--grid-dark::after,
  .section--grid-light::after {
    max-width: 100%;
    background-image:
      repeating-linear-gradient(to bottom, var(--color-grid-line-dark) 0px, var(--color-grid-line-dark) 10px, transparent 10px, transparent 20px),
      repeating-linear-gradient(to bottom, var(--color-grid-line-dark) 0px, var(--color-grid-line-dark) 10px, transparent 10px, transparent 20px),
      repeating-linear-gradient(to bottom, var(--color-grid-line-dark) 0px, var(--color-grid-line-dark) 10px, transparent 10px, transparent 20px);
    background-size: 1px 20px, 1px 20px, 1px 20px;
    background-position: 24px 0, 50% 0, calc(100% - 24px) 0;
    background-repeat: repeat-y, repeat-y, repeat-y;
  }

  .section--grid-light::after {
    background-image:
      repeating-linear-gradient(to bottom, var(--color-grid-line-light) 0px, var(--color-grid-line-light) 10px, transparent 10px, transparent 20px),
      repeating-linear-gradient(to bottom, var(--color-grid-line-light) 0px, var(--color-grid-line-light) 10px, transparent 10px, transparent 20px),
      repeating-linear-gradient(to bottom, var(--color-grid-line-light) 0px, var(--color-grid-line-light) 10px, transparent 10px, transparent 20px);
  }

  .no-grid.section--grid-dark::after,
  .no-grid.section--grid-light::after {
    background-image:
      repeating-linear-gradient(to bottom, currentColor 0px, currentColor 10px, transparent 10px, transparent 20px),
      repeating-linear-gradient(to bottom, currentColor 0px, currentColor 10px, transparent 10px, transparent 20px);
    background-size: 1px 20px, 1px 20px;
    background-position: 24px 0, calc(100% - 24px) 0;
    background-repeat: repeat-y, repeat-y;
  }

  .section--grid-dark-solid::after {
    max-width: 100%;
    background-image:
      linear-gradient(to bottom, var(--color-grid-line-dark), var(--color-grid-line-dark)),
      linear-gradient(to bottom, var(--color-grid-line-dark), var(--color-grid-line-dark)),
      linear-gradient(to bottom, var(--color-grid-line-dark), var(--color-grid-line-dark));
    background-size: 1px 100%, 1px 100%, 1px 100%;
    background-position: 24px 0, 50% 0, calc(100% - 24px) 0;
    background-repeat: no-repeat;
  }
}

/* ----------------------------------------
   Responsive: mobile grid crosses
   ---------------------------------------- */
@media (max-width: 1024px) {
  /* Top boundary + crosses: ancorati al bordo superiore della sezione.
     Ignora --section-pt (che su desktop può essere 200+ px). */
  .grid-boundary--top,
  .grid-crosses--top {
    top: 0;
  }

  /* Cross sinistro: inset dal bordo viewport */
  .grid-cross:nth-child(1) {
    left: 24px;
  }

  /* Cross destro: inset simmetrico dal bordo viewport.
     Ogni variante ha il suo nth-child finale:
       default (2 cross) → nth-child(2)
       --three (3 cross) → nth-child(3)
       --full  (5 cross) → nth-child(5)              */
  .grid-crosses:not(.grid-crosses--three):not(.grid-crosses--full) .grid-cross:nth-child(2),
  .grid-crosses--three .grid-cross:nth-child(3),
  .grid-crosses--full .grid-cross:nth-child(5) {
    left: calc(100% - 24px);
  }

  .grid-cross {
    width: 23px;
    height: 23px;
  }

  .grid-cross::before {
    width: 3px;
    height: 23px;
  }

  .grid-cross::after {
    width: 23px;
    height: 3px;
  }
}