/*
 * SAH Archipedia — Search page styles.
 */

/* =============================================
   Facet sidebar — legacy vertical layout
   (non-search pages, fallback without JS)
   ============================================= */

.region--sidebar .block-facets {
  margin-bottom: 0;
  border-bottom: 1px solid #e8f4f8;
}

.region--sidebar .block-facets .block__title {
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #014360;
  padding: 0.65rem 0;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.region--sidebar .block-facets .block__title::before {
  content: '+ ';
  color: #238fb5;
  font-weight: 400;
}

.region--sidebar .block-facets .block__title.is-open::before {
  content: '– ';
}

/* Facet content hidden by default */
.region--sidebar .block-facets .facets-widget-links {
  display: none;
}

.region--sidebar .block-facets .facets-widget-links.is-open {
  display: block;
}

/* Facet links */
.facets-widget-links ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
}

.facets-widget-links .facet-item a {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0 0.25rem 0.75rem;
  color: #014360;
  text-decoration: none;
  font-size: 0.82rem;
}

.facets-widget-links .facet-item a:hover {
  color: #238fb5;
}

.facets-widget-links .facet-item__count {
  color: #888;
  font-size: 0.78rem;
}

.facets-widget-links .is-active {
  font-weight: 600;
  color: #238fb5;
}

/* =============================================
   Horizontal filter bar (search page)
   ============================================= */

/* Row that holds the reset button + filter chips on one line */
.search-filter-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.search-filter-bar {
  flex: 1;
  min-width: 0;
  animation: filterBarReveal 0.18s ease;
}

@keyframes filterBarReveal {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sidebar becomes a horizontal flex row of chips */
.search-filter-bar .region--sidebar {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
}

/* ---- Chip (facet block) ---- */
.search-filter-bar .block-facets {
  position: relative;
  margin-bottom: 0;
  border-bottom: none;
}

.search-filter-bar .block-facets .block__title {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0.5rem 1.1rem;
  background: #f5f9fc;
  border: 1px solid #b8dded;
  border-radius: 2px;
  font-size: 0.82rem;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #014360;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  margin: 0;
}

/* Remove the vertical + prefix; replace with a caret after */
.search-filter-bar .block-facets .block__title::before {
  content: none;
}

/* The legacy sidebar rule .is-open::before { content: '– ' } has higher
   specificity (4 classes) than the reset above (3 classes) and now matches the
   same element (the sidebar lives inside .search-filter-bar). Reset it here at
   matching specificity so source order wins — otherwise an en-dash leaks before
   the label on open chips. */
.search-filter-bar .block-facets .block__title.is-open::before {
  content: none;
}

.search-filter-bar .block-facets .block__title::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.45rem;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4.5px solid currentColor;
  transition: transform 0.15s;
  flex-shrink: 0;
}

.search-filter-bar .block-facets .block__title:hover:not(.is-open) {
  background: #deeef6;
  border-color: #238fb5;
}

/* Open state — #014360 bg gives 9.4:1 contrast with white (AA/AAA) */
.search-filter-bar .block-facets .block__title.is-open {
  background: #014360;
  border-color: #014360;
  color: #fff;
}

.search-filter-bar .block-facets .block__title.is-open::after {
  transform: rotate(180deg);
}

/* Focus ring — visible on keyboard navigation (3:1 min; this is ~10:1) */
.search-filter-bar .block-facets .block__title:focus-visible {
  outline: 2px solid #014360;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(35, 143, 181, 0.25);
}

.search-filter-bar .block-facets .block__title.is-open:focus-visible {
  outline-color: #5acaeb;
}

/* Chip with active selection */
.search-filter-bar .block-facets.has-active-filter .block__title:not(.is-open) {
  background: #014360;
  border-color: #014360;
  color: #fff;
}

/* ---- Dropdown panel ---- */
.search-filter-bar .facets-widget-links {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  min-width: 200px;
  max-width: 290px;
  background: #fff;
  border: 1px solid #b8dded;
  border-radius: 2px;
  box-shadow: 0 6px 22px rgba(1, 67, 96, 0.13);
  z-index: 600;
  max-height: 300px;
  overflow-y: auto;
  padding: 0.3rem 0;
  /* smooth reveal */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
}

