/* ============================================================
   LABORATORIO - ColliDesign.it (sessione 34)
   Pagine di cose che girano davvero: dati vivi, non lavori chiusi.

   Palette dei grafici (verificata col validatore di contrasto e
   daltonismo, fondo chiaro): ambra #d4760a, ciano #0891b2,
   cremisi #be123c, violetto #7c3aed. Non cambiarle a occhio:
   ogni coppia e' stata controllata in deuteranopia e protanopia.
   ============================================================ */
.cd-lab{padding:1.2rem 0 2.5rem}
.cd-lab-briciole{font-size:.8rem;color:var(--cd-muted,#6b7683);margin-bottom:.5rem}
.cd-lab-briciole a{color:var(--cd-blu,#1b3a5b);text-decoration:none}
.cd-lab-briciole a:hover{text-decoration:underline}
.cd-lab-briciole span{margin:0 .3rem;opacity:.6}

.cd-lab-testa h1{font-size:1.9rem;font-weight:800;margin:0 0 .4rem;color:var(--cd-blu,#1b3a5b)}
/* Testo a tutta colonna, come il resto del sito. La riga lunga si paga in
   leggibilita', ma qui l'alternativa era mezza pagina vuota accanto alle
   schede, che si paga di piu'. */
.cd-lab-sotto{color:var(--cd-muted,#6b7683);font-size:.95rem;line-height:1.6;margin:0 0 1.4rem}

.cd-lab-avviso{display:flex;gap:.7rem;align-items:flex-start;background:#fff8e6;
  border:1px solid #f2dca8;border-left:4px solid #d4760a;border-radius:10px;
  padding:.9rem 1rem;font-size:.9rem;line-height:1.55;color:#6b4a06}
.cd-lab-avviso i{font-size:1.1rem;flex:0 0 auto}

/* ---- Caselle delle condizioni di adesso ---- */
.cd-mt-griglia{display:grid;gap:.7rem;margin-bottom:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.cd-mt{background:#fff;border:1px solid #e4e8ee;border-radius:10px;padding:.75rem .9rem;
  display:flex;flex-direction:column;gap:.1rem;min-width:0}
.cd-mt .e{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--cd-muted,#6b7683);font-weight:700}
/* Cifre proporzionali, non tabulari: a questo corpo le larghezze fisse
   fanno sembrare slegate le cifre di un numero solo. */
.cd-mt .n{font-size:1.7rem;font-weight:800;line-height:1.1;color:#101828;
  white-space:nowrap;font-variant-numeric:proportional-nums}
.cd-mt .n small{font-size:.68rem;font-weight:600;color:var(--cd-muted,#6b7683);margin-left:.18rem}
.cd-mt .d{font-size:.74rem;color:var(--cd-muted,#6b7683);line-height:1.4}
.cd-mt-hero{grid-column:span 2;background:linear-gradient(180deg,#fffaf2,#fff)}
.cd-mt-hero .n{font-size:2.6rem;color:#d4760a}

.cd-lab-piede{font-size:.78rem;color:var(--cd-muted,#6b7683);margin:0 0 1.3rem;line-height:1.5}

/* ---- Riga di filtro: una sola, sopra tutti i grafici ---- */
.cd-lab-filtro{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.9rem}
.cd-lab-fb{appearance:none;border:1px solid #d9dee5;background:#fff;color:#3b4654;
  border-radius:20px;padding:.38rem .95rem;font-size:.84rem;font-weight:600;cursor:pointer;
  min-height:38px}
.cd-lab-fb:hover{border-color:var(--cd-blu,#1b3a5b)}
.cd-lab-fb.attivo{background:var(--cd-blu,#1b3a5b);border-color:var(--cd-blu,#1b3a5b);color:#fff}
.cd-lab-fnota{font-size:.78rem;color:var(--cd-muted,#6b7683);margin-left:.3rem}

/* ---- Schede dei grafici ----
   L'altezza comprende la fascia delle etichette dell'asse: fissando solo
   l'area del disegno la scheda si ritrova una barra di scorrimento interna. */
.cd-graf{background:#fff;border:1px solid #e4e8ee;border-radius:10px;margin-bottom:.8rem;
  padding:.8rem .9rem .9rem}
.cd-graf-testa{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  margin-bottom:.5rem}
.cd-graf-testa h2{font-size:.95rem;font-weight:700;margin:0;color:#101828}
/* Il valore accanto al titolo veste il colore del testo, non quello della
   serie: la tinta la porta il segno nel grafico. */
.cd-graf-testa .val{font-size:.8rem;color:var(--cd-muted,#6b7683);font-weight:600;
  white-space:nowrap}
.cd-graf-corpo{height:210px}
.cd-graf.grande .cd-graf-corpo{height:300px}
.cd-graf-nota{font-size:.76rem;color:var(--cd-muted,#6b7683);margin:.5rem 0 0;line-height:1.45}
.cd-graf-coppia{display:grid;gap:.8rem;grid-template-columns:1fr 1fr}

/* ---- Tabella gemella: ogni valore si legge anche come numero ---- */
.cd-lab-tab{background:#fff;border:1px solid #e4e8ee;border-radius:10px;margin-bottom:.8rem}
.cd-lab-tab summary{cursor:pointer;padding:.7rem .9rem;font-size:.86rem;font-weight:600;
  color:var(--cd-blu,#1b3a5b)}
.cd-lab-tab-wrap{max-height:420px;overflow:auto;border-top:1px solid #eef1f5}
.cd-lab-tab table{width:100%;border-collapse:collapse;font-size:.78rem;
  font-variant-numeric:tabular-nums}
.cd-lab-tab th,.cd-lab-tab td{padding:.3rem .55rem;text-align:right;border-bottom:1px solid #f2f4f7}
.cd-lab-tab thead th{position:sticky;top:0;background:#fafbfc;text-align:right;
  font-weight:700;color:#3b4654;white-space:nowrap}
.cd-lab-tab tbody th{text-align:left;font-weight:600;white-space:nowrap;color:#3b4654}

/* ---- Come funziona ---- */
.cd-lab-come{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid #e4e8ee}
.cd-lab-come h2{font-size:1.25rem;font-weight:800;color:var(--cd-blu,#1b3a5b);margin:0 0 .6rem}
.cd-lab-come p{font-size:.92rem;line-height:1.65;color:#3b4654}
/* ---- La catena illustrata ----
   Ogni passaggio ha un riquadro immagine di altezza fissa: le foto hanno
   proporzioni diverse e senza un'altezza comune le schede si sfalsano.
   object-fit: contain, non cover: queste sono foto di oggetti su fondo
   bianco, ritagliarle al centro taglierebbe l'anemometro. */
.cd-catena{list-style:none;padding:0;margin:1.1rem 0;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cd-catena li{background:#fff;border:1px solid #e4e8ee;border-radius:10px;
  position:relative;display:flex;flex-direction:column;overflow:hidden}
.cd-catena .n{position:absolute;top:.55rem;left:.55rem;z-index:2;
  width:24px;height:24px;border-radius:50%;
  background:var(--cd-blu,#1b3a5b);color:#fff;font-size:.74rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(16,24,40,.25)}
.cd-catena .img{height:132px;background:#fff;border-bottom:1px solid #eef1f5;
  display:flex;align-items:center;justify-content:center;padding:.5rem .6rem}
.cd-catena .img img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
/* Dove la foto non c'e' ancora, un segno grafico nella stessa cornice:
   la griglia resta regolare e si capisce che manca l'immagine, non il passo. */
.cd-catena .img.segno{background:#f7f9fb}
.cd-catena .img.segno i{font-size:2.5rem;color:#9aa6b4}
.cd-catena strong{font-size:.88rem;color:#101828;padding:.7rem .85rem .2rem}
.cd-catena em{font-style:normal;font-size:.78rem;color:var(--cd-muted,#6b7683);
  line-height:1.5;padding:0 .85rem .85rem}
.cd-lab-tec{font-size:.84rem;color:var(--cd-muted,#6b7683);line-height:1.6}

@media (max-width:760px){
  .cd-graf-coppia{grid-template-columns:1fr}
  .cd-lab-testa h1{font-size:1.5rem}
  .cd-mt-hero .n{font-size:2.1rem}
  .cd-mt .n{font-size:1.45rem}
  .cd-graf-corpo{height:190px}
  .cd-graf.grande .cd-graf-corpo{height:240px}
  .cd-graf-testa{flex-direction:column;gap:.15rem}
}

/* ---- Schede del Laboratorio ----
   Geometria e cornice sono quelle di .cd-card del sito: qui si aggiungono
   solo lo stato e il comportamento al passaggio del mouse. Le schede
   "in costruzione" non sono link, e si vede prima di leggerle: bordo
   tratteggiato, niente ombra, niente freccia. */
.cd-lab-card{display:block;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s}
a.cd-lab-card:hover{border-color:var(--cd-blu,#1b3a5b);
  box-shadow:0 8px 22px rgba(16,24,40,.09);transform:translateY(-2px);text-decoration:none}
.cd-lab-card.futura{border-style:dashed;background:#fcfcfb;cursor:default}
.cd-lab-tit{font-family:'Montserrat',sans-serif;font-weight:700;font-size:.95rem;
  color:var(--cd-blu,#1b3a5b);margin:.45rem 0 .4rem}
.cd-lab-tit i{margin-right:.3rem}
.cd-lab-card.futura .cd-lab-tit{color:#51606f}
.cd-lab-card p{font-size:.82rem;color:var(--cd-muted,#6b7683);line-height:1.5;margin:0 0 .6rem}
/* Lo stato porta pallino E parola: mai il colore da solo. */
.cd-lab-stato{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:#15803d}
.cd-lab-stato .punto{width:7px;height:7px;border-radius:50%;background:#15803d;
  box-shadow:0 0 0 3px rgba(21,128,61,.16)}
.cd-lab-stato.futuro{color:#8a6410}
.cd-lab-stato.futuro .punto{background:#b8860b;box-shadow:0 0 0 3px rgba(184,134,11,.14)}
.cd-lab-numeri{display:block;font-size:.74rem;color:var(--cd-muted,#6b7683);
  font-variant-numeric:tabular-nums;margin-bottom:.5rem}
.cd-lab-numeri b{color:#101828;font-weight:700}
.cd-lab-vai{font-size:.8rem;font-weight:700;color:var(--cd-blu,#1b3a5b)}
.cd-lab-vai i{transition:transform .15s}
a.cd-lab-card:hover .cd-lab-vai i{transform:translateX(3px)}

/* Testo lungo dentro una card del sito */
.cd-lab-testo p{font-size:.88rem;line-height:1.65;color:#3b4654;margin:0 0 .8rem}
.cd-lab-testo p:last-child{margin-bottom:0}
.cd-lab-testo em{font-style:normal;font-weight:700;color:#8a6410}

/* ---- Foto dell'apparecchiatura ---- */
.cd-lab-testa-foto{display:grid;gap:1.4rem;grid-template-columns:minmax(0,1fr) 310px;
  align-items:center;margin-bottom:1.1rem}
.cd-lab-testa-foto .cd-lab-sotto{margin-bottom:0}
.cd-lab-foto{margin:0;background:#fff;border:1px solid #e4e8ee;border-radius:12px;padding:.8rem}
.cd-lab-foto img{display:block;width:100%;height:auto}
.cd-lab-foto figcaption{font-size:.74rem;color:var(--cd-muted,#6b7683);line-height:1.5;
  margin-top:.5rem;padding-top:.5rem;border-top:1px solid #eef1f5}
.cd-lab-foto figcaption strong{color:#3b4654}

@media (max-width:860px){
  .cd-lab-testa-foto{grid-template-columns:1fr}
  .cd-lab-foto{max-width:320px}
}