/* ========================================
   Tablet overrides — iPad portrait (769px–1024px)
   Caricato per ultimo (dopo responsive.css): vince la cascade.
   Per disattivare TUTTO: commentare 'tablet' nell'array
   $sections di functions.php.
   Ogni fix è in un blocco autonomo: commentabile singolarmente.

   REGOLA COMUNE (come desktop e mobile):
   linee tratteggiate, croci "+" e rientri del contenuto
   condividono la stessa ancora. Desktop = bordi del box
   container (max 1330px); mobile = gutter 20px; qui tablet =
   var(--container-gutter) (27px). Il blocco @1024 di
   grid-overlay.css usava 24px: non allineato al contenuto.
   ======================================== */

@media (min-width: 769px) and (max-width: 1024px) {

  /* ----------------------------------------
     FIX 1 — Header: ripristina i gutter.
     header.css @min-width:768 azzera il padding del container
     (pensato per desktop >=1330px): qui logo e hamburger
     finivano a filo dei bordi viewport.
     ---------------------------------------- */
  .site-header .container {
    padding: 0 var(--container-gutter);
  }

  /* ----------------------------------------
     FIX 2 — Carousel: slide larga quanto il carousel, non 100vw.
     A <=1024 --carousel-total:1 rende la slide = 100vw mentre il
     carousel resta largo container - gutter: la slide sbordava di
     54px e main.js calcolava floor(carW/slideW)=0 slide visibili,
     traslando l'autoplay su una pagina inesistente (card vuota).
     ---------------------------------------- */
  .carousel {
    --carousel-slide-width: 100%;
  }

  /* ----------------------------------------
     FIX 3a — Linee di sezione: box inset dal gutter (tecnica
     mobile di responsive.css), 3 linee a 0 / 50% / 100% del box
     = gutter, centro, viewport - gutter. Così intersecano le
     croci del FIX 3b per costruzione.
     Le varianti .grid-center e .no-grid posizionano già le linee
     a 0/50/100 del box: con il box inset tornano corrette da sole.
     ---------------------------------------- */
  .section--grid-dark::after,
  .section--grid-light::after {
    left: var(--container-gutter);
    right: var(--container-gutter);
    transform: none;
    width: auto;
    max-width: 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);
    background-size: 1px 20px, 1px 20px, 1px 20px;
    background-position: 0 0, 50% 0, 100% 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);
  }

  /* Ribatte il blocco @1024 di grid-overlay.css che ancorava
     la variante .no-grid a 24px. */
  .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;
  }

  .section--grid-dark-solid::after {
    left: var(--container-gutter);
    right: var(--container-gutter);
    transform: none;
    width: auto;
    max-width: none;
    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: 0 0, 50% 0, 100% 0;
    background-repeat: no-repeat;
  }

  /* ----------------------------------------
     FIX 3b — Croci "+": stessa ancora delle linee (gutter).
     grid-overlay.css @1024 le metteva a 24px. Le croci intermedie
     desktop (25% / 75%) a tablet non hanno una linea da marcare:
     nascoste. Quella centrale (50%) resta sulla linea centrale.
     ---------------------------------------- */
  .grid-crosses .grid-cross:nth-child(1),
  .clients-boundary-crosses .grid-cross:nth-child(1),
  .section-case-studies .grid-crosses--top .grid-cross:nth-child(1) {
    left: var(--container-gutter);
  }

  .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),
  .clients-boundary-crosses .grid-cross:nth-child(2) {
    left: calc(100% - var(--container-gutter));
  }

  .grid-crosses--three .grid-cross:nth-child(2),
  .grid-crosses--full .grid-cross:nth-child(2),
  .grid-crosses--full .grid-cross:nth-child(4) {
    display: none;
  }

  /* Croci custom su divider di carousel e sezioni: box da
     full-bleed a filo container, così le posizioni base
     (0 / 50% / 100% del box) coincidono con gutter, centro e
     linee. I blocchi mobile delle sezioni fanno lo stesso con
     20px; la fascia tablet era rimasta senza regola. */
  .carousel-crosses,
  .solutions-header-crosses {
    margin-left: 0;
    margin-right: 0;
  }

  .section-solutions .carousel-crosses .grid-cross:nth-child(1) { left: 0; }
  .section-solutions .carousel-crosses .grid-cross:nth-child(2) { left: 100%; }

  /* services-crosses e footer-crosses sono figli diretti della
     section (box = viewport): le croci vanno inset del gutter. */
  .services-crosses .grid-cross:nth-child(1),
  .footer-crosses .grid-cross:nth-child(1) {
    left: var(--container-gutter);
  }

  .services-crosses .grid-cross:nth-child(2),
  .footer-crosses .grid-cross:nth-child(2) {
    left: calc(100% - var(--container-gutter));
  }

  /* La terza croce del case studies (75%, regola min-width:769 di
     case-studies.css) a tablet non ha una linea da marcare. */
  .section-case-studies .carousel-crosses .grid-cross:nth-child(3) {
    display: none;
  }

  /* Linea solida verticale al 75% (colonna desktop del case
     study, regola min-width:769 di case-studies.css): a tablet
     attraversava la card senza dividere nulla. */
  #projects > .grid-crosses--top.grid-crosses--three::after {
    content: none;
  }

  /* ----------------------------------------
     FIX 3c — Home, clients + case studies: linee laterali
     continue sul wrapper (stessa tecnica mobile di
     responsive.css), niente linee interne alle due sezioni:
     evita il salto di fase del tratteggio tra le sezioni.
     ---------------------------------------- */
  .continuous-dark-grid {
    position: relative;
  }

  .continuous-dark-grid::before,
  .continuous-dark-grid::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-image: 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;
    background-repeat: repeat-y;
    background-position: 0 0;
    pointer-events: none;
    z-index: 2;
  }

  .continuous-dark-grid::before { left: var(--container-gutter); }
  .continuous-dark-grid::after  { right: var(--container-gutter); }

  .continuous-dark-grid .section--grid-dark::after {
    background-image: none;
  }

  /* ----------------------------------------
     FIX 3d — Sezioni a linee piene (LOB e tech brands su
     /services/, use cases su single solution): 5 linee a passi
     del 25% sul layout desktop -> 3 linee sul box inset,
     allineate a gutter / centro / viewport - gutter.
     ---------------------------------------- */
  .section-services-lob.section--grid-dark::after,
  .section-tech-brands.section--grid-dark::after,
  .section.section-solution-usecases.section--grid-dark::after {
    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: 0 0, 50% 0, 100% 0;
    background-repeat: no-repeat;
  }

  /* ----------------------------------------
     FIX 3e — Services grid (home + /services/) e use cases grid:
     le ::before disegnavano 4 linee a passi del 25% (layout
     desktop 4 col) sopra i testi. Il box della griglia parte già
     dal gutter (margini azzerati a <=1024): bordo sinistro +
     divisore centrale bastano e restano in asse con croci e linee.
     ---------------------------------------- */
  .services-grid::before {
    background-image:
      linear-gradient(var(--color-grid-line-dark), var(--color-grid-line-dark)),
      linear-gradient(var(--color-grid-line-dark), var(--color-grid-line-dark)),
      linear-gradient(var(--color-grid-line-dark), var(--color-grid-line-dark));
    background-size: 1px 100%, 1px 100%, 1px 100%;
    background-position: 0 0, 50% 0, 100% 0;
    background-repeat: no-repeat;
  }

  /* ----------------------------------------
     FIX 3f — Clients (home): il secondo blocco @1024 di
     clients.css reimposta 3 colonne (repeat(3)) mentre i divisori
     mobile spezzano le righe ogni 2 loghi: risultato 2 loghi
     schiacciati a sinistra + terza colonna sempre vuota.
     A tablet: 2 colonne piene come il mobile, loghi a misura
     intermedia tra mobile (140px) e desktop (220px).
     ---------------------------------------- */
  .clients-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .client-logo {
    height: 160px;
  }

  /* ----------------------------------------
     FIX 4 — Maschera griglia dietro le card: left/right +
     width:90% in conflitto (width vince, right ignorato): la
     maschera era più stretta del previsto e le linee
     riaffioravano dentro le card.
     ---------------------------------------- */
  .bg-hide-grid::before {
    width: auto;
  }

  /* ----------------------------------------
     FIX 5 — /projects/: card a filo bordo sinistro e titolo
     clippato a metà riga. Gutter sul wrap, linee esterne della
     sezione riallineate al gutter, titolo ridimensionato per il
     box da mezza larghezza.
     ---------------------------------------- */
  .usecase-grid-wrap {
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
  }

  .section-usecase-grid::after {
    left: var(--container-gutter);
    right: var(--container-gutter);
    transform: none;
    width: auto;
    max-width: none;
  }

  .usecase-grid-card .usecase-card-title {
    font-size: 28px;
    line-height: 1.4;
    -webkit-line-clamp: unset;
  }

  /* Le linee orizzontali sopra/sotto le card sono larghe 100vw ma
     centrate sulla card (mezza larghezza): con un numero dispari di
     card finivano a mezz'aria. Ancorate al bordo viewport. */
  .usecase-grid-card::before,
  .usecase-grid-card:nth-last-child(-n+2)::after {
    left: calc(-1 * var(--container-gutter));
    transform: none;
    width: 100vw;
  }

  /* ----------------------------------------
     FIX 6 — Contact form: gli input (width:100% del row) partivano
     a x=27px e sbordavano di 27px oltre il viewport. Il wrap CF7
     diventa il containing block, così il 100% si calcola al netto
     dei padding. Checkbox e label consenso portate a misura touch.
     ---------------------------------------- */
  .contact-right .wpcf7-form-control-wrap {
    display: block;
  }

  /* base.css fissa la checkbox a 14px con !important: qui serve
     ribatterlo. Il segno di spunta (::before) viene riscalato. */
  .contact-form input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }

  .contact-form input[type="checkbox"]:checked::before {
    top: 2px;
    left: 6px;
    width: 7px;
    height: 12px;
  }

  .wpcf7-list-item-label {
    font-size: 14px;
    line-height: 1.4;
  }

  /* ----------------------------------------
     FIX 7 — Single project hero: il pannello destro conservava il
     bleed desktop (margin-right negativo, sbordava di 27px) e
     l'immagine restava object-fit:fill perché la regola
     .project-hero-image in single-project.css:96 è dentro un
     commento mai chiuso.
     ---------------------------------------- */
  .project-hero-right {
    margin-right: 0;
  }

  .project-hero-image-block {
    max-width: none;
  }

  .project-hero-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* ----------------------------------------
     FIX 8 — Rientri contenuti: dove ci sono le linee verticali
     il contenuto rientra di un gutter dalla linea, mai a filo
     (le linee a tablet cadono sul gutter, 27px; il contenuto dei
     container partiva alla stessa x). Due casi:
     - blocchi il cui box parte sulla linea: +1 gutter
     - container full-bleed che gestiscono da soli il padding:
       2 gutter totali
     ---------------------------------------- */
  .hero-intro,
  .hero-title,
  .hero-subtitle,
  .dna-title,
  .lab-header,
  .services-hero-title,
  .tech-brands-label,
  .solutions-hero-tagline,
  .solution-block-text,
  .project-hero-left {
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
  }

  .container.solutions-header,
  .container.services-header,
  .dna-stat,
  .services-lob-header {
    padding-left: calc(var(--container-gutter) * 2);
    padding-right: calc(var(--container-gutter) * 2);
  }

}

/* ========================================
   FIX 9 — Tablet ORIZZONTALE / laptop stretti (1025px–1384px)
   iPad Air/Pro 11 landscape = 1180/1194, iPad Pro 12.9 = 1366.
   Sotto 1384px il container desktop (1330 + 2 gutter) non ci sta:
   il box di linee e croci coincideva col viewport (linee sul bordo
   schermo, croci mezze tagliate) e l'header restava a filo.
   Un solo override: il container massimo diventa
   viewport - 2 gutter. Tutta la geometria desktop (linee, croci,
   bleed verso il bordo, header) si riallinea da sola perché ogni
   componente usa var(--container-max).
   Interessa anche i laptop 1280/1366: per loro è comunque un
   miglioramento (gutter al posto dei bordi a filo).
   NOTA: per convenzione del tema le custom property stanno in
   variables.css; questa vive qui perché tablet.css deve restare
   disattivabile in blocco da functions.php.
   ======================================== */
@media (min-width: 1025px) and (max-width: 1384px) {
  :root {
    --container-max: calc(100vw - 2 * var(--container-gutter));
  }
}