/* Figure degli articoli — regola 08_immagini-articoli.md
   .fig-lead  = immagine guida, piena larghezza, non in float
   .fig-dx / .fig-sx = immagini successive, float alternato
   Ogni var() ha un fallback: il file e' usabile anche fuori dal design system. */

.fig-lead,.fig-dx,.fig-sx{
  margin:26px 0;padding:0;background:var(--bg,#fff);
  border:1px solid var(--linea,#e6eaef);border-radius:var(--radius,14px);
  overflow:hidden;box-shadow:var(--ombra-s,0 2px 8px rgba(31,42,55,.08));
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s;
}
.fig-lead{width:100%}
.fig-dx{float:right;width:min(46%,420px);margin:8px 0 22px 26px}
.fig-sx{float:left;width:min(46%,420px);margin:8px 26px 22px 0}

.fig-lead:hover,.fig-dx:hover,.fig-sx:hover{
  transform:translateY(-4px) rotate(-.25deg) scale(1.006);
  box-shadow:0 18px 38px rgba(31,42,55,.16);
}

.fig-lead img,.fig-lead svg,.fig-dx img,.fig-dx svg,.fig-sx img,.fig-sx svg{
  display:block;width:100%;height:auto;margin:0;background:var(--bg2,#f5f7fa);
}

.fig-lead figcaption,.fig-dx figcaption,.fig-sx figcaption{
  padding:11px 14px;font-size:.86rem;line-height:1.5;color:var(--muted,#5b6b7b);
  background:var(--bg2,#f5f7fa);border-top:1px solid var(--linea,#e6eaef);
}

/* i titoli non devono avvolgere le figure in float */
.article h2,.main h2{clear:both}

@media (max-width:760px){
  .fig-dx,.fig-sx{float:none;width:100%;margin:22px 0}
}
@media (prefers-reduced-motion:reduce){
  .fig-lead,.fig-dx,.fig-sx{transition:none}
  .fig-lead:hover,.fig-dx:hover,.fig-sx:hover{transform:none}
}