/* ============================================
   STILE RESPONSIVE COMUNE - Analisi Monetaria
   (senza regole nav/header - ora in assets/header.css)
   ============================================ */

/* Media Query per tablet (max-width: 1024px) */
@media (max-width: 1024px) {
  .sidebar-left,
  aside.sidebar-left {
    display: none !important;
  }

  .main-content,
  main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .layout-container {
    flex-direction: column !important;
    padding-top: 60px !important;
  }

  .sidebar-right {
    display: none !important;
  }

  .sidebar-nav {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .sidebar-link {
    border-left: none !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  main,
  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 20px !important;
    margin: 0 !important;
    margin-left: 0 !important;
  }

  .cover {
    margin-left: 0 !important;
    padding: 40px 20px !important;
  }
}

/* Media Query per mobile (max-width: 768px) */
@media (max-width: 768px) {
  /* HERO */
  .hero {
    padding: 100px 16px 50px !important;
    min-height: auto !important;
    border-radius: 0 0 20px 20px !important;
    background-size: 80% auto !important;
  }

  h1.title-over-eye {
    font-size: clamp(22px, 5vw, 32px) !important;
    top: 8% !important;
    padding: 0 12px !important;
  }

  .subtitle-under-eye {
    top: 60% !important;
    font-size: 14px !important;
    padding: 0 12px !important;
  }

  /* CONTENUTO PRINCIPALE */
  main,
  .main-content {
    padding: 20px 16px 40px !important;
  }

  section {
    padding: 32px 0 !important;
  }

  h2 {
    font-size: clamp(22px, 4vw, 28px) !important;
    margin-bottom: 16px !important;
  }

  p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  /* QUICK BUTTONS */
  .quick-buttons {
    padding: 16px !important;
    margin: 24px 8px !important;
    gap: 8px !important;
  }

  .quick-btn {
    padding: 10px 16px !important;
    font-size: 13px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  /* CARD */
  .card {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }

  /* GRID */
  .grid {
    grid-template-columns: 1fr !important;
  }

  /* TABELLE */
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table {
    font-size: 13px !important;
  }

  /* CTA */
  .cta {
    padding: 24px 16px !important;
    margin: 24px 0 !important;
  }

  /* CITAZIONI */
  .quote {
    padding: 16px !important;
    font-size: 14px !important;
  }

  /* EQUAZIONI */
  .equation {
    padding: 16px !important;
    font-size: 14px !important;
    overflow-x: auto !important;
  }

  /* FOOTER */
  footer {
    padding: 24px 16px !important;
    margin-top: 40px !important;
    font-size: 13px !important;
  }

  /* PERGAMENA */
  .pergamenta-container {
    margin: 16px 0 !important;
    padding: 24px 16px !important;
  }

  .pergamenta-container::before,
  .pergamenta-container::after {
    height: 24px !important;
  }

  .pergamenta-container::before {
    top: -12px !important;
  }

  .pergamenta-container::after {
    bottom: -12px !important;
  }

  .pergamenta-bordi {
    width: 16px !important;
  }

  .manifesto-titolo {
    font-size: 20px !important;
  }

  /* ARTICOLI */
  .article-card {
    padding: 16px !important;
  }

  .article-card h2 {
    font-size: 18px !important;
  }

  /* CONTAINER */
  .container {
    margin: 80px auto 40px !important;
    padding: 0 16px !important;
  }

  h1 {
    font-size: 24px !important;
  }

  .subtitle {
    font-size: 15px !important;
    margin-bottom: 32px !important;
    padding-bottom: 24px !important;
  }

  /* FIGURE E IMMAGINI */
  figure {
    margin: 24px 0 !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Media Query per smartphone piccoli (max-width: 480px) */
@media (max-width: 480px) {
  body {
    font-size: 14px !important;
  }

  h1.title-over-eye {
    font-size: 20px !important;
  }

  .subtitle-under-eye {
    font-size: 12px !important;
  }

  .quick-btn {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  /* Copertina */
  .cover {
    padding: 40px 16px 32px !important;
  }

  .cover-title {
    font-size: 1.5rem !important;
  }

  /* TOC */
  .toc-list {
    grid-template-columns: 1fr !important;
  }
}

/* Utility per nascondere elementi su mobile */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Migliora lo scrolling touch */
* {
  -webkit-overflow-scrolling: touch;
}

/* Assicura che gli elementi non fuoriescano */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}