/*
 * Search results surface.
 *
 * Loaded only by the results page, on top of style.css, whose tokens
 * (--teal, --forest, --coral, --mint, --line) it inherits rather than
 * redefining. The landing page must not pay for any of this.
 *
 * The layout target is Doctolib's: a dense, scannable list where the two
 * questions a patient actually has — "can I book this one?" and "does it take
 * my insurance?" — are answerable without opening a card.
 */

/*
 * style.css puts .site-header at position:fixed, height 76px. The landing page
 * gets away with that because its hero is full-bleed and meant to sit under the
 * header; this page has no hero, so it has to reserve the space itself — and
 * the sticky search bar has to stop below the header rather than at the
 * viewport top, or the two overlap.
 */
:root { --header-h: 76px; }

/*
 * Scoped to the results page. This file is also loaded by the landing page,
 * purely for the autocomplete styles, and the landing hero is meant to sit
 * under the fixed header — so the offset must not apply there.
 */
.search-page #main { padding-top: var(--header-h); }

.search-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- the search bar, sticky under the header ---------- */

.search-page .search-bar-wrap {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}

.search-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

.search-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.search-field > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.search-field input {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  font-size: 16px; /* 16px or iOS Safari zooms the page on focus */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.search-field input:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: transparent;
}

/* ---------- autocomplete ---------- */

.suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  max-height: 320px;
  overflow-y: auto;
}

.suggestions[hidden] { display: none; }

.suggestions li { margin: 0; }

.suggestions button {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.suggestions button:hover,
.suggestions button[aria-selected="true"] {
  background: var(--mint-soft);
}

.suggestions .suggestion-meta {
  font-size: 13px;
  color: var(--ink-soft);
}

.suggestion-group {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- results ---------- */

.results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 28px 0 16px;
}

.results-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  color: var(--forest);
}

.results-count {
  font-size: 14px;
  color: var(--ink-soft);
}

.results-list {
  display: grid;
  gap: 14px;
  /* Reset the UA's padding-left, or every card sits indented from the heading. */
  padding: 0 0 48px;
  margin: 0;
  list-style: none;
}

/* Sits in the list's bottom padding, so the list keeps its spacing when no
   further page exists and the button is hidden. */
.load-more {
  display: flex;
  margin: -24px auto 40px;
  border-color: var(--line, rgba(0, 0, 0, 0.12));
  background: var(--paper);
}
/* .button sets display, which would otherwise beat the hidden attribute. */
.load-more[hidden] { display: none; }
.load-more:disabled { opacity: 0.6; cursor: progress; transform: none; }

.result-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.result-card:hover { border-color: var(--teal); }

.result-name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--forest);
}

/* The name links to the practice profile (/praxis/…); it reads as a heading. */
.result-name a { color: inherit; text-decoration: none; }
.result-name a:hover,
.result-name a:focus-visible { color: var(--teal); text-decoration: underline; }

.result-specialty {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--teal);
  font-weight: 600;
}

.result-address {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.tag {
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--mint-soft);
  color: var(--forest);
  border: 1px solid var(--mint);
}

.result-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  min-width: 170px;
}

/*
 * The bookable/unbookable split is the most important thing on this page.
 *
 * A listing seeded from open data has an address and a phone number and
 * nothing else — no calendar, and nobody who has agreed to answer one. Showing
 * it with a "Book" button would be the single most damaging thing this page
 * could do: the patient books, nothing arrives, and the practice never knew.
 * So an unclaimed listing offers a phone call and says plainly why.
 */
.result-card.is-bookable { border-left: 4px solid var(--teal); }

.availability-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
}

.result-card .button { width: 100%; text-align: center; }

/* ---------- states ---------- */

.results-state {
  padding: 56px 0 72px;
  text-align: center;
  color: var(--ink-soft);
}

.results-state h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--forest);
}

.results-state p { margin: 0 auto; max-width: 52ch; line-height: 1.6; }

.skeleton-card {
  height: 118px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(100deg, var(--canvas) 30%, var(--mint-soft) 50%, var(--canvas) 70%);
  background-size: 220% 100%;
  animation: skeleton-sweep 1.1s ease-in-out infinite;
}

@keyframes skeleton-sweep {
  from { background-position: 180% 0; }
  to { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-card { animation: none; }
}

/* ---------- attribution ---------- */

/*
 * OpenStreetMap is ODbL: the attribution is a licence condition, not a
 * courtesy, and it has to be visible wherever the data is shown.
 */
.data-attribution {
  padding: 0 0 40px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.data-attribution a { color: inherit; }

/* ---------- supporting copy, below the product ---------- */

.search-support {
  padding: 36px 0 56px;
  border-top: 1px solid var(--line);
}

.search-support h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--forest);
}

.search-support ul { margin: 0 0 20px; padding-left: 20px; line-height: 1.7; color: var(--ink-soft); }

.specialty-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.specialty-cloud a {
  padding: 7px 13px;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--forest);
  text-decoration: none;
}

.specialty-cloud a:hover { border-color: var(--teal); color: var(--teal); }

/* ---------- narrow ---------- */

@media (max-width: 860px) {
  .search-form { grid-template-columns: 1fr; }
  .search-form .button-search { width: 100%; }
  .result-card { grid-template-columns: 1fr; }
  .result-actions { min-width: 0; }
  .search-page .search-bar-wrap { position: static; }
}