/* sito.css - le pagine si adattano allo schermo (telefono, tablet, computer).
   ultima modifica: Claude (ARCHITETTO), 05/10/2026. Marco: "le pagine web vanguard non sono
   responsive". Le pagine escono dal canvas a larghezza fissa (1440 px, 390 px per il telefono) con
   gli stili scritti dentro ogni elemento: qui si sovrascrivono, per questo serve !important.
   La specifica dice "PRIMA IL TELEFONO": il B2B cinese vive nello smartphone dentro WeChat. */

html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }

/* la tavola del canvas diventa fluida: niente larghezza ne' altezza fisse */
body > div[style*="width: 1440px"] {
  width: auto !important; max-width: 1440px; height: auto !important;
  min-height: 100vh; margin: 0 auto; overflow-x: hidden;
}
body > div[style*="width: 390px"] {
  width: auto !important; max-width: 480px; height: auto !important;
  min-height: 100vh; margin: 0 auto;
}

/* ---------- tablet e computer piccoli ---------- */
@media (max-width: 1200px) {
  [style*="padding: 0 96px"] { padding-left: 40px !important; padding-right: 40px !important; }
  [style*="padding: 96px"], [style*="padding: 80px 96px"], [style*="padding: 72px 96px"],
  [style*="padding: 40px 96px"], [style*="padding: 104px 96px"], [style*="padding: 0 96px 80px"],
  [style*="padding: 72px 96px 40px"] { padding-left: 40px !important; padding-right: 40px !important; }
  [style*="padding: 110px 0 80px 96px"] { padding-left: 40px !important; }
  [style*="margin: 48px 96px"], [style*="margin: 24px 96px"] { margin-left: 40px !important; margin-right: 40px !important; }
  [style*="font-size: 80px"] { font-size: 60px !important; }
}

/* ---------- telefono ---------- */
@media (max-width: 760px) {
  /* intestazione: logo e lingua sopra, menu sotto (va a capo se non ci sta) */
  header { height: auto !important; flex-wrap: wrap; padding: 12px 16px !important; gap: 8px 16px !important; }
  header > div:first-child, header > a:first-child { font-size: 19px !important; flex-grow: 1; }
  header nav { order: 3; width: 100%; flex-grow: 0 !important; justify-content: flex-start !important;
               flex-wrap: wrap; gap: 6px 18px !important; font-size: 15px !important; padding-bottom: 4px; }

  /* margini laterali: 16 px */
  [style*="padding: 96px"], [style*="padding: 80px 96px"], [style*="padding: 72px 96px"],
  [style*="padding: 104px 96px"] { padding: 40px 16px !important; }
  [style*="padding: 72px 96px 40px"] { padding: 32px 16px 20px !important; }
  [style*="padding: 0 96px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding: 0 96px 80px"] { padding: 0 16px 40px !important; }
  [style*="padding: 40px 96px"] { padding: 24px 16px !important; }
  [style*="padding: 110px 0 80px 96px"] { padding: 32px 16px 28px !important; }
  [style*="margin: 48px 96px"], [style*="margin: 24px 96px"] { margin-left: 16px !important; margin-right: 16px !important; }
  [style*="padding: 28px 32px"] { padding: 20px 16px !important; }
  [style*="padding-right: 48px"], [style*="padding-right: 24px"] { padding-right: 0 !important; }
  [style*="padding-left: 32px"] { padding-left: 16px !important; }

  /* le griglie diventano una colonna sola */
  [style*="grid-template-columns: repeat("], [style*="grid-template-columns: 120px 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important; row-gap: 28px !important; }
  [style*="grid-column"] { grid-column: 1 / -1 !important; }
  /* la tabella tecnica resta tabella: scorre di lato */
  [style*="grid-template-columns: 150px 1fr 110px"] { min-width: 1020px; }
  body > div:has([style*="grid-template-columns: 150px 1fr 110px"]) { overflow-x: auto; }

  /* le righe flessibili vanno a capo invece di uscire dallo schermo */
  [style*="display: flex"]:not([style*="flex-direction: column"]) { flex-wrap: wrap; }
  [style*="gap: 48px"]:not([style*="flex-direction: column"]) { gap: 20px !important; }
  [style*="gap: 32px"]:not([style*="flex-direction: column"]) { gap: 16px !important; }
  footer { gap: 8px 20px !important; }

  /* altezze fisse: la prima immagine e le foto alte si accorciano */
  [style*="height: 720px"] { height: auto !important; }
  [style*="height: 720px"] > div:last-child { height: 240px; }
  [style*="height: 620px"] { height: 260px !important; }
  [style*="height: 320px"], [style*="height: 250px"], [style*="height: 240px"] { height: 200px !important; }

  /* caratteri */
  [style*="font-size: 80px"] { font-size: 40px !important; }
  [style*="font-size: 56px"], [style*="font-size: 54px"] { font-size: 32px !important; }
  [style*="font-size: 50px"], [style*="font-size: 48px"] { font-size: 30px !important; }
  [style*="font-size: 44px"], [style*="font-size: 42px"] { font-size: 27px !important; }
  [style*="font-size: 36px"], [style*="font-size: 34px"] { font-size: 23px !important; }
  [style*="font-size: 32px"], [style*="font-size: 30px"] { font-size: 21px !important; }
  [style*="font-size: 28px"] { font-size: 20px !important; }
  [style*="font-size: 21px"], [style*="font-size: 20px"] { font-size: 17px !important; }
  [style*="font-size: 19px"] { font-size: 16px !important; }

  /* i bottoni grandi occupano la riga intera: si toccano col pollice */
  a[style*="min-height: 58px"], a[style*="min-height: 60px"], a[style*="min-height: 56px"] {
    width: 100%; box-sizing: border-box; justify-content: center; text-align: center; }
}