/* =======================================================
   main-mobile.css — versione 2025-11-05 (layout verticale)
   ======================================================= */

@media (max-width: 768px) {

  /* --- Reset e base --- */
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }

  #accordionRoot,
  .outer-accordion,
  .inner-accordion {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow-x: hidden;
  }

  /* --- Struttura dei pannelli principali --- */
  .outer-item,
  .inner-item {
    display: block !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 1rem 0;
    border-radius: 12px;
    overflow: hidden;
  }

  /* --- Corpo del pannello (immagine + testo) --- */
  .panel-body,
  .inner-content-wrapper {
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    box-sizing: border-box;
  }

  /* --- Immagini --- */
  .panel-image,
  .inner-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 0.5rem auto !important;
  }

  /* --- Testi --- */
  .panel-text,
  .inner-content-wrapper p,
  .inner-content-wrapper h2,
  .inner-content-wrapper h3,
  .inner-content-wrapper small {
    width: 100% !important;
    max-width: 100%;
    text-align: center !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    margin: 0.25rem 0;
  }

  /* --- Accordion interno --- */
  .inner-content,
  .content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* --- Evita che padding o bordi allarghino il layout --- */
  * {
    box-sizing: border-box !important;
  }

  /* --- Riduci padding globali per schermi piccoli --- */
  .outer-item,
  .inner-item {
    padding: 0 !important;
  }

  /* --- Migliora leggibilità --- */
  h2, h3 {
    font-size: 1.1rem !important;
    line-height: 1.3em !important;
  }

  p, small {
    font-size: 0.95rem !important;
  }

  /* --- Nessun overflow orizzontale --- */
  body {
    overflow-x: hidden !important;
  }
}

.panel-text {
  padding-bottom: 0.5rem !important;
}