/* Mobile spacing fixes for public site (exclude admin layout) */

/* Phones */
@media (max-width: 575.98px) {
  /* Normalize global paddings/margins */
  html, body, .main-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Bootstrap containers */
  .container, .container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Header toolbar */
  .toolbar {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Section wrappers */
  .section, .footer-contacts-band .container, .footer-quote-band .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Tours page adjustments */
  .tours-header {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .tours-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
  .sticky-categories .categories-labels {
    margin-left: 0.5rem !important;
    gap: 0.75rem !important;
  }

  /* Generic paddings often applied on content blocks */
  [class*="px-"] {
    padding-left: min(16px, 4vw) !important;
    padding-right: min(16px, 4vw) !important;
  }
  .home-header-container, .footer-contact-details, .footer-contact-block {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Small tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
  .container, .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .toolbar {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .tours-grid {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}
