/* MNA2964 — final Services quick-choice composition
   Purpose: force a calm, balanced 4 × 2 service grid on full laptop/desktop widths,
   a 2-column grid on smaller laptops/tablets, and preserve the approved mobile swipe rail.
   This dedicated file is intentionally loaded after site.css so older auto-fit rules cannot
   create an uneven 5 + 3 composition. No service content, duration, price or booking data changes. */

@media (min-width: 1180px) {
  body[data-page="services"] #service-quick-choice .service-choice-matrix-final {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: initial !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
    gap: 16px !important;
    overflow: visible !important;
    padding: 0 !important;
  }
}

@media (min-width: 761px) and (max-width: 1179px) {
  body[data-page="services"] #service-quick-choice .service-choice-matrix-final {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: initial !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
    gap: 14px !important;
    overflow: visible !important;
    padding: 0 !important;
  }
}

@media (min-width: 761px) {
  body[data-page="services"] #service-quick-choice .service-choice-card {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    min-width: 0 !important;
    min-height: 300px !important;
    height: 100% !important;
    padding: 27px 26px 25px !important;
  }

  body[data-page="services"] #service-quick-choice .service-choice-card > span,
  body[data-page="services"] #service-quick-choice .service-choice-card > h3,
  body[data-page="services"] #service-quick-choice .service-choice-card > p,
  body[data-page="services"] #service-quick-choice .service-choice-card > strong {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body[data-page="services"] #service-quick-choice .service-choice-card > p {
    margin-bottom: 0 !important;
  }

  body[data-page="services"] #service-quick-choice .service-choice-card > strong {
    align-self: end !important;
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-wrap: pretty !important;
    line-height: 1.45 !important;
  }

  /* The eight cards already link to the exact service groups, so the additional
     chip navigation is hidden on laptop/desktop to avoid a redundant, crowded row. */
  body[data-page="services"] #service-quick-choice .service-jump-nav {
    display: none !important;
  }
}

@media (min-width: 1180px) and (max-width: 1320px) {
  body[data-page="services"] #service-quick-choice .service-choice-card {
    padding-inline: 22px !important;
  }
  body[data-page="services"] #service-quick-choice .service-choice-card h3 {
    font-size: clamp(27px, 2.2vw, 32px) !important;
  }
}

/* Mobile remains a deliberate horizontal comparison rail. */
@media (max-width: 760px) {
  body[data-page="services"] #service-quick-choice .service-choice-matrix-final {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: min(74vw, 288px) !important;
    grid-auto-rows: auto !important;
    align-items: stretch !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 2px 12px !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-inline: contain !important;
  }
  body[data-page="services"] #service-quick-choice .service-choice-card {
    scroll-snap-align: start !important;
    height: 100% !important;
  }
}