/* ════════════════════════════════════════════════
   Ednivo Mobile Responsive Utilities — assets/mobile.css
   Ensures optimal layout and typography on mobile devices
   ════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Reset collapsed heading letter-spacing on cards and FAQs */
  .faq-item h2, .card h2, .cardx h2, .panel h2, .step h2, article h2 {
    letter-spacing: normal !important;
    word-spacing: normal !important;
  }

  /* Responsive Containers */
  .wrap, .container, .content-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Responsive Grids */
  .blog-grid, .pricing, .steps, .grid2, .two, .footer-grid, .welcome-inner {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Featured Blog Card Stack */
  .featured-card {
    grid-template-columns: 1fr !important;
  }

  .fc-image {
    min-height: 180px !important;
    font-size: 4rem !important;
  }

  .fc-content {
    padding: 1.5rem !important;
  }

  /* Typography Adjustments */
  h1 {
    font-size: clamp(2rem, 7vw, 2.8rem) !important;
    line-height: 1.15 !important;
  }

  h2 {
    font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
    line-height: 1.2 !important;
  }

  .pagehero h1 {
    font-size: 32px !important;
  }

  /* Buttons and Actions */
  .actions, .btn-group {
    flex-direction: column !important;
    width: 100% !important;
  }

  .actions .btn, .btn-group .btn-primary, .btn-group .btn-outline {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Table responsiveness */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Navigation adjustments */
  nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 480px) {
  .checkout-grid {
    grid-template-columns: 1fr !important;
  }

  .nl-form {
    flex-direction: column !important;
  }

  .nl-btn {
    width: 100% !important;
  }
}