/* =========================================================
   /guide + le tre guide · layout (prefisso gd-)
   Solo posizioni, spazi e classi gd-: colori, font e ombre vengono dai token di site.css.
   ========================================================= */

/* ---------- /guide: indice ---------- */
/* il testo dell'hero sta nella stessa colonna delle sezioni sotto (.wrap), anche sopra i 1320 px */
.gd-hero .hero-in,.gd-hero .hero-extra{max-width:var(--maxw)}
.gd-hero .hero-in{padding-bottom:clamp(36px,5vh,64px)}
.gd-extra{padding-bottom:clamp(56px,7vw,112px)}

/* il filo rosso scende lungo l'elenco: un tratto per guida, un punto su ogni riga.
   L'elenco rientra di --gd-in: il filo corre nel margine, le linee sottili partono tutte dallo stesso punto */
.gd-list{--gd-in:46px;margin-left:var(--gd-in)}
.gd-item{position:relative}
.gd-seg{position:absolute;left:calc(var(--gd-in) * -1);top:0;width:28px;height:100%;overflow:visible;pointer-events:none}
.gd-seg .draw{stroke-width:2;transition-duration:.55s;transition-delay:calc(.35s + var(--i,0) * .5s)}
.gd-dot{position:absolute;left:calc(var(--gd-in) * -1 + 14px);top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--red);border:3px solid var(--bg);transform:scale(0);transition:transform .55s var(--ease-spring) calc(.3s + var(--i,0) * .5s)}
.gd-dot--end{top:100%;transition-delay:calc(.85s + var(--i,0) * .5s)}
.gd-item.in .gd-dot,html:not(.js) .gd-dot{transform:scale(1)}
.is-calm .gd-dot{transform:none;opacity:0;transition:opacity .6s ease calc(.3s + var(--i,0) * .5s)}
.is-calm .gd-item.in .gd-dot,.is-calm.is-shot .gd-dot{opacity:1}
.is-calm .gd-dot--end{transition-delay:calc(.85s + var(--i,0) * .5s)}
@media (max-width:719px){ .gd-list{--gd-in:34px} }

/* scorciatoie sotto l'elenco: il titolo nella colonna delle etichette, i link sotto i titoli delle guide */
.gd-more{border-top:1px solid var(--line);padding-block:clamp(44px,5vw,72px)}
.gd-links{display:flex;flex-wrap:wrap;gap:8px 28px}
.gd-more-in>*+*{margin-top:14px}
@media (min-width:960px){
  .gd-more-in{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);align-items:baseline;gap:0}
  .gd-more-in>*+*{margin-top:0}
}

/* il filo dell'ultima riga + la virgola restano sulla stessa riga; idem per le parti della riga di data */
.gd-nw{white-space:nowrap}

/* ---------- le guide: testata, figura, testo ---------- */
.gd-article .article-head .lead{max-width:34em}
/* il filo della lettura: una linea rossa sotto l'header che cresce mentre leggi (solo CSS, niente listener).
   Dove il browser non conosce animation-timeline non si vede niente. */
.gd-progress{display:none}
@supports (animation-timeline:view()){
  .gd-article{view-timeline-name:--gd-read;view-timeline-axis:block}
  .gd-progress{display:block;position:fixed;left:0;right:0;top:var(--head);height:2px;z-index:calc(var(--z-head) - 1);pointer-events:none;background:var(--red);transform-origin:0 50%;transform:scaleX(0);animation:gd-read linear both;animation-timeline:--gd-read;animation-range:contain calc(var(--head) + 16px) contain 100%} /* html ha scroll-padding-top: head + 16px */
  @keyframes gd-read{to{transform:scaleX(1)}}
  .is-shot .gd-progress{display:none}
}
/* la figura apre l'articolo: nella colonna del testo, un po' più larga; l'indice resta accanto */
@media (min-width:1024px){
  .gd-doc .doc-rail{grid-row:1 / span 2}
  .gd-doc .article-fig{grid-column:4 / 12;grid-row:1;min-width:0}
  .gd-doc .doc-body{grid-row:2}
  .gd-fig--phone .lp--phone .dev.phone{width:clamp(240px,40%,300px);margin-right:8%}
  .gd-fig .cap{text-align:right}
}
@media (max-width:1023px){
  .gd-fig--phone .lp--phone .dev.phone{width:min(54vw,250px)}
}
/* sotto i 1024 px la dashboard non si mostra intera (spec §3.5.3): telefono = zoom forte, tablet = zoom leggero */
.gd-zoom{--zw:215%;--zx:2%;--zy:5%}
@media (min-width:720px) and (max-width:1023px){ .gd-zoom{--zw:135%;--zx:0%;--zy:2%} }
/* tablet: telefono e lente affiancati (la lente a tutta larghezza sarebbe enorme) */
@media (min-width:720px) and (max-width:1023px){
  .gd-fig--phone .lp--phone{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,5vw,56px)}
  .gd-fig--phone .lp--phone .dev.phone{grid-column:2;grid-row:1;width:min(34vw,280px);margin:0}
  .gd-fig--phone .lp--phone .loupe{grid-column:1;grid-row:1;margin:0}
  .gd-fig:not(.gd-fig--phone) .loupe{max-width:560px}
}
.gd-fig .cap{margin-top:18px}
.gd-fig .lp[data-corner="bl"]+.cap{margin-top:clamp(18px,4vw,56px)}

/* testo: la prima sezione parte subito sotto la figura, meno vuoto prima di "continua a leggere" */
.gd-doc{padding-bottom:var(--sec-y-sm)}
.gd-doc .prose>section:first-child>h2{margin-top:0}
.gd-doc .prose section+section{margin-top:0}
.gd-doc .prose ol li{margin:.55em 0}