/*
 * Waveney Cleaning 2.0 — v3.7.1 mobile launch fixes
 *
 * 1) Mobile navigation: override late desktop rules that were re-introducing
 *    large flex gaps and desktop-sized vertical padding.
 * 2) Service pages: force the related-services / quote area to stack on
 *    tablets and phones, with useful mobile card sizing.
 */

@media (max-width: 1020px) {
  .service-page-lower {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px;
  }

  .related-services,
  .service-quick-quote {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 780px) {
  /* The desktop overrides later in site.css were winning on mobile. */
  .primary-nav {
    gap: 0 !important;
    padding: 6px 18px 10px;
  }

  .primary-nav > a,
  .nav-dropdown-trigger {
    padding: 13px 4px !important;
  }

  .nav-dropdown-menu {
    margin: 0;
    padding: 0 0 4px;
  }

  .nav-dropdown-menu a {
    padding: 9px 18px !important;
  }

  /* Bottom of individual service pages. */
  .service-page-lower {
    gap: 16px;
  }

  .related-services {
    padding: 18px;
  }

  .related-services-heading {
    margin-bottom: 14px;
  }

  .related-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .related-service-card {
    display: block !important;
    min-width: 0;
  }

  .related-service-card img {
    width: 100%;
    height: 110px;
    min-height: 0;
    object-fit: cover;
  }

  .related-service-card > span {
    padding: 11px 12px 13px;
  }

  .service-quick-quote {
    padding: 22px;
  }
}

/* Very narrow phones: one compact horizontal related-service card per row. */
@media (max-width: 380px) {
  .related-services-grid {
    grid-template-columns: 1fr !important;
  }

  .related-service-card {
    display: grid !important;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: stretch;
  }

  .related-service-card img {
    height: 100%;
    min-height: 90px;
  }
}