/* Pagine corte: il footer verde e la barra nera restano in fondo alla finestra (colonna con area contenuto che si espande).
   Nelle pagine piu' lunghe della finestra non cambia nulla. L'header laterale del desktop e' fuori flusso (posizione fissa). */
#wrapper{display:flex;flex-direction:column;min-height:100vh}
#wrapper>#main{flex:1 0 auto}
#wrapper>.fusion-footer{flex:0 0 auto}

/* Articoli del blog, desktop: con 1-3 "Related Posts" distribuiti su tutta la larghezza (spazio uguale prima, tra e dopo, mai meno di ~28px).
   Con 4 o piu' elementi resta il carosello originale del tema (3 visibili, scorrimento automatico/trascinamento): qui non si tocca nulla.
   Il carosello posiziona gli elementi con stili inline, per questo servono gli !important. */
@media (min-width:801px){
  .related-posts:not(:has(.fusion-carousel-item:nth-child(4))) .fusion-carousel-wrapper{overflow:visible!important;width:100%!important;height:auto!important;position:static!important}
  .related-posts:not(:has(.fusion-carousel-item:nth-child(4))) .fusion-carousel-positioner{margin-left:0!important}
  .related-posts:not(:has(.fusion-carousel-item:nth-child(4))) .fusion-carousel-holder{position:static!important;display:flex!important;justify-content:space-evenly;align-items:flex-start;width:100%!important;height:auto!important;margin:0!important}
  .related-posts:not(:has(.fusion-carousel-item:nth-child(4))) .fusion-carousel-item{float:none!important;margin:0!important;flex:0 0 auto}
  /* 4 o piu' (carosello originale): respiro tra gli elementi con un padding interno, senza toccare la geometria calcolata dal tema */
  .related-posts:has(.fusion-carousel-item:nth-child(4)) .fusion-carousel-item-wrapper{padding:0 13px}
  /* 3 elementi: larghezza ridotta per lasciare almeno 28px prima, tra e dopo */
  .related-posts .fusion-carousel-holder:has(> .fusion-carousel-item:nth-child(3):last-child) > .fusion-carousel-item{width:calc((100% - 112px) / 3)!important;max-width:none!important}
}

/* Mobile: Related Posts uno sotto l'altro a larghezza piena, titoli piu' piccoli e leggibili. Desktop invariato (regole sopra). */
@media (max-width:800px){
  .related-posts .fusion-carousel-wrapper{overflow:visible!important;width:100%!important;height:auto!important;position:static!important}
  .related-posts .fusion-carousel-positioner{margin-left:0!important}
  .related-posts .fusion-carousel-holder{position:static!important;display:block!important;width:100%!important;height:auto!important;margin:0!important}
  .related-posts .fusion-carousel-item{display:block!important;float:none!important;width:100%!important;max-width:100%!important;margin:0 0 26px!important}
  .related-posts .fusion-carousel-item img{width:100%;height:auto}
  .related-posts .fusion-carousel-nav{display:none!important}
  .related-posts .fusion-carousel-title,.related-posts .fusion-carousel-title a{font-size:17px!important;line-height:1.45!important}
  .related-posts .fusion-carousel-holder,.related-posts .fusion-carousel-item{transform:none!important;transition:none!important;animation:none!important;left:auto!important;top:auto!important;inset:auto!important}
}