.search-filter-bar .facets-widget-links.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.search-filter-bar .facets-widget-links ul {
  margin: 0;
  padding: 0;
}

.search-filter-bar .facets-widget-links .facet-item a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.38rem 0.9rem;
  font-size: 0.82rem;
  color: #014360;
  text-decoration: none;
  transition: background 0.08s;
}

.search-filter-bar .facets-widget-links .facet-item a:hover {
  background: #f0f7fa;
  color: #238fb5;
}

.search-filter-bar .facets-widget-links .facet-item a:focus-visible {
  outline: 2px solid #014360;
  outline-offset: -2px;
  background: #e8f4f8;
}

.search-filter-bar .facets-widget-links .facet-item__count {
  color: #aaa;
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

.search-filter-bar .facets-widget-links .is-active a {
  font-weight: 600;
  color: #238fb5;
}

/* ---- "Show more / less" soft-limit toggle ----
   JS-injected by facets as a bare <a> after the list; style it as a footer
   action for the dropdown panel. */
.search-filter-bar .facets-widget-links .facets-soft-limit-link {
  display: block;
  /* Negative bottom margin cancels the panel's 0.3rem bottom padding so the
     toggle sits flush against the dropdown's bottom edge. It scrolls with the
     list (no sticky), so it's only reachable at the end of the list. */
  margin: 0.25rem 0 -0.3rem;
  padding: 0.45rem 0.9rem;
  border-top: 1px solid #e8f4f8;
  background: #fbfdfe;
  color: #238fb5;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

/* Caret hints the direction: ▾ to reveal more, ▴ once expanded. The expanded
   link reads "Show less" (case-insensitive substring match). */
.search-filter-bar .facets-widget-links .facets-soft-limit-link::after {
  content: ' ▾';
}
.search-filter-bar .facets-widget-links .facets-soft-limit-link.open::after {
  content: ' ▴';
}

.search-filter-bar .facets-widget-links .facets-soft-limit-link:hover {
  background: #eef7fb;
  color: #014360;
}

.search-filter-bar .facets-widget-links .facets-soft-limit-link:focus-visible {
  outline: 2px solid #014360;
  outline-offset: -2px;
  background: #e8f4f8;
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  /* Filters stack full width on their own row */
  .search-filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .search-filter-bar {
    width: 100%;
  }

  /* Each filter chip spans the full width, stacked vertically */
  .search-filter-bar .region--sidebar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }
  .search-filter-bar .block-facets {
    width: 100%;
  }
  .search-filter-bar .block-facets .block__title {
    width: 100%;
    justify-content: space-between; /* label left, caret far right */
    font-size: 0.8rem;
    padding: 0.6rem 0.9rem;
  }

  /* Dropdown panel matches the full chip width */
  .search-filter-bar .facets-widget-links {
    left: 0;
    right: 0;
    max-width: none;
  }

}

/* =============================================
   Active filter baubles (closable pills)
   ============================================= */

.search-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* No active filters → no empty gap above the result meta */
.search-active-filters:empty {
  display: none;
}

.active-filter-bauble {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.4rem 0.3rem 0.75rem;
  background: #e8f4f8;
  border: 1px solid #b8dded;
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1;
  color: #014360;
}

.active-filter-bauble__label {
  white-space: nowrap;
}

.active-filter-bauble__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #014360;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.active-filter-bauble__remove:hover {
  background: #014360;
  color: #fff;
}

.active-filter-bauble__remove:focus-visible {
  outline: 2px solid #014360;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(35, 143, 181, 0.25);
}

/* "Clear all filters" link, sits after the baubles */
.search-active-filters__clear {
  align-self: center;
  margin-left: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #014360;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.search-active-filters__clear:hover {
  color: #238fb5;
}

