/* MeteoSystem — Correzione mobile degli articoli singoli v1.0
 * Valida solo sotto 768px e per il template .msarticle.
 * Non tocca la homepage, il blog archivio, WooCommerce e altri template.
 */
@media screen and (max-width: 767px) {
  body.msarticle-enabled #main.msarticle-main,
  body.msarticle-enabled .msarticle {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  /* Il template originale applicava 20px; lasciamo 16px per lato. */
  body.msarticle-enabled .msarticle-hero__inner,
  body.msarticle-enabled .msarticle-layout,
  body.msarticle-enabled .msarticle-related,
  body.msarticle-enabled .msarticle-bottom {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.msarticle-enabled .msarticle-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    padding-top: 30px !important;
    padding-bottom: 34px !important;
  }

  body.msarticle-enabled .msarticle-main-col,
  body.msarticle-enabled .msarticle-entry {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Avada Builder può introdurre padding/margini desktop dentro the_content().
   * Azzeriamo soltanto le distanze orizzontali negli articoli su mobile. */
  body.msarticle-enabled .msarticle-entry :is(
    .fusion-fullwidth,
    .fusion-builder-row,
    .fusion-layout-column,
    .fusion-column-wrapper,
    .fusion-column-content,
    .fusion-text,
    .fusion-text-column
  ) {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.msarticle-enabled .msarticle-entry .fusion-builder-row {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  body.msarticle-enabled .msarticle-entry :is(
    .fusion-layout-column,
    .fusion-text,
    .fusion-text-column
  ) {
    flex-basis: 100% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    float: none !important;
  }

  /* Tipografia comoda anche con paragrafi provenienti da Avada. */
  body.msarticle-enabled .msarticle-entry {
    font-size: 16px !important;
    line-height: 1.7 !important;
    overflow-wrap: break-word;
  }
  body.msarticle-enabled .msarticle-entry :is(p,li) {
    font-size: 16px !important;
    line-height: 1.7 !important;
    text-align: left !important;
    max-width: 100% !important;
  }
  body.msarticle-enabled .msarticle-entry p {
    margin-bottom: 18px !important;
  }
  body.msarticle-enabled .msarticle-entry h2 {
    font-size: 23px !important;
    line-height: 1.3 !important;
  }
  body.msarticle-enabled .msarticle-entry h3 {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }
  body.msarticle-enabled .msarticle-entry :is(img,video,iframe,figure,table) {
    max-width: 100% !important;
  }
  body.msarticle-enabled .msarticle-entry :is(img,video) {
    height: auto;
  }
  body.msarticle-enabled .msarticle-entry :is(ul,ol) {
    padding-left: 24px !important;
  }
  body.msarticle-enabled .msarticle-sidebar {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }
  body.msarticle-enabled .msarticle-share,
  body.msarticle-enabled .msarticle-neighbors {
    width: 100% !important;
    max-width: 100% !important;
  }
}