/*
 * The services hub — /{city}/services.
 *
 * Loaded only on this page. It sits on top of site.css and reuses its tokens
 * (--brand, --ink, --line, --radius…) so the hub belongs to the same
 * application rather than looking like a second site pasted in.
 *
 * Written mobile-first: a leaking tap is searched for on a phone, standing in
 * the kitchen. Every media query below adds to a layout that already works at
 * 320px.
 */

/* --- Hero ---------------------------------------------------------------
 *
 * Short on purpose. This page is a subpage that behaves like a home page, and
 * the one thing a visitor came to do is search — a tall banner would push the
 * search box off a phone screen to make room for a sentence nobody reads.
 */
.svc-hero {
  padding: 1.5rem 0 1.75rem;
  background:
    radial-gradient(120% 140% at 12% 0%, #17639f 0%, transparent 55%),
    linear-gradient(160deg, var(--brand) 0%, #0d3f6d 100%);
  color: #fff;
}

.svc-hero-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.35rem, 5.5vw, 2.15rem);
  line-height: 1.15;
}

.svc-hero-sub {
  margin: 0 0 1.1rem;
  max-width: 52ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.svc-hero-meta {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
}

@media (min-width: 768px) {
  .svc-hero { padding: 2.75rem 0 3rem; }
  .svc-hero-sub { font-size: 1rem; }
}

/* --- Search -------------------------------------------------------------- */
.svc-search { position: relative; }

.svc-search-row {
  display: grid;
  gap: 0.5rem;
  /* Field across the top, then area and button sharing the row beneath:
     three stacked full-width controls push everything else off a phone. */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "field field"
    "area  go";
}

.svc-search-field { grid-area: field; }
.svc-search-area { grid-area: area; }
.svc-search-go { grid-area: go; }

@media (min-width: 768px) {
  /* One line on a desktop: field, area, button. */
  .svc-search-row {
    grid-template-columns: minmax(0, 1fr) 200px auto;
    grid-template-areas: "field area go";
    gap: 0.5rem;
    padding: 0.4rem;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 14px;
  }
}

.svc-search-field,
.svc-search-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.85rem;
  background: #fff;
  border-radius: 10px;
  /* 48px: a thumb target, not a desktop input shrunk down. */
  min-height: 48px;
}

.svc-search-field .bi,
.svc-search-area .bi { color: var(--ink-faint); flex: 0 0 auto; }

.svc-search-field input,
.svc-search-area select {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 0;
}

.svc-search-field input:focus,
.svc-search-area select:focus { outline: none; }

/* The wrapper takes the focus ring, so the whole control looks focused
   rather than a bare input inside a white box. */
.svc-search-field:focus-within,
.svc-search-area:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

.svc-search-area select { appearance: none; cursor: pointer; }

.svc-search-go { min-height: 48px; padding-inline: 1.5rem; }

/* --- Suggestions --------------------------------------------------------- */
.svc-suggestions {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 0.35rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 32, 48, 0.18);
  text-align: left;
}

.svc-suggestions[hidden] { display: none; }

.svc-sug-heading {
  padding: 0.5rem 0.65rem 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.svc-sug {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.9rem;
}

.svc-sug:hover,
.svc-sug.is-active { background: var(--brand-tint); color: var(--brand); text-decoration: none; }
.svc-sug .bi { color: var(--ink-faint); font-size: 0.9rem; }
.svc-sug-note { margin-left: auto; font-size: 0.76rem; color: var(--ink-faint); }

.svc-sug-empty { padding: 0.9rem 0.65rem; font-size: 0.85rem; color: var(--ink-soft); }

/* --- Category tiles ------------------------------------------------------
 *
 * Two columns on the narrowest phone, six on a desktop. Compact by design:
 * twelve services visible at once is the point, and a large card would show
 * four.
 */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

@media (min-width: 480px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.svc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.9rem 0.6rem;
  min-height: 108px;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  text-align: center;
  transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.svc-tile:hover,
.svc-tile:focus-visible {
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  text-decoration: none;
}

.svc-tile-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 1.15rem;
}

.svc-tile-name { font-size: 0.8rem; font-weight: 600; line-height: 1.25; }

/* A count only appears when there is one; an empty badge reading zero would
   advertise the directory's gaps on every tile. */
.svc-tile-count {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--good-tint);
  color: var(--good);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 18px;
}

/* --- Needs --------------------------------------------------------------- */
.svc-needs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.55rem;
}

.svc-need {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  min-height: 48px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.25;
}

.svc-need .bi { color: var(--amber); font-size: 1.05rem; flex: 0 0 auto; }
.svc-need:hover { border-color: var(--amber); text-decoration: none; }

