/* ============================================
   NutriMicrobioma — Mobile CSS
   Breakpoint principale: 768px
   Breakpoint piccolo: 480px
   ============================================ */

@media (max-width: 768px) {

  /* ── NAV ── */
  nav {
    padding: 16px 20px;
    position: fixed;
    background: rgba(26,28,17,.98) !important;
  }
  .nav-links { display: none !important; }
  .nav-cta {
    font-size: .62rem;
    padding: 8px 14px;
    white-space: nowrap;
  }

  /* ── HERO ── */
  #hero {
    grid-template-columns: 1fr !important;
    min-height: auto;
    padding-top: 72px;
  }
  .hero-left {
    padding: 40px 24px 36px !important;
    order: 1;
  }
  .hero-right {
    order: 2;
    height: 220px !important;
    display: block;
  }
  .hero-img-grid {
    grid-template-rows: 1fr !important;
    grid-template-columns: 1fr 1fr;
    height: 220px;
  }
  .hero-badge { display: none !important; }
  h1 { font-size: 2.2rem !important; line-height: 1.15 !important; }
  .hero-sub { font-size: .88rem !important; line-height: 1.75 !important; }
  .hero-ctas {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary {
    width: 100%;
    text-align: center;
    padding: 14px 20px !important;
  }

  /* ── PROOF STRIP ── */
  #proof {
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding: 0 !important;
    justify-content: flex-start;
  }
  .proof-item {
    flex: 1 1 50% !important;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(240,234,214,.06);
  }
  .proof-item:nth-child(odd) {
    border-right: 1px solid rgba(240,234,214,.06);
  }
  .proof-divider { display: none !important; }
  .proof-num { font-size: 1.1rem !important; }
  .proof-label { font-size: .65rem !important; }

  /* ── SEZIONI GENERALI ── */
  #problema,
  #metodo,
  #blog,
  #about,
  #cta-final,
  footer {
    padding: 52px 24px !important;
  }

  /* ── PROBLEMA / IL TUO SINTOMO ── */
  #problema {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .sintomi {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .problema-img { display: none; }

  /* ── METODO ── */
  .metodo-grid {
    grid-template-columns: 1fr !important;
    gap: 2px;
  }

  /* ── BLOG ── */
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-top: 36px !important;
  }
  .blog-card .blog-img {
    aspect-ratio: 16/9 !important;
  }

  /* ── ABOUT ── */
  #about {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .about-img-wrap {
    height: 300px;
    order: -1;
  }
  .about-img { height: 300px; }
  .about-quote {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 16px;
    max-width: 100% !important;
  }

  /* ── TESTIMONIALS ── */
  .testi-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── CTA FINALE ── */
  .cta-group {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .cta-group .btn-primary,
  .cta-group .btn-secondary {
    width: 100%;
    text-align: center;
  }

  /* ── FOOTER ── */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 8px;
    text-align: center;
  }

  /* ── PAGINE INTERNE — breadcrumb ── */
  .breadcrumb {
    padding: 84px 24px 0 !important;
    font-size: .68rem;
  }

  /* ── PAGE HERO (pagine interne) ── */
  .page-hero {
    padding: 32px 24px 48px !important;
  }
  .page-hero h1 { font-size: 2rem !important; }

  /* ── HERO LANDING (gonfiore, pms, stallo) ── */
  .hero-landing {
    padding: 110px 24px 48px !important;
  }
  .hero-landing h1 { font-size: 2rem !important; }
  .hero-ctas {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* ── SINTOMI GRID (landing pages) ── */
  .sintomi-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .sintomo-card {
    padding: 20px 18px !important;
  }

  /* ── STEP LIST ── */
  .step-list { padding: 0 !important; }
  .step-list li {
    padding: 20px 0 !important;
  }

  /* ── FAQ ── */
  .faq-item { padding: 18px 0 !important; }

  /* ── OFFERTA PAGE ── */
  .page-header {
    padding: 110px 24px 48px !important;
  }
  .offerte-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .offerta-card {
    padding: 36px 24px !important;
  }
  .featured-badge {
    font-size: .58rem;
    padding: 4px 14px;
  }
  .steps {
    grid-template-columns: 1fr 1fr !important;
    gap: 2px;
  }
  .non-lista,
  .non-list {
    flex-direction: column !important;
  }
  .offerte-section,
  .processo,
  .non-per-chi,
  .faq-section {
    padding: 48px 24px !important;
  }

  /* ── CUCINA MOLECOLARE ── */
  .tecniche-grid {
    grid-template-columns: 1fr !important;
  }
  .materie-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .fermentati-grid {
    grid-template-columns: 1fr !important;
  }
  .pratica-head { display: none !important; }
  .pratica {
    grid-template-columns: 1fr !important;
    gap: 0;
    padding: 16px 0 !important;
  }
  .pratica .col-alimento {
    font-weight: 600;
    color: var(--gold) !important;
    font-size: .82rem;
    padding: 4px 0 !important;
  }
  .pratica .col-tecnica,
  .pratica .col-beneficio {
    font-size: .78rem;
    padding: 2px 0 !important;
  }

  /* ── MECCANISMI (blog cellulite) ── */
  .meccanismo-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── COMPARISON (microbioma vs microbiota) ── */
  .comparison {
    grid-template-columns: 1fr !important;
  }

  /* ── ARTICLE WRAP ── */
  .article-wrap {
    padding: 32px 20px 60px !important;
  }
  .article-wrap h1 { font-size: 1.85rem !important; }
  .article-cta {
    padding: 36px 24px !important;
  }
  .article-cta .btn-secondary {
    margin-left: 0 !important;
    display: block;
    margin-top: 12px;
  }

  /* ── CONTATTI ── */
  .contact-wrap {
    grid-template-columns: 1fr !important;
  }
  .contact-form-wrap,
  .contact-info {
    padding: 40px 24px !important;
  }
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* ── CTA BOX (pagine interne) ── */
  .cta-box {
    padding: 60px 24px !important;
  }
  .btn-group {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .btn-group .btn-primary,
  .btn-group .btn-secondary,
  .btn-group .btn-secondary-outline {
    width: 100%;
    text-align: center;
  }

  /* ── PERCORSI HUB ── */
  .sintomi-hub { grid-template-columns: 1fr 1fr !important; }
  .money-grid,
  .hub-grid { grid-template-columns: 1fr !important; }
  .percorso-card { padding: 28px 20px !important; }

  /* ── FOOTER INTERNO PAGINE ── */
  .footer-inner {
    flex-direction: column !important;
    gap: 20px;
  }
  .footer-nav {
    flex-wrap: wrap !important;
    gap: 14px 20px !important;
  }

  /* ── TYPOGRAPHY SCALE ── */
  .st { font-size: 1.7rem !important; }
  h2.st { font-size: 1.7rem !important; }
  .lead { font-size: .95rem !important; }
  p.bt { font-size: .88rem !important; }

}

/* ── BREAKPOINT PICCOLO 480px ── */
@media (max-width: 480px) {
  nav { padding: 14px 16px; }
  .nav-cta { display: none; }
  h1 { font-size: 1.85rem !important; }
  .page-hero h1 { font-size: 1.7rem !important; }
  .hero-landing h1 { font-size: 1.7rem !important; }
  .materie-grid { grid-template-columns: 1fr !important; }
  .sintomi-hub { grid-template-columns: 1fr !important; }
  .steps { grid-template-columns: 1fr !important; }
  .proof-item { flex: 1 1 100% !important; }
  .proof-item:nth-child(odd) { border-right: none !important; }
  .offerta-price .amount { font-size: 1.8rem !important; }
}