/* ================================================
   RESPONSIVE  — Axel Engineering
   Breakpoints: lg ≤991px | md ≤767px | sm ≤575px
================================================ */

/* ---- Tablet (≤ 991px) ---- */
@media (max-width: 991.98px) {

  .hero-title { font-size: 2.4rem; }
  .hero-section { padding: 100px 0 70px; }
  .hero-section::before { display: none; } /* remove clip on tablet */
  .section-title { font-size: 2rem; }
  .section-padding { padding: 60px 0; }
  .hero-banner-img { height: 360px; }

  .navbar-collapse {
    background: #ffffff;
    padding: 16px 20px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(14, 30, 46, 0.1);
    margin-top: 12px;
  }

  /* Stack nav links cleanly */
  .nav-link { margin: 4px 0; padding: 8px 4px; }
  .nav-link::after { display: none; } /* hide underline on mobile menu */

  .page-header { padding: 80px 0 60px; }
  .page-header h1 { font-size: 2rem; }

  .footer { padding: 60px 0 20px; }
}

/* ---- Mobile landscape (≤ 767px) ---- */
@media (max-width: 767.98px) {

  .hero-title { font-size: 2rem; }
  .hero-subtitle { font-size: 1rem; }
  .section-title { font-size: 1.85rem; }
  .section-subtitle { font-size: 0.95rem; }

  .hero-section { padding: 90px 0 60px; text-align: center; }
  .hero-image-placeholder { margin-top: 36px; height: 280px; }
  .hero-banner-img { height: 280px; }

  /* Buttons full-width gap on mobile */
  .hero-section .d-flex { gap: 12px; }

  .stat-card { padding: 20px 10px; margin-bottom: 20px; }
  .stat-number { font-size: 2.4rem; }

  /* CTA banner tighten */
  .cta-banner { padding: 50px 0; }

  /* footer columns full width */
  .footer { padding: 50px 0 16px; }
  .footer h4 { margin-bottom: 16px; }
  .footer-bottom { margin-top: 30px; }

  /* Tables scroll */
  .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* ---- Mobile portrait (≤ 575px) ---- */
@media (max-width: 575.98px) {

  .hero-section { padding: 80px 0 50px; }
  .hero-title { font-size: 1.75rem; }
  .section-title { font-size: 1.6rem; }
  .page-header { padding: 70px 0 50px; }
  .page-header h1 { font-size: 1.75rem; }
  .page-header p { font-size: 0.95rem; }

  /* Full-width stack for CTA button pairs */
  .btn-primary-custom,
  .btn-outline-custom {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
  }

  /* Product cards single column */
  .product-card { margin-bottom: 24px; }

  /* Trolley horizontal card stack vertically */
  .product-card.d-flex.flex-md-row { flex-direction: column !important; }
  .product-card.d-flex.flex-md-row .product-img-placeholder {
    width: 100% !important;
    height: 200px !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
  }

  /* Align CTA banner buttons */
  .cta-banner .d-flex { flex-direction: column; align-items: stretch; }
  .cta-banner .btn { width: 100%; margin-bottom: 10px; }

  /* Catalog page min-height */
  .min-vh-100 { min-height: auto; }

  /* Float buttons smaller */
  .whatsapp-float { width: 50px; height: 50px; font-size: 24px; }
  .scroll-top { width: 42px; height: 42px; font-size: 18px; }

  /* Contact form full width inputs */
  .col-md-6 .form-control,
  .col-md-6 .form-select { font-size: 0.9rem; }
}

/* ================================================
   MOBILE NAV ACCESSIBILITY TWEAKS
================================================ */
@media (max-width: 991.98px) {
  .navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(1,80,185,0.25); }
  .dropdown-menu { box-shadow: none; border: 1px solid #e2e8f0; margin-top: 6px; }
  .dropdown-item { font-size: 0.9rem; }
}