/* --- Areas --------------------------------------------------------------- */
.svc-areas { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.svc-area {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  min-height: 44px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.85rem;
}

.svc-area .bi { color: var(--brand); font-size: 0.9rem; }
.svc-area:hover { border-color: var(--brand); text-decoration: none; }
.svc-area-count { color: var(--ink-faint); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* --- Providers ----------------------------------------------------------- */
.svc-providers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) { .svc-providers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-providers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.svc-provider {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.svc-provider-head { display: flex; align-items: center; gap: 0.7rem; color: var(--ink); }
.svc-provider-head:hover { text-decoration: none; }
.svc-provider-head:hover .svc-provider-name { color: var(--brand); }

.svc-provider-mark {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  overflow: hidden;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 1.2rem;
}

.svc-provider-mark img { width: 100%; height: 100%; object-fit: cover; }

.svc-provider-name {
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.3;
}

.svc-provider-meta { display: block; font-size: 0.78rem; color: var(--ink-faint); }
.svc-provider-desc { margin: 0; font-size: 0.83rem; color: var(--ink-soft); }

.svc-provider-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.svc-provider-price { font-weight: 700; color: var(--good); font-variant-numeric: tabular-nums; }

.svc-provider-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.15rem;
}

/* --- The directory -------------------------------------------------------
 *
 * <details> rather than a JavaScript accordion: it opens without scripting,
 * it is announced correctly, and the browser handles the keyboard.
 */
.svc-directory {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

@media (min-width: 768px) { .svc-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.svc-group {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  align-self: start;
}

.svc-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  min-height: 48px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  list-style: none;
}

.svc-group-head::-webkit-details-marker { display: none; }
.svc-group-name { flex: 1 1 auto; }

.svc-group-meta {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--ground);
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-weight: 700;
}

.svc-group-head .bi { color: var(--ink-faint); transition: transform 0.15s ease; }
.svc-group[open] .svc-group-head .bi { transform: rotate(180deg); }

.svc-group-list { list-style: none; margin: 0; padding: 0 0.5rem 0.6rem; }

.svc-group-list a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.5rem;
  min-height: 40px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.svc-group-list a:hover { background: var(--brand-tint); color: var(--brand); text-decoration: none; }
.svc-group-count { margin-left: auto; color: var(--good); font-size: 0.75rem; font-weight: 700; }

/* --- Steps --------------------------------------------------------------- */
.svc-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

@media (min-width: 768px) { .svc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.svc-step {
  padding: 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.svc-step-num {
  display: block;
  margin-bottom: 0.35rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.svc-step-title { margin: 0 0 0.2rem; font-size: 0.95rem; }
.svc-step-text { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

/* --- Promises ------------------------------------------------------------ */
.svc-promises {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

@media (min-width: 560px) { .svc-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-promises { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.svc-promise {
  padding: 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.svc-promise .bi { font-size: 1.25rem; color: var(--brand); }
.svc-promise-title { margin: 0.5rem 0 0.2rem; font-size: 0.92rem; }
.svc-promise-text { margin: 0; font-size: 0.83rem; color: var(--ink-soft); }

/* --- Business CTA --------------------------------------------------------
 *
 * Dark, so it reads as addressed to a different person than everything above
 * it — the trade rather than the customer.
 */
.svc-cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.4rem;
  background: #14202c;
  border-radius: var(--radius);
  color: #fff;
}

@media (min-width: 768px) {
  .svc-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 1.75rem 2rem; }
}

.svc-cta-title { margin: 0 0 0.3rem; font-size: 1.1rem; }
.svc-cta-text { margin: 0; max-width: 52ch; font-size: 0.88rem; color: rgba(255, 255, 255, 0.75); }
.svc-cta-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.svc-cta .btn-outline-light { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.svc-cta .btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* --- Tail ---------------------------------------------------------------- */
.svc-tail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 992px) { .svc-tail { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2.5rem; } }

.svc-searches { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.svc-searches .pill { font-size: 0.8rem; }

.svc-about p { font-size: 0.88rem; color: var(--ink-soft); }

/* --- Targets -------------------------------------------------------------
 *
 * The hub is mostly links — the directory alone is forty-odd of them in a
 * column — and at 375px 51 of its 143 interactive elements were under 44px
 * tall, the directory rows among them at 40px and the search-form controls at
 * 24px. `--tap` comes from site.css, which is loaded before this file.
 */
.svc-group-list a,
.svc-group-head,
.svc-need,
.svc-area,
.svc-tile,
.svc-sug,
.svc-search input,
.svc-search select,
.svc-search button,
.svc-searches .pill {
  min-height: var(--tap);
}

.svc-group-head,
.svc-need,
.svc-area,
.svc-sug { display: flex; align-items: center; }