.search-active-filters__clear:focus-visible {
  outline: 2px solid #014360;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .active-filter-bauble {
    font-size: 0.74rem;
    padding: 0.28rem 0.35rem 0.28rem 0.65rem;
  }
}

/* The centered search page title now lives in overrides.css, shared with the
   browse pages — see "Centered page titles (search + browse)" there. */

.view-archipedia-search h2 {
  font-family: var(--sah-font-head);
  font-size: 1.5rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #014360;
  margin: 0 0 1rem;
  text-align: center;
}

/* =============================================
   Exposed search form — full-width bar
   ============================================= */

.view-archipedia-search .view-filters {
  margin-bottom: 1rem;
}

/* Custom search bar — no Olivero interference */
.sah-search-bar {
  margin-bottom: 1rem;
}

/* The row, not the form, is the flex container — the label is visually hidden
   and would otherwise sit in the row as a zero-width flex item. */
.sah-search-bar__form {
  display: block;
}

.sah-search-bar__row {
  display: flex;
  align-items: stretch;
}

.sah-search-bar__input {
  flex: 1;
  padding: 0.85rem 1rem;
  border: 1px solid #aaa;
  border-right: none;
  border-radius: 0;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff;
}

/* #999 measured 2.75:1 on white — placeholder text carries information here,
   so it has to clear 4.5:1 like any other text. #5a6b73 is 5.55:1. */
.sah-search-bar__input::placeholder {
  color: #5a6b73;
}

.sah-search-bar__input:focus {
  outline: 2px solid #238fb5;
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}

/* Primary action. #014360 matches the homepage submit button so the colour
   carries one meaning across the site — it previously read as "submit" on the
   homepage and "reset" here. White glyph on this fill is 10.64:1, against
   3.71:1 on the old #238fb5. */
.sah-search-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #014360;
  color: #fff;
  border: none;
  padding: 0 2.5rem;
  cursor: pointer;
  transition: background-color 0.15s;
}

.sah-search-bar__btn:hover {
  background-color: #238fb5;
}

/* Ring sits OUTSIDE the control, on the page background, where #014360 gives
   10.6:1. Inset it was #014360 on the #238fb5 fill — 2.87:1, under the 3:1
   that 1.4.11 requires of a focus indicator. z-index lifts the ring above the
   adjacent reset button, which would otherwise paint over its right edge
   (same trick .sah-search-bar__input:focus already uses). */
.sah-search-bar__btn:focus-visible {
  outline: 3px solid #014360;
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

/* Secondary action, demoted so it stops competing with submit for attention.
   Reset is now distinguished by emphasis rather than hue — it used to be
   #014360, the same fill the homepage uses for *submit*.

   The border is load-bearing, not decoration: #e8f4f8 against the #fbfbfb page
   is 1.08:1, so without it the control would have no discernible boundary on
   its outer edges. #014360 gives 9.49:1 on the fill and 10.29:1 on the page.
   box-sizing is border-box site-wide, so it costs no height. */
.sah-search-bar__reset {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.4rem;
  background-color: #e8f4f8;
  color: #014360;
  border: 1px solid #014360;
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color 0.15s;
}

.sah-search-bar__reset svg {
  display: block;
}

/* Deepens within the same light family rather than inverting to a dark fill —
   the glyph stays #014360, which is 7.99:1 on #c3e8f3. */
.sah-search-bar__reset:hover {
  background-color: #c3e8f3;
}

/* This ring was invisible when the fill was #014360 — a #014360 ring inset on
   an identical fill is 1:1, so keyboard users got no focus indicator at all.
   Same outside-the-control treatment as the search button above. */
.sah-search-bar__reset:focus-visible {
  outline: 3px solid #014360;
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

/* On small screens the desktop button padding squeezes the input down to a
   sliver (only "keyword" shows). Compact both icon buttons so the text field
   reclaims the width; their full-height tap targets are unchanged. */
@media (max-width: 600px) {
  .sah-search-bar__btn {
    padding: 0 1rem;
  }
  .sah-search-bar__reset {
    padding: 0 1rem;
  }
  .sah-search-bar__input {
    padding: 0.85rem 0.75rem;
  }
}

/* =============================================
   Search meta — result count + help link
   ============================================= */

.search-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e8f4f8;
}

.search-meta .view-header {
  font-size: 1.05rem;
  font-weight: 600;
  color: #014360;
  margin: 0;
  padding: 0;
  border: none;
}

.search-meta__help {
  margin: 0;
}

.search-meta__help a {
  font-size: 0.85rem;
  color: #014360;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.search-meta__help a:hover {
  color: #238fb5;
}

.search-meta__help svg {
  color: #238fb5;
}

/* =============================================
   Map
   ============================================= */

/* Toggle row above the map */
.search-map-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.4rem;
}

