/* Directory of Specialists (Figma 449:1564) */

.directory { padding-top: 121px; padding-bottom: 178px; container-type: inline-size; } /* lets the toolbar backdrop size to the page with cqw */

.directory__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 55px; }
.directory__count, .filters__label { font-size: 16px; line-height: 1.3; color: var(--ink-soft); }
.directory__count strong { font-weight: 600; margin-right: 4px; }
.directory__count span[aria-hidden] { margin: 0 8px; opacity: 0.5; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.filters__label { margin: 0 4px 0 12px; }
.filters__clear { font-size: 16px; color: var(--green-800); text-decoration: underline; text-underline-offset: 3px; }

.search-field input {
  width: 340px;
  padding: 8px 16px 8px 44px;
  border: 1px solid transparent;
  border-radius: 32px;
  background: #fff url("../icons/search.svg") no-repeat 14px center / 22px;
  box-shadow: inset 0 0 0 1px var(--card-border);
  color: var(--ink-soft);
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
}
.search-field input::placeholder { color: rgb(from var(--green-950) r g b / 0.55); }
.search-field input:focus { outline: none; border-color: var(--green-600); }

/* A native <select> styled as the Figma pill, so it works with keyboard, screen readers and phones. */
.pill-select {
  appearance: none;
  padding: 8px 50px 8px 16px;
  border: 0;
  border-radius: 32px;
  background: var(--green-100) url("../icons/chevron-down.svg") no-repeat right 16px center / 24px;
  color: var(--ink-soft);
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
  cursor: pointer;
}

.directory__body {
  display: grid;
  grid-template-columns: 660fr 646fr; /* practices left (read first), map right */
  gap: 22px;
  align-items: start; /* lets the map be shorter than the list, which sticky needs */
  margin-top: 18px;
}

.directory__list {
  display: grid;
  gap: 12px;
  align-content: start;
}

/* Compact row: logo | name + address | contact, with the doctors list underneath. Scans quickly at hundreds of results. */
.practice-card {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr) auto;
  gap: 4px 20px;
  align-items: start;
  padding: 20px 24px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.practice-card:hover, .practice-card.is-active { border-color: var(--green-600); background: rgb(from var(--green-100) r g b / 0.6); }
.practice-card__main { display: flex; flex-direction: column; gap: 4px; }
.practice-card__name { font-size: 22px; line-height: 1.2; font-weight: 400; }
.practice-card__address { font-size: 15px; line-height: 1.4; color: var(--ink-soft); }
.practice-card__contact { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-top: 3px; font-size: 15px; line-height: 1.4; }
.practice-card__contact a:hover { text-decoration: underline; }

.practice-card__doctors { grid-column: 2 / -1; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--card-border); }
.practice-card__doctors summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green-800);
  font-size: 16px;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.practice-card__doctors summary::-webkit-details-marker { display: none; }
.practice-card__doctors summary::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url("../icons/chevron-down.svg") no-repeat center / 20px;
  transition: rotate 0.2s;
}
.practice-card__doctors[open] summary::after { rotate: 180deg; }
.practice-card__doctors summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.practice-card__doctors ul { display: grid; gap: 10px; margin-top: 12px; }
.practice-card__doctors li { display: grid; padding-left: 14px; position: relative; font-size: 16px; line-height: 1.3; }
.practice-card__doctors li a { color: var(--green-975); text-decoration: underline; text-decoration-color: var(--card-border); text-underline-offset: 3px; }
.practice-card__doctors li a:hover { text-decoration-color: currentColor; }
.practice-card__doctors li span { font-size: 14px; color: var(--ink-soft); opacity: 0.8; }
/* With a speciality filter on, doctors who have it get a mint dot. */
.practice-card__doctors li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--card-border); }
.practice-card__doctors li.is-match::before { background: var(--green-400); box-shadow: 0 0 0 2px rgb(from var(--green-400) r g b / 0.3); }
.practice-card__doctors li.is-match a { font-weight: 600; }

