/* =====================================================
   FRANICOMINE — Responsive rules
   ===================================================== */

@media (max-width: 1080px){
  .feature-grid{ grid-template-columns: repeat(2,1fr); }
  .product-grid{ grid-template-columns: repeat(2,1fr); }
  .timeline{ grid-template-columns: repeat(3,1fr); row-gap: 3rem; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1/-1; }
}

@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:block; }

  .intro-grid, .contact-grid{ grid-template-columns: 1fr; }
  .intro-media{ order:-1; }
  .video-layout, .source-layout{ grid-template-columns: 1fr; }

  .preview-grid{
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: none;
  }
  .preview-item{ grid-column: span 1 !important; grid-row: span 1 !important; aspect-ratio: 1/1; }
  .preview-item img{ height:100%; }

  .masonry{ columns: 2 200px; }

  .lightbox-inner{ grid-template-columns: 1fr; overflow-y:auto; }
  .lightbox-media img{ max-height: 46vh; }

  .form-grid{ grid-template-columns: 1fr; }

  .cta-banner{ flex-direction:column; align-items:flex-start; text-align:left; }
}

@media (max-width: 640px){
  :root{ --section-pad: 3.2rem; }

  h1{ max-width: none !important; }

  .feature-grid{ grid-template-columns: 1fr; }
  .product-grid{ grid-template-columns: 1fr; }
  .timeline{ grid-template-columns: 1fr; row-gap: 2.2rem; }
  .timeline::before{ display:none; }
  .timeline-step{ padding-top:0; padding-left: 4.2rem; }
  .timeline-step .step-num{ top:0; left:0; width:48px; height:48px; font-size:1.05rem; }

  .footer-grid{ grid-template-columns: 1fr; gap: 2.4rem; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }

  .masonry{ columns: 1 100%; }

  .wa-float .wa-label{ display:none; }
  .wa-float .wa-icon{ width:52px; height:52px; }

  .gallery-filters{ overflow-x:auto; flex-wrap:nowrap; padding-bottom: 0.4rem; }

  .page-hero{ padding-top: 7rem; min-height: 42vh; }

  .contact-card{ padding: 1.6rem; }
}

@media (max-width: 420px){
  .hero-actions .btn, .cta-actions .btn{ width:100%; }
  .hero-actions, .cta-actions{ flex-direction:column; }
}