/* =========================================================
   ATLANTE — Responsive overlay (v4)
   Load AFTER home.css (and after techfin-metrics.css if present).

   What this fixes (mobile):
   - video inside editorial grids becomes fluid (no overflow)
   - horizontal scrollers (Most Popular / Previous Issues) become vertical stacks
     so content is never “hidden” behind an unperceived swipe.
   - Article carousel (shared between index + article) stacks on mobile.
   - Tech+Finanza “I numeri che contano” module becomes a vertical stack on mobile.
   - Footer becomes fully readable on small screens.
   ========================================================= */

/* Safer media defaults */
img, video{ max-width:100%; height:auto; }

/* Make videos behave like images inside editorial blocks */
.sub-inner video,
.breakthrough-video{
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 980px){
  /* Header: stack menu under brand/actions */
  .nav{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand actions"
      "menu menu";
    row-gap: 10px;
    padding: 10px 0;
  }
  .brand{ grid-area: brand; }
  .menu{
    grid-area: menu;
    justify-self: start;
    flex-wrap: wrap;
    gap: 14px;
    padding-bottom: 6px;
  }
  .actions{
    grid-area: actions;
    justify-self: end;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Rhythm */
  .most{ padding: 56px 0; }
  .breakthrough{ padding: 72px 0; }
  .sublevel{ padding: 72px 0; }
  .issues{ padding: 72px 0; }
  .footer-pre{ padding: 84px 0 18px; }
  .footer-main{ padding: 30px 0 72px; }

  /* Footer: reduce columns on tablets */
  .footer-grid{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
  .footer-logo{ font-size: 64px !important; }

  /* Key modules stack */
  .rows{ grid-template-columns: 1fr; }
  .sub-inner{ grid-template-columns: 1fr; }
  .issue-grid{ grid-template-columns: 1fr; }
  .issue-right{
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 24px;
    max-height: none;
    overflow: visible;
  }
  .issue-panel{ min-width: 92vw; }

  /* Headings scale */
  .breakthrough-box h2{ font-size: clamp(44px, 7vw, 62px); }
  .sub-inner h3{ font-size: clamp(32px, 5.6vw, 48px); }
}

/* Phones */
@media (max-width: 740px){
  .container{ padding: 0 18px; }
  .hero-open__inner{ padding: 0 18px; }

  /* =====================================================
     Most Popular — from horizontal swipe to vertical stack
     ===================================================== */
  .most .scroll-wrapper{ overflow: visible !important; }
  .most .scroll-wrapper::after{ display:none !important; }

  .most .scroll{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
    scroll-snap-type: none !important;
  }

  .most .card{ min-width: 0 !important; width: 100% !important; }

  /* =====================================================
     Article carousel (shared between index + article)
     Mobile: vertical stack (no hidden swipe)
     ===================================================== */
  .article-carousel .scroll-wrapper,
  #carousel-placeholder .scroll-wrapper{
    overflow: visible !important;
  }
  .article-carousel .scroll-wrapper::after,
  #carousel-placeholder .scroll-wrapper::after{
    display: none !important;
  }

  .article-carousel .scroll,
  #carousel-placeholder .scroll{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
    scroll-snap-type: none !important;
  }

  .article-carousel .card,
  #carousel-placeholder .card{
    min-width: 0 !important;
    width: 100% !important;
  }

  /* =====================================================
     Previous Issues — remove double scroll (x + y)
     ===================================================== */
  .issues-scroll{ overflow: visible !important; }
  .issues-scroll::after{ display:none !important; }

  .issues-row{
    display:flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
    scroll-snap-type: none !important;
  }

  .issue-panel{ min-width: 0 !important; width: 100% !important; }

  /* =====================================================
     Tech+Finanza — “I numeri che contano” (metrics)
     Mobile: vertical stack (no hidden swipe)
     ===================================================== */
  .tf-metrics__inner{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    align-items: start !important;
  }
  .tf-metrics__deck{ align-items: stretch !important; }

  .tf-metrics__viewport{
    width: 100% !important;
    overflow: visible !important;
  }
  .tf-metrics__track{
    flex-direction: column !important;
    transform: none !important;   /* beats slider JS inline transform */
    transition: none !important;
  }
  .tf-metric-card{
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  .tf-metrics__nav{ display:none !important; }

  /* =====================================================
     Footer
     ===================================================== */
  .footer-pre-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start;
  }
  .footer-pre-actions{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .footer-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    align-items: start;
  }

  .footer-logo{ font-size: 56px !important; }

  /* Ensure links don’t revert to default blue */
  .footer-main a,
  .footer-bottom a{
    color: inherit !important;
  }

  .footer-grid li a{
    color: rgba(255,255,255,.9) !important;
  }
  .footer-grid li a:hover{
    color: #fff !important;
    text-decoration: underline;
  }

  .footer-bottom .container{
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 520px){
  .btn{ padding: 6px 12px; font-size: 13px; }
  .hero-open__title{ font-size: clamp(38px, 9vw, 46px); }

  .footer-logo{ font-size: 52px !important; }
}