.search-map-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  background: transparent;
  border: 1px solid #b8dded;
  border-radius: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #014360;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.search-map-toggle:hover {
  background: #deeef6;
  border-color: #238fb5;
}

.search-map-toggle:focus-visible {
  outline: 2px solid #014360;
  outline-offset: 2px;
}

/* Reduced from 400px so results peek above the fold; collapsible via toggle */
.search-map {
  height: 300px;
  margin-bottom: 1.5rem;
  border: 1px solid #c3e8f3;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  transition: height 0.2s ease;
}

/* Collapsed state — map hidden but its instance preserved (no re-init needed) */
.search-map.is-collapsed {
  height: 0;
  margin-bottom: 0;
  border-width: 0;
}

.search-map__status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.78rem;
  color: #555;
  background: rgba(255, 255, 255, 0.88);
  padding: 0.35rem 0.75rem;
  margin: 0;
  z-index: 400;
}

/* ---- Marker dots — smooth the hover colour/stroke change ----
   Only fill/stroke are eased here; the radius is tweened in JS (search-map.js)
   since these are SVG <path> markers. Limited to fill/stroke so it never
   touches the path's "d" geometry that Leaflet rewrites on zoom/pan. */
.search-map path.leaflet-interactive {
  transition: fill 0.15s ease, fill-opacity 0.15s ease, stroke-width 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .search-map path.leaflet-interactive {
    transition: none;
  }
}

/* ---- Marker clusters — SAH blue palette ---- */
/* !important needed: markercluster's bundled CSS loads after ours */

.marker-cluster-small {
  background-color: rgba(90, 202, 235, 0.28) !important;
}
.marker-cluster-small div {
  background-color: rgba(90, 202, 235, 0.85) !important;
  color: #014360 !important;
}

/* #1a6d8c inner bg: 5.3:1 contrast with white — passes AA */
.marker-cluster-medium {
  background-color: rgba(26, 109, 140, 0.28) !important;
}
.marker-cluster-medium div {
  background-color: rgba(26, 109, 140, 0.9) !important;
  color: #fff !important;
}

.marker-cluster-large {
  background-color: rgba(1, 67, 96, 0.28) !important;
}
.marker-cluster-large div {
  background-color: rgba(1, 67, 96, 0.88) !important;
  color: #fff !important;
}

/* Cluster label */
.marker-cluster div {
  font-family: var(--sah-font-body) !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.02em !important;
}

/* ---- Leaflet zoom control ---- */

.leaflet-bar {
  border: none !important;
  box-shadow: 0 2px 10px rgba(1, 67, 96, 0.18) !important;
  border-radius: 2px !important;
  overflow: hidden;
}

.leaflet-bar a,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  background-color: #014360 !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  text-decoration: none !important;
  display: block !important;
  text-align: center !important;
}

.leaflet-bar a:last-child {
  border-bottom: none !important;
}

.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
  background-color: #238fb5 !important;
  color: #fff !important;
}

.leaflet-control-zoom-in:focus-visible,
.leaflet-control-zoom-out:focus-visible {
  outline: 2px solid #5acaeb !important;
  outline-offset: -2px !important;
}

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

.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.68rem !important;
  padding: 2px 6px !important;
  color: #777 !important;
}

.leaflet-control-attribution a {
  color: #238fb5 !important;
}