/* List / Map switch: only on stacked (tablet and phone) layouts, and only when JavaScript is running. */
.view-toggle { display: none; margin-top: 16px; padding: 4px; border-radius: 32px; background: var(--green-100); }
.view-toggle button {
  flex: 1;
  padding: 8px 24px;
  border: 0;
  border-radius: 32px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.view-toggle button[aria-pressed="true"] { background: var(--green-800); color: var(--green-100); }

.directory__more { display: flex; justify-content: center; padding-top: 12px; }

.directory__empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px 0; color: var(--ink-soft); }

.directory__map {
  /* Sticks 24px below the top of the screen while the list scrolls past, then leaves with the section. */
  position: sticky;
  top: 24px;
  height: calc(100vh - 48px); /* fills the screen, 24px gap above and below */
  min-height: 480px;
  border-radius: var(--radius-card);
  overflow: hidden;
  /* Shown until Google Maps loads (or when no API key is set). */
  background: var(--green-200) url("../img/map-placeholder.png") no-repeat top center / 100% auto;
}
.directory__map-notice {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  color: var(--ink-soft);
}

/* Map pin (Figma 490:440): mint circle with the "distance" icon. */
.map-pin {
  display: grid;
  place-items: center;
  width: 40.68px;
  height: 40.68px;
  border: 1px solid var(--green-600);
  border-radius: 50%;
  background: var(--green-400);
  transition: transform 0.15s;
}
.map-pin.is-active { transform: scale(1.2); border-color: var(--green-800); }

@media (max-width: 1100px) {
  .directory { padding-top: 64px; padding-bottom: 96px; }
  .directory__body { grid-template-columns: 1fr; gap: 24px; }
  .directory__map { position: relative; top: auto; height: 360px; }
  .js .view-toggle { display: flex; width: fit-content; }
  /* Phones and tablets: the List / Map switch stays pinned while you scroll, so you can flip views from anywhere. */
  .js .view-toggle {
    position: sticky;
    top: calc(var(--header-stuck-h) + 12px);
    z-index: 10;
    transition: box-shadow 0.2s;
  }
  .js .view-toggle.is-stuck { box-shadow: 0 0 0 4px var(--page-bg), 0 8px 24px rgb(from var(--green-975) r g b / 0.14); }
  .js .directory__body[data-view="list"] .directory__map { display: none; }
  .js .directory__body[data-view="map"] .directory__list { display: none; }
  .js .directory__map { height: calc(100dvh - var(--header-stuck-h) - 96px); min-height: 360px; } /* fills the screen under the pinned toggle */
  .filters__label { display: none; }
}
@media (max-width: 640px) {
  .practice-card { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  .practice-card .practice-logo { width: 44px; height: 44px; }
  .practice-card__name { font-size: 20px; }
  .practice-card__contact { grid-column: 2; align-items: flex-start; padding-top: 8px; }
  .filters, .search-field { width: 100%; }
  .js .view-toggle { width: 100%; }
  .search-field input { width: 100%; }
  .filters label:has(select) { flex: 1; }
  .pill-select { width: 100%; }
}

/*
 * Wide screens: the search/filter row sticks to the top while you scroll the results.
 * The map then sticks just below it (--toolbar-height is measured by directory.js).
 */
@media (min-width: 1101px) {
  .directory__toolbar {
    position: sticky;
    top: var(--header-stuck-h); /* just under the site header */
    z-index: 10;
    margin-top: 43px;
    padding-block: 12px;
  }
  /* Full-width background behind the bar, so results don't show through in the side margins.
     cqw, not vw: vw includes the scrollbar, which pushed the page 7px wider than the screen. */
  .directory__toolbar::before {
    content: "";
    position: absolute;
    inset: 0 calc(50% - 50cqw);
    z-index: -1;
    background: var(--page-bg);
    transition: box-shadow 0.2s;
  }
  .directory__toolbar.is-stuck::before { box-shadow: 0 1px 0 var(--card-border), 0 8px 24px rgb(from var(--green-975) r g b / 0.06); }
  .directory__body { margin-top: 6px; }
  .directory__map {
    top: calc(var(--header-stuck-h) + var(--toolbar-height, 61px) + 16px);
    height: calc(100vh - var(--header-stuck-h) - var(--toolbar-height, 61px) - 40px);
  }
}