/* ---- Leaflet popup ---- */

.leaflet-popup-content-wrapper {
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(1, 67, 96, 0.15);
  padding: 0;
}

.leaflet-popup-content {
  margin: 0.6rem 0.9rem;
  font-family: var(--sah-font-body);
  font-size: 0.85rem;
  line-height: 1.4;
}

.leaflet-popup-content a {
  color: #014360;
  text-decoration: none;
  font-weight: 600;
}

.leaflet-popup-content a:hover {
  color: #238fb5;
  text-decoration: underline;
}

.leaflet-popup-tip-container .leaflet-popup-tip {
  box-shadow: none;
}

/* =============================================
   Search results — card grid
   ============================================= */

@keyframes resultsReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.view-content.search-results-grid {
  display: grid;
  /* minmax(0, 1fr) (not 1fr) lets columns shrink below their content's
     intrinsic min-width, preventing the grid from blowing out past the
     viewport at narrow desktop widths. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  animation: resultsReveal 0.3s ease both;
}

/* Drupal wraps each result in .views-row — make it a flex container so
   .search-card can stretch to fill the full grid cell height. */
.search-results-grid .views-row {
  display: flex;
  min-width: 0; /* allow the grid cell to shrink so cards don't force overflow */
}

/* Drop to 2 columns for laptop widths (≤1200px) — 3 columns get too cramped
   below this, especially with the larger base font. */
@media (max-width: 75rem) {
  .view-content.search-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .view-content.search-results-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   Search card (individual result)
   ============================================= */

.search-card {
  display: flex;
  flex-direction: row;
  width: 100%;
  text-decoration: none;
  color: #333;
  background: #fff;
  border-radius: 3px;
  border-bottom: 3px solid transparent;
  box-shadow: 0 1px 3px rgba(1, 67, 96, 0.08), 0 1px 8px rgba(1, 67, 96, 0.05);
  overflow: hidden;
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.search-card:hover {
  box-shadow: 0 6px 24px rgba(1, 67, 96, 0.13), 0 2px 6px rgba(1, 67, 96, 0.07);
  transform: translateY(-2px);
  border-bottom-color: #238fb5;
}

.search-card:focus-visible {
  outline: 2px solid #014360;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(35, 143, 181, 0.25);
}

.search-card__image {
  width: 130px;
  min-width: 130px;
  align-self: stretch;
  overflow: hidden;
  flex-shrink: 0;
}

.search-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.22s ease;
}

.search-card:hover .search-card__image img {
  transform: scale(1.03);
}

/* Empty image state — logo placeholder */
.search-card__image--empty {
  background-color: #e8f2f7;
}

.search-card__placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.35;
}

.search-card__body {
  flex: 1;
  min-width: 0; /* let the body shrink so its text wraps instead of forcing width */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.75rem 0.85rem 0.9rem;
}

.search-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #014360;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.3rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-card:hover .search-card__title {
  color: #238fb5;
}

.search-card__location {
  font-size: 0.95rem;
  color: #666;
  margin: 0 0 0.45rem;
  line-height: 1.3;
}

.search-card__type {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  color: #238fb5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =============================================
   Empty results
   ============================================= */

.view-archipedia-search .view-empty {
  padding: 2rem 0;
  text-align: center;
  color: #555;
  font-size: 1rem;
}

/* =============================================
   Pager
   ============================================= */

.view-archipedia-search .pager,
body.path-search nav.pager {
  margin-top: 2rem;
}

body.path-search .pager__items {
  display: flex !important;
  justify-content: center !important;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  width: 100%;
}

.view-archipedia-search .pager__item a,
.view-archipedia-search .pager__item.is-active a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  color: #014360;
  text-decoration: none;
  font-size: 0.85rem;
  border: 1px solid #c3e8f3;
  border-radius: 3px;
}

.view-archipedia-search .pager__item a:hover {
  background-color: #e8f4f8;
}

.view-archipedia-search .pager__item.is-active a {
  background-color: #014360;
  color: #fff;
  border-color: #014360;
}